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

@ -94,9 +94,9 @@
</div>
<modal
:enabled="showDeleteModal"
@close="showDeleteModal = false"
@submit="deleteLabel(labelToDelete)"
v-if="showDeleteModal"
>
<template #header><span>{{ $t('task.label.delete.header') }}</span></template>

View File

@ -206,20 +206,18 @@
</div>
</div>
<transition name="modal">
<modal
v-if="showBucketDeleteModal"
@close="showBucketDeleteModal = false"
@submit="deleteBucket()"
>
<template #header><span>{{ $t('list.kanban.deleteHeaderBucket') }}</span></template>
<modal
:enabled="showBucketDeleteModal"
@close="showBucketDeleteModal = false"
@submit="deleteBucket()"
>
<template #header><span>{{ $t('list.kanban.deleteHeaderBucket') }}</span></template>
<template #text>
<p>{{ $t('list.kanban.deleteBucketText1') }}<br/>
{{ $t('list.kanban.deleteBucketText2') }}</p>
</template>
</modal>
</transition>
<template #text>
<p>{{ $t('list.kanban.deleteBucketText1') }}<br/>
{{ $t('list.kanban.deleteBucketText2') }}</p>
</template>
</modal>
</div>
</template>
</ListWrapper>
@ -792,6 +790,4 @@ $filter-container-height: '1rem - #{$switch-view-height}';
.move-card-leave-active {
display: none;
}
@include modal-transition();
</style>

View File

@ -43,7 +43,7 @@
:key="im.id"
:style="{'background-image': `url(${backgroundBlurHashes[im.id]})`}"
>
<transition name="fade">
<CustomTransition name="fade">
<BaseButton
v-if="backgroundThumbs[im.id]"
class="image-search__image-button"
@ -51,7 +51,7 @@
>
<img class="image-search__image" :src="backgroundThumbs[im.id]" alt="" />
</BaseButton>
</transition>
</CustomTransition>
<BaseButton
:href="`https://unsplash.com/@${im.info.author}`"
@ -102,7 +102,9 @@ import {ref, computed, shallowReactive} from 'vue'
import {useI18n} from 'vue-i18n'
import {useRoute, useRouter} from 'vue-router'
import debounce from 'lodash.debounce'
import BaseButton from '@/components/base/BaseButton.vue'
import CustomTransition from '@/components/misc/CustomTransition.vue'
import {useBaseStore} from '@/stores/base'
import {useListStore} from '@/stores/lists'

View File

@ -430,9 +430,9 @@
</div>
<modal
:enabled="showDeleteModal"
@close="showDeleteModal = false"
@submit="deleteTask()"
v-if="showDeleteModal"
>
<template #header><span>{{ $t('task.detail.delete.header') }}</span></template>
@ -1007,8 +1007,6 @@ line-height: 1;
padding-left: .25rem;
}
@include modal-transition();
.detail-content {
@media print {
width: 100% !important;

View File

@ -149,35 +149,32 @@
</modal>
<!-- Team delete modal -->
<transition name="modal">
<modal
@close="showDeleteModal = false"
@submit="deleteTeam()"
v-if="showDeleteModal"
>
<template #header><span>{{ $t('team.edit.delete.header') }}</span></template>
<modal
:enabled="showDeleteModal"
@close="showDeleteModal = false"
@submit="deleteTeam()"
>
<template #header><span>{{ $t('team.edit.delete.header') }}</span></template>
<template #text>
<p>{{ $t('team.edit.delete.text1') }}<br/>
{{ $t('team.edit.delete.text2') }}</p>
</template>
</modal>
<template #text>
<p>{{ $t('team.edit.delete.text1') }}<br/>
{{ $t('team.edit.delete.text2') }}</p>
</template>
</modal>
</transition>
<!-- User delete modal -->
<transition name="modal">
<modal
@close="showUserDeleteModal = false"
@submit="deleteMember()"
v-if="showUserDeleteModal"
>
<template #header><span>{{ $t('team.edit.deleteUser.header') }}</span></template>
<modal
:enabled="showUserDeleteModal"
@close="showUserDeleteModal = false"
@submit="deleteMember()"
>
<template #header><span>{{ $t('team.edit.deleteUser.header') }}</span></template>
<template #text>
<p>{{ $t('team.edit.deleteUser.text1') }}<br/>
{{ $t('team.edit.deleteUser.text2') }}</p>
</template>
</modal>
</transition>
<template #text>
<p>{{ $t('team.edit.deleteUser.text1') }}<br/>
{{ $t('team.edit.deleteUser.text2') }}</p>
</template>
</modal>
</div>
</template>
@ -339,6 +336,4 @@ async function leave() {
padding: 0;
}
}
@include modal-transition();
</style>