Always move formatting help to the three-dot-menu

Signed-off-by: Jonas <jonas@freesources.org>
nextcloud · Oct 4, 2022 · 7b670e1 · 7b670e1
1 parent 8f9db83
commit 7b670e1
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/src/components/Menu/ActionList.vue b/src/components/Menu/ActionList.vue
@@ -41,22 +41,36 @@
 			:action-entry="child"
 			v-on="$listeners"
 			@trigged="onTrigger" />
+		<NcActionButton close-after-click
+			data-text-action-entry="formatting-help"
+			@click="$emit('call:help')">
+			<template #icon>
+				<Help />
+			</template>
+			{{ t('text', 'Formatting help') }}
+		</NcActionButton>
 		<slot name="lastAction" />
 	</NcActions>
 </template>
 
 <script>
-import { NcActions } from '@nextcloud/vue'
+import { NcActions, NcActionButton } from '@nextcloud/vue'
 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'
 import { useMenuIDMixin } from './MenuBar.provider.js'
+import { Help } from '../icons.js'
 
 export default {
 	name: 'ActionList',
-	components: { NcActions, ActionSingle },
+	components: {
+		NcActions,
+		NcActionButton,
+		ActionSingle,
+		Help,
+	},
 	extends: BaseActionEntry,
 	mixins: [useStore, useOutlineStateMixin, useMenuIDMixin],
 	computed: {

diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
@@ -42,13 +42,13 @@
 			:aria-label="t('text', 'Editor actions')">
 			<ActionEntry v-for="actionEntry of visibleEntries"
 				v-bind="{ actionEntry }"
-				:key="`text-action--${actionEntry.key}`"
-				@call:help="showHelp" />
+				:key="`text-action--${actionEntry.key}`" />
 			<ActionList key="text-action--remain"
 				:action-entry="hiddenEntries"
 				@update:open="refreshWordCount"
 				@call:help="showHelp">
 				<template #lastAction>
+					<NcActionSeparator />
 					<NcActionText data-text-action-entry="character-count">
 						<template #icon>
 							<AlphabeticalVariant />
@@ -67,7 +67,7 @@
 </template>
 
 <script>
-import { NcActionText } from '@nextcloud/vue'
+import { NcActionSeparator, NcActionText } from '@nextcloud/vue'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translatePlural as n } from '@nextcloud/l10n'
 import debounce from 'debounce'
@@ -91,6 +91,7 @@ export default {
 		ActionList,
 		AlphabeticalVariant,
 		HelpModal,
+		NcActionSeparator,
 		NcActionText,
 	},
 	mixins: [

diff --git a/src/components/Menu/entries.js b/src/components/Menu/entries.js
@@ -44,7 +44,6 @@ import {
 	CodeTags,
 	Table,
 	Emoticon,
-	Help,
 	Images,
 } from '../icons.js'
 import EmojiPickerAction from './EmojiPickerAction.vue'
@@ -325,11 +324,4 @@ export default [
 		component: ActionAttachmentUpload,
 		priority: 2,
 	},
-	{
-		key: 'formatting-help',
-		label: t('text', 'Formatting help'),
-		icon: Help,
-		click: (view) => view.$emit('call:help'),
-		priority: 17,
-	},
 ]