</p> </div> - <p class="help is-danger" v-if="errorMessage !== ''"> - {{ errorMessage }} - </p> - <quick-add-magic v-else/> + <Expandable :open="errorMessage !== '' || taskAddFocused || taskAddHovered && debouncedTaskAddHovered"> + <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> <script setup lang="ts"> import {computed, ref} from 'vue' import {useI18n} from 'vue-i18n' +import {refDebounced, useElementHover, useFocusWithin} from '@vueuse/core' -import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue' +import {RELATION_KIND} from '@/types/IRelationKind' import type {ITask} from '@/modelTypes/ITask' + +import Expandable from '@/components/base/Expandable.vue' +import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue' import {parseSubtasksViaIndention} from '@/helpers/parseSubtasksViaIndention' import TaskRelationService from '@/services/taskRelation' import TaskRelationModel from '@/models/taskRelation' -import {RELATION_KIND} from '@/types/IRelationKind' +import {getLabelsFromPrefix} from '@/modules/parseTaskText' + import {useAuthStore} from '@/stores/auth' import {useTaskStore} from '@/stores/tasks' + import {useAutoHeightTextarea} from '@/composables/useAutoHeightTextarea' -import {getLabelsFromPrefix} from '@/modules/parseTaskText' const props = defineProps({ defaultPosition: { @@ -71,9 +77,24 @@ 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) { +// return +// } +// newTaskInput.value.focus() +// }) + +const { focused: taskAddFocused } = useFocusWithin(taskAdd) + +const taskAddHovered = useElementHover(taskAdd) +const debouncedTaskAddHovered = refDebounced(taskAddHovered, 500) + const errorMessage = ref('') -function resetEmptyTitleError(e) { +function resetEmptyTitleError(e: KeyboardEvent) { if ( (e.which <= 90 && e.which >= 48 || e.which >= 96 && e.which <= 105) && newTaskTitle.value !== '' @@ -192,7 +213,9 @@ defineExpose({ </script> <style lang="scss" scoped> -.task-add { +.task-add, +// overwrite bulma styles +.task-add .add-task__field { margin-bottom: 0; } @@ -220,4 +243,8 @@ defineExpose({ white-space: nowrap; text-overflow: ellipsis; } + +.quick-add-magic { + padding-top: 0.75rem; +} </style> diff --git a/src/components/tasks/partials/quick-add-magic.vue b/src/components/tasks/partials/quick-add-magic.vue index 187acd67bc..aa48d39715 100644 --- a/src/components/tasks/partials/quick-add-magic.vue +++ b/src/components/tasks/partials/quick-add-magic.vue @@ -1,5 +1,5 @@ <template> - <div v-if="available"> + <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> @@ -100,6 +100,5 @@ import {PREFIXES} from '@/modules/parseTaskText' const visible = ref(false) const mode = ref(getQuickAddMagicMode()) -const available = computed(() => mode.value !== 'disabled') const prefixes = computed(() => PREFIXES[mode.value]) </script> diff --git a/src/composables/useAutoHeightTextarea.ts b/src/composables/useAutoHeightTextarea.ts index e4452a3eda..b1f1d0484c 100644 --- a/src/composables/useAutoHeightTextarea.ts +++ b/src/composables/useAutoHeightTextarea.ts @@ -4,11 +4,11 @@ import {debouncedWatch, tryOnMounted, useWindowSize, type MaybeRef} from '@vueus // TODO: also add related styles // OR: replace with vueuse function export function useAutoHeightTextarea(value: MaybeRef<string>) { - const textarea = ref<HTMLInputElement>() + const textarea = ref<HTMLTextAreaElement | null>(null) const minHeight = ref(0) // adapted from https://github.com/LeaVerou/stretchy/blob/47f5f065c733029acccb755cae793009645809e2/src/stretchy.js#L34 - function resize(textareaEl: HTMLInputElement | undefined) { + function resize(textareaEl: HTMLTextAreaElement | null) { if (!textareaEl) return let empty diff --git a/src/helpers/getInheritedBackgroundColor.ts b/src/helpers/getInheritedBackgroundColor.ts new file mode 100644 index 0000000000..c15c66ae7d --- /dev/null +++ b/src/helpers/getInheritedBackgroundColor.ts @@ -0,0 +1,24 @@ +function getDefaultBackground() { + const div = document.createElement('div') + document.head.appendChild(div) + const bg = window.getComputedStyle(div).backgroundColor + document.head.removeChild(div) + return bg +} + +// get default style for current browser +const defaultStyle = getDefaultBackground() // typically "rgba(0, 0, 0, 0)" + +// based on https://stackoverflow.com/a/62630563/15522256 +export function getInheritedBackgroundColor(el: HTMLElement): string { + const backgroundColor = window.getComputedStyle(el).backgroundColor + + if (backgroundColor !== defaultStyle) return backgroundColor + + if (!el.parentElement) { + // we reached the top parent el without getting an explicit color + return defaultStyle + } + + return getInheritedBackgroundColor(el.parentElement) +} \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 7b1f2cdfa7..81f6191068 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,3 +1,4 @@ +import './polyfills' import {createApp} from 'vue' import pinia from './pinia' diff --git a/src/polyfills.ts b/src/polyfills.ts new file mode 100644 index 0000000000..7ad95fce67 --- /dev/null +++ b/src/polyfills.ts @@ -0,0 +1,4 @@ +// in order to use postcss-preset-env correctly we need some client side plugins +import focusWithin from 'focus-within' + +focusWithin(document) \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index f8ad967669..dd6ed7f708 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -10,6 +10,8 @@ import {VitePWA} from 'vite-plugin-pwa' import {visualizer} from 'rollup-plugin-visualizer' import svgLoader from 'vite-svg-loader' import postcssPresetEnv from 'postcss-preset-env' +import postcssEasings from 'postcss-easings' +import postcssEasingGradients from 'postcss-easing-gradients' const pathSrc = fileURLToPath(new URL('./src', import.meta.url)) @@ -46,7 +48,19 @@ export default defineConfig({ }, postcss: { plugins: [ - postcssPresetEnv(), + postcssEasings(), + postcssEasingGradients(), + postcssPresetEnv({ + // These plugins are enabled by default but require + // a polyfill that we don't include + // see also './src/polyfills.ts' + features: { + 'blank-pseudo-class': false, + 'focus-visible-pseudo-class': false, + 'has-pseudo-class': false, + 'prefers-color-scheme-query': false, + }, + }), ], }, },