feat: use transition component everywhere
This commit is contained in:
@ -130,7 +130,7 @@
|
||||
|
||||
<!-- Delete modal -->
|
||||
<modal
|
||||
v-if="attachmentToDelete !== null"
|
||||
:enabled="attachmentToDelete !== null"
|
||||
@close="setAttachmentToDelete(null)"
|
||||
@submit="deleteAttachment()"
|
||||
>
|
||||
@ -148,7 +148,7 @@
|
||||
|
||||
<!-- Attachment image modal -->
|
||||
<modal
|
||||
v-if="attachmentImageBlobUrl !== null"
|
||||
:enabled="attachmentImageBlobUrl !== null"
|
||||
@close="attachmentImageBlobUrl = null"
|
||||
>
|
||||
<img :src="attachmentImageBlobUrl" alt=""/>
|
||||
@ -432,6 +432,4 @@ async function setCoverImage(attachment: IAttachment | null) {
|
||||
border-radius: 4px;
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
@include modal-transition();
|
||||
</style>
|
@ -49,14 +49,12 @@ const label = computed(() => {
|
||||
align-items: center;
|
||||
padding-left: .5rem;
|
||||
font-size: .9rem;
|
||||
|
||||
}
|
||||
|
||||
svg {
|
||||
transform: rotate(-90deg);
|
||||
transition: stroke-dashoffset 0.35s;
|
||||
margin-right: .25rem;
|
||||
|
||||
}
|
||||
|
||||
circle {
|
||||
|
@ -43,7 +43,7 @@
|
||||
>
|
||||
· {{ $t('task.comment.edited', {date: formatDateSince(c.updated)}) }}
|
||||
</span>
|
||||
<transition name="fade">
|
||||
<CustomTransition name="fade">
|
||||
<span
|
||||
class="is-inline-flex"
|
||||
v-if="
|
||||
@ -63,7 +63,7 @@
|
||||
>
|
||||
{{ $t('misc.saved') }}
|
||||
</span>
|
||||
</transition>
|
||||
</CustomTransition>
|
||||
</div>
|
||||
<editor
|
||||
:hasPreview="true"
|
||||
@ -94,15 +94,15 @@
|
||||
</figure>
|
||||
<div class="media-content">
|
||||
<div class="form">
|
||||
<transition name="fade">
|
||||
<CustomTransition name="fade">
|
||||
<span
|
||||
class="is-inline-flex"
|
||||
v-if="taskCommentService.loading && creating"
|
||||
class="is-inline-flex"
|
||||
>
|
||||
<span class="loader is-inline-block mr-2"></span>
|
||||
{{ $t('task.comment.creating') }}
|
||||
</span>
|
||||
</transition>
|
||||
</CustomTransition>
|
||||
<div class="field">
|
||||
<editor
|
||||
:class="{
|
||||
@ -132,22 +132,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="modal">
|
||||
<modal
|
||||
v-if="showDeleteModal"
|
||||
@close="showDeleteModal = false"
|
||||
@submit="() => deleteComment(commentToDelete)"
|
||||
>
|
||||
<template #header><span>{{ $t('task.comment.delete') }}</span></template>
|
||||
<modal
|
||||
:enabled="showDeleteModal"
|
||||
@close="showDeleteModal = false"
|
||||
@submit="() => deleteComment(commentToDelete)"
|
||||
>
|
||||
<template #header><span>{{ $t('task.comment.delete') }}</span></template>
|
||||
|
||||
<template #text>
|
||||
<p>
|
||||
{{ $t('task.comment.deleteText1') }}<br/>
|
||||
<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
|
||||
</p>
|
||||
</template>
|
||||
</modal>
|
||||
</transition>
|
||||
<template #text>
|
||||
<p>
|
||||
{{ $t('task.comment.deleteText1') }}<br/>
|
||||
<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
|
||||
</p>
|
||||
</template>
|
||||
</modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -155,6 +153,7 @@
|
||||
import {ref, reactive, computed, shallowReactive, watch, nextTick} from 'vue'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
|
||||
import CustomTransition from '@/components/misc/CustomTransition.vue'
|
||||
import Editor from '@/components/input/AsyncEditor'
|
||||
|
||||
import TaskCommentService from '@/services/taskComment'
|
||||
@ -351,6 +350,4 @@ async function deleteComment(commentToDelete: ITaskComment) {
|
||||
.media-content {
|
||||
width: calc(100% - 48px - 2rem);
|
||||
}
|
||||
|
||||
@include modal-transition();
|
||||
</style>
|
@ -5,7 +5,7 @@
|
||||
<icon icon="align-left"/>
|
||||
</span>
|
||||
{{ $t('task.attributes.description') }}
|
||||
<transition name="fade">
|
||||
<CustomTransition name="fade">
|
||||
<span class="is-small is-inline-flex" v-if="loading && saving">
|
||||
<span class="loader is-inline-block mr-2"></span>
|
||||
{{ $t('misc.saving') }}
|
||||
@ -14,7 +14,7 @@
|
||||
<icon icon="check"/>
|
||||
{{ $t('misc.saved') }}
|
||||
</span>
|
||||
</transition>
|
||||
</CustomTransition>
|
||||
</h3>
|
||||
<editor
|
||||
:is-edit-enabled="canWrite"
|
||||
@ -33,6 +33,7 @@
|
||||
<script setup lang="ts">
|
||||
import {ref,computed, watch, type PropType} from 'vue'
|
||||
|
||||
import CustomTransition from '@/components/misc/CustomTransition.vue'
|
||||
import Editor from '@/components/input/AsyncEditor'
|
||||
|
||||
import type {ITask} from '@/modelTypes/ITask'
|
||||
|
@ -17,7 +17,7 @@
|
||||
>
|
||||
{{ task.title.trim() }}
|
||||
</h1>
|
||||
<transition name="fade">
|
||||
<CustomTransition name="fade">
|
||||
<span
|
||||
v-if="loading && saving"
|
||||
class="is-inline-flex is-align-items-center"
|
||||
@ -32,7 +32,7 @@
|
||||
<icon icon="check" class="mr-2"/>
|
||||
{{ $t('misc.saved') }}
|
||||
</span>
|
||||
</transition>
|
||||
</CustomTransition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -41,6 +41,7 @@ import {ref, computed, type PropType} from 'vue'
|
||||
import {useRouter} from 'vue-router'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import CustomTransition from '@/components/misc/CustomTransition.vue'
|
||||
import ColorBubble from '@/components/misc/colorBubble.vue'
|
||||
import Done from '@/components/misc/Done.vue'
|
||||
|
||||
|
@ -5,8 +5,8 @@
|
||||
<ButtonLink @click="() => visible = true">{{ $t('task.quickAddMagic.what') }}</ButtonLink>
|
||||
</p>
|
||||
<modal
|
||||
@close="() => visible = false"
|
||||
:enabled="visible"
|
||||
@close="() => visible = false"
|
||||
transition-name="fade"
|
||||
:overflow="true"
|
||||
variant="hint-modal"
|
||||
|
@ -14,7 +14,7 @@
|
||||
<template v-if="editEnabled && showCreate">
|
||||
<label class="label" key="label">
|
||||
{{ $t('task.relation.new') }}
|
||||
<transition name="fade">
|
||||
<CustomTransition name="fade">
|
||||
<span class="is-inline-flex" v-if="taskRelationService.loading">
|
||||
<span class="loader is-inline-block mr-2"></span>
|
||||
{{ $t('misc.saving') }}
|
||||
@ -22,7 +22,7 @@
|
||||
<span class="has-text-success" v-else-if="!taskRelationService.loading && saved">
|
||||
{{ $t('misc.saved') }}
|
||||
</span>
|
||||
</transition>
|
||||
</CustomTransition>
|
||||
</label>
|
||||
<div class="field" key="field-search">
|
||||
<Multiselect
|
||||
@ -133,7 +133,7 @@
|
||||
</p>
|
||||
|
||||
<modal
|
||||
v-if="relationToDelete !== undefined"
|
||||
:enabled="relationToDelete !== undefined"
|
||||
@close="relationToDelete = undefined"
|
||||
@submit="removeTaskRelation()"
|
||||
>
|
||||
@ -163,6 +163,7 @@ import {RELATION_KINDS, RELATION_KIND, type IRelationKind} from '@/types/IRelati
|
||||
import TaskRelationService from '@/services/taskRelation'
|
||||
import TaskRelationModel from '@/models/taskRelation'
|
||||
|
||||
import CustomTransition from '@/components/misc/CustomTransition.vue'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import Multiselect from '@/components/input/multiselect.vue'
|
||||
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
|
||||
@ -442,6 +443,4 @@ async function toggleTaskDone(task: ITask) {
|
||||
padding: 0;
|
||||
height: 18px; // The exact height of the checkbox in the container
|
||||
}
|
||||
|
||||
@include modal-transition();
|
||||
</style>
|
@ -74,9 +74,9 @@
|
||||
- {{ $t('task.detail.due', {at: formatDateSince(task.dueDate)}) }}
|
||||
</time>
|
||||
</BaseButton>
|
||||
<transition name="fade">
|
||||
<CustomTransition name="fade">
|
||||
<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task" ref="deferDueDate"/>
|
||||
</transition>
|
||||
</CustomTransition>
|
||||
|
||||
<priority-label :priority="task.priority" :done="task.done"/>
|
||||
|
||||
@ -140,6 +140,7 @@ import User from '@/components/misc/user.vue'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
|
||||
import ColorBubble from '@/components/misc/colorBubble.vue'
|
||||
import CustomTransition from '@/components/misc/CustomTransition.vue'
|
||||
|
||||
import TaskService from '@/services/task'
|
||||
|
||||
|
Reference in New Issue
Block a user