From fbff33704d1f7dcebb943073473c6d1da2e30992 Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Fri, 29 Jul 2022 15:16:45 +0300 Subject: [PATCH] Display active item, move closeOnActivate to popover --- src/components/block/index.ts | 7 +++---- .../modules/toolbar/blockSettings.ts | 20 +------------------ src/components/utils/popover.ts | 15 ++++++++++++++ src/styles/popover.css | 4 ++++ src/styles/variables.css | 5 +++++ types/tools/tool-settings.d.ts | 18 +---------------- 6 files changed, 29 insertions(+), 40 deletions(-) diff --git a/src/components/block/index.ts b/src/components/block/index.ts index 115b2705..3e0fa056 100644 --- a/src/components/block/index.ts +++ b/src/components/block/index.ts @@ -21,7 +21,6 @@ import { BlockTuneData } from '../../../types/block-tunes/block-tune-data'; import ToolsCollection from '../tools/collection'; import EventsDispatcher from '../utils/events'; import { PopoverItem } from '../utils/popover'; -import { TunesMenuEntry } from '../../../types/tools'; /** * Interface describes Block class constructor argument @@ -647,9 +646,9 @@ export default class Block extends EventsDispatcher { * Returns data to render in tunes menu. * Splits block tunes settings into 2 groups: popover items and custom html. */ - public getTunes(): [TunesMenuEntry[], HTMLElement] { + public getTunes(): [PopoverItem[], HTMLElement] { const tunesElement = document.createElement('div'); - let tunesItems: PopoverItem[] = []; + const tunesItems: PopoverItem[] = []; /** Default tunes: Move up, Move down, Delete */ const defaultTunesInstances = Array.from(this.defaultTunesInstances.values()); @@ -680,7 +679,7 @@ export default class Block extends EventsDispatcher { } }); - tunesItems = tunesItems.filter(item => !item.isActive); + // tunesItems = tunesItems.filter(item => !item.isActive); return [tunesItems, tunesElement]; } diff --git a/src/components/modules/toolbar/blockSettings.ts b/src/components/modules/toolbar/blockSettings.ts index 657ee474..a2d4a68c 100644 --- a/src/components/modules/toolbar/blockSettings.ts +++ b/src/components/modules/toolbar/blockSettings.ts @@ -6,7 +6,6 @@ import Block from '../../block'; import Popover, { PopoverEvent, PopoverItem } from '../../utils/popover'; import I18n from '../../i18n'; import { I18nInternalNS } from '../../i18n/namespace-internal'; -import { TunesMenuEntry } from '../../../../types/tools'; /** * HTML Elements that used for BlockSettings @@ -112,7 +111,7 @@ export default class BlockSettings extends Module { searchable: true, filterLabel: I18n.ui(I18nInternalNS.ui.popover, 'Filter'), nothingFoundLabel: I18n.ui(I18nInternalNS.ui.popover, 'Nothing found'), - items: this.prepareTunesItems(tunesItems), + items: tunesItems, customContent: this.nodes.renderedTunes, api: this.Editor.API.methods, }); @@ -171,23 +170,6 @@ export default class BlockSettings extends Module { } } - /** - * Adds ability to close popover on item activation if corresponding flag is specified - * - * @param tunesItems - tunes configuration - */ - private prepareTunesItems(tunesItems: TunesMenuEntry[]): PopoverItem[] { - return tunesItems.map(tunesItem => ({ - ...tunesItem, - onClick: (item, event): void => { - tunesItem.onClick(item, event); - if (tunesItem.closeOnActivate) { - this.close(); - } - }, - })); - } - /** * Adds special class to rendered tool settings signalising that button should * be available for keyboard navigation diff --git a/src/components/utils/popover.ts b/src/components/utils/popover.ts index 325da7a5..49416194 100644 --- a/src/components/utils/popover.ts +++ b/src/components/utils/popover.ts @@ -43,6 +43,11 @@ export interface PopoverItem { * True if item should be highlighted as active */ isActive?: boolean; + + /** + * True if popover should close once item is activated + */ + closeOnActivate?: boolean; } /** @@ -137,6 +142,7 @@ export default class Popover extends EventsDispatcher { itemHidden: string; itemFlippable: string; itemFocused: string; + itemActive: string; itemLabel: string; itemIcon: string; itemSecondaryLabel: string; @@ -155,6 +161,7 @@ export default class Popover extends EventsDispatcher { itemHidden: 'ce-popover__item--hidden', itemFlippable: 'ce-popover__item--flippable', itemFocused: 'ce-popover__item--focused', + itemActive: 'ce-popover__item--active', itemLabel: 'ce-popover__item-label', itemIcon: 'ce-popover__item-icon', itemSecondaryLabel: 'ce-popover__item-secondary-label', @@ -435,6 +442,10 @@ export default class Popover extends EventsDispatcher { })); } + if (item.isActive) { + el.classList.add(Popover.CSS.itemActive); + } + return el; } @@ -450,6 +461,10 @@ export default class Popover extends EventsDispatcher { const clickedItem = this.items[itemIndex]; clickedItem.onClick(clickedItem, event); + + if (clickedItem.closeOnActivate) { + this.hide(); + } } /** diff --git a/src/styles/popover.css b/src/styles/popover.css index 155e7bba..31d62326 100644 --- a/src/styles/popover.css +++ b/src/styles/popover.css @@ -72,6 +72,10 @@ display: none; } + &--active { + @apply --button-active; + } + &-icon { @apply --tool-icon; } diff --git a/src/styles/variables.css b/src/styles/variables.css index ca9b14b3..41e97471 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -104,6 +104,11 @@ background: rgba(34, 186, 255, 0.08) !important; }; + --button-active: { + background: rgba(56, 138, 229, 0.1); + color: #388AE5; + }; + /** * Styles for Toolbox Buttons and Plus Button */ diff --git a/types/tools/tool-settings.d.ts b/types/tools/tool-settings.d.ts index b7b0779d..caf58af8 100644 --- a/types/tools/tool-settings.d.ts +++ b/types/tools/tool-settings.d.ts @@ -28,27 +28,11 @@ export interface ToolboxConfigEntry { data?: BlockToolData } -/** - * Represents single tunes menu entry - */ -export type TunesMenuEntry = PopoverItem & { - /** - * True if tunes menu should close once item is activated - */ - closeOnActivate?: boolean, - - /** - * True if tune is active. - * Is used to filter out items. - */ - isActive?: boolean -}; - /** * Tool may specify its tunes configuration * that can contain either one or multiple entries */ -export type TunesMenuConfig = TunesMenuEntry | TunesMenuEntry[]; +export type TunesMenuConfig = PopoverItem | PopoverItem[]; /** * Object passed to the Tool's constructor by {@link EditorConfig#tools}