Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 04:18:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: update menu background color (#2170)

Browse Source
This commit is contained in:
JimmFly
2023-04-28 02:06:17 +08:00
committed by GitHub
parent dcf7e83eec
commit f3cbe54625
14 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/components/affine/operation-menu-items/Export.tsx
View File

@@ -20,7 +20,7 @@ export const Export = ({
return ( return (
<Menu <Menu
width={248} width={248}
placement="left-start" // placement="left-start"
trigger="click" trigger="click"
content={ content={
<> <>

2
apps/web/src/components/affine/operation-menu-items/MoveTo.tsx
View File

@@ -49,7 +49,7 @@ export const MoveTo = ({
<PinboardMenu <PinboardMenu
anchorEl={anchorEl} anchorEl={anchorEl}
open={open} open={open}
placement="left-start" // placement="left-start"
metas={metas} metas={metas}
currentMeta={currentMeta} currentMeta={currentMeta}
blockSuiteWorkspace={blockSuiteWorkspace} blockSuiteWorkspace={blockSuiteWorkspace}

4
apps/web/src/components/affine/pinboard/pinboard-render/OperationButton.tsx
View File

@@ -88,7 +88,7 @@ export const OperationButton = ({
width={256} width={256}
anchorEl={anchorEl} anchorEl={anchorEl}
open={operationMenuOpen} open={operationMenuOpen}
placement="bottom-start" // placement="bottom-start"
zIndex={menuIndex} zIndex={menuIndex}
> >
<MenuItem <MenuItem
@@ -143,7 +143,7 @@ export const OperationButton = ({
<PinboardMenu <PinboardMenu
anchorEl={anchorEl} anchorEl={anchorEl}
open={pinboardMenuOpen} open={pinboardMenuOpen}
placement="bottom-start" // placement="bottom-start"
zIndex={menuIndex} zIndex={menuIndex}
metas={metas} metas={metas}
currentMeta={currentMeta} currentMeta={currentMeta}

2
apps/web/src/components/affine/workspace-setting-detail/panel/collaboration/index.tsx
View File

@@ -120,7 +120,7 @@ const AffineRemoteCollaborationPanel: React.FC<
</MenuItem> </MenuItem>
</> </>
} }
placement="bottom-end" // placement="bottom-end"
disablePortal={true} disablePortal={true}
trigger="click" trigger="click"
> >

10
apps/web/src/components/blocksuite/block-suite-page-list/page-list/OperationCell.tsx
View File

@@ -69,7 +69,13 @@ export const OperationCell: React.FC<OperationCellProps> = ({
favorite ? t('Removed from Favorites') : t('Added to Favorites') favorite ? t('Removed from Favorites') : t('Added to Favorites')
); );
}} }}
icon={favorite ? <FavoritedIcon /> : <FavoriteIcon />} icon={
favorite ? (
<FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
) : (
<FavoriteIcon />
)
}
> >
{favorite ? t('Remove from favorites') : t('Add to Favorites')} {favorite ? t('Remove from favorites') : t('Add to Favorites')}
</MenuItem> </MenuItem>
@@ -98,7 +104,7 @@ export const OperationCell: React.FC<OperationCellProps> = ({
<FlexWrapper alignItems="center" justifyContent="center"> <FlexWrapper alignItems="center" justifyContent="center">
<Menu <Menu
content={OperationMenu} content={OperationMenu}
placement="bottom-end" // placement="bottom-end"
disablePortal={true} disablePortal={true}
trigger="click" trigger="click"
> >

2
apps/web/src/components/blocksuite/workspace-header/header-right-items/EditorOptionMenu.tsx
View File

@@ -93,7 +93,7 @@ export const EditorOptionMenu = () => {
<Menu <Menu
width={276} width={276}
content={EditMenu} content={EditMenu}
placement="bottom-end" // placement="bottom-end"
disablePortal={true} disablePortal={true}
trigger="click" trigger="click"
> >

2
apps/web/src/components/blocksuite/workspace-header/header-right-items/UserAvatar.tsx
View File

@@ -16,7 +16,7 @@ export const UserAvatar = () => {
<Menu <Menu
width={276} width={276}
content={EditMenu} content={EditMenu}
placement="bottom-end" // placement="bottom-end"
disablePortal={true} disablePortal={true}
trigger="click" trigger="click"
> >

2
apps/web/src/components/pure/help-island/index.tsx
View File

@@ -108,7 +108,7 @@ export const HelpIsland = ({
</MuiFade> </MuiFade>
</Tooltip> </Tooltip>
<MuiFade in={spread}> <MuiFade in={spread}>
<StyledTriggerWrapper> <StyledTriggerWrapper spread>
<CloseIcon /> <CloseIcon />
</StyledTriggerWrapper> </StyledTriggerWrapper>
</MuiFade> </MuiFade>

14
apps/web/src/components/pure/help-island/style.ts
View File

@@ -7,17 +7,14 @@ export const StyledIsland = styled('div')<{
transition: 'box-shadow 0.2s', transition: 'box-shadow 0.2s',
width: '44px', width: '44px',
position: 'relative', position: 'relative',
boxShadow: spread boxShadow: spread ? 'var(--affine-menu-shadow)' : 'unset',
? '4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06)'
: 'unset',
padding: '0 4px 44px', padding: '0 4px 44px',
borderRadius: '10px', borderRadius: '10px',
background: spread background: spread
? 'var(--affine-background-overlay-panel-color)' ? 'var(--affine-background-overlay-panel-color)'
: 'transparent', : 'var(--affine-background-primary-color)',
':hover': { ':hover': {
boxShadow: background: spread ? null : 'var(--affine-white)',
'4px 4px 7px rgba(58, 76, 92, 0.04), -4px -4px 13px rgba(58, 76, 92, 0.02), 6px 6px 36px rgba(58, 76, 92, 0.06)',
}, },
'::after': { '::after': {
content: '""', content: '""',
@@ -58,7 +55,9 @@ export const StyledAnimateWrapper = styled('div')(() => ({
overflow: 'hidden', overflow: 'hidden',
})); }));
export const StyledTriggerWrapper = styled('div')(({ theme }) => { export const StyledTriggerWrapper = styled('div')<{
spread?: boolean;
}>(({ theme, spread }) => {
return { return {
width: '36px', width: '36px',
height: '36px', height: '36px',
@@ -70,6 +69,7 @@ export const StyledTriggerWrapper = styled('div')(({ theme }) => {
...positionAbsolute({ left: '4px', bottom: '4px' }), ...positionAbsolute({ left: '4px', bottom: '4px' }),
':hover': { ':hover': {
color: 'var(--affine-primary-color)', color: 'var(--affine-primary-color)',
backgroundColor: spread ? 'var(--affine-hover-color)' : null,
}, },
}; };
}); });

2
apps/web/src/components/pure/shortcuts-modal/style.ts
View File

@@ -6,7 +6,7 @@ export const StyledShortcutsModal = styled('div')(({ theme }) => ({
paddingBottom: '28px', paddingBottom: '28px',
backgroundColor: 'var(--affine-white)', backgroundColor: 'var(--affine-white)',
boxShadow: 'var(--affine-popover-shadow)', boxShadow: 'var(--affine-popover-shadow)',
borderRadius: `var(--affine-popover-radius) 0 var(--affine-popover-radius) var(--affine-popover-radius)`, borderRadius: `var(--affine-popover-radius)`,
overflow: 'auto', overflow: 'auto',
boxRadius: '10px', boxRadius: '10px',
position: 'fixed', position: 'fixed',

2
packages/component/src/components/share-menu/ShareMenu.tsx
View File

@@ -123,7 +123,7 @@ export const ShareMenu: FC<ShareMenuProps> = props => {
<Menu <Menu
content={Share} content={Share}
visible={open} visible={open}
placement="bottom-end" // placement="bottom-end"
trigger={['click']} trigger={['click']}
width={439} width={439}
disablePortal={true} disablePortal={true}

6
packages/component/src/ui/button/utils.ts
View File

@@ -8,14 +8,14 @@ export const SIZE_CONFIG = {
[SIZE_SMALL]: { [SIZE_SMALL]: {
iconSize: 16, iconSize: 16,
fontSize: 16, fontSize: 16,
borderRadius: 6, borderRadius: 4,
height: 26, height: 26,
padding: 24, padding: 24,
}, },
[SIZE_MIDDLE]: { [SIZE_MIDDLE]: {
iconSize: 20, iconSize: 20,
fontSize: 16, fontSize: 16,
borderRadius: 6, borderRadius: 4,
height: 32, height: 32,
padding: 24, padding: 24,
}, },
@@ -24,7 +24,7 @@ export const SIZE_CONFIG = {
fontSize: 16, fontSize: 16,
height: 38, height: 38,
padding: 24, padding: 24,
borderRadius: 6, borderRadius: 4,
}, },
} as const; } as const;

4
packages/component/src/ui/menu/styles.ts
View File

@@ -74,11 +74,7 @@ export const StyledMenuItem = styled('button')<{
':hover': disabled ':hover': disabled
? {} ? {}
: { : {
color: 'var(--affine-primary-color)',
backgroundColor: 'var(--affine-hover-color)', backgroundColor: 'var(--affine-hover-color)',
svg: {
color: 'var(--affine-primary-color)',
},
}, },
}; };
}); });

6
packages/theme/src/index.ts
View File

@@ -48,7 +48,7 @@ export const baseTheme = {
zIndexPopover: '100', zIndexPopover: '100',
paragraphSpace: '8px', paragraphSpace: '8px',
popoverRadius: '10px', popoverRadius: '12px',
zoom: '1', zoom: '1',
scale: 'calc(1 / var(--affine-zoom))', scale: 'calc(1 / var(--affine-zoom))',
@@ -73,7 +73,7 @@ export const lightTheme = {
backgroundSecondaryColor: 'rgb(251, 250, 252)', backgroundSecondaryColor: 'rgb(251, 250, 252)',
backgroundTertiaryColor: 'rgb(233, 233, 236)', backgroundTertiaryColor: 'rgb(233, 233, 236)',
backgroundCodeBlock: 'rgb(250, 251, 253)', backgroundCodeBlock: 'rgb(250, 251, 253)',
backgroundModalColor: 'rgba(0, 0, 0, 0.6)', backgroundModalColor: 'rgba(0, 0, 0, 0.4)',
textPrimaryColor: 'rgb(66, 65, 73)', textPrimaryColor: 'rgb(66, 65, 73)',
textSecondaryColor: 'rgb(142, 141, 145)', textSecondaryColor: 'rgb(142, 141, 145)',
textDisableColor: 'rgb(169, 169, 173)', textDisableColor: 'rgb(169, 169, 173)',
@@ -197,7 +197,7 @@ export const darkTheme = {
backgroundSuccessColor: 'rgba(8, 21, 18, 1)', backgroundSuccessColor: 'rgba(8, 21, 18, 1)',
backgroundPrimaryColor: 'rgb(20, 20, 20)', backgroundPrimaryColor: 'rgb(20, 20, 20)',
backgroundSecondaryColor: 'rgb(32, 32, 32)', backgroundSecondaryColor: 'rgb(32, 32, 32)',
backgroundModalColor: 'rgba(0, 0, 0, 0.8)', backgroundModalColor: 'rgba(0, 0, 0, 0.5)',
backgroundOverlayPanelColor: 'rgb(30, 30, 30)', backgroundOverlayPanelColor: 'rgb(30, 30, 30)',
tagBlue: 'rgba(8, 67, 136, 1)', tagBlue: 'rgba(8, 67, 136, 1)',
tagGreen: 'rgba(44, 108, 63, 1)', tagGreen: 'rgba(44, 108, 63, 1)',