From d8128a01a2bfbc19a15d1146a0c937feaf1e3ab6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Thu, 29 Feb 2024 17:16:42 +0100
Subject: [PATCH] chore: Remove deprecated tooltips
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/Controls.vue                   | 32 ++++++++-----------
 src/components/SessionList.vue                |  7 ++--
 src/components/board/Board.vue                |  2 +-
 src/components/board/SharingTabSidebar.vue    |  4 +--
 src/components/board/Stack.vue                |  4 +--
 src/components/board/TagsTabSidebar.vue       | 15 +++++----
 src/components/boards/BoardItem.vue           |  2 +-
 .../card/CardSidebarTabComments.vue           |  2 +-
 src/components/card/CommentForm.vue           |  2 +-
 src/components/card/CommentItem.vue           |  2 +-
 src/components/card/Description.vue           |  2 +-
 src/components/cards/AvatarList.vue           |  5 +--
 src/components/cards/CardBadges.vue           |  2 +-
 src/main.js                                   |  2 --
 src/views/CardReferenceWidget.vue             |  6 ++--
 src/views/CommentReferenceWidget.vue          |  8 ++---
 16 files changed, 44 insertions(+), 53 deletions(-)

diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index 47475f629..bc5148ece 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -78,7 +78,7 @@
 						required
 						@focus="$store.dispatch('toggleShortcutLock', true)"
 						@blur="$store.dispatch('toggleShortcutLock', false)">
-					<input v-tooltip="t('deck', 'Add list')"
+					<input :title="t('deck', 'Add list')"
 						class="icon-confirm"
 						type="submit"
 						value="">
@@ -86,24 +86,24 @@
 			</div>
 			<div v-if="board" class="board-action-buttons">
 				<div class="board-action-buttons__filter">
-					<NcPopover container=".board-action-buttons__filter"
-						:placement="'bottom-end'"
+					<NcPopover :placement="'bottom-end'"
 						:aria-label="t('deck', 'Active filters')"
 						:name="t('deck', 'Active filters')"
-						:tooltip="t('deck', 'Active filters')"
 						@show="filterVisible=true"
 						@hide="filterVisible=false">
 						<!-- We cannot use NcActions here are the popover trigger does not update on reactive icons -->
-						<NcButton slot="trigger"
-							ref="filterPopover"
-							:name="t('deck', 'Apply filter')"
-							class="filter-button"
-							:type="isFilterActive ? 'primary' : 'tertiary'">
-							<template #icon>
-								<FilterIcon v-if="isFilterActive" :size="20" decorative />
-								<FilterOffIcon v-else :size="20" decorative />
-							</template>
-						</NcButton>
+						<template #trigger>
+							<NcButton ref="filterPopover"
+								:title="t('deck', 'Apply filter')"
+								:aria-label="t('deck', 'Apply filter')"
+								class="filter-button"
+								:type="isFilterActive ? 'primary' : 'tertiary'">
+								<template #icon>
+									<FilterIcon v-if="isFilterActive" :size="20" decorative />
+									<FilterOffIcon v-else :size="20" decorative />
+								</template>
+							</NcButton>
+						</template>
 
 						<div v-if="filterVisible" class="filter">
 							<h3>{{ t('deck', 'Filter by tag') }}</h3>
@@ -563,8 +563,4 @@ export default {
 	.popover:focus {
 		outline: 2px solid var(--color-main-text);
 	}
-
-	.tooltip-inner.popover-inner {
-		text-align: left;
-	}
 </style>
diff --git a/src/components/SessionList.vue b/src/components/SessionList.vue
index c16179adf..45a80fdf9 100644
--- a/src/components/SessionList.vue
+++ b/src/components/SessionList.vue
@@ -20,7 +20,7 @@
  * -->
 
 <template>
-	<div v-tooltip.bottom="t('text', 'Currently present people')"
+	<div :title="t('text', 'Currently present people')"
 		class="avatar-list">
 		<div v-for="session in sessionsVisible"
 			:key="session.uid"
@@ -37,16 +37,13 @@
 </template>
 
 <script>
-import { NcAvatar, Tooltip } from '@nextcloud/vue'
+import { NcAvatar } from '@nextcloud/vue'
 
 export default {
 	name: 'SessionList',
 	components: {
 		NcAvatar,
 	},
-	directives: {
-		tooltip: Tooltip,
-	},
 	props: {
 		sessions: {
 			type: Array,
diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 682567b8b..3c50289d2 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -52,7 +52,7 @@
 							class="no-close"
 							:placeholder="t('deck', 'List name')"
 							required>
-						<input v-tooltip="t('deck', 'Add list')"
+						<input title="t('deck', 'Add list')"
 							class="icon-confirm"
 							type="submit"
 							value="">
diff --git a/src/components/board/SharingTabSidebar.vue b/src/components/board/SharingTabSidebar.vue
index 6c0c19d7b..456a87cf2 100644
--- a/src/components/board/SharingTabSidebar.vue
+++ b/src/components/board/SharingTabSidebar.vue
@@ -24,7 +24,7 @@
 			class="shareWithList">
 			<li>
 				<NcAvatar :user="board.owner.uid" />
-				<span class="has-tooltip username">
+				<span class="username">
 					{{ board.owner.displayname }}
 					<span v-if="!isCurrentUser(board.owner.uid)" class="board-owner-label">
 						{{ t('deck', 'Board owner') }}
@@ -35,7 +35,7 @@
 				<NcAvatar v-if="acl.type===0" :user="acl.participant.uid" />
 				<div v-if="acl.type===1" class="avatardiv icon icon-group" />
 				<div v-if="acl.type===7" class="avatardiv icon icon-circles" />
-				<span class="has-tooltip username">
+				<span class="username">
 					{{ acl.participant.displayname }}
 					<span v-if="acl.type===1">{{ t('deck', '(Group)') }}</span>
 					<span v-if="acl.type===7">{{ t('deck', '(Team)') }}</span>
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 435a51cb6..ce478a99b 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -32,7 +32,7 @@
 					{{ stack.title }}
 				</h3>
 				<h3 v-else-if="!editing"
-					v-tooltip="stack.title"
+					title="stack.title"
 					dir="auto"
 					tabindex="0"
 					:aria-label="stack.title"
@@ -51,7 +51,7 @@
 						dir="auto"
 						type="text"
 						required="required">
-					<input v-tooltip="t('deck', 'Edit list title')"
+					<input title="t('deck', 'Edit list title')"
 						class="icon-confirm"
 						type="submit"
 						value="">
diff --git a/src/components/board/TagsTabSidebar.vue b/src/components/board/TagsTabSidebar.vue
index 5bf81071b..2b984ab1f 100644
--- a/src/components/board/TagsTabSidebar.vue
+++ b/src/components/board/TagsTabSidebar.vue
@@ -12,20 +12,21 @@
 							<div :style="{ backgroundColor: '#' + editingLabel.color }" class="color0 icon-colorpicker" />
 						</NcColorPicker>
 						<input v-model="editingLabel.title" type="text">
-						<input v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
-							:disabled="!editLabelObjValidated"
+						<input :disabled="!editLabelObjValidated"
 							type="submit"
 							value=""
 							class="icon-confirm">
 						<NcActions>
-							<NcActionButton v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
-								:disabled="!editLabelObjValidated"
+							<NcActionButton :disabled="!editLabelObjValidated"
 								icon="icon-close"
 								@click="editingLabelId = null">
 								{{ t('deck', 'Cancel') }}
 							</NcActionButton>
 						</NcActions>
 					</form>
+					<p v-if="!editLabelObjValidated">
+						{{ missingDataLabel }}
+					</p>
 				</template>
 				<template v-else>
 					<div v-if="canManage && !isArchived" class="label-title" @click="clickEdit(label)">
@@ -58,8 +59,7 @@
 						<div :style="{ backgroundColor: '#' + addLabelObj.color }" class="color0 icon-colorpicker" />
 					</NcColorPicker>
 					<input v-model="addLabelObj.title" type="text">
-					<input v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }"
-						:disabled="!addLabelObjValidated"
+					<input :disabled="!addLabelObjValidated"
 						type="submit"
 						value=""
 						class="icon-confirm">
@@ -69,6 +69,9 @@
 						</NcActionButton>
 					</NcActions>
 				</form>
+				<p v-if="!addLabelObjValidated">
+					{{ missingDataLabel }}
+				</p>
 			</li>
 			<button v-if="canManage && !isArchived" @click="clickShowAddLabel()">
 				<span class="icon-add" />{{ t('deck', 'Add a new tag') }}
diff --git a/src/components/boards/BoardItem.vue b/src/components/boards/BoardItem.vue
index a925a40f0..f7e6a4cc5 100644
--- a/src/components/boards/BoardItem.vue
+++ b/src/components/boards/BoardItem.vue
@@ -39,7 +39,7 @@
 				:user="user.participant.uid"
 				:display-name="user.participant.displayname"
 				class="board-list-avatar" />
-			<div v-if="board.acl.length > 5" v-tooltip="otherAcl" class="avatardiv popovermenu-wrapper board-list-avatar icon-more" />
+			<div v-if="board.acl.length > 5" :title="otherAcl" class="avatardiv popovermenu-wrapper board-list-avatar icon-more" />
 		</div>
 		<div class="board-list-actions-cell" />
 	</router-link>
diff --git a/src/components/card/CardSidebarTabComments.vue b/src/components/card/CardSidebarTabComments.vue
index ff5fbce3c..8d803bbdb 100644
--- a/src/components/card/CardSidebarTabComments.vue
+++ b/src/components/card/CardSidebarTabComments.vue
@@ -2,7 +2,7 @@
 	<div>
 		<div class="comment--header">
 			<NcAvatar :user="currentUser.uid" />
-			<span class="has-tooltip username">
+			<span class="username">
 				{{ currentUser.displayName }}
 			</span>
 		</div>
diff --git a/src/components/card/CommentForm.vue b/src/components/card/CommentForm.vue
index 6714fef7f..d60585d3b 100644
--- a/src/components/card/CommentForm.vue
+++ b/src/components/card/CommentForm.vue
@@ -49,7 +49,7 @@
 					@blur="error = null"
 					@input="validate()" />
 			</At>
-			<input v-tooltip="t('deck', 'Save')"
+			<input :title="t('deck', 'Save')"
 				class="icon-confirm"
 				type="submit"
 				value=""
diff --git a/src/components/card/CommentItem.vue b/src/components/card/CommentItem.vue
index f4a2b1b9a..335f98a96 100644
--- a/src/components/card/CommentItem.vue
+++ b/src/components/card/CommentItem.vue
@@ -22,7 +22,7 @@
 	<li v-else class="comment">
 		<div class="comment--header">
 			<NcAvatar :user="comment.actorId" />
-			<span class="has-tooltip username">
+			<span class="username">
 				{{ comment.actorDisplayName }}
 			</span>
 			<NcActions v-show="!edit" :force-menu="true">
diff --git a/src/components/card/Description.vue b/src/components/card/Description.vue
index a804de325..c5fb53152 100644
--- a/src/components/card/Description.vue
+++ b/src/components/card/Description.vue
@@ -27,7 +27,7 @@
 			<span v-if="descriptionLastEdit && !descriptionSaving">{{ t('deck', '(Unsaved)') }}</span>
 			<span v-if="descriptionSaving">{{ t('deck', '(Saving…)') }}</span>
 			<a v-if="!textAppAvailable"
-				v-tooltip="t('deck', 'Formatting help')"
+				:title="t('deck', 'Formatting help')"
 				href="https://deck.readthedocs.io/en/latest/Markdown/"
 				target="_blank"
 				class="icon icon-info" />
diff --git a/src/components/cards/AvatarList.vue b/src/components/cards/AvatarList.vue
index 13a0cca4e..2c9fa710d 100644
--- a/src/components/cards/AvatarList.vue
+++ b/src/components/cards/AvatarList.vue
@@ -85,7 +85,7 @@
 </template>
 
 <script>
-import { NcAvatar, NcPopover, Tooltip } from '@nextcloud/vue'
+import { NcAvatar, NcPopover } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 
@@ -96,9 +96,6 @@ export default {
 		NcPopover,
 		AccountMultiple,
 	},
-	directives: {
-		tooltip: Tooltip,
-	},
 	props: {
 		users: {
 			type: Array,
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index 0c240caf8..3a14748cf 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -29,7 +29,7 @@
 				<CardId v-if="idBadge" class="icon-badge" :card="card" />
 
 				<div v-if="card.commentsCount > 0"
-					v-tooltip="commentsHint"
+					:title="commentsHint"
 					class="icon-badge"
 					@click.stop="openComments">
 					<CommentUnreadIcon v-if="card.commentsUnread > 0" :size="16" />
diff --git a/src/main.js b/src/main.js
index 145d48de6..3fbafb9e7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -27,7 +27,6 @@ import { sync } from 'vuex-router-sync'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import { showError } from '@nextcloud/dialogs'
 import { subscribe } from '@nextcloud/event-bus'
-import { Tooltip } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
 import './shared-init.js'
 import './models/index.js'
@@ -41,7 +40,6 @@ sync(store, router)
 Vue.prototype.t = translate
 Vue.prototype.n = translatePlural
 
-Vue.directive('tooltip', Tooltip)
 Vue.directive('click-outside', ClickOutside)
 
 Vue.directive('focus', {
diff --git a/src/views/CardReferenceWidget.vue b/src/views/CardReferenceWidget.vue
index a0e7d9d92..25ae4feef 100644
--- a/src/views/CardReferenceWidget.vue
+++ b/src/views/CardReferenceWidget.vue
@@ -33,7 +33,7 @@
 			</strong>
 			<div v-if="dueDate" class="spacer" />
 			<span v-if="dueDate"
-				v-tooltip.top="{ content: formattedDueDate }"
+				:title="t('Due date') + ': ' + formattedDueDate"
 				class="due-date">
 				<CalendarBlankIcon :size="20"
 					class="icon" />
@@ -42,7 +42,7 @@
 		</div>
 		<div class="line">
 			<DeckIcon :size="20" class="title-icon" />
-			<a v-tooltip.top="{ content: stackTooltip }"
+			<a :title="stackTooltip"
 				:href="boardLink"
 				target="_blank"
 				class="link">
@@ -67,7 +67,7 @@
 					'description': true,
 					'short-description': shortDescription,
 				}">
-				<NcRichText v-tooltip.top="{ content: shortDescription ? t('deck', 'Click to expand description') : undefined }"
+				<NcRichText :title="shortDescription ? t('deck', 'Click to expand description') : undefined"
 					:text="card.description"
 					:use-markdown="true"
 					@click.native="shortDescription = !shortDescription" />
diff --git a/src/views/CommentReferenceWidget.vue b/src/views/CommentReferenceWidget.vue
index b8d76c2f3..678a7f4ab 100644
--- a/src/views/CommentReferenceWidget.vue
+++ b/src/views/CommentReferenceWidget.vue
@@ -33,7 +33,7 @@
 			</strong>
 			<div v-if="dueDate" class="spacer" />
 			<span v-if="dueDate"
-				v-tooltip.top="{ content: formattedDueDate }"
+				:title="t('Due date') + ': ' + formattedDueDate"
 				class="due-date">
 				<CalendarBlankIcon :size="20"
 					class="icon" />
@@ -42,7 +42,7 @@
 		</div>
 		<div class="line">
 			<DeckIcon :size="20" class="title-icon" />
-			<a v-tooltip.top="{ content: stackTooltip }"
+			<a :title="stackTooltip"
 				:href="boardLink"
 				target="_blank"
 				class="link">
@@ -67,7 +67,7 @@
 					'description': true,
 					'short-description': shortDescription,
 				}">
-				<NcRichText v-tooltip.top="{ content: shortDescription ? t('deck', 'Click to expand description') : undefined }"
+				<NcRichText :title="shortDescription ? t('deck', 'Click to expand description') : undefined"
 					:text="card.description"
 					:use-markdown="true"
 					@click.native="shortDescription = !shortDescription" />
@@ -84,7 +84,7 @@
 				'comment': true,
 				'short-comment': shortComment,
 			}">
-				<NcRichText v-tooltip.top="{ content: shortComment ? t('deck', 'Click to expand comment') : undefined }"
+				<NcRichText :title="shortComment ? t('deck', 'Click to expand comment') : undefined"
 					:text="commentMessageText"
 					:use-markdown="false"
 					@click.native="shortComment = !shortComment" />