chore(web): beta publishing (#744)

reearth · Oct 30, 2023 · 7fff78c · 7fff78c
1 parent 469f45a
commit 7fff78c
Show file tree

Hide file tree

Showing 38 changed files with 813 additions and 184 deletions.
diff --git a/server/pkg/builtin/manifest.yml b/server/pkg/builtin/manifest.yml
@@ -2318,6 +2318,12 @@ extensions:
             - id: cameraPosition
               type: camera
               title: Camera position
+            - id: cameraDuration
+              type: number
+              title: Duration
+              suffix: s
+              min: 0
+              defaultValue: 2
         - id: timePoint
           title: Time Point Setting
           fields:

diff --git a/web/src/beta/components/Button/index.tsx b/web/src/beta/components/Button/index.tsx
@@ -108,7 +108,7 @@ const StyledButton = styled.button<ButtonProps>`
       ? theme.dangerous.main
       : buttonType === "primary"
       ? theme.primary.main
-      : theme.secondary.main};
+      : theme.secondary.strong};
   &:active,
   &:hover {
     background: ${({ buttonType, disabled, theme }) =>

diff --git a/web/src/beta/components/ListItem/index.tsx b/web/src/beta/components/ListItem/index.tsx
@@ -34,23 +34,22 @@ const ListItem: FC<Props> = ({
   onOpenChange,
 }) => {
   return (
-    <Wrapper>
-      <Inner border={border} isSelected={isSelected} clamp={clamp} onClick={onItemClick}>
+    <Wrapper border={border} isSelected={isSelected} isOpenAction={isOpenAction} clamp={clamp}>
+      <Inner onClick={onItemClick}>
         {typeof children === "string" ? (
           <StyledText size="footnote">{children}</StyledText>
         ) : (
           children
         )}
       </Inner>
-
       {actionContent && (
         <Popover.Provider
           open={isOpenAction}
           placement={actionPlacement}
           onOpenChange={onOpenChange}>
           <Popover.Trigger asChild>
             <Button clamp={clamp} onClick={onActionClick}>
-              <Icon icon="actionbutton" size={12} />
+              <Icon icon="actionbutton" size={16} />
             </Button>
           </Popover.Trigger>
           <Popover.Content>{actionContent}</Popover.Content>
@@ -62,54 +61,50 @@ const ListItem: FC<Props> = ({
 
 export default ListItem;
 
-const Wrapper = styled.div`
-  position: relative;
-  width: 100%;
-`;
-
-const Inner = styled.button<{
+const Wrapper = styled.div<{
   border?: boolean;
   isSelected?: boolean;
+  isOpenAction?: boolean;
   clamp?: Clamp;
 }>`
   display: flex;
   width: 100%;
-  min-height: 38px;
+  min-height: 36px;
   align-items: center;
   color: ${({ theme }) => theme.content.main};
   border: 1px solid ${({ border, theme }) => (border ? theme.outline.weakest : "transparent")};
   border-radius: ${({ clamp }) =>
-    clamp === "left" ? "0 6px 6px 0" : clamp === "right" ? "6px 0 0 6px" : "6px"};
-  box-sizing: border-box;
-  padding: 8px 20px 8px 4px;
-  background: ${({ theme, isSelected }) => (isSelected ? theme.select.main : "inherit")};
-  transition: all 0.3s;
+    clamp === "left" ? "0 4px 4px 0" : clamp === "right" ? "4px 0 0 4px" : "4px"};
+  background: ${({ theme, isSelected, isOpenAction }) =>
+    isSelected ? theme.select.main : isOpenAction ? theme.bg[3] : "inherit"};
+  transition: all 0.2s;
+  cursor: pointer;
 
   :hover {
     ${({ isSelected, theme }) => !isSelected && `background-color:` + theme.bg[3]}
   }
 `;
 
+const Inner = styled.div`
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  padding: 8px 4px 8px 4px;
+  border-radius: 4px;
+`;
+
 const StyledText = styled(Text)`
   flex-grow: 1;
-  width: 0;
   word-break: break-all;
   text-align: left;
 `;
 
-const Button = styled.button<{ clamp?: Clamp }>`
-  height: 100%;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  padding: 4px;
-  margin-left: -1px;
+const Button = styled.div<{ clamp?: Clamp }>`
+  display: flex;
+  align-items: center;
+  height: 36px;
   color: ${({ theme }) => theme.content.weak};
   border-radius: ${({ clamp }) =>
-    clamp === "left" ? "0 6px 6px 0" : clamp === "right" ? "6px 0 0 6px" : "6px"};
-
-  :hover {
-    background: ${({ theme }) => theme.bg[2]};
-  }
+    clamp === "left" ? "0 4px 4px 0" : clamp === "right" ? "4px 0 0 4px" : "4px"};
 `;
diff --git a/web/src/beta/components/Modal/ModalFrame/index.tsx b/web/src/beta/components/Modal/ModalFrame/index.tsx
@@ -41,10 +41,10 @@ const Modal: React.FC<Props> = ({ className, size, isVisible, title, onClose, ch
         <Wrapper className={className} ref={ref} width={modalWidth}>
           {!!title && (
             <HeaderWrapper>
-              <ModalTitle size="body" weight="regular" color="#E0E0E0">
+              <ModalTitle size="body" weight="regular" customColor>
                 {title}
               </ModalTitle>
-              {onClose && <CloseIcon icon="cancel" onClick={onClose} />}
+              {onClose && <CloseIcon icon="cancel" size={16} onClick={onClose} />}
             </HeaderWrapper>
           )}
           <InnerWrapper>{children}</InnerWrapper>
@@ -107,6 +107,7 @@ const HeaderWrapper = styled.div`
   align-self: stretch;
   border-top-right-radius: 8px;
   border-top-left-radius: 8px;
-  background: #393939;
+  color: ${({ theme }) => theme.content.main};
+  background: ${({ theme }) => theme.bg[2]};
 `;
 export default Modal;
diff --git a/web/src/beta/components/Modal/index.tsx b/web/src/beta/components/Modal/index.tsx
@@ -115,7 +115,6 @@ const ContentWrapper = styled.div`
   display: flex;
   flex-direction: column;
   flex: 1;
-  background: ${({ theme }) => theme.bg[0]};
 `;
 
 const Content = styled.div`

diff --git a/web/src/beta/components/NotFound/index.tsx b/web/src/beta/components/NotFound/index.tsx
@@ -1,23 +1,28 @@
-import React from "react";
-
 import Text from "@reearth/beta/components/Text";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 
 import Icon from "../Icon";
 
-const NotFound: React.FC = () => {
+type Props = {
+  customHeader?: string;
+  customMessage?: string;
+  customType?: "error" | "warning";
+};
+
+const NotFound: React.FC<Props> = ({ customHeader, customMessage, customType }) => {
   const t = useT();
 
   return (
     <Wrapper>
-      <div>
+      <InnerWrapper>
         <IconWrapper>
           <Icon icon="logo" />
-          <Icon icon="cancel" size={110} color="red" />
+          <Icon icon="cancel" size={110} color={customType === "warning" ? "yellow" : "red"} />
         </IconWrapper>
-        <Text size="h1">{`404 ${t("Not found")}`}</Text>
-      </div>
+        <Text size="h1">{customHeader ?? `404 ${t("Not found")}`}</Text>
+        {customMessage && <CustomMessage size="h3">{customMessage}</CustomMessage>}
+      </InnerWrapper>
     </Wrapper>
   );
 };
@@ -27,14 +32,28 @@ export default NotFound;
 const Wrapper = styled.div`
   display: flex;
   justify-content: center;
-  padding-top: 40vh;
+  padding-top: 30vh;
   height: 100%;
   background: ${({ theme }) => theme.bg[1]};
 `;
 
+const InnerWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  max-width: 40vw;
+`;
+
 const IconWrapper = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 5vh;
+  min-width: 260px;
+  max-width: 20vw;
+`;
+
+const CustomMessage = styled(Text)`
+  margin-top: 10px;
 `;
diff --git a/web/src/beta/features/Editor/Visualizer/convert.ts b/web/src/beta/features/Editor/Visualizer/convert.ts
@@ -209,6 +209,7 @@ export const convertStory = (story?: GqlStory): Story | undefined => {
   return {
     id: story.id,
     title: story.title,
+    position: story.panelPosition === "RIGHT" ? "right" : "left",
     pages: storyPages(story.pages),
   };
 };
@@ -432,8 +433,8 @@ export function processLayers(
       id: nlsLayer.id,
       title: nlsLayer.title,
       visible: nlsLayer.visible,
-      infobox: processInfobox(nlsLayer.infobox, parent?.infobox),
-      tags: processLayerTags(nlsLayer.tags),
+      infobox: nlsLayer.infobox ? processInfobox(nlsLayer.infobox, parent?.infobox) : undefined,
+      tags: processLayerTags(nlsLayer.tags ?? []),
       properties: nlsLayer.config?.properties,
       defines: nlsLayer.config?.defines,
       events: nlsLayer.config?.events,

diff --git a/web/src/beta/features/Editor/Visualizer/index.tsx b/web/src/beta/features/Editor/Visualizer/index.tsx
@@ -85,7 +85,6 @@ const Visualizer: React.FC<Props> = ({
     ),
     [blocks],
   );
-
   return (
     <Wrapper>
       <CoreVisualizer
@@ -113,6 +112,7 @@ const Visualizer: React.FC<Props> = ({
         meta={engineMeta}
         useExperimentalSandbox={useExperimentalSandbox}
         camera={currentCamera}
+        storyPanelPosition={story?.position}
         onCameraChange={onCameraChange}
         onLayerSelect={selectLayer}
         onWidgetLayoutUpdate={onWidgetUpdate}

diff --git a/web/src/beta/features/Editor/index.tsx b/web/src/beta/features/Editor/index.tsx
@@ -188,7 +188,7 @@ const Editor: React.FC<Props> = ({ sceneId, projectId, workspaceId, tab }) => {
                 hasNav={!!secondaryNavbar}
                 visualizerWidth={visualizerWidth}>
                 <Visualizer
-                  inEditor
+                  inEditor={tab !== "publish"}
                   visualizerRef={visualizerRef}
                   sceneId={sceneId}
                   showStoryPanel={selectedProjectType === "story"}

diff --git a/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/LayerItem.tsx b/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/LayerItem.tsx
@@ -3,6 +3,7 @@ import { MouseEvent, useCallback, useState } from "react";
 import TextInput from "@reearth/beta/components/fields/common/TextInput";
 import ListItem from "@reearth/beta/components/ListItem";
 import PopoverMenuContent from "@reearth/beta/components/PopoverMenuContent";
+import Text from "@reearth/beta/components/Text";
 import type {
   LayerNameUpdateProps,
   LayerVisibilityUpdateProps,
@@ -69,18 +70,22 @@ const LayerItem = ({
     [layerTitle, newValue, handleTitleSubmit],
   );
 
-  const handleUpdateVisibility = useCallback(() => {
-    const newVisibility = !isVisible;
-    onLayerVisibilityUpate({ layerId: id, visible: newVisibility });
-    setIsVisible(newVisibility);
-    setValue(isVisible ? "" : "V");
-  }, [id, isVisible, onLayerVisibilityUpate]);
+  const handleUpdateVisibility = useCallback(
+    (e?: MouseEvent<Element>) => {
+      e?.stopPropagation();
+      const newVisibility = !isVisible;
+      onLayerVisibilityUpate({ layerId: id, visible: newVisibility });
+      setIsVisible(newVisibility);
+      setValue(isVisible ? "" : "V");
+    },
+    [id, isVisible, onLayerVisibilityUpate],
+  );
 
   return (
     <ListItem
       isSelected={isSelected}
       isOpenAction={isActionOpen}
-      actionPlacement="bottom-start"
+      actionPlacement="bottom-end"
       onItemClick={handleClick}
       onActionClick={handleActionMenuToggle}
       onOpenChange={isOpen => setActionOpen(!!isOpen)}
@@ -96,38 +101,47 @@ const LayerItem = ({
           ]}
         />
       }>
-      {isEditing ? (
-        <TextInput
-          value={newValue}
-          timeout={0}
-          autoFocus
-          onChange={handleChange}
-          onExit={handleEditExit}
-          onBlur={handleEditExit}
-        />
-      ) : (
-        layerTitle
-      )}
-      <HideLayer onClick={handleUpdateVisibility}>{value}</HideLayer>
+      <ContentWrapper>
+        {isEditing ? (
+          <TextInput
+            value={newValue}
+            timeout={0}
+            autoFocus
+            onChange={handleChange}
+            onExit={handleEditExit}
+            onBlur={handleEditExit}
+          />
+        ) : (
+          layerTitle
+        )}
+        <HideLayer onClick={handleUpdateVisibility}>
+          <Text size="footnote">{value}</Text>
+        </HideLayer>
+      </ContentWrapper>
     </ListItem>
   );
 };
 
 export default LayerItem;
 
+const ContentWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;
+
 const HideLayer = styled.div`
-  min-width: 10px;
-  min-height: 20px;
-  padding: 3px 6px 0;
+  display: flex;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
   cursor: pointer;
   border-radius: 4px;
   border: 1.5px solid ${({ theme }) => theme.bg[1]};
   color: ${({ theme }) => theme.content.strong};
   background: ${({ theme }) => theme.bg[2]};
-  position: absolute;
-  right: 30px;
-  top: 50%;
-  transform: translateY(-50%);
+
   :hover {
     background: ${({ theme }) => theme.bg[2]};
   }

diff --git a/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/index.tsx b/web/src/beta/features/Editor/tabs/map/LeftPanel/Layers/index.tsx
@@ -66,7 +66,7 @@ const Layers: React.FC<LayersProps> = ({
 
           <Popover.Content>
             <PopoverMenuContent
-              size="md"
+              size="sm"
               items={[
                 {
                   name: t("Add Layer from Resource"),
@@ -112,6 +112,7 @@ const LayerContainer = styled.div`
 const ActionWrapper = styled.div`
   flex: 1;
   display: flex;
+  gap: 10px;
   justify-content: right;
 `;