diff options
author | Vinicius Reis <vinicius.reis@nextcloud.com> | 2022-08-09 23:11:12 +0300 |
---|---|---|
committer | Vinicius Reis <vinicius.reis@nextcloud.com> | 2022-08-17 17:31:01 +0300 |
commit | e197bc22dce63a39ac5c6b44bdeae0d55afe2689 (patch) | |
tree | 5d4e4ef63d079ddcf2b90fe975fc8e2f09655e72 /src/components/Menu | |
parent | 48b21b6e524c4aef78a1046e1f19a2bbd85837c4 (diff) |
🚧 (#107): Add outline view
Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>
Diffstat (limited to 'src/components/Menu')
-rw-r--r-- | src/components/Menu/ActionList.vue | 23 | ||||
-rw-r--r-- | src/components/Menu/ActionSingle.vue | 6 | ||||
-rw-r--r-- | src/components/Menu/BaseActionEntry.js | 11 | ||||
-rw-r--r-- | src/components/Menu/entries.js | 12 | ||||
-rw-r--r-- | src/components/Menu/utils.js | 1 |
5 files changed, 43 insertions, 10 deletions
diff --git a/src/components/Menu/ActionList.vue b/src/components/Menu/ActionList.vue index 42ac2e7de..2912a7289 100644 --- a/src/components/Menu/ActionList.vue +++ b/src/components/Menu/ActionList.vue @@ -32,7 +32,7 @@ <template #icon> <component :is="icon" :key="iconKey" /> </template> - <ActionSingle v-for="child in actionEntry.children" + <ActionSingle v-for="child in children" :key="`child-${child.key}`" is-item :action-entry="child" @@ -45,11 +45,14 @@ import Actions from '@nextcloud/vue/dist/Components/Actions' import { BaseActionEntry } from './BaseActionEntry.js' import ActionSingle from './ActionSingle.vue' import { getIsActive } from './utils.js' +import { useOutlineStateMixin } from '../Editor/Wrapper.provider.js' +import useStore from '../../mixins/store.js' export default { name: 'ActionList', components: { Actions, ActionSingle }, extends: BaseActionEntry, + mixins: [useStore, useOutlineStateMixin], computed: { currentChild() { const { @@ -79,6 +82,17 @@ export default { activeKey() { return this.currentChild?.key }, + children() { + return this.actionEntry.children.filter(({ visible }) => { + if (visible === undefined) { + return true + } + + return typeof visible === 'function' + ? visible(this) + : visible + }) + }, }, methods: { runAction() { @@ -86,11 +100,10 @@ export default { }, onTrigger(entry) { if (entry?.click) { - entry.click(this) - } else { - this.$editor.chain().focus().run() - this.$emit('trigged', entry) + return } + this.$editor.chain().focus().run() + this.$emit('trigged', entry) }, }, } diff --git a/src/components/Menu/ActionSingle.vue b/src/components/Menu/ActionSingle.vue index e6599c717..5663cab1e 100644 --- a/src/components/Menu/ActionSingle.vue +++ b/src/components/Menu/ActionSingle.vue @@ -47,6 +47,7 @@ export default { const state = { ...this.state, + ariaLabel: this.label, } state.class = { @@ -95,6 +96,7 @@ export default { isItem, runAction, tooltip, + label, } = this const { class: classes, ...attrs } = bindState @@ -110,11 +112,11 @@ export default { const children = [h(icon, { slot: 'icon' })] // do not use title if is a item of action list - const title = isItem ? undefined : actionEntry.label + const title = isItem ? undefined : label if (isItem) { // add label - children.push(actionEntry.label) + children.push(label) } return h(component, { diff --git a/src/components/Menu/BaseActionEntry.js b/src/components/Menu/BaseActionEntry.js index e675bd95b..5a862d74c 100644 --- a/src/components/Menu/BaseActionEntry.js +++ b/src/components/Menu/BaseActionEntry.js @@ -26,7 +26,9 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip' import debounce from 'debounce' import { useEditorMixin, useIsMobileMixin } from '../Editor.provider.js' +import { useOutlineActions, useOutlineStateMixin } from '../Editor/Wrapper.provider.js' import { getActionState, getKeys, getKeyshortcuts } from './utils.js' +import useStore from '../../mixins/store.js' import './ActionEntry.scss' @@ -37,7 +39,7 @@ const BaseActionEntry = { directives: { Tooltip, }, - mixins: [useEditorMixin, useIsMobileMixin], + mixins: [useEditorMixin, useIsMobileMixin, useStore, useOutlineActions, useOutlineStateMixin], props: { actionEntry: { type: Object, @@ -50,6 +52,13 @@ const BaseActionEntry = { } }, computed: { + label() { + const { label } = this.actionEntry + + return typeof label === 'function' + ? label(this) + : label + }, icon() { return this.actionEntry.icon }, diff --git a/src/components/Menu/entries.js b/src/components/Menu/entries.js index e81582ca7..1957dca08 100644 --- a/src/components/Menu/entries.js +++ b/src/components/Menu/entries.js @@ -124,7 +124,6 @@ export default [ label: t('text', 'Headings'), keyChar: '1…6', keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift], - visible: false, icon: FormatHeader1, isActive: 'heading', children: [ @@ -182,6 +181,17 @@ export default [ return command.toggleHeading({ level: 6 }) }, }, + { + key: 'outline', + icon: FormatListBulleted, + visible: ({ $outlineState }) => $outlineState.enable, + click: ({ $outlineActions }) => $outlineActions.toggle(), + label: ({ $outlineState }) => { + return $outlineState.visible + ? t('text', 'Hide Outline') + : t('text', 'Show Outline') + }, + }, ], priority: 1, }, diff --git a/src/components/Menu/utils.js b/src/components/Menu/utils.js index 5ac04c7d5..4410aca68 100644 --- a/src/components/Menu/utils.js +++ b/src/components/Menu/utils.js @@ -72,7 +72,6 @@ const getActionState = (actionEntry, $editor) => { const active = getIsActive(actionEntry, $editor) return { - ariaLabel: actionEntry.label, disabled: isDisabled(actionEntry, $editor), class: getEntryClasses(actionEntry, active), active, |