1
0

feat: use transition component everywhere

This commit is contained in:
Dominik Pschenitschni
2022-11-12 19:24:02 +01:00
parent 631a19fa92
commit 8c44ed83e6
30 changed files with 163 additions and 165 deletions

View File

@ -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>

View File

@ -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 {

View File

@ -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>

View File

@ -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'

View File

@ -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'

View File

@ -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"

View File

@ -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>

View File

@ -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'