From 4329f93a9347f65c082f6656a7aa3b70f42112df Mon Sep 17 00:00:00 2001 From: Oscar Date: Thu, 20 Jun 2024 15:32:49 +0200 Subject: [PATCH 1/6] 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/6] 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 1335dcfc856ac8d573912847de466304e3cb6605 Mon Sep 17 00:00:00 2001 From: Deniss Kozickis Date: Tue, 25 Jun 2024 18:19:36 +0300 Subject: [PATCH 3/6] Fix behaviour of responsive toolbar --- .changeset/spotty-moose-return.md | 5 +++++ app/styles/ember-rdfa-editor/_c-toolbar.scss | 11 ++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 .changeset/spotty-moose-return.md diff --git a/.changeset/spotty-moose-return.md b/.changeset/spotty-moose-return.md new file mode 100644 index 000000000..e8b1d2e23 --- /dev/null +++ b/.changeset/spotty-moose-return.md @@ -0,0 +1,5 @@ +--- +"@lblod/ember-rdfa-editor": patch +--- + +Fix behaviour of responsive toolbar diff --git a/app/styles/ember-rdfa-editor/_c-toolbar.scss b/app/styles/ember-rdfa-editor/_c-toolbar.scss index 7296ee991..fdfe3436d 100644 --- a/app/styles/ember-rdfa-editor/_c-toolbar.scss +++ b/app/styles/ember-rdfa-editor/_c-toolbar.scss @@ -47,7 +47,6 @@ $say-toolbar-height: 44px !default; .say-toolbar__side-dropdown { display: flex; justify-content: flex-start; - flex-wrap: wrap; min-height: $say-toolbar-height; // Fixes height bug on Safari border-radius: $au-unit-tiny; padding: 0.1rem $au-unit-tiny 0; // Visually center the text in the pill @@ -55,6 +54,14 @@ $say-toolbar-height: 44px !default; z-index: 1; } +.say-toolbar__main-dropdown { + flex-wrap: wrap; +} + +.say-toolbar__side-dropdown { + flex-direction: column; +} + .say-toolbar img { max-width: inherit; height: 100%; @@ -75,6 +82,7 @@ $say-toolbar-height: 44px !default; padding-left: 0.1rem; padding-right: 0.1rem; flex-shrink: 0; + flex-grow: 1; align-items: center; } @@ -164,6 +172,7 @@ $say-toolbar-height: 44px !default; .say-rdfa-toggle { padding: 0 1.2rem; + white-space: nowrap; } .say-toolbar__highlight-button { From 2246377b389b9ecc677ce102246fcef99d94bbd0 Mon Sep 17 00:00:00 2001 From: abeforgit Date: Thu, 4 Jul 2024 11:06:19 +0200 Subject: [PATCH 4/6] 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 5/6] 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 @@