feat: hide quick add magic help behind a tooltip (#3353)

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/3353

src/components/misc/Icon.ts

@@ -67,6 +67,7 @@ import {
 	faStar,
 	faSun,
 	faTimesCircle,
+	faCircleQuestion,
 } from '@fortawesome/free-regular-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
 
@@ -86,6 +87,7 @@ library.add(faCheckDouble)
 library.add(faChessKnight)
 library.add(faChevronDown)
 library.add(faCircleInfo)
+library.add(faCircleQuestion)
 library.add(faClock)
 library.add(faCloudDownloadAlt)
 library.add(faCloudUploadAlt)

src/components/tasks/add-task.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="task-add" ref="taskAdd">
 		<div class="add-task__field field is-grouped">
-			<p class="control has-icons-left is-expanded">
+			<p class="control has-icons-left has-icons-right is-expanded">
 				<textarea
 					class="add-task-textarea input"
 					:class="{'textarea-empty': newTaskTitle === ''}"
@@ -16,6 +16,7 @@
 				<span class="icon is-small is-left">
 					<icon icon="tasks"/>
 				</span>
+				<quick-add-magic :highlight-hint-icon="taskAddHovered"/>
 			</p>
 			<p class="control">
 				<x-button
@@ -32,11 +33,10 @@
 				</x-button>
 			</p>
 		</div>
-		<Expandable :open="errorMessage !== '' || taskAddFocused || taskAddHovered && debouncedTaskAddHovered">
+		<Expandable :open="errorMessage !== ''">
 			<p class="pt-3 mt-0 help is-danger" v-if="errorMessage !== ''">
 				{{ errorMessage }}
 			</p>
-			<quick-add-magic v-else class="quick-add-magic" />
 		</Expandable>
 	</div>
 </template>
@@ -44,7 +44,7 @@
 <script setup lang="ts">
 import {computed, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {refDebounced, useElementHover, useFocusWithin} from '@vueuse/core'
+import {useElementHover} from '@vueuse/core'
 
 import {RELATION_KIND} from '@/types/IRelationKind'
 import type {ITask} from '@/modelTypes/ITask'
@@ -77,8 +77,6 @@ const {t} = useI18n({useScope: 'global'})
 const authStore = useAuthStore()
 const taskStore = useTaskStore()
 
-const taskAdd = ref<HTMLTextAreaElement | null>(null)
-
 // enable only if we don't have a modal
 // onStartTyping(() => {
 // 	if (newTaskInput.value === null || document.activeElement === newTaskInput.value) {
@@ -87,10 +85,8 @@ const taskAdd = ref<HTMLTextAreaElement | null>(null)
 // 	newTaskInput.value.focus()
 // })
 
-const { focused: taskAddFocused } = useFocusWithin(taskAdd)
-
+const taskAdd = ref<HTMLTextAreaElement | null>(null)
 const taskAddHovered = useElementHover(taskAdd)
-const debouncedTaskAddHovered = refDebounced(taskAddHovered, 500)
 
 const errorMessage = ref('')
 
@@ -244,7 +240,14 @@ defineExpose({
 	text-overflow: ellipsis;
 }
 
-.quick-add-magic {
-	padding-top: 0.75rem;
+.control.has-icons-left .icon,
+.control.has-icons-right .icon {
+	transition: all $transition;
+}
+</style>
+
+<style>
+button.show-helper-text {
+	right: 0;
 }
 </style>

src/components/tasks/partials/quick-add-magic.vue

@@ -1,9 +1,14 @@
 <template>
-	<div v-if="mode !== 'disabled' && prefixes !== undefined">
-		<p class="help has-text-grey">
-			{{ $t('task.quickAddMagic.hint') }}.
-			<ButtonLink @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</ButtonLink>
-		</p>
+	<template v-if="mode !== 'disabled' && prefixes !== undefined">
+		<BaseButton
+			@click="() => visible = true"
+			class="icon is-small show-helper-text"
+			v-tooltip="$t('task.quickAddMagic.hint')"
+			:aria-label="$t('task.quickAddMagic.hint')"
+			:class="{'is-highlighted': highlightHintIcon}"
+		>
+			<icon :icon="['far', 'circle-question']"/>
+		</BaseButton>
 		<modal
 			:enabled="visible"
 			@close="() => visible = false"
@@ -69,7 +74,7 @@
 					<li>17th ({{ $t('task.quickAddMagic.dateNth', {day: '17'}) }})</li>
 				</ul>
 				<p>{{ $t('task.quickAddMagic.dateTime', {time: 'at 17:00', timePM: '5pm'}) }}</p>
-				
+
 				<h3>{{ $t('task.quickAddMagic.repeats') }}</h3>
 				<p>{{ $t('task.quickAddMagic.repeatsDescription', {suffix: 'every {amount} {type}'}) }}</p>
 				<p>{{ $t('misc.forExample') }}</p>
@@ -86,13 +91,13 @@
 				</ul>
 			</card>
 		</modal>
-	</div>
+	</template>
 </template>
 
 <script setup lang="ts">
 import {ref, computed} from 'vue'
 
-import ButtonLink from '@/components/misc/ButtonLink.vue'
+import BaseButton from '@/components/base/BaseButton.vue'
 
 import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
 import {PREFIXES} from '@/modules/parseTaskText'
@@ -100,5 +105,20 @@ import {PREFIXES} from '@/modules/parseTaskText'
 const visible = ref(false)
 const mode = ref(getQuickAddMagicMode())
 
+defineProps<{
+	highlightHintIcon: boolean,
+}>()
+
 const prefixes = computed(() => PREFIXES[mode.value])
 </script>
+
+<style lang="scss" scoped>
+.show-helper-text {
+	// Bulma adds pointer-events: none to the icon so we need to override it back here.
+	pointer-events: auto !important;
+}
+
+.is-highlighted {
+	color: inherit !important;
+}
+</style>

src/i18n/lang/en.json

@@ -737,8 +737,7 @@
       "invalidAmount": "Please enter more than 0."
     },
     "quickAddMagic": {
-      "hint": "You can use Quick Add Magic",
-      "what": "What?",
+      "hint": "Use magic prefixes to define due dates, assignees and other task properties.",
       "title": "Quick Add Magic",
       "intro": "When creating a task, you can use special keywords to directly add attributes to the newly created task. This allows to add commonly used attributes to tasks much faster.",
       "multiple": "You can use this multiple times.",

src/styles/theme/form.scss

@@ -57,7 +57,7 @@
 }
 
 .field.has-addons .control .select select {
-    height: 100%;
+  height: 100%;
 }
 
 .control.has-icons-left .icon,

src/views/project/ProjectList.vue

@@ -301,4 +301,9 @@ function prepareFiltersAndLoadTasks() {
   border: none;
   box-shadow: none;
 }
+
+.control.has-icons-left .icon,
+.control.has-icons-right .icon {
+	transition: all $transition;
+}
 </style>