rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: menu open style [skip e2e]

Browse Source
This commit is contained in:
Aman Harwara
2023-10-25 11:18:40 +05:30
parent f6bfe9e868
commit 090dca933b
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx
View File

@@ -104,7 +104,7 @@ interface ToolbarButtonProps extends ComponentPropsWithoutRef<'button'> {
const ToolbarButton = forwardRef( const ToolbarButton = forwardRef(
( (
{ name, active, iconName, children, onSelect, disabled, ...props }: ToolbarButtonProps, { name, active, iconName, children, onSelect, disabled, className, ...props }: ToolbarButtonProps,
ref: ForwardedRef<HTMLButtonElement>, ref: ForwardedRef<HTMLButtonElement>,
) => { ) => {
const [editor] = useLexicalComposerContext() const [editor] = useLexicalComposerContext()
@@ -112,7 +112,10 @@ const ToolbarButton = forwardRef(
return ( return (
<StyledTooltip showOnMobile showOnHover label={name} side="top"> <StyledTooltip showOnMobile showOnHover label={name} side="top">
<ToolbarItem <ToolbarItem
className="flex select-none items-center justify-center rounded p-0.5 focus:shadow-none focus:outline-none enabled:hover:bg-default enabled:focus-visible:bg-default disabled:opacity-50 md:border md:border-transparent enabled:hover:md:translucent-ui:border-[--popover-border-color]" className={classNames(
'flex select-none items-center justify-center rounded p-0.5 focus:shadow-none focus:outline-none enabled:hover:bg-default enabled:focus-visible:bg-default disabled:opacity-50 md:border md:border-transparent enabled:hover:md:translucent-ui:border-[--popover-border-color]',
className,
)}
onMouseDown={(event) => { onMouseDown={(event) => {
event.preventDefault() event.preventDefault()
onSelect() onSelect()
@@ -546,6 +549,7 @@ const ToolbarPlugin = () => {
setIsTextFormatMenuOpen(!isTextFormatMenuOpen) setIsTextFormatMenuOpen(!isTextFormatMenuOpen)
}} }}
ref={textFormatAnchorRef} ref={textFormatAnchorRef}
className={isTextFormatMenuOpen ? 'md:bg-default' : ''}
> >
<Icon type="text" size="custom" className="h-4 w-4 md:h-3.5 md:w-3.5" /> <Icon type="text" size="custom" className="h-4 w-4 md:h-3.5 md:w-3.5" />
<Icon type="chevron-down" size="custom" className="ml-1 h-4 w-4 md:h-3.5 md:w-3.5" /> <Icon type="chevron-down" size="custom" className="ml-1 h-4 w-4 md:h-3.5 md:w-3.5" />
@@ -556,6 +560,7 @@ const ToolbarPlugin = () => {
setIsTextStyleMenuOpen(!isTextStyleMenuOpen) setIsTextStyleMenuOpen(!isTextStyleMenuOpen)
}} }}
ref={textStyleAnchorRef} ref={textStyleAnchorRef}
className={isTextStyleMenuOpen ? 'md:bg-default' : ''}
> >
<Icon type={blockTypeToIconName[blockType]} size="custom" className="h-4 w-4 md:h-3.5 md:w-3.5" /> <Icon type={blockTypeToIconName[blockType]} size="custom" className="h-4 w-4 md:h-3.5 md:w-3.5" />
<Icon type="chevron-down" size="custom" className="ml-2 h-4 w-4 md:h-3.5 md:w-3.5" /> <Icon type="chevron-down" size="custom" className="ml-2 h-4 w-4 md:h-3.5 md:w-3.5" />
@@ -566,6 +571,7 @@ const ToolbarPlugin = () => {
setIsAlignmentMenuOpen(!isAlignmentMenuOpen) setIsAlignmentMenuOpen(!isAlignmentMenuOpen)
}} }}
ref={alignmentAnchorRef} ref={alignmentAnchorRef}
className={isAlignmentMenuOpen ? 'md:bg-default' : ''}
> >
<Icon type="align-left" size="custom" className="h-4 w-4 md:h-3.5 md:w-3.5" /> <Icon type="align-left" size="custom" className="h-4 w-4 md:h-3.5 md:w-3.5" />
<Icon type="chevron-down" size="custom" className="ml-2 h-4 w-4 md:h-3.5 md:w-3.5" /> <Icon type="chevron-down" size="custom" className="ml-2 h-4 w-4 md:h-3.5 md:w-3.5" />
@@ -576,6 +582,7 @@ const ToolbarPlugin = () => {
setIsInsertMenuOpen(!isInsertMenuOpen) setIsInsertMenuOpen(!isInsertMenuOpen)
}} }}
ref={insertAnchorRef} ref={insertAnchorRef}
className={isInsertMenuOpen ? 'md:bg-default' : ''}
> >
<Icon type="add" size="custom" className="h-4 w-4 md:h-3.5 md:w-3.5" /> <Icon type="add" size="custom" className="h-4 w-4 md:h-3.5 md:w-3.5" />
<Icon type="chevron-down" size="custom" className="ml-2 h-4 w-4 md:h-3.5 md:w-3.5" /> <Icon type="chevron-down" size="custom" className="ml-2 h-4 w-4 md:h-3.5 md:w-3.5" />