vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: move transition in own component

This commit is contained in:
Dominik Pschenitschni 2022-11-12 17:06:53 +01:00
parent fba402fcd0
commit 631a19fa92
Signed by: dpschen
GPG Key ID: B257AC0149F43A77
3 changed files with 67 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/misc/CustomTransition.vue Normal file
View File

@ -0,0 +1,37 @@
<template>
<transition name="flash-background">
<slot />
</transition>
</template>
<script setup lang="ts">
defineProps<{
name: 'flash-background'
}>()
</script>
<style scoped lang="scss">
$flash-background-duration: 750ms;
.flash-background-enter-from,
.flash-background-enter-active {
animation: flash-background $flash-background-duration ease 1;
}
@keyframes flash-background {
0% {
background: var(--primary-light);
}
100% {
background: transparent;
}
}
@media (prefers-reduced-motion: reduce) {
@keyframes flash-background {
0% {
background: transparent;
}
}
}
</style>

13
src/styles/components/task.scss
View File

@ -1,17 +1,4 @@
// FIXME: should be in TaskDetailView.vue
.link-share-container:not(.has-background) .task-view {
background: transparent;
}
// FIXME: should be a prop of TaskDetailView.vue
.modal-container .task-view {
border-radius: $radius;
padding: 1rem;
color: var(--text);
background-color: var(--site-background) !important;
@media screen and (max-width: 800px) {
border-radius: 0;
padding-top: 2rem;
}
}

71
src/views/tasks/TaskDetailView.vue
View File

@ -41,7 +41,7 @@
v-model="task.assignees"
/>
</div>
<transition name="flash-background" appear>
<CustomTransition name="flash-background" appear>
<div class="column" v-if="activeFields.priority">
<!-- Priority -->
<div class="detail-title">
@ -54,8 +54,8 @@
:ref="e => setFieldRef('priority', e)"
v-model="task.priority"/>
</div>
</transition>
<transition name="flash-background" appear>
</CustomTransition>
<CustomTransition name="flash-background" appear>
<div class="column" v-if="activeFields.dueDate">
<!-- Due Date -->
<div class="detail-title">
@ -80,8 +80,8 @@
</BaseButton>
</div>
</div>
</transition>
<transition name="flash-background" appear>
</CustomTransition>
<CustomTransition name="flash-background" appear>
<div class="column" v-if="activeFields.percentDone">
<!-- Progress -->
<div class="detail-title">
@ -94,8 +94,8 @@
:ref="e => setFieldRef('percentDone', e)"
v-model="task.percentDone"/>
</div>
</transition>
<transition name="flash-background" appear>
</CustomTransition>
<CustomTransition name="flash-background" appear>
<div class="column" v-if="activeFields.startDate">
<!-- Start Date -->
<div class="detail-title">
@ -121,8 +121,8 @@
</BaseButton>
</div>
</div>
</transition>
<transition name="flash-background" appear>
</CustomTransition>
<CustomTransition name="flash-background" appear>
<div class="column" v-if="activeFields.endDate">
<!-- End Date -->
<div class="detail-title">
@ -147,8 +147,8 @@
</BaseButton>
</div>
</div>
</transition>
<transition name="flash-background" appear>
</CustomTransition>
<CustomTransition name="flash-background" appear>
<div class="column" v-if="activeFields.reminders">
<!-- Reminders -->
<div class="detail-title">
@ -162,8 +162,8 @@
@update:model-value="saveTask"
/>
</div>
</transition>
<transition name="flash-background" appear>
</CustomTransition>
<CustomTransition name="flash-background" appear>
<div class="column" v-if="activeFields.repeatAfter">
<!-- Repeat after -->
<div class="is-flex is-justify-content-space-between">
@ -190,8 +190,8 @@
}"
/>
</div>
</transition>
<transition name="flash-background" appear>
</CustomTransition>
<CustomTransition name="flash-background" appear>
<div class="column" v-if="activeFields.color">
<!-- Color -->
<div class="detail-title">
@ -205,7 +205,7 @@
@update:model-value="saveTask"
/>
</div>
</transition>
</CustomTransition>
</div>
<!-- Labels -->
@ -480,6 +480,7 @@ import RelatedTasks from '@/components/tasks/partials/relatedTasks.vue'
import Reminders from '@/components/tasks/partials/reminders.vue'
import RepeatAfter from '@/components/tasks/partials/repeatAfter.vue'
import TaskSubscription from '@/components/misc/subscription.vue'
import CustomTransition from '@/components/misc/CustomTransition.vue'
import {uploadFile} from '@/helpers/attachments'
import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
@ -798,8 +799,6 @@ async function setPercentDone(percentDone: number) {
</script>
<style lang="scss" scoped>
$flash-background-duration: 750ms;
.task-view-container {
// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
@ -820,6 +819,18 @@ $flash-background-duration: 750ms;
}
}
.is-modal .task-view {
border-radius: $radius;
padding: 1rem;
color: var(--text);
background-color: var(--site-background) !important;
@media screen and (max-width: 800px) {
border-radius: 0;
padding-top: 2rem;
}
}
.task-view * {
transition: opacity 50ms ease;
}
@ -996,33 +1007,11 @@ line-height: 1;
padding-left: .25rem;
}
.flash-background-enter-from,
.flash-background-enter-active {
animation: flash-background $flash-background-duration ease 1;
}
@keyframes flash-background {
0% {
background: var(--primary-light);
}
100% {
background: transparent;
}
}
@media (prefers-reduced-motion: reduce) {
@keyframes flash-background {
0% {
background: transparent;
}
}
}
@include modal-transition();
.detail-content {
@media print {
width: 100% !important;
width: 100% !important;
}
}
</style>