Merge pull request #5193 from nextcloud/fix/5080-keep-menubar-in-work…

…space Fix/5080 keep menubar in workspace
nextcloud · Jan 4, 2024 · 7e23916 · 7e23916
2 parents cc64aeb + 9b53bc6
commit 7e23916
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 47 deletions.
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
@@ -57,7 +57,7 @@
 				<template v-else>
 					<MenuBar v-if="renderMenus"
 						ref="menubar"
-						:autohide="autohide"
+						:is-hidden="hideMenu"
 						:loaded.sync="menubarLoaded">
 						<Status :document="document"
 							:dirty="dirty"
@@ -213,7 +213,7 @@ export default {
 			type: String,
 			default: null,
 		},
-		autohide: {
+		hideMenu: {
 			type: Boolean,
 			default: false,
 		},

diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
@@ -29,8 +29,7 @@
 		:aria-label="t('text', 'Editor actions')"
 		:class="{
 			'text-menubar--ready': isReady,
-			'text-menubar--show': isVisible,
-			'text-menubar--autohide': autohide,
+			'text-menubar--hide': isHidden,
 			'text-menubar--is-workspace': $isRichWorkspace
 		}">
 		<HelpModal v-if="displayHelp" @close="hideHelp" />
@@ -84,7 +83,6 @@
 <script>
 import { NcActionSeparator, NcActionButton } from '@nextcloud/vue'
 import { loadState } from '@nextcloud/initial-state'
-import debounce from 'debounce'
 import { useResizeObserver } from '@vueuse/core'
 
 import ActionFormattingHelp from './ActionFormattingHelp.vue'
@@ -136,7 +134,7 @@ export default {
 		return val
 	},
 	props: {
-		autohide: {
+		isHidden: {
 			type: Boolean,
 			default: false,
 		},
@@ -148,7 +146,6 @@ export default {
 			displayHelp: false,
 			displayTranslate: false,
 			isReady: false,
-			isVisible: this.$editor.isFocused,
 			canTranslate: loadState('text', 'translation_languages', []).length > 0,
 			resize: null,
 			iconsLimit: 4,
@@ -178,26 +175,13 @@ export default {
 	mounted() {
 		this.resize = useResizeObserver(this.$refs.menubar, this.onResize)
 
-		this.$onFocusChange = () => {
-			this.isVisible = this.$editor.isFocused
-		}
-		this.$onBlurChange = debounce(() => {
-			this.isVisible = this.$editor.isFocused
-		}, 3000) // 3s
-
-		this.$editor.on('focus', this.$onFocusChange)
-		this.$editor.on('blur', this.$onBlurChange)
-
 		this.$nextTick(() => {
 			this.isReady = true
 			this.$emit('update:loaded', true)
 		})
 	},
 	beforeDestroy() {
 		this.resize?.stop()
-
-		this.$editor.off('focus', this.$onFocusChange)
-		this.$editor.off('blur', this.$onBlurChange)
 	},
 	methods: {
 		onResize(entries) {
@@ -274,19 +258,15 @@ export default {
 		justify-content: flex-end;
 		align-items: center;
 
-		&.text-menubar--ready:not(.text-menubar--autohide) {
+		&.text-menubar--ready:not(.text-menubar--hide) {
 			visibility: visible;
 			animation-name: fadeInDown;
 			animation-duration: 0.3s;
 		}
 
-		&.text-menubar--autohide {
+		&.text-menubar--hide {
 			opacity: 0;
 			transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s;
-			&.text-menubar--show {
-				visibility: visible;
-				opacity: 1;
-			}
 		}
 		.text-menubar__entries {
 			display: flex;

diff --git a/src/views/RichWorkspace.vue b/src/views/RichWorkspace.vue
@@ -33,12 +33,11 @@
 			:share-token="shareToken"
 			:mime="file.mimetype"
 			:autofocus="autofocus"
-			:autohide="autohide"
+			:hide-menu="hideMenu"
 			active
 			rich-workspace
 			@ready="ready=true"
 			@focus="onFocus"
-			@blur="onBlur"
 			@error="reset" />
 	</div>
 </template>
@@ -88,7 +87,7 @@ export default {
 			loaded: false,
 			ready: false,
 			autofocus: false,
-			autohide: true,
+			hideMenu: true,
 			darkTheme: OCA.Accessibility && OCA.Accessibility.theme === 'dark',
 			enabled: OCA.Text.RichWorkspaceEnabled,
 		}
@@ -135,11 +134,9 @@ export default {
 		this.unlistenKeydownEvents()
 	},
 	methods: {
-		onBlur() {
-			this.listenKeydownEvents()
-		},
 		onFocus() {
 			this.focus = true
+			this.hideMenu = false
 			this.unlistenKeydownEvents()
 		},
 		reset() {
@@ -198,25 +195,12 @@ export default {
 			window.addEventListener('keydown', this.onKeydown)
 		},
 		unlistenKeydownEvents() {
-			clearInterval(this.$_timeoutAutohide)
-
 			window.removeEventListener('keydown', this.onKeydown)
 		},
-		onTimeoutAutohide() {
-			this.autohide = true
-		},
 		onKeydown(e) {
-			if (e.key !== 'Tab') {
-				return
+			if (e.key === 'Tab') {
+				this.hideMenu = false
 			}
-
-			// remove previous timeout
-			clearInterval(this.$_timeoutAutohide)
-
-			this.autohide = false
-
-			// schedule to normal behaviour
-			this.$_timeoutAutohide = setTimeout(this.onTimeoutAutohide, 7000) // 7s
 		},
 		onFileCreated(node) {
 			if (SUPPORTED_STATIC_FILENAMES.includes(node.basename)) {