Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-13 21:05:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: optimize electron macos header style (#1774)

Browse Source 
Co-authored-by: himself65 <himself65@outlook.com>
This commit is contained in:
Peng Xiao
2023-04-03 03:01:22 +08:00
committed by GitHub
parent fa150a93a0
commit e0eecffb2f
31 changed files with 635 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/components/blocksuite/block-suite-page-list/page-list/Empty.tsx
View File

@@ -18,7 +18,7 @@ export const PageListEmpty = (props: { listType?: string }) => {
};
return (
<div style={{ height: 'calc(100% - 48px)' }}>
<div style={{ height: 'calc(100% - 52px)' }}>
<Empty description={getEmptyDescription()} />
</div>
);

2
apps/web/src/components/blocksuite/block-suite-page-list/page-list/styles.ts
View File

@@ -3,7 +3,7 @@ import { TableRow } from '@affine/component';
export const StyledTableContainer = styled('div')(({ theme }) => {
return {
height: 'calc(100vh - 48px)',
height: 'calc(100vh - 52px)',
padding: '78px 72px',
overflowY: 'auto',
[theme.breakpoints.down('sm')]: {

2
apps/web/src/components/blocksuite/header/header-right-items/theme-mode-switch/style.ts
View File

@@ -4,7 +4,7 @@ import spring, { toString } from 'css-spring';
const ANIMATE_DURATION = 400;
export const StyledThemeModeSwitch = styled('div')(({ theme }) => {
export const StyledThemeModeSwitch = styled('button')(({ theme }) => {
return {
width: '32px',
height: '32px',

31
apps/web/src/components/blocksuite/header/styles.ts
View File

@@ -5,23 +5,27 @@ import {
textEllipsis,
} from '@affine/component';
export const StyledHeaderContainer = styled('div')<{ hasWarning: boolean }>(
({ theme, hasWarning }) => {
return {
height: hasWarning ? '96px' : '48px',
flexShrink: 0,
position: 'sticky',
top: 0,
background: theme.colors.pageBackground,
zIndex: 1,
};
}
);
export const StyledHeaderContainer = styled('div')<{
hasWarning: boolean;
}>(({ theme, hasWarning }) => {
return {
height: hasWarning ? '96px' : '52px',
flexShrink: 0,
position: 'sticky',
top: 0,
background: theme.colors.pageBackground,
zIndex: 1,
WebkitAppRegion: 'drag',
button: {
WebkitAppRegion: 'no-drag',
},
};
});
export const StyledHeader = styled('div')<{ hasWarning: boolean }>(
({ theme }) => {
return {
flexShrink: 0,
height: '48px',
height: '52px',
width: '100%',
padding: '0 20px',
...displayFlex('space-between', 'center'),
@@ -56,6 +60,7 @@ export const StyledTitle = styled('div')(({ theme }) => {
maxWidth: '180px',
},
transition: 'max-width .15s',
userSelect: 'none',
...textEllipsis(1),
};
});