profi248
/
frontend
forked from vikunja/frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make adding fields to tasks more intuitive 

- briefly flash the background of (most) fields that have just been added
- scroll the newly added field into viewport if not visible already
This commit is contained in:
profi248 2021-01-02 13:34:42 +01:00 committed by David Košťál
parent 158e697988
commit 0a5c0869cf
2 changed files with 38 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -254,3 +254,16 @@
.link-share-container .task-view {
background-color: transparent;
}
.flash-background {
animation: flash-background 0.75s ease 1;
}
@keyframes flash-background {
0% {
background: lighten($primary, 30);
}
100% {
background: transparent;
}
}

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

@ -28,7 +28,7 @@
v-model="task.assignees"
/>
</div>
<div class="column" v-if="activeFields.priority">
<div class="column" ref="priorityParent" v-if="activeFields.priority">
<!-- Priority -->
<div class="detail-title">
<icon :icon="['far', 'star']"/>
@ -40,7 +40,7 @@
ref="priority"
v-model="task.priority"/>
</div>
<div class="column" v-if="activeFields.dueDate">
<div class="column" ref="dueDateParent" v-if="activeFields.dueDate">
<!-- Due Date -->
<div class="detail-title">
<icon icon="calendar"/>
@ -61,7 +61,7 @@
</a>
</div>
</div>
<div class="column" v-if="activeFields.percentDone">
<div class="column" ref="percentDoneParent" v-if="activeFields.percentDone">
<!-- Percent Done -->
<div class="detail-title">
<icon icon="percent"/>
@ -73,7 +73,7 @@
ref="percentDone"
v-model="task.percentDone"/>
</div>
<div class="column" v-if="activeFields.startDate">
<div class="column" ref="startDateParent" v-if="activeFields.startDate">
<!-- Start Date -->
<div class="detail-title">
<icon icon="calendar-week"/>
@ -94,7 +94,7 @@
</a>
</div>
</div>
<div class="column" v-if="activeFields.endDate">
<div class="column" ref="endDateParent" v-if="activeFields.endDate">
<!-- End Date -->
<div class="detail-title">
<icon icon="calendar-week"/>
@ -115,7 +115,7 @@
</a>
</div>
</div>
<div class="column" v-if="activeFields.reminders">
<div class="column" ref="remindersParent" v-if="activeFields.reminders">
<!-- Reminders -->
<div class="detail-title">
<icon icon="history"/>
@ -127,7 +127,7 @@
ref="reminders"
v-model="task.reminderDates"/>
</div>
<div class="column" v-if="activeFields.repeatAfter">
<div class="column" ref="repeatAfterParent" v-if="activeFields.repeatAfter">
<!-- Repeat after -->
<div class="detail-title">
<icon :icon="['far', 'clock']"/>
@ -139,7 +139,7 @@
ref="repeatAfter"
v-model="task"/>
</div>
<div class="column" v-if="activeFields.color">
<div class="column" ref="colorParent" v-if="activeFields.color">
<!-- Color -->
<div class="detail-title">
<icon icon="fill-drip"/>
@ -546,7 +546,23 @@ export default {
this.activeFields[fieldName] = true
this.$nextTick(() => {
if (this.$refs[fieldName]) {
this.$refs[fieldName].$el.focus()
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();
if (boundingRect.top > (window.scrollY + window.innerHeight) || boundingRect.top < window.scrollY)
this.$refs[fieldName].$el.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
}
})
},