toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-11-27 06:33:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

opti: topbar style

Browse Source
This commit is contained in:
mitsuhatu 2022-07-28 17:58:25 +08:00
parent 66488d1ec8
commit d18a07727c
7 changed files with 77 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/ligo-virgo/src/pages/workspace/docs/Page.tsx
View File

@ -173,7 +173,6 @@ const LigoApp = styled('div')({
display: 'flex',
flex: '1 1 0%',
backgroundColor: 'white',
margin: '10px 0',
});
const LigoLeftContainer = styled('div')({
@ -184,7 +183,7 @@ const LigoLeftContainer = styled('div')({
const WorkspaceSidebar = styled('div')(({ hidden }) => ({
position: 'absolute',
bottom: '48px',
top: '8px',
top: '12px',
zIndex: 1,
display: 'flex',
flexDirection: 'column',

2
libs/components/editor-core/src/RenderRoot.tsx
View File

@ -257,7 +257,7 @@ const Container = styled('div')(
isOnDrag: boolean;
}) => ({
width: '100%',
padding: isWhiteboard ? 0 : `96px ${PADDING_X}px 0 ${PADDING_X}px`,
padding: isWhiteboard ? 0 : `72px ${PADDING_X}px 0 ${PADDING_X}px`,
minWidth: isWhiteboard ? 'unset' : '940px',
position: 'relative',
...(isOnDrag && {

2
libs/components/icons/src/auto-icons/index.ts
View File

@ -1,4 +1,4 @@
export const timestamp = 1658999074664;
export const timestamp = 1659000896562;
export * from './image/image';
export * from './format-clear/format-clear';
export * from './backward-undo/backward-undo';

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

@ -24,7 +24,7 @@ const IconWrapper = styled('div')<Pick<StatusIconProps, 'mode'>>(
color: theme.affine.palette.primary,
cursor: 'pointer',
backgroundColor: theme.affine.palette.white,
transform: `translateX(${mode === DocMode.doc ? 0 : 33}px)`,
transform: `translateX(${mode === DocMode.doc ? 0 : 20}px)`,
transition: 'transform 300ms ease',
'& > svg': {

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

@ -21,7 +21,7 @@ const Container = styled('div')(({ theme }) => {
backgroundColor: theme.affine.palette.textHover,
borderRadius: '5px',
height: '30px',
width: '63px',
width: '50px',
cursor: 'pointer',
padding: '5px',
};

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

@ -1,5 +1,9 @@
import { IconButton, styled } from '@toeverything/components/ui';
import { LogoIcon, SideBarViewIcon } from '@toeverything/components/icons';
import {
LogoIcon,
SideBarViewIcon,
SearchIcon,
} from '@toeverything/components/icons';
import { useShowSettingsSidebar } from '@toeverything/datasource/state';
import { CurrentPageTitle } from './Title';
import { EditorBoardSwitcher } from './EditorBoardSwitcher';
@ -18,9 +22,18 @@ export const LayoutHeader = () => {
</TitleContainer>
</FlexContainer>
<FlexContainer>
<IconButton onClick={toggleInfoSidebar}>
<SideBarViewIcon />
</IconButton>
<StyledHelper>
<StyledShare>Share</StyledShare>
<div style={{ margin: '0px 12px' }}>
<IconButton size="large">
<SearchIcon />
</IconButton>
</div>
<IconButton onClick={toggleInfoSidebar} size="large">
<SideBarViewIcon />
</IconButton>
</StyledHelper>
</FlexContainer>
<StyledContainerForEditorBoardSwitcher>
<EditorBoardSwitcher />
@ -69,6 +82,24 @@ const TitleContainer = styled('div')(({ theme }) => {
};
});
const StyledHelper = styled('div')({
display: 'flex',
alignItems: 'center',
});
const StyledShare = styled('div')({
padding: '10px 12px',
fontWeight: 600,
fontSize: '14px',
color: '#3E6FDB',
cursor: 'pointer',
'&:hover': {
background: '#F5F7F8',
borderRadius: '5px',
},
});
const StyledLogoIcon = styled(LogoIcon)(({ theme }) => {
return {
color: theme.affine.palette.primary,

69
libs/components/ui/src/button/IconButton.tsx
View File

@ -35,6 +35,7 @@ interface IconButtonProps {
disabled?: boolean;
style?: CSSProperties;
className?: string;
size?: SizeType;
}
export const IconButton: FC<PropsWithChildren<IconButtonProps>> = ({
@ -56,43 +57,47 @@ export const IconButton: FC<PropsWithChildren<IconButtonProps>> = ({
);
};
const Container = styled('button')(({ theme }) => {
return {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '32px',
height: '32px',
backgroundColor: theme.affine.palette.white,
color: theme.affine.palette.icons,
padding: theme.affine.spacing.iconPadding,
borderRadius: '5px',
const Container = styled('button')<{ size?: SizeType }>(
({ theme, size = SIZE_MIDDLE }) => {
const { iconSize, areaSize } = SIZE_CONFIG[size];
'& svg': {
width: '20px',
height: '20px',
return {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
width: areaSize,
height: areaSize,
backgroundColor: theme.affine.palette.white,
color: theme.affine.palette.icons,
padding: theme.affine.spacing.iconPadding,
borderRadius: '5px',
'&:hover': {
backgroundColor: theme.affine.palette.hover,
},
'& svg': {
width: iconSize,
height: iconSize,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
[`&${buttonStatus.hover}`]: {
backgroundColor: theme.affine.palette.hover,
},
'&:hover': {
backgroundColor: theme.affine.palette.hover,
},
'&:focus': {
color: theme.affine.palette.primary,
},
[`&.${buttonStatus.focus}`]: {
color: theme.affine.palette.primary,
},
[`&${buttonStatus.hover}`]: {
backgroundColor: theme.affine.palette.hover,
},
[`&${buttonStatus.disabled}`]: {
cursor: 'not-allowed',
},
};
});
'&:focus': {
color: theme.affine.palette.primary,
},
[`&.${buttonStatus.focus}`]: {
color: theme.affine.palette.primary,
},
[`&${buttonStatus.disabled}`]: {
cursor: 'not-allowed',
},
};
}
);