diff options
author | Max <max@nextcloud.com> | 2022-04-13 12:48:21 +0300 |
---|---|---|
committer | backportbot[bot] <backportbot[bot]@users.noreply.github.com> | 2022-04-19 19:52:15 +0300 |
commit | a10cc4ac299a0dc6bfa95a7e0db5e868a53528a9 (patch) | |
tree | 92caa967330bab7073bc0fa4695e071ba637d80d /src | |
parent | e9592351a41e6504c7c7d16095865373e7f6afdf (diff) |
fix: keep menubar in one line - prioritize entries
Menubar entries with submenus cannot be moved to the more-button.
Prioritize them when picking the icons for the toolbar.
If they still do not fit - do not add them to the more button either
they do not work there.
This makes sure that the menubar fits in one line and does not overflow.
Still prioritizing `undo` and `bold` over `emoji` and `callout`.
The former ones are need fairly frequently while the latter not so often.
In addition mobile phones have an emoji picker in their text entry.
Signed-off-by: Max <max@nextcloud.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/MenuBar.vue | 36 | ||||
-rw-r--r-- | src/mixins/menubar.js | 26 |
2 files changed, 40 insertions, 22 deletions
diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue index 8879b8eea..ea23b1739 100644 --- a/src/components/MenuBar.vue +++ b/src/components/MenuBar.vue @@ -30,8 +30,9 @@ :multiple="true" @change="onImageUploadFilePicked"> <div v-if="isRichEditor" ref="menubar" class="menubar-icons"> - <template v-for="(icon, $index) in allIcons"> + <template v-for="(icon) in icons"> <EmojiPicker v-if="icon.class === 'icon-emoji'" + v-show="icon.priority <= iconCount" :key="icon.label" class="menuitem-emoji" @selectData="emojiObject => addEmoji(icon, emojiObject)"> @@ -68,14 +69,14 @@ </ActionButton> </Actions> <button v-else-if="icon.class" - v-show="$index < iconCount" + v-show="icon.priority <= iconCount" :key="icon.label" v-tooltip="getLabelAndKeys(icon)" :class="getIconClasses(icon)" :disabled="disabled(icon)" @click="clickIcon(icon)" /> <template v-else> - <div v-show="$index < iconCount || !icon.class" + <div v-show="icon.priority <= iconCount" :key="icon.label" v-click-outside="() => hideChildMenu(icon)" class="submenu"> @@ -90,8 +91,8 @@ </template> <Actions @open="toggleChildMenu({ label: 'Remaining Actions' })" @close="toggleChildMenu({ label: 'Remaining Actions' })"> - <template v-for="(icon, $index) in allIcons"> - <ActionButton v-if="icon.class && isHiddenInMenu($index) && !(icon.class === 'icon-emoji')" + <template v-for="(icon) in icons"> + <ActionButton v-if="icon.class && isHiddenInMenu(icon) && !hasSubmenu(icon)" :key="icon.class" v-tooltip="getKeys(icon)" :icon="icon.class" @@ -99,7 +100,7 @@ @click="clickIcon(icon)"> {{ icon.label }} </ActionButton> - <!--<template v-else-if="!icon.class && isHiddenInMenu($index)"> + <!--<template v-else-if="!icon.class && isHiddenInMenu(icon)"> <ActionButton v-for="childIcon in icon.children" :key="childIcon.class" :icon="childIcon.class" @@ -193,7 +194,7 @@ export default { }, computed: { isHiddenInMenu() { - return ($index) => $index - this.iconCount >= 0 + return (icon) => icon.priority > this.iconCount }, getIconClasses() { return (icon) => { @@ -226,18 +227,6 @@ export default { return Object.prototype.hasOwnProperty.call(this.submenuVisibility, icon.label) ? this.submenuVisibility[icon.label] : false } }, - allIcons() { - return [...this.icons, { - label: t('text', 'Insert image'), - class: 'icon-image', - }, { - label: t('text', 'Formatting help'), - class: 'icon-help', - click: () => { - this.$emit('show-help') - }, - }] - }, childPopoverMenu() { return (icons, parent) => { return icons.map(icon => { @@ -267,8 +256,7 @@ export default { this.forceRecompute // eslint-disable-line this.windowWidth // eslint-disable-line const menuBarWidth = this.$refs.menubar && this.$refs.menubar.clientWidth > 200 ? this.$refs.menubar.clientWidth : 200 - const iconCount = Math.max((Math.floor(menuBarWidth / 44) - 2), 0) - return iconCount - 1 + return Math.max((Math.floor(menuBarWidth / 44) - 1), 0) }, imagePath() { return this.lastImagePath @@ -303,7 +291,7 @@ export default { }, clickIcon(icon) { if (icon.click) { - return icon.click() + return icon.click(this) } // Some actions run themselves. // others still need to have .run() called upon them. @@ -319,6 +307,10 @@ export default { hideChildMenu({ label }) { this.$set(this.submenuVisibility, label, false) }, + hasSubmenu(icon) { + return icon.class === 'icon-emoji' + || icon.children + }, toggleChildMenu({ label }) { const lastValue = Object.prototype.hasOwnProperty.call(this.submenuVisibility, label) ? this.submenuVisibility[label] : false this.$set(this.submenuVisibility, label, !lastValue) diff --git a/src/mixins/menubar.js b/src/mixins/menubar.js index 44a52ebf9..936099499 100644 --- a/src/mixins/menubar.js +++ b/src/mixins/menubar.js @@ -27,6 +27,7 @@ export default [ keyModifiers: ['ctrl'], class: 'icon-undo', action: (command) => command.undo(), + priority: 3, }, { label: t('text', 'Redo'), @@ -34,6 +35,7 @@ export default [ keyModifiers: ['ctrl'], class: 'icon-redo', action: (command) => command.redo(), + priority: 11, }, { label: t('text', 'Bold'), @@ -44,6 +46,7 @@ export default [ action: (command) => { return command.toggleBold() }, + priority: 4, }, { label: t('text', 'Italic'), @@ -54,6 +57,7 @@ export default [ action: (command) => { return command.toggleItalic() }, + priority: 7, }, { label: t('text', 'Underline'), @@ -64,6 +68,7 @@ export default [ action: (command) => { return command.toggleUnderline() }, + priority: 14, }, { label: t('text', 'Strikethrough'), @@ -74,6 +79,7 @@ export default [ action: (command) => { return command.toggleStrike() }, + priority: 15, }, { label: t('text', 'Headings'), @@ -130,6 +136,7 @@ export default [ }, }, ], + priority: 1, }, { label: t('text', 'Unordered list'), @@ -140,6 +147,7 @@ export default [ action: (command) => { return command.toggleBulletList() }, + priority: 8, }, { label: t('text', 'Ordered list'), @@ -150,12 +158,14 @@ export default [ action: (command) => { return command.toggleOrderedList() }, + priority: 9, }, { label: t('text', 'ToDo list'), class: 'icon-tasklist', isActive: 'taskList', action: (command) => command.toggleTaskList(), + priority: 10, }, { label: t('text', 'Blockquote'), @@ -166,6 +176,7 @@ export default [ action: (command) => { return command.toggleBlockquote() }, + priority: 12, }, { label: t('text', 'Callouts'), @@ -204,6 +215,7 @@ export default [ }, }, ], + priority: 5, }, { label: t('text', 'Code block'), @@ -212,6 +224,7 @@ export default [ action: (command) => { return command.toggleCodeBlock() }, + priority: 13, }, { label: t('text', 'Table'), @@ -220,6 +233,7 @@ export default [ action: (command) => { return command.insertTable() }, + priority: 16, }, { label: t('text', 'Emoji picker'), @@ -227,5 +241,17 @@ export default [ action: (command, emojiObject) => { return command.emoji(emojiObject) }, + priority: 6, + }, + { + label: t('text', 'Insert image'), + class: 'icon-image', + priority: 2, + }, + { + label: t('text', 'Formatting help'), + class: 'icon-help', + click: (view) => view.$emit('show-help'), + priority: 17, }, ] |