From ae9d6435575a3559c52f32c667a8dd6e6b71f4e7 Mon Sep 17 00:00:00 2001 From: Tanya Fomina Date: Wed, 14 Dec 2022 20:33:07 +0200 Subject: [PATCH] Add fallback icon and title to popover --- package.json | 2 +- src/components/i18n/locales/en/messages.json | 3 ++- .../modules/toolbar/blockSettings.ts | 1 + src/components/modules/toolbar/index.ts | 1 + src/components/ui/toolbox.ts | 3 ++- src/components/utils/popover.ts | 18 ++++++++++++++---- yarn.lock | 7 ++++--- 7 files changed, 25 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index dc197cc8..0c3121f2 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,7 @@ "url": "https://opencollective.com/editorjs" }, "dependencies": { - "@codexteam/icons": "^0.0.4", + "@codexteam/icons": "^0.1.0", "codex-notifier": "^1.1.2", "codex-tooltip": "^1.0.5", "html-janitor": "^2.0.4", diff --git a/src/components/i18n/locales/en/messages.json b/src/components/i18n/locales/en/messages.json index 32761be6..025cdcb3 100644 --- a/src/components/i18n/locales/en/messages.json +++ b/src/components/i18n/locales/en/messages.json @@ -18,7 +18,8 @@ }, "popover": { "Filter": "", - "Nothing found": "" + "Nothing found": "", + "Untitled": "" } }, "toolNames": { diff --git a/src/components/modules/toolbar/blockSettings.ts b/src/components/modules/toolbar/blockSettings.ts index a1fe4b50..458b2d2c 100644 --- a/src/components/modules/toolbar/blockSettings.ts +++ b/src/components/modules/toolbar/blockSettings.ts @@ -116,6 +116,7 @@ export default class BlockSettings extends Module { searchable: true, filterLabel: I18n.ui(I18nInternalNS.ui.popover, 'Filter'), nothingFoundLabel: I18n.ui(I18nInternalNS.ui.popover, 'Nothing found'), + untitledLabel: I18n.ui(I18nInternalNS.ui.popover, 'Untitled'), items: tunesItems.map(tune => this.resolveTuneAliases(tune)), customContent: customHtmlTunesContainer, customContentFlippableItems: this.getControls(customHtmlTunesContainer), diff --git a/src/components/modules/toolbar/index.ts b/src/components/modules/toolbar/index.ts index c147df4d..e66a3ce7 100644 --- a/src/components/modules/toolbar/index.ts +++ b/src/components/modules/toolbar/index.ts @@ -405,6 +405,7 @@ export default class Toolbar extends Module { i18nLabels: { filter: I18n.ui(I18nInternalNS.ui.popover, 'Filter'), nothingFound: I18n.ui(I18nInternalNS.ui.popover, 'Nothing found'), + untitled: I18n.ui(I18nInternalNS.ui.popover, 'Untitled') }, }); diff --git a/src/components/ui/toolbox.ts b/src/components/ui/toolbox.ts index 5f5900ab..4f3bdab5 100644 --- a/src/components/ui/toolbox.ts +++ b/src/components/ui/toolbox.ts @@ -36,7 +36,7 @@ export enum ToolboxEvent { /** * Available i18n dict keys that should be passed to the constructor */ -type ToolboxTextLabelsKeys = 'filter' | 'nothingFound'; +type ToolboxTextLabelsKeys = 'filter' | 'nothingFound' | 'untitled'; /** * Toolbox @@ -127,6 +127,7 @@ export default class Toolbox extends EventsDispatcher { searchable: true, filterLabel: this.i18nLabels.filter, nothingFoundLabel: this.i18nLabels.nothingFound, + untitledLabel: this.i18nLabels.untitled, items: this.toolboxItemsToBeDisplayed, }); diff --git a/src/components/utils/popover.ts b/src/components/utils/popover.ts index 9dd0868e..d8a66289 100644 --- a/src/components/utils/popover.ts +++ b/src/components/utils/popover.ts @@ -7,6 +7,8 @@ import { isMobileScreen, keyCodes, cacheable } from '../utils'; import ScrollLocker from './scroll-locker'; import { PopoverItem, PopoverItemWithConfirmation } from '../../../types'; import { capitalize } from '../utils'; +import { IconDotCircle } from '@codexteam/icons'; + /** * Event that can be triggered by the Popover */ @@ -98,6 +100,11 @@ export default class Popover extends EventsDispatcher { */ private readonly nothingFoundLabel: string; + /** + * text that will be displayed instead of title for title-less items + */ + private readonly untitledLabel: string = 'Untitled'; + /** * Style classes */ @@ -170,22 +177,24 @@ export default class Popover extends EventsDispatcher { * @param options.className - additional class name to be added to the popover wrapper * @param options.filterLabel - label for the search Field * @param options.nothingFoundLabel - label of the 'nothing found' message + * @param options.untitledLabel - text that will be displayed instead of title for title-less items * @param options.customContent - arbitrary html element to be inserted before items list * @param options.customContentFlippableItems - list of html elements inside custom content area that should be available for keyboard navigation * @param options.scopeElement - editor container element */ - constructor({ items, className, searchable, filterLabel, nothingFoundLabel, customContent, customContentFlippableItems, scopeElement }: { + constructor({ items, className, searchable, filterLabel, nothingFoundLabel, untitledLabel, customContent, customContentFlippableItems, scopeElement }: { items: PopoverItem[]; className?: string; searchable?: boolean; filterLabel: string; nothingFoundLabel: string; + untitledLabel?: string; customContent?: HTMLElement; customContentFlippableItems?: HTMLElement[]; scopeElement: HTMLElement; }) { super(); - this.items = items.map(this.fillItemTitle); + this.items = items.map((item) => this.fillItemTitle(item)); this.customContent = customContent; this.customContentFlippableItems = customContentFlippableItems; this.className = className || ''; @@ -195,6 +204,7 @@ export default class Popover extends EventsDispatcher { this.filterLabel = filterLabel; this.nothingFoundLabel = nothingFoundLabel; + this.untitledLabel = untitledLabel; this.render(); this.enableFlipper(); @@ -438,7 +448,7 @@ export default class Popover extends EventsDispatcher { }); el.appendChild(Dom.make('div', Popover.CSS.itemIcon, { - innerHTML: item.icon || item.name.substring(0, 1).toUpperCase(), + innerHTML: item.icon || IconDotCircle, })); el.appendChild(label); @@ -733,7 +743,7 @@ export default class Popover extends EventsDispatcher { return { ...item, - title: capitalize(item.name), + title: this.untitledLabel, }; } } diff --git a/yarn.lock b/yarn.lock index efd5df20..87375b1b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -852,9 +852,10 @@ "@babel/helper-validator-identifier" "^7.19.1" to-fast-properties "^2.0.0" -"@codexteam/icons@^0.0.4": - version "0.0.4" - resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.0.4.tgz#8b72dcd3f3a1b0d880bdceb2abebd74b46d3ae13" +"@codexteam/icons@^0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.1.0.tgz#a02885fe8699f69902d05b077b5f1cd48a2ca6b9" + integrity sha512-jW1fWnwtWzcP4FBGsaodbJY3s1ZaRU+IJy1pvJ7ygNQxkQinybJcwXoyt0a5mWwu/4w30A42EWhCrZn8lp4fdw== "@codexteam/shortcuts@^1.1.1": version "1.2.0"