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