ami/tl-vikunja
1
0
Fork 0
Code

feat: allow hiding the quick add magic help tooltip with a button

Browse Source
This commit is contained in:
kolaente 2023-04-05 09:09:00 +02:00 committed by konrad
parent 57218d1454
commit 7fb85dacec
3 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/tasks/add-task.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="task-add" ref="taskAdd"> <div class="task-add">
<div class="add-task__field field is-grouped"> <div class="add-task__field field is-grouped">
<p class="control has-icons-left is-expanded"> <p class="control has-icons-left is-expanded">
<textarea <textarea
@ -32,11 +32,11 @@
</x-button> </x-button>
</p> </p>
</div> </div>
<Expandable :open="errorMessage !== '' || taskAddFocused || taskAddHovered && debouncedTaskAddHovered"> <Expandable :open="errorMessage !== '' || showQuickAddMagicHelp">
<p class="pt-3 mt-0 help is-danger" v-if="errorMessage !== ''"> <p class="pt-3 mt-0 help is-danger" v-if="errorMessage !== ''">
{{ errorMessage }} {{ errorMessage }}
</p> </p>
<quick-add-magic v-else class="quick-add-magic" /> <quick-add-magic v-else class="quick-add-magic" @hide="() => showQuickAddMagicHelp = false"/>
</Expandable> </Expandable>
</div> </div>
</template> </template>
@ -44,7 +44,7 @@
<script setup lang="ts"> <script setup lang="ts">
import {computed, ref} from 'vue' import {computed, ref} from 'vue'
import {useI18n} from 'vue-i18n' import {useI18n} from 'vue-i18n'
import {refDebounced, useElementHover, useFocusWithin} from '@vueuse/core' import {useLocalStorage} from '@vueuse/core'
import {RELATION_KIND} from '@/types/IRelationKind' import {RELATION_KIND} from '@/types/IRelationKind'
import type {ITask} from '@/modelTypes/ITask' import type {ITask} from '@/modelTypes/ITask'
@ -77,8 +77,6 @@ const {t} = useI18n({useScope: 'global'})
const authStore = useAuthStore() const authStore = useAuthStore()
const taskStore = useTaskStore() const taskStore = useTaskStore()
const taskAdd = ref<HTMLTextAreaElement | null>(null)
// enable only if we don't have a modal // enable only if we don't have a modal
// onStartTyping(() => { // onStartTyping(() => {
// if (newTaskInput.value === null || document.activeElement === newTaskInput.value) { // if (newTaskInput.value === null || document.activeElement === newTaskInput.value) {
@ -87,10 +85,7 @@ const taskAdd = ref<HTMLTextAreaElement | null>(null)
// newTaskInput.value.focus() // newTaskInput.value.focus()
// }) // })
const { focused: taskAddFocused } = useFocusWithin(taskAdd) const showQuickAddMagicHelp = useLocalStorage('show-quick-add-magic', true)
const taskAddHovered = useElementHover(taskAdd)
const debouncedTaskAddHovered = refDebounced(taskAddHovered, 500)
const errorMessage = ref('') const errorMessage = ref('')

3
src/components/tasks/partials/quick-add-magic.vue
View File

@ -3,6 +3,7 @@
<p class="help has-text-grey"> <p class="help has-text-grey">
{{ $t('task.quickAddMagic.hint') }}. {{ $t('task.quickAddMagic.hint') }}.
<ButtonLink @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</ButtonLink> <ButtonLink @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</ButtonLink>
<ButtonLink @click="() => emit('hide')" class="ml-1">{{ $t('task.quickAddMagic.hide') }}</ButtonLink>
</p> </p>
<modal <modal
:enabled="visible" :enabled="visible"
@ -97,6 +98,8 @@ import ButtonLink from '@/components/misc/ButtonLink.vue'
import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode' import {getQuickAddMagicMode} from '@/helpers/quickAddMagicMode'
import {PREFIXES} from '@/modules/parseTaskText' import {PREFIXES} from '@/modules/parseTaskText'
const emit = defineEmits(['hide'])
const visible = ref(false) const visible = ref(false)
const mode = ref(getQuickAddMagicMode()) const mode = ref(getQuickAddMagicMode())

1
src/i18n/lang/en.json
View File

@ -738,6 +738,7 @@
}, },
"quickAddMagic": { "quickAddMagic": {
"hint": "You can use Quick Add Magic", "hint": "You can use Quick Add Magic",
"hide": "Hide",
"what": "What?", "what": "What?",
"title": "Quick Add Magic", "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.", "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.",