Merge pull request #1201 from lblod/GN-4854

Convert horizontal alignment menu into icons
lblod · Jul 4, 2024 · 03d0d06 · 03d0d06
2 parents 60751e4 + 0e4c3a2
commit 03d0d06
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 20 deletions.
diff --git a/.changeset/cold-maps-agree.md b/.changeset/cold-maps-agree.md
@@ -0,0 +1,5 @@
+---
+"@lblod/ember-rdfa-editor": minor
+---
+
+Convert horizontal alignment menu into icons
diff --git a/addon/components/plugins/alignment/alignment-menu.hbs b/addon/components/plugins/alignment/alignment-menu.hbs
@@ -1,19 +1,50 @@
 {{! @glint-nocheck: not typesafe yet }}
-<Toolbar::Dropdown
-  @label={{this.labelFor this.currentAlignment}}
-  @icon={{this.NavDownIcon}}
-  @iconSize='small'
-  @controller={{@controller}}
-  @disabled={{not this.enabled}}
-  title={{t 'ember-rdfa-editor.alignment.label'}}
-  as |Menu|
->
-  {{#each this.options as |option|}}
-    <Menu.Item
-      @menuAction={{fn this.setAlignment option}}
-      title={{this.labelFor option}}
+<div class='say-dropdown options'>
+  <this.Velcro
+    @placement='bottom'
+    @offsetOptions={{hash mainAxis=6}}
+    as |velcro|
+  >
+    <button
+      type='button'
+      class='say-dropdown__button {{if this.dropdownOpen "is-active" ""}}'
+      title={{t 'ember-rdfa-editor.alignment.label'}}
+      disabled={{not this.enabled}}
+      {{on 'click' this.toggleDropdown}}
+      {{velcro.hook}}
+      {{this.setupDropdownButton}}
     >
-      {{this.labelFor option}}
-    </Menu.Item>
-  {{/each}}
-</Toolbar::Dropdown>
+      {{this.htmlSafe this.currentAlignIcon}}
+      <AuIcon @icon={{this.NavDownIcon}} @ariaHidden={{true}} @size='large' />
+    </button>
+    {{#if this.dropdownOpen}}
+      <div
+        class='say-dropdown__menu is-visible'
+        role='menu'
+        tabindex='-1'
+        {{velcro.loop}}
+        {{focus-trap
+          shouldSelfFocus=true
+          focusTrapOptions=(hash
+            clickOutsideDeactivates=this.clickOutsideDropdown
+          )
+        }}
+      >
+        {{#each this.alignmentStyles as |style|}}
+          <button
+            role='menuitem'
+            type='button'
+            title={{style.label}}
+            {{on 'click' (fn this.setAlignment style.value)}}
+          >
+            {{#if (this.alignActive style.value)}}
+              <AuIcon @icon={{this.CheckIcon}} @ariaHidden={{true}} />
+            {{/if}}
+            {{this.htmlSafe style.icon}}
+            {{style.label}}
+          </button>
+        {{/each}}
+      </div>
+    {{/if}}
+  </this.Velcro>
+</div>
diff --git 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<AlignmentOption, string> = {
+  left: `<svg class="local-icon" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" role="img">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M1.33333 2.71594H13.3333V4.04928H1.33333V2.71594ZM1.33333 5.38261H10.6667V6.71594H1.33333V5.38261ZM14.6667 8.04928H1.33333V9.38261H14.6667V8.04928ZM1.33333 10.7159H10.6667V12.0493H1.33333V10.7159ZM13.3333 13.3826H1.33333V14.7159H13.3333V13.3826Z" fill="currentColor"/>
+        </svg>`,
+  right: `<svg class="local-icon" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M2.66666 2.60394H14.6667V3.93728H2.66666V2.60394ZM5.33333 5.27061H14.6667V6.60394H5.33333V5.27061ZM14.6667 7.93728H1.33333V9.27061H14.6667V7.93728ZM5.33333 10.6039H14.6667V11.9373H5.33333V10.6039ZM14.6667 13.2706H2.66666V14.6039H14.6667V13.2706Z" fill="currentColor"/>
+          </svg>`,
+  center: `<svg class="local-icon" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M1.99999 2H14V3.33333H1.99999V2ZM3.33333 4.66667H12.6667V6H3.33333V4.66667ZM14.6667 7.33333H1.33333V8.66667H14.6667V7.33333ZM3.33333 10H12.6667V11.3333H3.33333V10ZM14 12.6667H1.99999V14H14V12.6667Z" fill="currentColor"/>
+          </svg>`,
+  justify: `<svg class="local-icon" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M1.33333 2.88794H14.6667V4.22127H1.33333V2.88794ZM1.33333 5.55461H14.6667V6.88794H1.33333V5.55461ZM14.6667 8.22127H1.33333V9.55461H14.6667V8.22127ZM1.33333 10.8879H14.6667V12.2213H1.33333V10.8879ZM10.6667 13.5546H1.33333V14.8879H10.6667V13.5546Z" fill="currentColor"/>
+          </svg>`,
+};
+
 export default class AlignmentMenu extends Component<Args> {
   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<Args> {
     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<Args> {
     }
   }
 
+  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;
+  }
 }