Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: improvements for toolbar hidden actions #155

Merged
merged 1 commit into from
Nov 20, 2023
Merged

fix: improvements for toolbar hidden actions #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/i18n/common/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"toolbar_action_disabled": "Incompatible markup element"
}
8 changes: 8 additions & 0 deletions src/i18n/common/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import {registerKeyset} from '../i18n';

import en from './en.json';
import ru from './ru.json';

const KEYSET = 'common';

export const i18n = registerKeyset(KEYSET, {en, ru});
3 changes: 3 additions & 0 deletions src/i18n/common/ru.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"toolbar_action_disabled": "Несовместимый элемент разметки"
}
1 change: 0 additions & 1 deletion src/toolbar/FlexToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,6 @@ export function FlexToolbar<E>(props: FlexToolbarProps<E>) {
onClick={props.onClick}
className={b('dots')}
alwaysActive={true}
hideDisabled={true}
/>
)}
</div>
Expand Down
6 changes: 6 additions & 0 deletions src/toolbar/ToolbarButton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.ye-toolbar-button {
&__action-disabled-tooltip {
min-height: fit-content;
padding: 6px 12px;
}
}
57 changes: 35 additions & 22 deletions src/toolbar/ToolbarButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import React from 'react';
import React, {useRef} from 'react';
import isFunction from 'lodash/isFunction';
import {ActionTooltip, Button, Icon} from '@gravity-ui/uikit';
import {ActionTooltip, Button, Icon, Popover} from '@gravity-ui/uikit';
import {cn} from '../classname';
import {i18n} from '../i18n/common';
import {ToolbarTooltipDelay} from './const';
import type {ToolbarBaseProps, ToolbarItemData} from './types';

import './ToolbarButton.scss';

const b = cn('toolbar-button');

export type ToolbarButtonProps<E> = ToolbarBaseProps<E> & ToolbarItemData<E>;
Expand All @@ -16,6 +19,7 @@ export function ToolbarButton<E>({
hotkey,
editor,
icon,
disabledPopoverVisible = true,
exec,
focus,
onClick,
Expand All @@ -25,31 +29,40 @@ export function ToolbarButton<E>({
const active = isActive(editor);
const enabled = isEnable(editor);
const disabled = !active && !enabled;
const buttonRef = useRef<HTMLElement>(null);

const titleText: string = isFunction(title) ? title() : title;

return (
<ActionTooltip
openDelay={ToolbarTooltipDelay.Open}
closeDelay={ToolbarTooltipDelay.Close}
title={titleText}
hotkey={hotkey}
<Popover
content={i18n('toolbar_action_disabled')}
disabled={!disabledPopoverVisible || !disabled}
tooltipContentClassName={b('action-disabled-tooltip')}
placement={['bottom']}
>
<Button
size="m"
selected={active}
disabled={disabled}
view={active ? 'normal' : 'flat'}
onClick={() => {
focus();
exec(editor);
onClick?.(id);
}}
className={b(null, [className])}
extraProps={{'aria-label': titleText}}
<ActionTooltip
openDelay={ToolbarTooltipDelay.Open}
closeDelay={ToolbarTooltipDelay.Close}
title={titleText}
hotkey={hotkey}
>
<Icon data={icon.data} size={icon.size ?? 16} />
</Button>
</ActionTooltip>
<Button
ref={buttonRef}
size="m"
selected={active}
disabled={disabled}
view={active ? 'normal' : 'flat'}
onClick={() => {
focus();
exec(editor);
onClick?.(id);
}}
className={b(null, [className])}
extraProps={{'aria-label': titleText}}
>
<Icon data={icon.data} size={icon.size ?? 16} />
</Button>
</ActionTooltip>
</Popover>
);
}
17 changes: 17 additions & 0 deletions src/toolbar/ToolbarListButton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@
display: flex;
align-items: center;
column-gap: 8px;

.yc-icon {
display: block;
}
}

&__hint {
Expand All @@ -36,4 +40,17 @@
display: flex;
}
}

&__action-disabled-popover {
display: block;

.yc-popover__handler {
display: block;
}
}

&__action-disabled-tooltip {
min-height: fit-content;
padding: 6px 12px;
}
}
101 changes: 59 additions & 42 deletions src/toolbar/ToolbarListButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React from 'react';
import isFunction from 'lodash/isFunction';
import {Button, Hotkey, Icon, Menu, Popup, Tooltip} from '@gravity-ui/uikit';
import {Button, Hotkey, Icon, Menu, Popover, Popup, Tooltip} from '@gravity-ui/uikit';
import {HelpPopover} from '@gravity-ui/components';
import {ChevronDown} from '@gravity-ui/icons';

import {cn} from '../classname';
import {i18n} from '../i18n/common';
import {useBooleanState} from '../react-utils/hooks';
import {ToolbarTooltipDelay} from './const';
import {ToolbarBaseProps, ToolbarIconData, ToolbarItemData} from './types';
Expand Down Expand Up @@ -34,7 +35,6 @@ export function ToolbarListButton<E>({
withArrow,
data,
alwaysActive,
hideDisabled,
}: ToolbarListButtonProps<E>) {
const buttonRef = React.useRef<HTMLButtonElement>(null);
const [open, , hide, toggleOpen] = useBooleanState(false);
Expand Down Expand Up @@ -62,58 +62,75 @@ export function ToolbarListButton<E>({

return (
<>
<Tooltip
content={titleText}
disabled={popupOpen}
openDelay={ToolbarTooltipDelay.Open}
closeDelay={ToolbarTooltipDelay.Close}
<Popover
className={b('action-disabled-popover')}
tooltipContentClassName={b('action-disabled-tooltip')}
content={i18n('toolbar_action_disabled')}
placement={'bottom'}
disabled={!everyDisabled}
>
<Button
size="m"
ref={buttonRef}
view={someActive || popupOpen ? 'normal' : 'flat'}
selected={someActive}
disabled={everyDisabled}
className={b({arrow: withArrow}, [className])}
onClick={toggleOpen}
<Tooltip
content={titleText}
disabled={popupOpen}
openDelay={ToolbarTooltipDelay.Open}
closeDelay={ToolbarTooltipDelay.Close}
>
{buttonContent}
</Button>
</Tooltip>
<Button
size="m"
ref={buttonRef}
view={someActive || popupOpen ? 'normal' : 'flat'}
selected={someActive}
disabled={everyDisabled}
className={b({arrow: withArrow}, [className])}
onClick={toggleOpen}
>
{buttonContent}
</Button>
</Tooltip>
</Popover>
<Popup anchorRef={buttonRef} open={popupOpen} onClose={hide}>
<Menu size="l" className={b('menu')}>
{data
.map(({id, title, icon, hotkey, isActive, isEnable, exec, hint}) => {
const titleText = isFunction(title) ? title() : title;
const hintText = isFunction(hint) ? hint() : hint;
const disabled = !isEnable(editor);
return hideDisabled && disabled ? null : (
<Menu.Item
return (
<Popover
className={b('action-disabled-popover')}
tooltipContentClassName={b('action-disabled-tooltip')}
content={i18n('toolbar_action_disabled')}
placement={'left'}
disabled={!disabled}
key={id}
active={isActive(editor)}
disabled={!isEnable(editor)}
onClick={() => {
hide();
focus();
exec(editor);
onClick?.(id);
}}
icon={<Icon data={icon.data} size={icon.size ?? 16} />}
extraProps={{'aria-label': titleText}}
>
<div className={b('item')}>
{titleText}
<div className={b('extra')}>
{hotkey && <Hotkey value={hotkey} />}
{hintText && (
<HelpPopover
className={b('hint')}
content={hintText}
/>
)}
<Menu.Item
key={id}
active={isActive(editor)}
disabled={!isEnable(editor)}
onClick={() => {
hide();
focus();
exec(editor);
onClick?.(id);
}}
icon={<Icon data={icon.data} size={icon.size ?? 16} />}
extraProps={{'aria-label': titleText}}
>
<div className={b('item')}>
{titleText}
<div className={b('extra')}>
{hotkey && <Hotkey value={hotkey} />}
{hintText && (
<HelpPopover
className={b('hint')}
content={hintText}
/>
)}
</div>
</div>
</div>
</Menu.Item>
</Menu.Item>
</Popover>
);
})
.filter(Boolean)}
Expand Down
1 change: 1 addition & 0 deletions src/toolbar/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export type ToolbarItemData<E> = {
title: string | (() => string);
hint?: string | (() => string);
hotkey?: HotkeyProps['value'];
disabledPopoverVisible?: boolean;
exec(editor: E): void;
isActive(editor: E): boolean;
isEnable(editor: E): boolean;
Expand Down
Loading