From 1a9a5d99fa4d1f4285db1086fd2ee7c7f52ee6e2 Mon Sep 17 00:00:00 2001 From: mitsuha Date: Wed, 10 Aug 2022 16:36:24 +0800 Subject: [PATCH] opti: 1.right panel trigger button cannot click#176; --- .../workspace/docs/components/tabs/Tabs.tsx | 8 +++- .../header/EditorBoardSwitcher/StatusIcon.tsx | 10 +++-- .../header/EditorBoardSwitcher/StatusText.tsx | 37 ++++++++++++------- .../EditorBoardSwitcher/StatusTrack.tsx | 12 ++++-- .../header/EditorBoardSwitcher/Switcher.tsx | 2 + .../layout/src/header/LayoutHeader.tsx | 30 ++++++++------- 6 files changed, 64 insertions(+), 35 deletions(-) diff --git a/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx b/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx index b4a2eaf021..2d56e7edce 100644 --- a/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx +++ b/apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx @@ -10,7 +10,6 @@ const StyledTabs = styled('div')(({ theme }) => { display: 'flex', fontSize: '12px', fontWeight: '600', - color: theme.affine.palette.primary, }; }); @@ -26,13 +25,18 @@ const StyledTabTitle = styled('div', { padding-top: 4px; border-top: 2px solid #ecf1fb; position: relative; + cursor: pointer; + color: ${({ theme, isActive }) => + isActive ? theme.affine.palette.primary : 'rgba(62, 111, 219, 0.6)'}; &::after { content: ''; width: 0; height: 2px; background-color: ${({ isActive, theme }) => - isActive ? theme.affine.palette.primary : ''}; + isActive + ? theme.affine.palette.primary + : 'rgba(62, 111, 219, 0.6)'}; position: absolute; left: 100%; top: -2px; diff --git a/libs/components/layout/src/header/EditorBoardSwitcher/StatusIcon.tsx b/libs/components/layout/src/header/EditorBoardSwitcher/StatusIcon.tsx index a30e17f913..0c38b3f4e7 100644 --- a/libs/components/layout/src/header/EditorBoardSwitcher/StatusIcon.tsx +++ b/libs/components/layout/src/header/EditorBoardSwitcher/StatusIcon.tsx @@ -17,16 +17,20 @@ export const StatusIcon = ({ mode }: StatusIconProps) => { const IconWrapper = styled('div')>( ({ theme, mode }) => { return { - width: '20px', - height: '20px', + width: '24px', + height: '24px', borderRadius: '5px', boxShadow: theme.affine.shadows.shadow1, color: theme.affine.palette.primary, cursor: 'pointer', backgroundColor: theme.affine.palette.white, - transform: `translateX(${mode === DocMode.doc ? 0 : 20}px)`, + transform: `translateX(${mode === DocMode.doc ? 0 : 30}px)`, transition: 'transform 300ms ease', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + '& > svg': { fontSize: '20px', }, diff --git a/libs/components/layout/src/header/EditorBoardSwitcher/StatusText.tsx b/libs/components/layout/src/header/EditorBoardSwitcher/StatusText.tsx index 73976d3dad..b50e480915 100644 --- a/libs/components/layout/src/header/EditorBoardSwitcher/StatusText.tsx +++ b/libs/components/layout/src/header/EditorBoardSwitcher/StatusText.tsx @@ -2,26 +2,37 @@ import { styled } from '@toeverything/components/ui'; type StatusTextProps = { children: string; + width?: string; active?: boolean; onClick?: () => void; }; -export const StatusText = ({ children, active, onClick }: StatusTextProps) => { +export const StatusText = ({ + children, + width, + active, + onClick, +}: StatusTextProps) => { return ( - + {children} ); }; -const StyledText = styled('div')(({ theme, active }) => { - return { - display: 'inline-flex', - alignItems: 'center', - color: theme.affine.palette.primary, - fontWeight: active ? '500' : '300', - fontSize: '15px', - cursor: 'pointer', - padding: '0 6px', - }; -}); +const StyledText = styled('div')( + ({ theme, width, active }) => { + return { + display: 'inline-flex', + alignItems: 'center', + color: active + ? theme.affine.palette.primary + : 'rgba(62, 111, 219, 0.6)', + fontWeight: active ? '600' : '400', + fontSize: '16px', + lineHeight: '22px', + cursor: 'pointer', + ...(!!width && { width }), + }; + } +); diff --git a/libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx b/libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx index bcc3e80fa1..f14bacd351 100644 --- a/libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx +++ b/libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx @@ -18,11 +18,15 @@ export const StatusTrack: FC = ({ mode, onClick }) => { const Container = styled('div')(({ theme }) => { return { + width: '64px', + height: '32px', backgroundColor: theme.affine.palette.textHover, - borderRadius: '5px', - height: '30px', - width: '50px', + border: '1px solid #ECF1FB', + borderRadius: '8px', cursor: 'pointer', - padding: '5px', + margin: '0 8px', + display: 'flex', + alignItems: 'center', + padding: '0 4px', }; }); diff --git a/libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx b/libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx index 0bfe20971f..3c350c2379 100644 --- a/libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx +++ b/libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx @@ -32,6 +32,7 @@ export const Switcher = () => { return ( switchToPageView(DocMode.doc)} > @@ -48,6 +49,7 @@ export const Switcher = () => { }} /> switchToPageView(DocMode.board)} > diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx index ccf6497642..0d9560666d 100644 --- a/libs/components/layout/src/header/LayoutHeader.tsx +++ b/libs/components/layout/src/header/LayoutHeader.tsx @@ -1,4 +1,4 @@ -import { IconButton, styled } from '@toeverything/components/ui'; +import { IconButton, styled, MuiButton } from '@toeverything/components/ui'; import { LogoIcon, SideBarViewIcon, @@ -24,9 +24,13 @@ export const LayoutHeader = () => { - Share + Share
- +
@@ -119,17 +123,19 @@ const StyledHelper = styled('div')({ alignItems: 'center', }); -const StyledShare = styled('div')({ +const StyledShare = styled(MuiButton)<{ disabled?: boolean }>({ padding: '10px 12px', fontWeight: 600, fontSize: '14px', - color: '#3E6FDB', cursor: 'pointer', - - '&:hover': { - background: '#F5F7F8', - borderRadius: '5px', - }, + color: '#98ACBD', + textTransform: 'none', + /* disabled for current time */ + // color: '#3E6FDB', + // '&:hover': { + // background: '#F5F7F8', + // borderRadius: '5px', + // }, }); const StyledLogoIcon = styled(LogoIcon)(({ theme }) => { @@ -141,9 +147,7 @@ const StyledLogoIcon = styled(LogoIcon)(({ theme }) => { const StyledContainerForEditorBoardSwitcher = styled('div')(({ theme }) => { return { - width: '100%', position: 'absolute', - display: 'flex', - justifyContent: 'center', + left: '50%', }; });