toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-18 14:01:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #179 from toeverything/opti-issue176-mitsuha-dev

Browse Source 
opti: 1.right panel trigger button cannot click#176;
This commit is contained in:
xiaodong zuo 2022-08-10 16:51:42 +08:00 committed by GitHub
commit f381de0d8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 64 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx
View File

@ -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;

10
libs/components/layout/src/header/EditorBoardSwitcher/StatusIcon.tsx
View File

@ -17,16 +17,20 @@ export const StatusIcon = ({ mode }: StatusIconProps) => {
const IconWrapper = styled('div')<Pick<StatusIconProps, 'mode'>>(
({ 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',
},

37
libs/components/layout/src/header/EditorBoardSwitcher/StatusText.tsx
View File

@ -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 (
<StyledText active={active} onClick={onClick}>
<StyledText width={width} active={active} onClick={onClick}>
{children}
</StyledText>
);
};
const StyledText = styled('div')<StatusTextProps>(({ 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')<StatusTextProps>(
({ 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 }),
};
}
);

12
libs/components/layout/src/header/EditorBoardSwitcher/StatusTrack.tsx
View File

@ -18,11 +18,15 @@ export const StatusTrack: FC<StatusTrackProps> = ({ 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',
};
});

2
libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx
View File

@ -32,6 +32,7 @@ export const Switcher = () => {
return (
<StyledContainerForSwitcher>
<StatusText
width={'44px'}
active={pageViewMode === DocMode.doc}
onClick={() => switchToPageView(DocMode.doc)}
>
@ -48,6 +49,7 @@ export const Switcher = () => {
}}
/>
<StatusText
width={'56px'}
active={pageViewMode === DocMode.board}
onClick={() => switchToPageView(DocMode.board)}
>

30
libs/components/layout/src/header/LayoutHeader.tsx
View File

@ -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 = () => {
</FlexContainer>
<FlexContainer>
<StyledHelper>
<StyledShare>Share</StyledShare>
<StyledShare disabled={true}>Share</StyledShare>
<div style={{ margin: '0px 12px' }}>
<IconButton size="large">
<IconButton
size="large"
hoverColor={'transparent'}
disabled={true}
>
<SearchIcon />
</IconButton>
</div>
@ -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%',
};
});