Merge pull request #747 from toeverything/feat/style-error

Feat/style error

packages/app/src/components/workspace-modal/index.tsx

@@ -2,15 +2,15 @@ import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { Wrapper } from '@/ui/layout';
 import { useState } from 'react';
 import { CreateWorkspaceModal } from '../create-workspace';
+
 import { Tooltip } from '@/ui/tooltip';
-import { toast } from '@/ui/toast';
 
 import { AddIcon, HelpCenterIcon } from '@blocksuite/icons';
 
 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
 import { useTranslation } from '@affine/i18n';
-import { LanguageMenu } from './LanguageMenu';
+import { LanguageMenu } from './SelectLanguageMenu';
 
 import { LoginModal } from '../login-modal';
 import { LogoutModal } from '../logout-modal';
@@ -29,7 +29,6 @@ import {
 } from './styles';
 import { WorkspaceCard } from './WorkspaceCard';
 import { Footer } from './Footer';
-import { useConfirm } from '@/providers/ConfirmProvider';
 interface WorkspaceModalProps {
   open: boolean;
   onClose: () => void;
@@ -42,7 +41,6 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
   const { t } = useTranslation();
   const [loginOpen, setLoginOpen] = useState(false);
   const [logoutOpen, setLogoutOpen] = useState(false);
-  const { confirm } = useConfirm();
 
   return (
     <>
@@ -119,19 +117,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
               setLoginOpen(true);
             }}
             onLogout={() => {
-              setLoginOpen(true);
+              setLogoutOpen(true);
-              confirm({
-                title: 'Sign out?',
-                content: `All data has been stored in the cloud. `,
-                confirmText: 'Sign out',
-                cancelText: 'Cancel',
-              }).then(async confirm => {
-                if (confirm) {
-                  await logout();
-                  await router.replace(`/workspace`);
-                  toast('Enabled success');
-                }
-              });
             }}
           />
         </ModalWrapper>

packages/app/src/components/workspace-modal/languageMenu.tsx

@@ -1,61 +0,0 @@
-import { LOCALES } from '@affine/i18n';
-import { styled } from '@/styles';
-import { useTranslation } from '@affine/i18n';
-import { ArrowDownIcon } from '@blocksuite/icons';
-import { Button } from '@/ui/button';
-import { Menu, MenuItem } from '@/ui/menu';
-
-const LanguageMenuContent = () => {
-  const { i18n } = useTranslation();
-  const changeLanguage = (event: string) => {
-    i18n.changeLanguage(event);
-  };
-  return (
-    <>
-      {LOCALES.map(option => {
-        return (
-          <ListItem
-            key={option.name}
-            title={option.name}
-            onClick={() => {
-              changeLanguage(option.tag);
-            }}
-          >
-            {option.originalName}
-          </ListItem>
-        );
-      })}
-    </>
-  );
-};
-export const LanguageMenu = () => {
-  const { i18n } = useTranslation();
-
-  const currentLanguage = LOCALES.find(item => item.tag === i18n.language);
-
-  return (
-    <Menu
-      content={<LanguageMenuContent />}
-      placement="bottom"
-      trigger="click"
-      disablePortal={true}
-    >
-      <Button
-        icon={<ArrowDownIcon />}
-        iconPosition="end"
-        noBorder={true}
-        style={{ textTransform: 'capitalize' }}
-      >
-        {currentLanguage?.originalName}
-      </Button>
-    </Menu>
-  );
-};
-
-const ListItem = styled(MenuItem)(({ theme }) => ({
-  height: '38px',
-  color: theme.colors.popoverColor,
-  fontSize: theme.font.sm,
-  textTransform: 'capitalize',
-  padding: '0 24px',
-}));

packages/app/src/components/workspace-setting/PublishPage.tsx

@@ -10,7 +10,6 @@ import { useState } from 'react';
 import { Button } from '@/ui/button';
 import Input from '@/ui/input';
 import { toast } from '@/ui/toast';
-// import { useAppState } from '@/providers/app-state-provider3';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { useTranslation } from '@affine/i18n';
@@ -23,6 +22,7 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const togglePublic = async (flag: boolean) => {
     try {
       await publishWorkspace(workspace.id.toString(), flag);
+      setLoaded(false);
     } catch (e) {
       toast('Failed to publish workspace');
     }
@@ -67,7 +67,6 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                     onClick={async () => {
                       setLoaded(true);
                       await togglePublic(true);
-                      setLoaded(false);
                     }}
                     loading={loaded}
                     type="primary"
@@ -86,7 +85,6 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                 onClick={async () => {
                   setLoaded(true);
                   await togglePublic(false);
-                  setLoaded(true);
                 }}
                 loading={false}
                 type="danger"

packages/app/src/components/workspace-setting/SyncPage.tsx

@@ -9,11 +9,13 @@ import { DownloadIcon } from '@blocksuite/icons';
 import { Button } from '@/ui/button';
 import { Menu, MenuItem } from '@/ui/menu';
 import { WorkspaceUnit } from '@affine/datacenter';
-import { Trans, useTranslation } from '@affine/i18n';
+import { useTranslation } from '@affine/i18n';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { EnableWorkspaceButton } from '../enable-workspace';
+import { useAppState } from '@/providers/app-state-provider';
 export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   const { t } = useTranslation();
+  const { user } = useAppState();
   return (
     <div>
       <StyledPublishContent>
@@ -40,12 +42,19 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
         ) : (
           <>
             <StyledPublishExplanation>
-              <Trans i18nKey="Sync Description2">
+              <WorkspaceUnitAvatar
-                <code>{{ workspaceName: workspace.name ?? 'Affine' }}</code>
+                size={32}
-                is Cloud Workspace. All data will be synchronised and saved to
+                name={workspace.name}
-                the AFFiNE
+                workspaceUnit={workspace}
-              </Trans>
+                style={{ marginRight: '12px' }}
+              />
+              <StyledWorkspaceName>{workspace.name} </StyledWorkspaceName>is
+              Cloud Workspace.
             </StyledPublishExplanation>
+            <StyledWorkspaceType>
+              All data will be synchronized and saved to the AFFiNE account{' '}
+              {user?.email}
+            </StyledWorkspaceType>
             <StyleAsync>
               <Menu
                 content={

packages/app/src/components/workspace-setting/style.ts

@@ -146,6 +146,7 @@ export const StyledPublishContent = styled('div')(() => {
   return {
     display: 'flex',
     flexDirection: 'column',
+    flex: 1,
   };
 });
 

packages/app/src/components/workspace-slider-bar/index.tsx

@@ -16,7 +16,6 @@ import {
   SearchIcon,
   AllPagesIcon,
   FavouritesIcon,
-  ImportIcon,
   TrashIcon,
   AddIcon,
   SettingsIcon,
@@ -65,7 +64,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
   );
 };
 export const WorkSpaceSliderBar = () => {
-  const { triggerQuickSearchModal, triggerImportModal } = useModal();
+  const { triggerQuickSearchModal } = useModal();
   const [showSubFavorite, setShowSubFavorite] = useState(true);
   const { currentWorkspace } = useAppState();
   const { openPage, createPage } = usePageHelper();
@@ -161,14 +160,14 @@ export const WorkSpaceSliderBar = () => {
               setShowWorkspaceSetting(false);
             }}
           /> */}
-
+          {/* TODO: will finish the feature next version */}
-          <StyledListItem
+          {/* <StyledListItem
             onClick={() => {
               triggerImportModal();
             }}
           >
             <ImportIcon /> {t('Import')}
-          </StyledListItem>
+          </StyledListItem> */}
 
           <Link href={{ pathname: paths.trash }}>
             <StyledListItem active={router.asPath === paths.trash}>

packages/app/src/hooks/use-workspace-helper.ts

@@ -31,8 +31,8 @@ export const useWorkspaceHelper = () => {
       await dataCenter.updateWorkspaceMeta({ name }, workspace);
     }
     if (avatarBlob) {
-      // const blobId = await dataCenter.setBlob(workspace, avatarBlob);
+      const blobId = await dataCenter.setBlob(workspace, avatarBlob);
-      // await dataCenter.updateWorkspaceMeta({ avatar: blobId }, workspace);
+      await dataCenter.updateWorkspaceMeta({ avatar: blobId }, workspace);
     }
   };
 

packages/app/src/pages/workspace/[workspaceId]/setting.tsx

@@ -10,7 +10,6 @@ import {
   GeneralPage,
   MembersPage,
   PublishPage,
-  ExportPage,
   SyncPage,
 } from '@/components/workspace-setting';
 import { SettingsIcon } from '@blocksuite/icons';
@@ -42,11 +41,11 @@ const tabMap: {
     name: 'Publish',
     panelRender: workspace => <PublishPage workspace={workspace} />,
   },
-
+  // TODO: next version will finish this feature
-  {
+  // {
-    name: 'Export',
+  //   name: 'Export',
-    panelRender: workspace => <ExportPage workspace={workspace} />,
+  //   panelRender: workspace => <ExportPage workspace={workspace} />,
-  },
+  // },
 ];
 
 const WorkspaceSetting = () => {