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

fix: #516 commneu menu style

Browse Source
This commit is contained in:
DiamondThree 2022-07-28 17:37:24 +08:00
parent 31c8747f33
commit 27a0b02bdb
3 changed files with 96 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
libs/components/editor-blocks/src/blocks/group/GroupView.tsx
View File

@ -59,7 +59,7 @@ const GroupActionWrapper = styled('div')(({ theme }) => ({
const GroupContainer = styled('div')<{ isSelect?: boolean }>( const GroupContainer = styled('div')<{ isSelect?: boolean }>(
({ isSelect, theme }) => ({ ({ isSelect, theme }) => ({
background: theme.affine.palette.white, background: theme.affine.palette.white,
border: '2px solid #ECF1FB', border: '2px solid rgba(236,241,251,.5)',
padding: '15px 12px', padding: '15px 12px',
borderRadius: '10px', borderRadius: '10px',
...(isSelect ...(isSelect

197
libs/components/editor-plugins/src/menu/inline-menu/menu-item/DropdownItem.tsx
View File

@ -1,7 +1,7 @@
import React, { useState, useCallback } from 'react'; import React, { useState, useCallback } from 'react';
import style9 from 'style9'; import style9 from 'style9';
import { import {
MuiPopover, Popover,
styled, styled,
type SvgIconProps, type SvgIconProps,
Tooltip, Tooltip,
@ -32,15 +32,6 @@ export const MenuDropdownItem = ({
null null
); );
const handle_open_dropdown_menu = useCallback(
(event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
event.stopPropagation();
set_anchor_ele(event.currentTarget);
},
[]
);
const handle_close_dropdown_menu = useCallback(() => { const handle_close_dropdown_menu = useCallback(() => {
set_anchor_ele(null); set_anchor_ele(null);
}, []); }, []);
@ -50,103 +41,103 @@ export const MenuDropdownItem = ({
return ( return (
<> <>
<Tooltip <Popover
trigger="click"
placement="bottom-start"
content={ content={
<div style={{ padding: '2px 4px' }}> <div className={styles('dropdownContainer')}>
<p>{name}</p> {children.map(item => {
{shortcut && <p>{shortcut}</p>} const {
name,
icon: ItemIcon,
onClick,
nameKey: itemNameKey,
} = item;
const StyledIcon = withStylesForIcon(ItemIcon);
return (
<button
className={styles('dropdownItem')}
key={name}
onClick={() => {
if (
onClick &&
selectionInfo?.anchorNode?.id
) {
onClick({
editor,
type: itemNameKey,
anchorNodeId:
selectionInfo?.anchorNode
?.id,
});
}
handle_close_dropdown_menu();
}}
>
<StyledIcon
fontColor={
nameKey ===
inlineMenuNamesKeys.currentFontColor
? fontColorPalette[
inlineMenuNamesForFontColor[
itemNameKey as keyof typeof inlineMenuNamesForFontColor
]
]
: nameKey ===
inlineMenuNamesKeys.currentFontBackground
? fontBgColorPalette[
inlineMenuNamesForFontColor[
itemNameKey as keyof typeof inlineMenuNamesForFontColor
]
]
: ''
}
// fontBgColor={
// nameKey=== inlineMenuNamesKeys.currentFontBackground ? fontBgColorPalette[
// inlineMenuNamesForFontColor[itemNameKey] as keyof typeof fontBgColorPalette
// ]:''
// }
/>
{/* <ItemIcon sx={{ width: 20, height: 20 }} /> */}
<span
className={styles('dropdownItemItext')}
>
{name}
</span>
</button>
);
})}
</div> </div>
} } // id={anchor_ele ? 'inline-menu-pop' : undefined}
placement="bottom" // open={Boolean(anchor_ele)}
trigger="hover" // anchorEl={anchor_ele}
// onClose={handle_close_dropdown_menu}
// anchorOrigin={{
// horizontal: 'left',
// vertical: 40,
// }}
> >
<button <Tooltip
onClick={handle_open_dropdown_menu} content={
className={styles('currentDropdownButton')} <div style={{ padding: '2px 4px' }}>
aria-label={name} <p>{name}</p>
onMouseDown={e => { {shortcut && <p>{shortcut}</p>}
// prevent toolbar from taking focus away from editor </div>
e.preventDefault(); }
e.stopPropagation(); placement="top"
}} trigger="hover"
> >
<MenuIcon sx={{ width: 20, height: 20 }} /> <button
<ArrowDropDownIcon sx={{ width: 20, height: 20 }} /> className={styles('currentDropdownButton')}
</button> aria-label={name}
</Tooltip> >
<MuiPopover <MenuIcon sx={{ width: 20, height: 20 }} />
id={anchor_ele ? 'inline-menu-pop' : undefined} <ArrowDropDownIcon sx={{ width: 20, height: 20 }} />
open={Boolean(anchor_ele)} </button>
anchorEl={anchor_ele} </Tooltip>
onClose={handle_close_dropdown_menu} </Popover>
anchorOrigin={{
horizontal: 'left',
vertical: 40,
}}
>
<div className={styles('dropdownContainer')}>
{children.map(item => {
const {
name,
icon: ItemIcon,
onClick,
nameKey: itemNameKey,
} = item;
const StyledIcon = withStylesForIcon(ItemIcon);
return (
<button
className={styles('dropdownItem')}
key={name}
onClick={() => {
if (
onClick &&
selectionInfo?.anchorNode?.id
) {
onClick({
editor,
type: itemNameKey,
anchorNodeId:
selectionInfo?.anchorNode?.id,
});
}
handle_close_dropdown_menu();
}}
>
<StyledIcon
fontColor={
nameKey ===
inlineMenuNamesKeys.currentFontColor
? fontColorPalette[
inlineMenuNamesForFontColor[
itemNameKey as keyof typeof inlineMenuNamesForFontColor
]
]
: nameKey ===
inlineMenuNamesKeys.currentFontBackground
? fontBgColorPalette[
inlineMenuNamesForFontColor[
itemNameKey as keyof typeof inlineMenuNamesForFontColor
]
]
: ''
}
// fontBgColor={
// nameKey=== inlineMenuNamesKeys.currentFontBackground ? fontBgColorPalette[
// inlineMenuNamesForFontColor[itemNameKey] as keyof typeof fontBgColorPalette
// ]:''
// }
/>
{/* <ItemIcon sx={{ width: 20, height: 20 }} /> */}
<span className={styles('dropdownItemItext')}>
{name}
</span>
</button>
);
})}
</div>
</MuiPopover>
</> </>
); );
}; };

2
libs/components/editor-plugins/src/menu/inline-menu/menu-item/IconItem.tsx
View File

@ -45,7 +45,7 @@ export const MenuIconItem = ({
{shortcut && <p>{shortcut}</p>} {shortcut && <p>{shortcut}</p>}
</div> </div>
} }
placement="bottom" placement="top"
trigger="hover" trigger="hover"
> >
<button <button