diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2b7a45a07..1ee9b9ae9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,15 @@
# @lblod/ember-rdfa-editor
+## 9.14.0
+
+### Minor Changes
+
+- [#1201](https://github.com/lblod/ember-rdfa-editor/pull/1201) [`11b2ff0`](https://github.com/lblod/ember-rdfa-editor/commit/11b2ff07409ca566652b1db4f94e9ac112711c9b) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Convert horizontal alignment menu into icons
+
+### Patch Changes
+
+- [#1203](https://github.com/lblod/ember-rdfa-editor/pull/1203) [`1335dcf`](https://github.com/lblod/ember-rdfa-editor/commit/1335dcfc856ac8d573912847de466304e3cb6605) Thanks [@dkozickis](https://github.com/dkozickis)! - Fix behaviour of responsive toolbar
+
## 9.13.0
### Minor Changes
diff --git a/addon/components/plugins/alignment/alignment-menu.hbs b/addon/components/plugins/alignment/alignment-menu.hbs
index 844c66d44..6b3c711fa 100644
--- 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 }}
-
- {{#each this.options as |option|}}
-
+
+
- {{/each}}
-
\ No newline at end of file
+ {{this.htmlSafe this.currentAlignIcon}}
+
+
+ {{#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..3c82f5814 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;
+ }
}
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 {
diff --git a/package.json b/package.json
index ecb886453..5ed48f46d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@lblod/ember-rdfa-editor",
- "version": "9.13.0",
+ "version": "9.14.0",
"description": "Ember addon wrapping an RDFa editor with a public API",
"keywords": [
"ember-addon"