diff --git a/ghost/admin/.lint-todo b/ghost/admin/.lint-todo index 8bc6eeff5f..e30997a622 100644 --- a/ghost/admin/.lint-todo +++ b/ghost/admin/.lint-todo @@ -562,3 +562,5 @@ add|ember-template-lint|require-input-label|10|12|10|12|8c3c0ea315ff4da828363989 add|ember-template-lint|no-action|465|46|465|46|f2f0f3f512f141fdd821333c873f5052813bb491|1677974400000|1688342400000|1693526400000|app/components/gh-portal-links.hbs add|ember-template-lint|no-action|271|58|271|58|5124558b018d5e90a3d203fd54c5e4ca8e9b0548|1680566400000|1690934400000|1696118400000|app/components/modal-portal-settings.hbs add|ember-template-lint|no-action|289|68|289|68|eaa96ff81a7c4b4743ca191655c017bd90549e96|1680566400000|1690934400000|1696118400000|app/components/modal-portal-settings.hbs +add|ember-template-lint|no-invalid-interactive|1|103|1|103|f5a46b2538fbf79a40f2683ff1151ca60e0fa0ca|1680652800000|1691020800000|1696204800000|app/components/gh-context-menu.hbs +add|ember-template-lint|no-invalid-interactive|5|53|5|53|9647ef6afba919b2af04fe551b0fdf0fb63be849|1680652800000|1691020800000|1696204800000|app/components/gh-context-menu.hbs diff --git a/ghost/admin/app/components/gh-context-menu.hbs b/ghost/admin/app/components/gh-context-menu.hbs new file mode 100644 index 0000000000..cc3ce661fb --- /dev/null +++ b/ghost/admin/app/components/gh-context-menu.hbs @@ -0,0 +1,6 @@ +
diff --git a/ghost/admin/app/components/gh-context-menu.js b/ghost/admin/app/components/gh-context-menu.js new file mode 100644 index 0000000000..e608ec7c42 --- /dev/null +++ b/ghost/admin/app/components/gh-context-menu.js @@ -0,0 +1,77 @@ +import Component from '@glimmer/component'; +import SelectionList from '../utils/selection-list'; +import {action} from '@ember/object'; +import {inject as service} from '@ember/service'; +import {tracked} from '@glimmer/tracking'; + +export default class GhContextMenu extends Component { + @service dropdown; + + @tracked isOpen = false; + @tracked left = 0; + @tracked top = 0; + @tracked selectionList = new SelectionList(); + + get name() { + return this.args.name; + } + + get style() { + return `left: ${this.left}px; top: ${this.top}px;`; + } + + @action + setup() { + const dropdownService = this.dropdown; + dropdownService.on('close', this, this.close); + dropdownService.on('toggle', this, this.toggle); + } + + willDestroy() { + super.willDestroy(...arguments); + const dropdownService = this.dropdown; + dropdownService.off('close', this, this.close); + dropdownService.off('toggle', this, this.toggle); + } + + @action + open() { + this.isOpen = true; + } + + @action + close() { + this.isOpen = false; + } + + @action + onContextMenuOutside(event) { + this.close(); + event.preventDefault(); + event.stopPropagation(); + } + + // Called by the dropdown service when the context menu should open + @action + toggle(options) { + const targetDropdownName = options.target; + if (this.name === targetDropdownName) { + if (options.left !== undefined) { + this.left = options.left; + this.top = options.top; + } + if (options.selectionList) { + this.selectionList = options.selectionList; + } + + this.open(); + } else if (this.isOpen) { + this.close(); + } + } + + @action + stopClicks(event) { + event.stopPropagation(); + } +} diff --git a/ghost/admin/app/components/multi-list/item.hbs b/ghost/admin/app/components/multi-list/item.hbs new file mode 100644 index 0000000000..2298138bd9 --- /dev/null +++ b/ghost/admin/app/components/multi-list/item.hbs @@ -0,0 +1,3 @@ +