Merge pull request #3541 from Jakob-em/add-missing-tooltips

Add missing tooltips

app/src/components/v-table/table-header/table-header.vue

@@ -12,27 +12,23 @@
 			</th>
 
 			<th v-if="showSelect" class="select cell" scope="col">
-				<v-checkbox
-					:inputValue="allItemsSelected"
-					:indeterminate="someItemsSelected"
-					@change="toggleSelectAll"
-				/>
+				<v-checkbox :inputValue="allItemsSelected" :indeterminate="someItemsSelected" @change="toggleSelectAll" />
 			</th>
 
-			<th
-				v-for="header in headers"
-				:key="header.value"
-				:class="getClassesForHeader(header)"
-				class="cell"
-				scope="col"
-			>
+			<th v-for="header in headers" :key="header.value" :class="getClassesForHeader(header)" class="cell" scope="col">
 				<div class="content" @click="changeSort(header)">
 					<span v-show="header.width > 90 || header.width === null">
 						<slot :name="`header.${header.value}`" :header="header">
 							{{ header.text }}
 						</slot>
 					</span>
-					<v-icon v-if="header.sortable" name="sort" class="sort-icon" small />
+					<v-icon
+						v-if="header.sortable"
+						name="sort"
+						class="sort-icon"
+						small
+						v-tooltip.top="$t(getTooltipForSortIcon(header))"
+					/>
 				</div>
 				<span
 					class="resize-handle"
@@ -121,6 +117,7 @@ export default defineComponent({
 			onResizeHandleMouseDown,
 			toggleManualSort,
 			toggleSelectAll,
+			getTooltipForSortIcon,
 		};
 
 		function getClassesForHeader(header: Header) {
@@ -145,6 +142,10 @@ export default defineComponent({
 			return classes;
 		}
 
+		function getTooltipForSortIcon(header: Header) {
+			return props.sort.by === header.value && props.sort.desc === false ? 'sort_desc' : 'sort_asc';
+		}
+
 		function changeSort(header: Header) {
 			if (header.sortable === false) return;
 			if (dragging.value === true) return;

app/src/lang/translations/en-US.yaml

@@ -427,6 +427,8 @@ circle: Circle
 empty_item: Empty Item
 log_in_with: 'Log In with {provider}'
 advanced_filter: Advanced Filter
+delete_advanced_filter: Delete Filter
+change_advanced_filter_operator: Change Operator
 operators:
   eq: Equals
   neq: Doesn't equal
@@ -768,6 +770,8 @@ sign_out: Sign Out
 sign_out_confirm: Are you sure you want to sign out?
 something_went_wrong: Something went wrong.
 sort_direction: Sort Direction
+sort_asc: Sort Ascending
+sort_desc: Sort Descending
 template: Template
 translation: Translation
 value: Value

app/src/modules/collections/routes/collection.vue

@@ -22,7 +22,12 @@
 					:saving="creatingBookmark"
 				>
 					<template #activator="{ on }">
-						<v-icon class="toggle" name="bookmark_outline" @click="on" />
+						<v-icon
+							class="toggle"
+							@click="on"
+							name="bookmark_outline"
+							v-tooltip.right="$t('create_bookmark')"
+						/>
 					</template>
 				</bookmark-add>
 

app/src/views/private/components/filter-sidebar-detail/field-filter.vue

@@ -7,7 +7,7 @@
 			</div>
 			<v-menu show-arrow :disabled="disabled">
 				<template #activator="{ toggle }">
-					<div class="operator" @click="toggle">
+					<div class="operator" @click="toggle" v-tooltip.top="$t('change_advanced_filter_operator')">
 						<span>{{ $t(`operators.${activeOperator}`) }}</span>
 						<v-icon name="expand_more" />
 					</div>
@@ -25,7 +25,7 @@
 				</v-list>
 			</v-menu>
 			<div class="spacer" />
-			<v-icon class="remove" name="close" @click="$emit('remove')" />
+			<v-icon class="remove" name="close" @click="$emit('remove')" v-tooltip.left="$t('delete_advanced_filter')" />
 		</div>
 		<div class="field">
 			<filter-input v-model="value" :type="parsedField.type" :operator="activeOperator" :disabled="disabled" />