fixed issue Refine Settings Layout (#3429)

* fixed issue Refine Settings Layout * fixed width and issue * Fix according to review * Fix * Fix --------- Co-authored-by: Charles Bochet <charles@twenty.com>
2024-01-17 20:24:52 +05:30
parent f3c9854be3
commit ba038a4a83
11 changed files with 92 additions and 50 deletions
--- a/packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx
@ -1,6 +1,6 @@
 import styled from '@emotion/styled';

-import { objectSettingsWidth } from '../data-model/constants/objectSettings';
+import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';

 const StyledSettingsPageContainer = styled.div<{ width?: number }>`
  display: flex;
@ -8,7 +8,7 @@ const StyledSettingsPageContainer = styled.div<{ width?: number }>`
  gap: ${({ theme }) => theme.spacing(8)};
  overflow: auto;
  padding: ${({ theme }) => theme.spacing(8)};
-  width: ${({ width }) => (width ? width + 'px' : objectSettingsWidth)};
+  width: ${({ width }) => (width ? width + 'px' : objectSettingsWidth + 'px')};
 `;

 export { StyledSettingsPageContainer as SettingsPageContainer };
--- a/packages/twenty-front/src/modules/settings/data-model/constants/objectSettings.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/constants/objectSettings.ts
@ -1 +1 @@
-export const objectSettingsWidth = '512px';
+export const objectSettingsWidth = 512;
--- a/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx
@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { css, Global, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
 import { AnimatePresence, LayoutGroup } from 'framer-motion';

 import { AuthModal } from '@/auth/components/Modal';
@ -11,8 +12,12 @@ import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
 import { KeyboardShortcutMenu } from '@/keyboard-shortcut-menu/components/KeyboardShortcutMenu';
 import { AppNavigationDrawer } from '@/navigation/components/AppNavigationDrawer';
 import { MobileNavigationBar } from '@/navigation/components/MobileNavigationBar';
+import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
+import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
 import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
+import { desktopNavDrawerWidths } from '@/ui/navigation/navigation-drawer/constants';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { useScreenSize } from '@/ui/utilities/screen-size/hooks/useScreenSize';

 const StyledLayout = styled.div`
  background: ${({ theme }) => theme.background.noisy};
@ -39,7 +44,7 @@ const StyledLayout = styled.div`
  }
 `;

-const StyledPageContainer = styled.div`
+const StyledPageContainer = styled(motion.div)`
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
@ -63,7 +68,9 @@ type DefaultLayoutProps = {
 export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
  const onboardingStatus = useOnboardingStatus();
  const isMobile = useIsMobile();
+  const isSettingsPage = useIsSettingsPage();
  const theme = useTheme();
+  const widowsWidth = useScreenSize().width;
  return (
    <>
      <Global
@ -76,7 +83,20 @@ export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
      <StyledLayout>
        <CommandMenu />
        <KeyboardShortcutMenu />
-        <StyledPageContainer>
+
+        <StyledPageContainer
+          animate={{
+            marginLeft:
+              isSettingsPage && !isMobile
+                ? (widowsWidth -
+                    (objectSettingsWidth + desktopNavDrawerWidths.menu + 64)) /
+                  2
+                : 0,
+          }}
+          transition={{
+            duration: theme.animation.duration.normal,
+          }}
+        >
          <StyledAppNavigationDrawer />
          <StyledMainContainer>
            {onboardingStatus &&
--- a/packages/twenty-front/src/modules/ui/layout/page/RightDrawerContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/RightDrawerContainer.tsx
@ -19,8 +19,8 @@ const StyledMainContainer = styled.div`
  gap: ${({ theme }) => theme.spacing(2)};
  min-height: 0;
  padding-bottom: ${({ theme }) => theme.spacing(3)};
-  padding-left: 0;
  padding-right: ${({ theme }) => theme.spacing(3)};
+  padding-left: 0;
  width: 100%;

  @media (max-width: ${MOBILE_VIEWPORT}px) {
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
@ -33,7 +33,7 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing(8)};
  height: 100%;
-  min-width: ${desktopNavDrawerWidths.menu};
+  min-width: ${desktopNavDrawerWidths.menu}px;
  padding: ${({ theme }) => theme.spacing(3, 2, 4)};

  ${({ isSubMenu, theme }) =>
@ -80,9 +80,7 @@ export const NavigationDrawer = ({

  const desktopWidth = !isNavigationDrawerOpen
    ? 12
-    : isSubMenu
-      ? desktopNavDrawerWidths.submenu
-      : desktopNavDrawerWidths.menu;
+    : desktopNavDrawerWidths.menu;

  const mobileWidth = isNavigationDrawerOpen ? '100%' : 0;

--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/index.ts
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/constants/index.ts
@ -1,4 +1,3 @@
 export const desktopNavDrawerWidths = {
-  menu: '236px',
-  submenu: '536px',
+  menu: 236,
 };
--- a/packages/twenty-front/src/modules/ui/utilities/screen-size/hooks/useScreenSize.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/screen-size/hooks/useScreenSize.ts
@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+
+export const useScreenSize = () => {
+  const [screenSize, setScreenSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setScreenSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return screenSize;
+};
--- a/packages/twenty-front/src/pages/settings/SettingsProfile.tsx
+++ b/packages/twenty-front/src/pages/settings/SettingsProfile.tsx
@ -17,7 +17,7 @@ const StyledH1Title = styled(H1Title)`

 export const SettingsProfile = () => (
  <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-    <SettingsPageContainer width={350}>
+    <SettingsPageContainer>
      <StyledH1Title title="Profile" />
      <Section>
        <H2Title title="Picture" />
--- a/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx
+++ b/packages/twenty-front/src/pages/settings/SettingsWorkspace.tsx
@ -17,7 +17,7 @@ const StyledH1Title = styled(H1Title)`

 export const SettingsWorkspace = () => (
  <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-    <SettingsPageContainer width={350}>
+    <SettingsPageContainer>
      <StyledH1Title title="General" />
      <Section>
        <H2Title title="Picture" />
--- a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
+++ b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
@ -53,7 +53,7 @@ export const SettingsWorkspaceMembers = () => {

  return (
    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-      <SettingsPageContainer width={350}>
+      <SettingsPageContainer>
        <StyledH1Title title="Members" />
        {currentWorkspace?.inviteHash && (
          <Section>
--- a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeys.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeys.tsx
@ -4,7 +4,7 @@ import styled from '@emotion/styled';

 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsApiKeysFieldItemTableRow } from '@/settings/developers/components/SettingsApiKeysFieldItemTableRow';
 import { ApiFieldItem } from '@/settings/developers/types/ApiFieldItem';
 import { formatExpirations } from '@/settings/developers/utils/format-expiration';
@ -19,8 +19,6 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';

 const StyledContainer = styled.div`
  height: fit-content;
-  padding: ${({ theme }) => theme.spacing(8)};
-  width: ${objectSettingsWidth};
 `;

 const StyledTableRow = styled(TableRow)`
@ -62,41 +60,43 @@ export const SettingsDevelopersApiKeys = () => {

  return (
    <SubMenuTopBarContainer Icon={IconSettings} title="Settings">
-      <StyledContainer>
-        <StyledHeader>
-          <StyledH1Title title="APIs" />
-          <Button
-            Icon={IconPlus}
-            title="Create Key"
-            accent="blue"
-            size="small"
-            onClick={() => {
-              navigate('/settings/developers/api-keys/new');
-            }}
-          />
-        </StyledHeader>
-        <H2Title
-          title="Active Keys"
-          description="Active APIs keys created by you or your team"
-        />
-        <Table>
-          <StyledTableRow>
-            <TableHeader>Name</TableHeader>
-            <TableHeader>Type</TableHeader>
-            <TableHeader>Expiration</TableHeader>
-            <TableHeader></TableHeader>
-          </StyledTableRow>
-          {apiKeys.map((fieldItem) => (
-            <SettingsApiKeysFieldItemTableRow
-              key={fieldItem.id}
-              fieldItem={fieldItem}
+      <SettingsPageContainer>
+        <StyledContainer>
+          <StyledHeader>
+            <StyledH1Title title="APIs" />
+            <Button
+              Icon={IconPlus}
+              title="Create Key"
+              accent="blue"
+              size="small"
              onClick={() => {
-                navigate(`/settings/developers/api-keys/${fieldItem.id}`);
+                navigate('/settings/developers/api-keys/new');
              }}
            />
-          ))}
-        </Table>
-      </StyledContainer>
+          </StyledHeader>
+          <H2Title
+            title="Active Keys"
+            description="Active APIs keys created by you or your team"
+          />
+          <Table>
+            <StyledTableRow>
+              <TableHeader>Name</TableHeader>
+              <TableHeader>Type</TableHeader>
+              <TableHeader>Expiration</TableHeader>
+              <TableHeader></TableHeader>
+            </StyledTableRow>
+            {apiKeys.map((fieldItem) => (
+              <SettingsApiKeysFieldItemTableRow
+                key={fieldItem.id}
+                fieldItem={fieldItem}
+                onClick={() => {
+                  navigate(`/settings/developers/api-keys/${fieldItem.id}`);
+                }}
+              />
+            ))}
+          </Table>
+        </StyledContainer>
+      </SettingsPageContainer>
    </SubMenuTopBarContainer>
  );
 };