Merge pull request #5174 from nextcloud/feature/switch-to-native-tool…

…tips feat: switch to native browser tooltips
nextcloud · Jan 4, 2024 · 2da87be · 2da87be
2 parents cfa46dd + 1c24ead
commit 2da87be
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 46 deletions.
diff --git a/src/components/Editor/GuestNameDialog.vue b/src/components/Editor/GuestNameDialog.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<form v-tooltip="t('text', 'Enter your name so other people can see who is editing')" class="guest-name-dialog" @submit.prevent="setGuestName()">
+	<form :title="t('text', 'Enter your name so other people can see who is editing')" class="guest-name-dialog" @submit.prevent="setGuestName()">
 		<label><AvatarWrapper :session="session" :size="32" /></label>
 		<input v-model="guestName"
 			type="text"
@@ -35,7 +35,6 @@
 </template>
 
 <script>
-import { Tooltip } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import AvatarWrapper from './AvatarWrapper.vue'
 import { useSyncServiceMixin } from '../Editor.provider.js'
@@ -45,9 +44,6 @@ export default {
 	components: {
 		AvatarWrapper,
 	},
-	directives: {
-		tooltip: Tooltip,
-	},
 	mixins: [
 		useSyncServiceMixin,
 	],

diff --git a/src/components/Editor/SessionList.vue b/src/components/Editor/SessionList.vue
@@ -22,17 +22,17 @@
 
 <template>
 	<NcPopover class="session-list" placement="bottom">
-		<button slot="trigger"
-			v-tooltip.bottom="label"
-			:title="label"
-			:aria-label="label"
-			class="avatar-list">
-			<div class="avatardiv icon-group" />
-			<AvatarWrapper v-for="session in sessionsVisible"
-				:key="session.id"
-				:session="session"
-				:size="40" />
-		</button>
+		<div slot="trigger">
+			<button :title="label"
+				:aria-label="label"
+				class="avatar-list">
+				<div class="avatardiv icon-group" />
+				<AvatarWrapper v-for="session in sessionsVisible"
+					:key="session.id"
+					:session="session"
+					:size="40" />
+			</button>
+		</div>
 		<template #default>
 			<div class="session-menu">
 				<slot name="lastSaved" />
@@ -64,7 +64,7 @@
 </template>
 
 <script>
-import { NcPopover, Tooltip } from '@nextcloud/vue'
+import { NcPopover } from '@nextcloud/vue'
 import AvatarWrapper from './AvatarWrapper.vue'
 import { mapActions, mapState } from 'vuex'
 import store from '../../mixins/store.js'
@@ -76,9 +76,6 @@ export default {
 		AvatarWrapper,
 		NcPopover,
 	},
-	directives: {
-		tooltip: Tooltip,
-	},
 	mixins: [store],
 	props: {
 		sessions: {

diff --git a/src/components/Editor/Status.vue b/src/components/Editor/Status.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div class="text-editor__session-list">
-		<div v-tooltip="lastSavedStatusTooltip" class="save-status" :class="saveStatusClass">
+		<div :title="lastSavedStatusTooltip" class="save-status" :class="saveStatusClass">
 			<NcButton type="tertiary"
 				:aria-label="t('text', 'Save document')"
 				@click="onClickSave">
@@ -45,7 +45,7 @@
 
 import { ERROR_TYPE } from '../../services/SyncService.js'
 import moment from '@nextcloud/moment'
-import { NcButton, NcSavingIndicatorIcon, Tooltip } from '@nextcloud/vue'
+import { NcButton, NcSavingIndicatorIcon } from '@nextcloud/vue'
 import {
 	useIsMobileMixin,
 	useIsPublicMixin,
@@ -63,10 +63,6 @@ export default {
 		GuestNameDialog: () => import(/* webpackChunkName: "editor-guest" */'./GuestNameDialog.vue'),
 	},
 
-	directives: {
-		Tooltip,
-	},
-
 	mixins: [
 		useIsMobileMixin,
 		useIsPublicMixin,
@@ -117,7 +113,7 @@ export default {
 			if (this.dirty || this.hasUnsavedChanges) {
 				message += ' - ' + t('text', 'Unsaved changes')
 			}
-			return { content: message, placement: 'bottom' }
+			return message
 		},
 
 		hasUnsavedChanges() {

diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
@@ -179,17 +179,14 @@
 </template>
 
 <script>
-import { NcModal, Tooltip } from '@nextcloud/vue'
+import { NcModal } from '@nextcloud/vue'
 import { isMobilePlatform } from '../helpers/platform.js'
 
 export default {
 	name: 'HelpModal',
 	components: {
 		NcModal,
 	},
-	directives: {
-		Tooltip,
-	},
 	data() {
 		return {
 			formatted: {

diff --git a/src/components/Menu/ActionAttachmentUpload.vue b/src/components/Menu/ActionAttachmentUpload.vue
@@ -23,6 +23,7 @@
 	<NcActions class="entry-action entry-action__image-upload"
 		:data-text-action-entry="actionEntry.key"
 		:name="actionEntry.label"
+		:title="actionEntry.label"
 		:aria-label="actionEntry.label"
 		:container="menuIDSelector"
 		role="menu"

diff --git a/src/components/Menu/ActionInsertLink.vue b/src/components/Menu/ActionInsertLink.vue
@@ -20,6 +20,7 @@
 <template>
 	<NcActions class="entry-action entry-action__insert-link"
 		aria-haspopup
+		:title="actionEntry.label"
 		:aria-label="actionEntry.label"
 		:class="activeClass"
 		:container="menuIDSelector"

diff --git a/src/components/Menu/ActionList.vue b/src/components/Menu/ActionList.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<NcActions v-tooltip="tooltip"
+	<NcActions :title="tooltip"
 		class="entry-list-action entry-action"
 		role="menu"
 		v-bind="state"

diff --git a/src/components/Menu/BaseActionEntry.js b/src/components/Menu/BaseActionEntry.js
@@ -22,7 +22,6 @@
 
 /* eslint-disable jsdoc/valid-types */
 
-import { Tooltip } from '@nextcloud/vue'
 import debounce from 'debounce'
 
 import { useEditorMixin, useIsMobileMixin } from '../Editor.provider.js'
@@ -36,9 +35,6 @@ import './ActionEntry.scss'
  * @type {import("vue").ComponentOptions} BaseActionEntry
  */
 const BaseActionEntry = {
-	directives: {
-		Tooltip,
-	},
 	mixins: [useEditorMixin, useIsMobileMixin, useStore, useOutlineActions, useOutlineStateMixin],
 	props: {
 		actionEntry: {

diff --git a/src/components/Menu/EmojiPickerAction.vue b/src/components/Menu/EmojiPickerAction.vue
@@ -24,16 +24,17 @@
 		:data-text-action-entry="actionEntry.key"
 		:container="menuIDSelector"
 		@select-data="addEmoji">
-		<NcButton v-tooltip="actionEntry.label"
-			class="entry-action__button"
-			role="menu"
-			:title="actionEntry.label"
-			:aria-label="actionEntry.label"
-			:aria-haspopup="true">
-			<template #icon>
-				<component :is="icon" />
-			</template>
-		</NcButton>
+		<div>
+			<NcButton class="entry-action__button"
+				role="menu"
+				:title="actionEntry.label"
+				:aria-label="actionEntry.label"
+				:aria-haspopup="true">
+				<template #icon>
+					<component :is="icon" />
+				</template>
+			</NcButton>
+		</div>
 	</NcEmojiPicker>
 </template>