fix(web): styling of model menu (#1211)

* fix: title icon * fix: collapsed styling * feat: show tooltip * fix: keep collapsed
reearth · Aug 27, 2024 · e6c5bae · e6c5bae
1 parent f28301f
commit e6c5bae
Show file tree

Hide file tree

Showing 12 changed files with 48 additions and 17 deletions.
diff --git a/web/src/components/molecules/Model/ModelsList/GroupsList.tsx b/web/src/components/molecules/Model/ModelsList/GroupsList.tsx
@@ -5,6 +5,7 @@ import ReactDragListView from "react-drag-listview";
 import Button from "@reearth-cms/components/atoms/Button";
 import Icon from "@reearth-cms/components/atoms/Icon";
 import Menu, { MenuInfo } from "@reearth-cms/components/atoms/Menu";
+import Tooltip from "@reearth-cms/components/atoms/Tooltip";
 import { Group } from "@reearth-cms/components/molecules/Schema/types";
 import { useT } from "@reearth-cms/i18n";
 
@@ -43,7 +44,15 @@ const GroupsList: React.FC<Props> = ({
         .map(group => ({
           label: (
             <div ref={group.id === selectedKey ? scrollToSelected : undefined}>
-              {collapsed ? <Icon icon="dot" /> : group.name}
+              {collapsed ? (
+                <Tooltip placement="right" title={group.name}>
+                  <span>
+                    <Icon icon="dot" />
+                  </span>
+                </Tooltip>
+              ) : (
+                group.name
+              )}
             </div>
           ),
           key: group.id,
@@ -140,7 +149,8 @@ const MenuWrapper = styled.div`
 
 const StyledIcon = styled(Icon)`
   border-bottom: 1px solid #f0f0f0;
-  padding: 12px 20px;
+  padding: 12px 0;
+  justify-content: center;
 `;
 
 const StyledMenu = styled(Menu)<{ collapsed?: boolean }>`

diff --git a/web/src/components/molecules/Model/ModelsList/ModelListBody.tsx b/web/src/components/molecules/Model/ModelsList/ModelListBody.tsx
@@ -3,16 +3,17 @@ import { ReactNode } from "react";
 
 interface Props {
   children: ReactNode;
+  collapsed: boolean;
 }
 
-const ModelListBody: React.FC<Props> = ({ children }) => {
-  return <Container>{children}</Container>;
+const ModelListBody: React.FC<Props> = ({ children, collapsed }) => {
+  return <Container collapsed={collapsed}>{children}</Container>;
 };
 
 export default ModelListBody;
 
-const Container = styled.div`
+const Container = styled.div<{ collapsed: boolean }>`
   overflow-x: hidden;
   overflow-y: auto;
-  max-height: calc(100% - 70px);
+  max-height: ${({ collapsed }) => (collapsed ? "calc(100% - 38px)" : "calc(100% - 60px)")};
 `;
diff --git a/web/src/components/molecules/Model/ModelsList/ModelListHeader.tsx b/web/src/components/molecules/Model/ModelsList/ModelListHeader.tsx
@@ -5,13 +5,14 @@ import Icon from "@reearth-cms/components/atoms/Icon";
 interface Props {
   title: string;
   collapsed: boolean;
+  titleIcon: string;
 }
 
-const ModelListHeader: React.FC<Props> = ({ title, collapsed }) => {
+const ModelListHeader: React.FC<Props> = ({ title, collapsed, titleIcon }) => {
   return (
     <>
       {collapsed ? (
-        <StyledIcon icon="unorderedList" />
+        <StyledIcon icon={titleIcon} />
       ) : (
         <Header>
           <SchemaStyledTitle>{title}</SchemaStyledTitle>

diff --git a/web/src/components/molecules/Model/ModelsList/ModelsList.tsx b/web/src/components/molecules/Model/ModelsList/ModelsList.tsx
@@ -5,6 +5,7 @@ import ReactDragListView from "react-drag-listview";
 import Button from "@reearth-cms/components/atoms/Button";
 import Icon from "@reearth-cms/components/atoms/Icon";
 import Menu, { MenuInfo } from "@reearth-cms/components/atoms/Menu";
+import Tooltip from "@reearth-cms/components/atoms/Tooltip";
 import { Model } from "@reearth-cms/components/molecules/Model/types";
 import { useT } from "@reearth-cms/i18n";
 
@@ -66,7 +67,15 @@ const ModelsList: React.FC<Props> = ({
         .map(model => ({
           label: (
             <div ref={model.id === selectedKey ? scrollToSelected : undefined}>
-              {collapsed ? <Icon icon="dot" /> : model.name}
+              {collapsed ? (
+                <Tooltip placement="right" title={model.name}>
+                  <span>
+                    <Icon icon="dot" />
+                  </span>
+                </Tooltip>
+              ) : (
+                model.name
+              )}
             </div>
           ),
           key: model.id,
@@ -145,7 +154,8 @@ const MenuWrapper = styled.div`
 
 const StyledIcon = styled(Icon)`
   border-bottom: 1px solid #f0f0f0;
-  padding: 12px 20px;
+  padding: 12px 0;
+  justify-content: center;
 `;
 
 const StyledMenu = styled(Menu)<{ collapsed?: boolean }>`

diff --git a/web/src/components/organisms/Project/Content/ContentDetails/hooks.ts b/web/src/components/organisms/Project/Content/ContentDetails/hooks.ts
@@ -40,6 +40,7 @@ import {
   useIsItemReferencedLazyQuery,
 } from "@reearth-cms/gql/graphql-client-api";
 import { useT } from "@reearth-cms/i18n";
+import { useCollapsedModelMenu } from "@reearth-cms/state";
 import { newID } from "@reearth-cms/utils/id";
 
 import { dateConvert } from "./utils";
@@ -70,7 +71,7 @@ export default () => {
   const { data: userData } = useGetMeQuery();
 
   const { itemId } = useParams();
-  const [collapsedModelMenu, collapseModelMenu] = useState(false);
+  const [collapsedModelMenu, collapseModelMenu] = useCollapsedModelMenu();
   const [collapsedCommentsPanel, collapseCommentsPanel] = useState(true);
   const [requestModalShown, setRequestModalShown] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");

diff --git a/web/src/components/organisms/Project/Content/ContentDetails/index.tsx b/web/src/components/organisms/Project/Content/ContentDetails/index.tsx
@@ -143,8 +143,8 @@ const ContentDetails: React.FC = () => {
           collapsed={collapsedModelMenu}
           title={t("Content")}
           onModelSelect={handleNavigateToModel}
-          displayGroups={false}
           selectedSchemaType="model"
+          titleIcon={"table"}
         />
       }
       onChange={handleAddItemToRequest}

diff --git a/web/src/components/organisms/Project/Content/ContentList/hooks.ts b/web/src/components/organisms/Project/Content/ContentList/hooks.ts
@@ -42,6 +42,7 @@ import {
   useGetViewsQuery,
 } from "@reearth-cms/gql/graphql-client-api";
 import { useT } from "@reearth-cms/i18n";
+import { useCollapsedModelMenu } from "@reearth-cms/state";
 
 import { fileName } from "./utils";
 
@@ -140,7 +141,7 @@ export default () => {
     refetch();
   }, [refetch]);
 
-  const [collapsedModelMenu, collapseModelMenu] = useState(false);
+  const [collapsedModelMenu, collapseModelMenu] = useCollapsedModelMenu();
   const [collapsedCommentsPanel, collapseCommentsPanel] = useState(true);
   const [selectedItemId, setSelectedItemId] = useState<string>();
   const [selection, setSelection] = useState<{ selectedRowKeys: string[] }>({

diff --git a/web/src/components/organisms/Project/Content/ContentList/index.tsx b/web/src/components/organisms/Project/Content/ContentList/index.tsx
@@ -78,6 +78,7 @@ const ContentList: React.FC = () => {
           collapsed={collapsedModelMenu}
           onModelSelect={handleModelSelect}
           selectedSchemaType="model"
+          titleIcon={"table"}
         />
       }
       viewsMenu={

diff --git a/web/src/components/organisms/Project/ModelsMenu/index.tsx b/web/src/components/organisms/Project/ModelsMenu/index.tsx
@@ -13,6 +13,7 @@ interface Props {
   collapsed: boolean;
   selectedSchemaType: SelectedSchemaType;
   displayGroups?: boolean;
+  titleIcon: string;
   onModelSelect: (modelId: string) => void;
   onGroupSelect?: (groupId: string) => void;
 }
@@ -22,6 +23,7 @@ const ModelsMenu: React.FC<Props> = ({
   collapsed,
   selectedSchemaType,
   displayGroups,
+  titleIcon,
   onModelSelect,
   onGroupSelect,
 }) => {
@@ -48,8 +50,8 @@ const ModelsMenu: React.FC<Props> = ({
 
   return (
     <>
-      <ModelListHeader title={title} collapsed={collapsed} />
-      <ModelListBody>
+      <ModelListHeader title={title} collapsed={collapsed} titleIcon={titleIcon} />
+      <ModelListBody collapsed={collapsed}>
         <Models
           title={title}
           collapsed={collapsed}

diff --git a/web/src/components/organisms/Project/Schema/hooks.ts b/web/src/components/organisms/Project/Schema/hooks.ts
@@ -36,7 +36,7 @@ import {
   useModelsByGroupQuery,
 } from "@reearth-cms/gql/graphql-client-api";
 import { useT } from "@reearth-cms/i18n";
-import { useModel } from "@reearth-cms/state";
+import { useModel, useCollapsedModelMenu } from "@reearth-cms/state";
 
 export default () => {
   const t = useT();
@@ -49,7 +49,7 @@ export default () => {
   const [isMeta, setIsMeta] = useState(false);
   const [selectedField, setSelectedField] = useState<Field | null>(null);
   const [selectedType, setSelectedType] = useState<FieldType | null>(null);
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = useCollapsedModelMenu();
   const { data: modelsData } = useGetModelsQuery({
     variables: {
       projectId: projectId ?? "",

diff --git a/web/src/components/organisms/Project/Schema/index.tsx b/web/src/components/organisms/Project/Schema/index.tsx
@@ -98,6 +98,7 @@ const ProjectSchema: React.FC = () => {
             onModelSelect={handleModelSelect}
             onGroupSelect={handleGroupSelect}
             displayGroups
+            titleIcon={"unorderedList"}
           />
         }
         setIsMeta={setIsMeta}

diff --git a/web/src/state/index.ts b/web/src/state/index.ts
@@ -18,3 +18,6 @@ export const useProject = () => useAtom(project);
 
 const model = atom<Model | undefined>(undefined);
 export const useModel = () => useAtom(model);
+
+const collapsedModelMenu = atomWithStorage<boolean>("collapsedModelMenu", false);
+export const useCollapsedModelMenu = () => useAtom(collapsedModelMenu);