Merge pull request #2294 from nextcloud/fix/menubar

fix: keep menubar in one line - prioritize entries

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,16 +91,16 @@
 			</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"
 						:close-after-click="true"
 						@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 => {
@@ -266,9 +255,14 @@ export default {
 		iconCount() {
 			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
+			const menuBarWidth = this.$refs.menubar && this.$refs.menubar.clientWidth > 200
+				? this.$refs.menubar.clientWidth
+				: 200
+			// leave some buffer - this is necessary so the bar does not wrap during resizing
+			const spaceToFill = menuBarWidth - 4
+			const slots = Math.floor(spaceToFill / 44)
+			// Leave one slot empty for the three dot menu
+			return slots - 1
 		},
 		imagePath() {
 			return this.lastImagePath
@@ -303,7 +297,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 +313,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)

src/mixins/menubar.js

@@ -27,13 +27,15 @@ export default [
 		keyModifiers: ['ctrl'],
 		class: 'icon-undo',
 		action: (command) => command.undo(),
+		priority: 5,
 	},
 	{
 		label: t('text', 'Redo'),
 		keyChar: 'y',
 		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: 6,
 	},
 	{
 		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: 3,
 	},
 	{
 		label: t('text', 'Code block'),
@@ -212,6 +224,7 @@ export default [
 		action: (command) => {
 			return command.toggleCodeBlock()
 		},
+		priority: 13,
 	},
 	{
 		label: t('text', 'Table'),
@@ -220,12 +233,25 @@ export default [
 		action: (command) => {
 			return command.insertTable()
 		},
+		priority: 16,
 	},
 	{
 		label: t('text', 'Emoji picker'),
 		class: 'icon-emoji',
 		action: (command, emojiObject) => {
 			return command.emoji(emojiObject)
 		},
+		priority: 4,
+	},
+	{
+		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,
 	},
 ]