fix: rewrite workspacesetting layout

2024-12-28 11:53:24 +03:00 · 2023-01-23 09:46:12 +08:00 · 2023-01-23 09:46:12 +08:00 · 7e23aa4618
commit 7e23aa4618
parent e53119fc20
7 changed files with 119 additions and 101 deletions
--- a/packages/app/src/components/header/PageListHeader.tsx
+++ b/packages/app/src/components/header/PageListHeader.tsx
@ -1,7 +1,7 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import Header from './Header';
 import { StyledPageListTittleWrapper } from './styles';
-import QuickSearchButton from './QuickSearchButton';
+// import QuickSearchButton from './QuickSearchButton';

 export type PageListHeaderProps = PropsWithChildren<{
  icon?: ReactNode;
@ -12,7 +12,7 @@ export const PageListHeader = ({ icon, children }: PageListHeaderProps) => {
      <StyledPageListTittleWrapper>
        {icon}
        {children}
-        <QuickSearchButton style={{ marginLeft: '5px' }} />
+        {/* <QuickSearchButton style={{ marginLeft: '5px' }} /> */}
      </StyledPageListTittleWrapper>
    </Header>
  );
--- a/packages/app/src/components/header/styles.ts
+++ b/packages/app/src/components/header/styles.ts
@ -3,35 +3,25 @@ import { displayFlex, styled } from '@/styles';
 export const StyledHeaderContainer = styled.div<{ hasWarning: boolean }>(
  ({ hasWarning }) => {
    return {
-      position: 'relative',
      height: hasWarning ? '96px' : '60px',
    };
  }
 );
-export const StyledHeader = styled.div<{ hasWarning: boolean }>(
-  ({ hasWarning }) => {
-    return {
-      height: '60px',
-      width: '100%',
-      ...displayFlex('flex-end', 'center'),
-      background: 'var(--affine-page-background)',
-      transition: 'background-color 0.5s',
-      position: 'absolute',
-      left: '0',
-      top: hasWarning ? '36px' : '0',
-      padding: '0 22px',
-      zIndex: 99,
-    };
-  }
-);
+export const StyledHeader = styled.div<{ hasWarning: boolean }>(() => {
+  return {
+    height: '60px',
+    width: '100%',
+    ...displayFlex('flex-end', 'center'),
+    background: 'var(--affine-page-background)',
+    transition: 'background-color 0.5s',
+    zIndex: 99,
+  };
+});

 export const StyledTitle = styled('div')(({ theme }) => ({
  width: '720px',
  height: '100%',
-  position: 'absolute',
-  left: 0,
-  right: 0,
-  top: 0,
+
  margin: 'auto',

  ...displayFlex('center', 'center'),
--- a/packages/app/src/components/workspace-setting/ExportPage.tsx
+++ b/packages/app/src/components/workspace-setting/ExportPage.tsx
@ -4,7 +4,7 @@ import { Trans } from '@affine/i18n';
 export const ExportPageTitleContainer = styled('div')(() => {
  return {
    display: 'flex',
-    marginTop: '60px',
+
    fontWeight: '500',
    flex: 1,
  };
--- a/packages/app/src/components/workspace-setting/general/General.tsx
+++ b/packages/app/src/components/workspace-setting/general/General.tsx
@ -5,6 +5,8 @@ import {
  StyledSettingInputContainer,
  StyledDoneButtonContainer,
  StyledInput,
+  StyledProviderInfo,
+  StyleGeneral,
 } from './style';
 import { StyledSettingH2 } from '../style';

@ -13,12 +15,13 @@ import { Button } from '@/ui/button';
 import { useAppState } from '@/providers/app-state-provider';
 import { WorkspaceDelete } from './delete';
 import { WorkspaceLeave } from './leave';
-import { DoneIcon, CloudUnsyncedIcon } from '@blocksuite/icons';
+import { DoneIcon, UsersIcon } from '@blocksuite/icons';
 // import { Upload } from '@/components/file-upload';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { useTranslation } from '@affine/i18n';
+import { CloudIcon, LocalIcon } from '@/components/workspace-modal/icons';
 export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
  const [showDelete, setShowDelete] = useState<boolean>(false);
  const [showLeave, setShowLeave] = useState<boolean>(false);
@ -45,57 +48,76 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
  // };

  return workspace ? (
-    <div>
-      <StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2>
-      <StyledSettingAvatarContent>
-        <div
-          style={{
-            float: 'left',
-            marginRight: '20px',
-          }}
-        >
-          <WorkspaceUnitAvatar
-            size={60}
-            name={workspace.name}
-            workspaceUnit={workspace}
-          />
-        </div>
-        {/* TODO: Wait for image sync to complete  */}
-        {/* <Upload
+    <StyleGeneral>
+      <div style={{ flex: 1, overflow: 'auto' }}>
+        <StyledSettingH2>Workspace Avatar</StyledSettingH2>
+        <StyledSettingAvatarContent>
+          <div
+            style={{
+              float: 'left',
+              marginRight: '20px',
+            }}
+          >
+            <WorkspaceUnitAvatar
+              size={60}
+              name={workspace.name}
+              workspaceUnit={workspace}
+            />
+          </div>
+          {/* TODO: Wait for image sync to complete  */}
+          {/* <Upload
          accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
          fileChange={fileChange}
        >
          <Button loading={uploading}>{t('Upload')}</Button>
        </Upload> */}
-        {/* TODO: add upload logic */}
-      </StyledSettingAvatarContent>
-      <StyledSettingH2 marginTop={20}>{t('Workspace Name')}</StyledSettingH2>
-      <StyledSettingInputContainer>
-        <StyledInput
-          width={284}
-          height={32}
-          value={workspaceName}
-          placeholder={t('Workspace Name')}
-          maxLength={14}
-          minLength={1}
-          disabled={!isOwner}
-          onChange={handleChangeWorkSpaceName}
-        ></StyledInput>
-        {isOwner ? (
-          <StyledDoneButtonContainer
-            onClick={() => {
-              handleUpdateWorkspaceName();
-            }}
-          >
-            <DoneIcon />
-          </StyledDoneButtonContainer>
-        ) : null}
-      </StyledSettingInputContainer>
-      <StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2>
-      <StyledSettingInputContainer>
-        <CloudUnsyncedIcon style={{ marginRight: '15px' }} />
-        Local workspace
-      </StyledSettingInputContainer>
+          {/* TODO: add upload logic */}
+        </StyledSettingAvatarContent>
+        <StyledSettingH2 marginTop={20}>{t('Workspace Name')}</StyledSettingH2>
+        <StyledSettingInputContainer>
+          <StyledInput
+            width={284}
+            height={32}
+            value={workspaceName}
+            placeholder={t('Workspace Name')}
+            maxLength={14}
+            minLength={1}
+            disabled={!isOwner}
+            onChange={handleChangeWorkSpaceName}
+          ></StyledInput>
+          {isOwner ? (
+            <StyledDoneButtonContainer
+              onClick={() => {
+                handleUpdateWorkspaceName();
+              }}
+            >
+              <DoneIcon />
+            </StyledDoneButtonContainer>
+          ) : null}
+        </StyledSettingInputContainer>
+        <StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2>
+        <StyledSettingInputContainer>
+          {isOwner ? (
+            currentWorkspace?.provider === 'local' ? (
+              <StyledProviderInfo>
+                <LocalIcon />
+                Local Workspace
+              </StyledProviderInfo>
+            ) : (
+              <StyledProviderInfo>
+                <CloudIcon />
+                All data can be accessed offline
+              </StyledProviderInfo>
+            )
+          ) : (
+            <StyledProviderInfo>
+              <UsersIcon fontSize={20} color={'#FF646B'} />
+              Joined Workspace
+            </StyledProviderInfo>
+          )}
+        </StyledSettingInputContainer>
+      </div>
+
      <StyledDeleteButtonContainer>
        {isOwner ? (
          <>
@ -137,6 +159,6 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
          </>
        )}
      </StyledDeleteButtonContainer>
-    </div>
+    </StyleGeneral>
  ) : null;
 };
--- a/packages/app/src/components/workspace-setting/general/style.ts
+++ b/packages/app/src/components/workspace-setting/general/style.ts
@ -13,11 +13,14 @@ export const StyledSettingInputContainer = styled('div')(() => {

 export const StyledDeleteButtonContainer = styled('div')(() => {
  return {
-    position: 'absolute',
-    bottom: '0',
-    left: '50%',
-    marginBottom: '20px',
-    transform: 'translateX(-50%)',
+    textAlign: 'center',
+  };
+});
+export const StyleGeneral = styled('div')(() => {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
  };
 });
 export const StyledDoneButtonContainer = styled(IconButton)(({ theme }) => {
@ -53,3 +56,14 @@ export const StyledSettingAvatarContent = styled('div')(() => {
 export const StyledSettingAvatar = styled(MuiAvatar)(() => {
  return { height: '72px', width: '72px', marginRight: '24px' };
 });
+
+export const StyledProviderInfo = styled('p')(({ theme }) => {
+  return {
+    color: theme.colors.iconColor,
+    fontSize: theme.font.sm,
+    svg: {
+      verticalAlign: 'sub',
+      marginRight: '10px',
+    },
+  };
+});
--- a/packages/app/src/components/workspace-setting/member/style.ts
+++ b/packages/app/src/components/workspace-setting/member/style.ts
@ -109,7 +109,7 @@ export const StyledMemberWarp = styled('div')(() => {
  return {
    display: 'flex',
    flexDirection: 'column',
-    padding: '48px 0',
+    padding: '0 0 48px 0',
    fontWeight: '500',
    fontSize: '18px',
  };
--- a/packages/app/src/components/workspace-setting/style.ts
+++ b/packages/app/src/components/workspace-setting/style.ts
@ -4,23 +4,27 @@ export const StyledSettingContainer = styled('div')(() => {
  return {
    display: 'flex',
    flexDirection: 'column',
-    marginTop: '24px',
-    marginLeft: '48px',
-    overflow: 'auto',
+
+    padding: '0 34px 20px 48px',
+    height: '100vh',
  };
 });

 export const StyledSettingSidebar = styled('div')(() => {
  {
    return {
-      flexShrink: 0,
-      flexGrow: 0,
+      // height: '48px',
+      marginTop: '50px',
    };
  }
 });

 export const StyledSettingContent = styled('div')(() => {
-  return {};
+  return {
+    overflow: 'hidden',
+    flex: 1,
+    paddingTop: '48px',
+  };
 });

 export const StyledSetting = styled('div')(({ theme }) => {
@ -48,7 +52,6 @@ export const StyledSettingTabContainer = styled('ul')(() => {
  {
    return {
      display: 'flex',
-      marginTop: '25px',
    };
  }
 });
@ -58,8 +61,7 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
    {
      return {
        display: 'flex',
-        position: 'relative',
-        margin: '0 48px 8px 0',
+        margin: '0 48px 0 0',
        height: '34px',
        color: isActive ? theme.colors.primaryColor : theme.colors.textColor,
        fontWeight: '500',
@ -67,16 +69,9 @@ export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>(
        lineHeight: theme.font.lineHeightBase,
        cursor: 'pointer',
        transition: 'all 0.15s ease',
-        '::after': {
-          content: '""',
-          width: '100%',
-          height: '2px',
-          background: isActive ? theme.colors.primaryColor : 'transparent',
-          transition: 'all 0.15s ease',
-          position: 'absolute',
-          left: '0',
-          bottom: '0',
-        },
+        borderBottom: `2px solid ${
+          isActive ? theme.colors.primaryColor : 'none'
+        }`,
        ':hover': { color: theme.colors.primaryColor },
      };
    }
@ -87,9 +82,6 @@ export const StyledSettingTagIconContainer = styled('div')(() => {
  return {
    display: 'flex',
    alignItems: 'center',
-    marginRight: '14.64px',
-    width: '14.47px',
-    fontSize: '14.47px',
  };
 });

@ -112,7 +104,7 @@ export const StyledPublishExplanation = styled('div')(() => {
    fontSize: '18px',
    lineHeight: '26px',
    flex: 1,
-    marginTop: '60px',
+
    marginBottom: '22px',
  };
 });