forked from vikunja/frontend
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:
parent
158e697988
commit
0a5c0869cf
@ -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;
|
||||
}
|
||||
}
|
@ -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"});
|
||||
}
|
||||
})
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user