chore(web): multiple bug fixes (#854)

reearth · Dec 7, 2023 · 5740377 · 5740377
1 parent 0b60ec5
commit 5740377
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 30 deletions.
diff --git a/web/src/beta/components/CheckboxField/index.tsx b/web/src/beta/components/CheckboxField/index.tsx
@@ -14,9 +14,9 @@ const CheckBoxField: React.FC<Props> = ({ onClick, checked, label }) => {
     <Field onClick={() => onClick?.(!checked)}>
       <BoxField>{checked && <CheckMark icon="checkmark" />}</BoxField>
       {label && (
-        <Text size="footnote" color={theme.content.main}>
+        <StyledText size="footnote" color={theme.content.main}>
           {label}
-        </Text>
+        </StyledText>
       )}
     </Field>
   );
@@ -27,7 +27,13 @@ const Field = styled.button`
   align-items: center;
   gap: 12px;
   width: 100%;
-  height: 20px;
+  min-height: 20px;
+`;
+
+const StyledText = styled(Text)`
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 const BoxField = styled.div`

diff --git a/web/src/beta/components/ListItem/index.tsx b/web/src/beta/components/ListItem/index.tsx
@@ -88,7 +88,6 @@ const Wrapper = styled.div<{
 const Inner = styled.div`
   display: flex;
   align-items: center;
-  height: 100%;
   width: 100%;
   padding: 8px 4px 8px 4px;
   border-radius: 4px;

diff --git a/web/src/beta/components/fields/CameraField/index.tsx b/web/src/beta/components/fields/CameraField/index.tsx
@@ -83,9 +83,9 @@ const CameraField: React.FC<Props> = ({
           <InputWrapper disabled={disabled}>
             <Input positionSet={!!value}>
               {value && <ZoomToIcon icon="zoomToLayer" size={10} onClick={handleFlyto} />}
-              <Text size="footnote" customColor>
+              <StyledText size="footnote" customColor>
                 {value ? t("Position Set") : t("Not set")}
-              </Text>
+              </StyledText>
               <DeleteIcon icon="bin" size={10} disabled={!value} onClick={handleRemoveSetting} />
             </Input>
             <TriggerButton
@@ -128,7 +128,7 @@ const CameraField: React.FC<Props> = ({
 const InputWrapper = styled.div<{ disabled?: boolean }>`
   display: flex;
   gap: 10px;
-  height: 28px;
+
   flex-wrap: wrap;
   opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
 `;
@@ -140,6 +140,7 @@ const Input = styled.div<{ positionSet?: boolean }>`
   gap: 4px;
   flex: 1;
   padding: 0 8px;
+  height: 28px;
   border-radius: 4px;
   border: 1px solid ${({ theme }) => theme.outline.weak};
   color: ${({ theme }) => theme.content.main};
@@ -149,7 +150,12 @@ const Input = styled.div<{ positionSet?: boolean }>`
   color: ${({ theme, positionSet }) => (positionSet ? theme.content.main : theme.content.weak)};
 `;
 
+const StyledText = styled(Text)`
+  white-space: nowrap;
+`;
+
 const TriggerButton = styled(Button)`
+  height: 28px;
   margin: 0;
 `;
 

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
@@ -103,7 +103,7 @@ const LayerItem = ({
           ]}
         />
       }>
-      <ContentWrapper>
+      <>
         {isEditing ? (
           <StyledTextInput
             value={newValue}
@@ -113,34 +113,25 @@ const LayerItem = ({
             onBlur={handleEditExit}
           />
         ) : (
-          <LayerTitle onDoubleClick={handleDoubleClick}>{layerTitle}</LayerTitle>
+          <TitleText size="footnote" onDoubleClick={handleDoubleClick}>
+            {layerTitle}
+          </TitleText>
         )}
         <HideLayer onClick={handleUpdateVisibility}>
           <Text size="footnote">{value}</Text>
         </HideLayer>
-      </ContentWrapper>
+      </>
     </ListItem>
   );
 };
 
 export default LayerItem;
 
-const LayerTitle = styled.div`
-  overflow: hidden;
-  color: ${({ theme }) => theme.content.main};
-  text-overflow: ellipsis;
-  font-family: Noto Sans;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-`;
-
-const ContentWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
+const TitleText = styled(Text)`
+  flex: 1;
+  word-break: break-all;
+  text-align: left;
+  padding-right: 10px;
 `;
 
 const HideLayer = styled.div`

diff --git a/web/src/services/api/pluginsApi.ts b/web/src/services/api/pluginsApi.ts
@@ -94,10 +94,10 @@ export default () => {
   );
 
   const [installPluginMutation] = useMutation(INSTALL_PLUGIN, {
-    refetchQueries: ["GET_SCENE"],
+    refetchQueries: ["GetScene"],
   });
   const [upgradePluginMutation] = useMutation(UPGRADE_PLUGIN, {
-    refetchQueries: ["GET_SCENE"],
+    refetchQueries: ["GetScene"],
   });
 
   const useInstallPlugin = useCallback(
@@ -151,7 +151,7 @@ export default () => {
   );
 
   const [uploadPluginMutation] = useMutation(UPLOAD_PLUGIN, {
-    refetchQueries: ["GET_SCENE"],
+    refetchQueries: ["GetScene"],
   });
 
   const useUploadPlugin = useCallback(
@@ -188,7 +188,7 @@ export default () => {
   );
 
   const [uninstallPluginMutation] = useMutation(UNINSTALL_PLUGIN, {
-    refetchQueries: ["GET_SCENE"],
+    refetchQueries: ["GetScene"],
   });
 
   const useUninstallPlugin = useCallback(