From 4329f93a9347f65c082f6656a7aa3b70f42112df Mon Sep 17 00:00:00 2001 From: Oscar Date: Thu, 20 Jun 2024 15:32:49 +0200 Subject: [PATCH 1/4] Convert horizontal alignment into icons --- .../plugins/alignment/alignment-menu.hbs | 64 +++++++++++---- .../plugins/alignment/alignment-menu.ts | 81 ++++++++++++++++++- 2 files changed, 125 insertions(+), 20 deletions(-) diff --git a/addon/components/plugins/alignment/alignment-menu.hbs b/addon/components/plugins/alignment/alignment-menu.hbs index 844c66d44..ed7e14668 100644 --- a/addon/components/plugins/alignment/alignment-menu.hbs +++ b/addon/components/plugins/alignment/alignment-menu.hbs @@ -1,19 +1,49 @@ {{! @glint-nocheck: not typesafe yet }} - - {{#each this.options as |option|}} - + + + {{#if this.dropdownOpen}} + + {{/if}} + + \ No newline at end of file diff --git a/addon/components/plugins/alignment/alignment-menu.ts b/addon/components/plugins/alignment/alignment-menu.ts index 682e44851..b357d38ea 100644 --- a/addon/components/plugins/alignment/alignment-menu.ts +++ b/addon/components/plugins/alignment/alignment-menu.ts @@ -10,6 +10,12 @@ import { setAlignment } from '@lblod/ember-rdfa-editor/plugins/alignment/command import IntlService from 'ember-intl/services/intl'; import { dependencySatisfies, macroCondition } from '@embroider/macros'; import { importSync } from '@embroider/macros'; +import { Velcro } from 'ember-velcro'; +import { htmlSafe } from '@ember/template'; +import { tracked } from '@glimmer/tracking'; +import { modifier } from 'ember-modifier'; +import { action } from '@ember/object'; +import { paintCycleHappened } from '@lblod/ember-rdfa-editor/utils/_private/editor-utils'; const NavDownIcon = macroCondition( dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'), ) @@ -18,11 +24,46 @@ const NavDownIcon = macroCondition( .NavDownIcon : 'nav-down'; +const CheckIcon = macroCondition( + dependencySatisfies('@appuniversum/ember-appuniversum', '>=3.4.1'), +) + ? // @ts-expect-error TS/glint doesn't seem to treat this as an import + importSync('@appuniversum/ember-appuniversum/components/icons/check') + .CheckIcon + : 'check'; type Args = { controller?: SayController; }; + +const icons: Record = { + left: ` + + `, + right: ` + + `, + center: ` + + `, + justify: ` + + `, +}; + export default class AlignmentMenu extends Component { NavDownIcon = NavDownIcon; + CheckIcon = CheckIcon; + dropdownButton?: HTMLElement; + Velcro = Velcro; + htmlSafe = htmlSafe; + + setupDropdownButton = modifier( + (element: HTMLElement) => { + this.dropdownButton = element; + }, + { eager: false }, + ); + @tracked dropdownOpen = false; @service declare intl: IntlService; options = ALIGNMENT_OPTIONS; @@ -31,6 +72,14 @@ export default class AlignmentMenu extends Component { return this.args.controller; } + get alignmentStyles() { + return ALIGNMENT_OPTIONS.map((option) => ({ + value: option, + label: this.intl.t(`ember-rdfa-editor.alignment.options.${option}`), + icon: icons[option], + })); + } + get currentAlignment() { if (this.controller) { const { selection } = this.controller.mainEditorState; @@ -43,15 +92,41 @@ export default class AlignmentMenu extends Component { } } + get currentAlignIcon() { + return icons[this.currentAlignment ?? DEFAULT_ALIGNMENT]; + } + get enabled() { return this.controller?.checkCommand(setAlignment({ option: 'left' })); } setAlignment = (option: AlignmentOption) => { this.controller?.doCommand(setAlignment({ option })); + this.closeDropdown(); }; - labelFor = (option: AlignmentOption) => { - return this.intl.t(`ember-rdfa-editor.alignment.options.${option}`); - }; + @action + toggleDropdown() { + this.dropdownOpen = !this.dropdownOpen; + } + @action + async closeDropdown() { + this.dropdownOpen = false; + await paintCycleHappened(); + this.controller?.focus(); + } + @action async clickOutsideDropdown(event: InputEvent) { + const isClosedByToggleButton = this.dropdownButton?.contains( + event.target as Node, + ); + + if (!isClosedByToggleButton) { + await this.closeDropdown(); + } + } + + @action + alignActive(align: AlignmentOption) { + return this.currentAlignment === align; + } } From 11b2ff07409ca566652b1db4f94e9ac112711c9b Mon Sep 17 00:00:00 2001 From: Oscar Date: Thu, 20 Jun 2024 15:33:33 +0200 Subject: [PATCH 2/4] add changeset --- .changeset/cold-maps-agree.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cold-maps-agree.md diff --git a/.changeset/cold-maps-agree.md b/.changeset/cold-maps-agree.md new file mode 100644 index 000000000..6ac57e2ca --- /dev/null +++ b/.changeset/cold-maps-agree.md @@ -0,0 +1,5 @@ +--- +"@lblod/ember-rdfa-editor": minor +--- + +Convert horizontal alignment menu into icons From 2246377b389b9ecc677ce102246fcef99d94bbd0 Mon Sep 17 00:00:00 2001 From: abeforgit Date: Thu, 4 Jul 2024 11:06:19 +0200 Subject: [PATCH 3/4] fix: make whole button clickable --- addon/components/plugins/alignment/alignment-menu.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/addon/components/plugins/alignment/alignment-menu.ts b/addon/components/plugins/alignment/alignment-menu.ts index b357d38ea..3c82f5814 100644 --- a/addon/components/plugins/alignment/alignment-menu.ts +++ b/addon/components/plugins/alignment/alignment-menu.ts @@ -36,16 +36,16 @@ type Args = { }; const icons: Record = { - left: ` + left: ` `, - right: ` + right: ` `, - center: ` + center: ` `, - justify: ` + justify: ` `, }; From 2078001d53030bbcdbf3d5782b2a5843ab5037fd Mon Sep 17 00:00:00 2001 From: abeforgit Date: Thu, 4 Jul 2024 11:16:10 +0200 Subject: [PATCH 4/4] fix: add title to each option --- addon/components/plugins/alignment/alignment-menu.hbs | 1 + 1 file changed, 1 insertion(+) diff --git a/addon/components/plugins/alignment/alignment-menu.hbs b/addon/components/plugins/alignment/alignment-menu.hbs index ed7e14668..6b3c711fa 100644 --- a/addon/components/plugins/alignment/alignment-menu.hbs +++ b/addon/components/plugins/alignment/alignment-menu.hbs @@ -34,6 +34,7 @@