Display active item, move closeOnActivate to popover

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<BlockEvents> {
    * 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<BlockEvents> {
       }
     });
 
-    tunesItems = tunesItems.filter(item => !item.isActive);
+    // tunesItems = tunesItems.filter(item => !item.isActive);
 
     return [tunesItems, tunesElement];
   }

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<BlockSettingsNodes> {
       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<BlockSettingsNodes> {
     }
   }
 
-  /**
-   * 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

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<PopoverEvent> {
     itemHidden: string;
     itemFlippable: string;
     itemFocused: string;
+    itemActive: string;
     itemLabel: string;
     itemIcon: string;
     itemSecondaryLabel: string;
@@ -155,6 +161,7 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
       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<PopoverEvent> {
       }));
     }
 
+    if (item.isActive) {
+      el.classList.add(Popover.CSS.itemActive);
+    }
+
     return el;
   }
 
@@ -450,6 +461,10 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
     const clickedItem = this.items[itemIndex];
 
     clickedItem.onClick(clickedItem, event);
+
+    if (clickedItem.closeOnActivate) {
+      this.hide();
+    }
   }
 
   /**

src/styles/popover.css

@@ -72,6 +72,10 @@
       display: none;
     }
 
+    &--active {
+      @apply --button-active;
+    }
+
     &-icon {
       @apply --tool-icon;
     }

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
    */

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}