From 6b51cb5a1f41acc8475118cbc552393a20b9b7a4 Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Mon, 19 Dec 2022 17:54:01 +0800 Subject: [PATCH 1/6] fix: add pointerEvent to disabled button --- .../app/src/components/workspace-slider-bar/style.ts | 6 +++++- packages/app/src/ui/button/styles.ts | 10 +++++++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/app/src/components/workspace-slider-bar/style.ts b/packages/app/src/components/workspace-slider-bar/style.ts index e32c01e86d..eb14746742 100644 --- a/packages/app/src/components/workspace-slider-bar/style.ts +++ b/packages/app/src/components/workspace-slider-bar/style.ts @@ -57,7 +57,11 @@ export const StyledListItem = styled.button<{ borderRadius: '5px', ...displayFlex('flex-start', 'center'), ...(disabled - ? { cursor: 'not-allowed', color: theme.colors.borderColor } + ? { + cursor: 'not-allowed', + pointerEvent: 'none', + color: theme.colors.borderColor, + } : {}), '>svg': { diff --git a/packages/app/src/ui/button/styles.ts b/packages/app/src/ui/button/styles.ts index efa6d2edda..1a7162262f 100644 --- a/packages/app/src/ui/button/styles.ts +++ b/packages/app/src/ui/button/styles.ts @@ -44,7 +44,7 @@ export const StyledIconButton = styled('button', { color: theme.colors.iconColor, ...displayInlineFlex('center', 'center'), position: 'relative', - ...(disabled ? { cursor: 'not-allowed' } : {}), + ...(disabled ? { cursor: 'not-allowed', pointerEvent: 'none' } : {}), transition: 'background .15s', // TODO: we need to add @emotion/babel-plugin @@ -123,7 +123,7 @@ export const StyledTextButton = styled('button', { paddingRight: padding, ...displayInlineFlex('flex-start', 'center'), position: 'relative', - ...(disabled ? { cursor: 'not-allowed' } : {}), + ...(disabled ? { cursor: 'not-allowed', pointerEvent: 'none' } : {}), transition: 'background .15s', // TODO: Implement circle shape borderRadius: shape === 'default' ? borderRadius : height / 2, @@ -180,7 +180,11 @@ export const StyledButton = styled('button', { position: 'relative', // TODO: disabled color is not decided ...(disabled - ? { cursor: 'not-allowed', color: theme.colors.borderColor } + ? { + cursor: 'not-allowed', + pointerEvent: 'none', + color: theme.colors.borderColor, + } : {}), transition: 'background .15s', // TODO: Implement circle shape From 0a54138db8c83b85f9e60f49b0316d03ecc5791f Mon Sep 17 00:00:00 2001 From: QiShaoXuan Date: Mon, 19 Dec 2022 18:11:13 +0800 Subject: [PATCH 2/6] fix: add pointerEvent to disabled button --- .../app/src/components/workspace-slider-bar/style.ts | 5 ++++- packages/app/src/ui/button/styles.ts | 10 +++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/app/src/components/workspace-slider-bar/style.ts b/packages/app/src/components/workspace-slider-bar/style.ts index e32c01e86d..3f8fa216ac 100644 --- a/packages/app/src/components/workspace-slider-bar/style.ts +++ b/packages/app/src/components/workspace-slider-bar/style.ts @@ -57,7 +57,10 @@ export const StyledListItem = styled.button<{ borderRadius: '5px', ...displayFlex('flex-start', 'center'), ...(disabled - ? { cursor: 'not-allowed', color: theme.colors.borderColor } + ? { + cursor: 'not-allowed', + color: theme.colors.borderColor, + } : {}), '>svg': { diff --git a/packages/app/src/ui/button/styles.ts b/packages/app/src/ui/button/styles.ts index efa6d2edda..106826804b 100644 --- a/packages/app/src/ui/button/styles.ts +++ b/packages/app/src/ui/button/styles.ts @@ -44,7 +44,7 @@ export const StyledIconButton = styled('button', { color: theme.colors.iconColor, ...displayInlineFlex('center', 'center'), position: 'relative', - ...(disabled ? { cursor: 'not-allowed' } : {}), + ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}), transition: 'background .15s', // TODO: we need to add @emotion/babel-plugin @@ -123,7 +123,7 @@ export const StyledTextButton = styled('button', { paddingRight: padding, ...displayInlineFlex('flex-start', 'center'), position: 'relative', - ...(disabled ? { cursor: 'not-allowed' } : {}), + ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}), transition: 'background .15s', // TODO: Implement circle shape borderRadius: shape === 'default' ? borderRadius : height / 2, @@ -180,7 +180,11 @@ export const StyledButton = styled('button', { position: 'relative', // TODO: disabled color is not decided ...(disabled - ? { cursor: 'not-allowed', color: theme.colors.borderColor } + ? { + cursor: 'not-allowed', + pointerEvents: 'none', + color: theme.colors.borderColor, + } : {}), transition: 'background .15s', // TODO: Implement circle shape From cc2d696b1381d674804fc0b07f8e4b3e38b6a5c4 Mon Sep 17 00:00:00 2001 From: MingLiang Wang Date: Mon, 19 Dec 2022 18:15:01 +0800 Subject: [PATCH 3/6] feat: add workspace setting tab --- .../src/components/workspace-setting/index.ts | 1 + .../src/components/workspace-setting/style.ts | 80 ++++++++++++++++ .../workspace-setting/workspace-setting.tsx | 94 +++++++++++++++++++ .../workspace-create/workspace-create.tsx | 1 - 4 files changed, 175 insertions(+), 1 deletion(-) create mode 100644 packages/app/src/components/workspace-setting/index.ts create mode 100644 packages/app/src/components/workspace-setting/style.ts create mode 100644 packages/app/src/components/workspace-setting/workspace-setting.tsx diff --git a/packages/app/src/components/workspace-setting/index.ts b/packages/app/src/components/workspace-setting/index.ts new file mode 100644 index 0000000000..eda9c6aebd --- /dev/null +++ b/packages/app/src/components/workspace-setting/index.ts @@ -0,0 +1 @@ +export * from './workspace-setting'; diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts new file mode 100644 index 0000000000..ec41b17dae --- /dev/null +++ b/packages/app/src/components/workspace-setting/style.ts @@ -0,0 +1,80 @@ +import { styled } from '@/styles'; + +export const StyledSettingContent = styled('div')(({ theme }) => { + return { + position: 'relative', + display: 'flex', + padding: '0px', + width: '1080px', + background: theme.colors.popoverBackground, + borderRadius: '12px', + }; +}); + +export const StyledSettingSidebar = styled('div')(({ theme }) => { + { + return { + width: '236px', + height: '780px', + background: theme.mode === 'dark' ? '#272727' : '#FBFBFC', + }; + } +}); + +export const StyledSettingSidebarHeader = styled('div')(({ theme }) => { + { + return { + fontWeight: '500', + fontSize: '18px', + lineHeight: '26px', + textAlign: 'center', + marginTop: '37px', + }; + } +}); + +export const StyledSettingTabContainer = styled('ul')(({ theme }) => { + { + return { + display: 'flex', + flexDirection: 'column', + marginTop: '25px', + }; + } +}); + +export const WorkspaceSettingTagItem = styled('li')<{ isActive?: boolean }>( + ({ theme, isActive }) => { + { + return { + display: 'flex', + marginBottom: '12px', + padding: '0 24px', + height: '32px', + color: isActive ? theme.colors.primaryColor : theme.colors.textColor, + fontWeight: '400', + fontSize: '16px', + lineHeight: '32px', + cursor: 'pointer', + }; + } + } +); + +export const StyledSettingTagIconContainer = styled('div')(({ theme }) => { + return { + display: 'flex', + alignItems: 'center', + marginRight: '14.64px', + width: '14.47px', + fontSize: '14.47px', + }; +}); + +export const StyledSettingH2 = styled('h2')(({ theme }) => { + return { + fontWeight: '500', + fontSize: '18px', + lineHeight: '26px', + }; +}); diff --git a/packages/app/src/components/workspace-setting/workspace-setting.tsx b/packages/app/src/components/workspace-setting/workspace-setting.tsx new file mode 100644 index 0000000000..8e059d6838 --- /dev/null +++ b/packages/app/src/components/workspace-setting/workspace-setting.tsx @@ -0,0 +1,94 @@ +import Modal from '@/ui/modal'; +import { + StyledSettingContent, + StyledSettingH2, + StyledSettingSidebar, + StyledSettingSidebarHeader, + StyledSettingTabContainer, + StyledSettingTagIconContainer, + WorkspaceSettingTagItem, +} from './style'; +import { EditIcon, UsersIcon, PublishIcon } from '@blocksuite/icons'; +import { useState } from 'react'; + +enum ActiveTab { + 'general' = 'general', + 'members' = 'members', + 'publish' = 'publish', +} + +type SettingTabProps = { + activeTab: ActiveTab; + onTabChange?: (tab: ActiveTab) => void; +}; + +const WorkspaceSettingTab = ({ activeTab, onTabChange }: SettingTabProps) => { + return ( + + { + onTabChange && onTabChange(ActiveTab.general); + }} + > + + + + General + + { + onTabChange && onTabChange(ActiveTab.members); + }} + > + + + + Members + + { + onTabChange && onTabChange(ActiveTab.publish); + }} + > + + + + Publish + + + ); +}; + +export const WorkspaceSetting = () => { + const [activeTab, setActiveTab] = useState(ActiveTab.general); + const handleTabChange = (tab: ActiveTab) => { + setActiveTab(tab); + }; + return ( + + + + + Workspace Settings + + + + {activeTab === ActiveTab.general && } + + + ); +}; + +const GeneralPage = () => { + return ( +
+ Workspace Avatar +
+ ); +}; diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx index b9f649f20f..63bf1f5d9c 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/CreateWorkspaceItem/workspace-create/workspace-create.tsx @@ -23,7 +23,6 @@ export const WorkspaceCreate = ({ open, onClose }: WorkspaceCreateProps) => { const handlerInputChange = (workspaceName: string) => { setWorkspaceId(workspaceName); }; - console.log('workspaceName', workspaceName); return ( From d8b7819943540f44697da2482515d46bd8cb506a Mon Sep 17 00:00:00 2001 From: MingLiang Wang Date: Mon, 19 Dec 2022 18:31:56 +0800 Subject: [PATCH 4/6] feat: change trigger to click --- .../WorkspaceSelector/WorkspaceSelector.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx index 94e4514fce..d06ed53f75 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx @@ -8,7 +8,7 @@ export const WorkspaceSelector = () => { content={} zIndex={1000} placement="bottom-start" - trigger="hover" + trigger="click" > From 857504fd863fd9b335e0dda7f2bd1d7ba78c18bf Mon Sep 17 00:00:00 2001 From: alt0 Date: Mon, 19 Dec 2022 21:10:37 +0800 Subject: [PATCH 5/6] fix: workspace meta --- .../WorkspaceSelector/SelectorPopperContent.tsx | 4 ++-- packages/app/src/providers/app-state-provider.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx index b94815f666..30b7c8d162 100644 --- a/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx +++ b/packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx @@ -27,7 +27,7 @@ const workspaces = [ ]; export const SelectorPopperContent = () => { - const { user, workspaces } = useAppState(); + const { user, workspacesMeta } = useAppState(); return !user ? ( @@ -43,7 +43,7 @@ export const SelectorPopperContent = () => { Workspace - {workspaces.map(workspace => { + {workspacesMeta.map(workspace => { return ( ({ user: null, - workspaces: [], + workspacesMeta: [], setState: () => {}, }); export const AppStateProvider = ({ children }: { children?: ReactNode }) => { const [state, setState] = useState({ user: null, - workspaces: [], + workspacesMeta: [], }); useEffect(() => { From 983d4b2d5f52f88e216e5e9f66d1ab21338a4aa5 Mon Sep 17 00:00:00 2001 From: MingLiang Wang Date: Mon, 19 Dec 2022 21:20:18 +0800 Subject: [PATCH 6/6] feat: workspace setting general UI --- .../src/components/workspace-setting/style.ts | 70 +++++++++++++++++-- .../workspace-setting/workspace-setting.tsx | 36 ++++++++-- 2 files changed, 95 insertions(+), 11 deletions(-) diff --git a/packages/app/src/components/workspace-setting/style.ts b/packages/app/src/components/workspace-setting/style.ts index ec41b17dae..22c1d6e344 100644 --- a/packages/app/src/components/workspace-setting/style.ts +++ b/packages/app/src/components/workspace-setting/style.ts @@ -1,13 +1,16 @@ import { styled } from '@/styles'; +import { Button } from '@/ui/button'; +import MuiAvatar from '@mui/material/Avatar'; -export const StyledSettingContent = styled('div')(({ theme }) => { +export const StyledSettingContainer = styled('div')(({ theme }) => { return { position: 'relative', display: 'flex', padding: '0px', - width: '1080px', + width: '961px', background: theme.colors.popoverBackground, borderRadius: '12px', + overflow: 'hidden', }; }); @@ -15,7 +18,23 @@ export const StyledSettingSidebar = styled('div')(({ theme }) => { { return { width: '236px', - height: '780px', + height: '620px', + background: theme.mode === 'dark' ? '#272727' : '#FBFBFC', + }; + } +}); + +export const StyledSettingContent = styled('div')(({ theme }) => { + return { + paddingLeft: '48px', + }; +}); + +export const StyledSetting = styled('div')(({ theme }) => { + { + return { + width: '236px', + height: '620px', background: theme.mode === 'dark' ? '#272727' : '#FBFBFC', }; } @@ -71,10 +90,47 @@ export const StyledSettingTagIconContainer = styled('div')(({ theme }) => { }; }); -export const StyledSettingH2 = styled('h2')(({ theme }) => { +export const StyledSettingH2 = styled('h2')<{ marginTop?: number }>( + ({ marginTop, theme }) => { + return { + fontWeight: '500', + fontSize: '18px', + lineHeight: '26px', + marginTop: marginTop ? `${marginTop}px` : '0px', + }; + } +); + +export const StyledSettingAvatarContent = styled('div')(({ theme }) => { return { - fontWeight: '500', - fontSize: '18px', - lineHeight: '26px', + marginTop: '12px', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + height: '72px', + }; +}); + +export const StyledSettingAvatar = styled(MuiAvatar)(({ theme }) => { + return { height: '72px', width: '72px' }; +}); + +export const StyledAvatarUploadBtn = styled(Button)(({ theme }) => { + return { + backgroundColor: theme.colors.hoverBackground, + color: theme.colors.primaryColor, + margin: '0 12px 0 24px', + }; +}); + +export const StyledSettingInputContainer = styled('div')(({ theme }) => { + return { + marginTop: '12px', + }; +}); + +export const StyledDeleteButtonContainer = styled('div')(({ theme }) => { + return { + marginTop: '158px', }; }); diff --git a/packages/app/src/components/workspace-setting/workspace-setting.tsx b/packages/app/src/components/workspace-setting/workspace-setting.tsx index 8e059d6838..d405510491 100644 --- a/packages/app/src/components/workspace-setting/workspace-setting.tsx +++ b/packages/app/src/components/workspace-setting/workspace-setting.tsx @@ -1,7 +1,13 @@ import Modal from '@/ui/modal'; import { + StyledAvatarUploadBtn, + StyledDeleteButtonContainer, + StyledSettingAvatar, + StyledSettingAvatarContent, + StyledSettingContainer, StyledSettingContent, StyledSettingH2, + StyledSettingInputContainer, StyledSettingSidebar, StyledSettingSidebarHeader, StyledSettingTabContainer, @@ -10,6 +16,8 @@ import { } from './style'; import { EditIcon, UsersIcon, PublishIcon } from '@blocksuite/icons'; import { useState } from 'react'; +import { Button } from '@/ui/button'; +import Input from '@/ui/input'; enum ActiveTab { 'general' = 'general', @@ -69,7 +77,7 @@ export const WorkspaceSetting = () => { }; return ( - + Workspace Settings @@ -79,8 +87,10 @@ export const WorkspaceSetting = () => { onTabChange={handleTabChange} /> - {activeTab === ActiveTab.general && } - + + {activeTab === ActiveTab.general && } + + ); }; @@ -88,7 +98,25 @@ export const WorkspaceSetting = () => { const GeneralPage = () => { return (
- Workspace Avatar + Workspace Avatar + + W + upload + + + Workspace Name + + + + Workspace Owner + + + + + +
); };