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

transitions via Vue transitions + CSS variable
continuous-integration/drone/pr Build is passing Details

This commit is contained in:
profi248 2021-01-02 15:10:42 +01:00 committed by David Košťál
parent 0a5c0869cf
commit 473c89fee5
3 changed files with 134 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -255,8 +255,8 @@
background-color: transparent;
}
.flash-background {
animation: flash-background 0.75s ease 1;
.flash-background-enter, .flash-background-enter-active {
animation: flash-background $flash-background-duration ease 1;
}
@keyframes flash-background {

1
src/styles/theme/variables.scss
View File

@ -17,6 +17,7 @@ $navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
$bulmaswatch-import-font: false !default;
$light-background: #F1F5F8;
$transition-duration: 100ms;
$flash-background-duration: 750ms;
$transparent-background-light: rgba($light-background, 0.9);
$vikunja-font: 'Quicksand', sans-serif;

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

@ -28,7 +28,8 @@
v-model="task.assignees"
/>
</div>
<div class="column" ref="priorityParent" v-if="activeFields.priority">
<transition name="flash-background" appear>
<div class="column" v-if="activeFields.priority">
<!-- Priority -->
<div class="detail-title">
<icon :icon="['far', 'star']"/>
@ -40,7 +41,9 @@
ref="priority"
v-model="task.priority"/>
</div>
<div class="column" ref="dueDateParent" v-if="activeFields.dueDate">
</transition>
<transition name="flash-background" appear>
<div class="column" v-if="activeFields.dueDate">
<!-- Due Date -->
<div class="detail-title">
<icon icon="calendar"/>
@ -61,7 +64,9 @@
</a>
</div>
</div>
<div class="column" ref="percentDoneParent" v-if="activeFields.percentDone">
</transition>
<transition name="flash-background" appear>
<div class="column" v-if="activeFields.percentDone">
<!-- Percent Done -->
<div class="detail-title">
<icon icon="percent"/>
@ -73,7 +78,9 @@
ref="percentDone"
v-model="task.percentDone"/>
</div>
<div class="column" ref="startDateParent" v-if="activeFields.startDate">
</transition>
<transition name="flash-background" appear>
<div class="column" v-if="activeFields.startDate">
<!-- Start Date -->
<div class="detail-title">
<icon icon="calendar-week"/>
@ -94,7 +101,9 @@
</a>
</div>
</div>
<div class="column" ref="endDateParent" v-if="activeFields.endDate">
</transition>
<transition name="flash-background" appear>
<div class="column" v-if="activeFields.endDate">
<!-- End Date -->
<div class="detail-title">
<icon icon="calendar-week"/>
@ -115,7 +124,9 @@
</a>
</div>
</div>
<div class="column" ref="remindersParent" v-if="activeFields.reminders">
</transition>
<transition name="flash-background" appear>
<div class="column" v-if="activeFields.reminders">
<!-- Reminders -->
<div class="detail-title">
<icon icon="history"/>
@ -127,7 +138,9 @@
ref="reminders"
v-model="task.reminderDates"/>
</div>
<div class="column" ref="repeatAfterParent" v-if="activeFields.repeatAfter">
</transition>
<transition name="flash-background" appear>
<div class="column" v-if="activeFields.repeatAfter">
<!-- Repeat after -->
<div class="detail-title">
<icon :icon="['far', 'clock']"/>
@ -139,7 +152,9 @@
ref="repeatAfter"
v-model="task"/>
</div>
<div class="column" ref="colorParent" v-if="activeFields.color">
</transition>
<transition name="flash-background" appear>
<div class="column" v-if="activeFields.color">
<!-- Color -->
<div class="detail-title">
<icon icon="fill-drip"/>
@ -151,6 +166,7 @@
ref="color"
v-model="taskColor"/>
</div>
</transition>
</div>
<!-- Labels -->
@ -548,16 +564,6 @@ export default {
if (this.$refs[fieldName]) {
this.$refs[fieldName].$el.focus();
// animate background flash with CSS animations (if the field's parent has a ref)
if (typeof this.$refs[fieldName + "Parent"] !== 'undefined')
this.$refs[fieldName + "Parent"].classList.add('flash-background');
// remove animation class after animation finishes
setTimeout(() => {
if (typeof this.$refs[fieldName + "Parent"] !== 'undefined')
this.$refs[fieldName + "Parent"].classList.remove('flash-background');
}, 750);
// scroll the field to the center of the screen if not in viewport already
const boundingRect = this.$refs[fieldName].$el.getBoundingClientRect();