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

Make adding fields to tasks more intuitive #365

Merged
konrad merged 3 commits from profi248/frontend:task-add-property-improvement into master 2021-01-04 21:22:57 +00:00
Conversation 3 Commits 3 Files Changed 3 +38 -9
2 changed files with 38 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0a5c0869cf - Show all commits

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;
konrad commented 2021-01-02 13:08:42 +00:00
Outdated
Review
Copy Link

There's a $transition-duration variable (the name is something like that), please use that to let the the transitions have a consistent duration.

There's a `$transition-duration` variable (the name is something like that), please use that to let the the transitions have a consistent duration.
profi248 commented 2021-01-02 13:50:35 +00:00
Outdated
Review
Copy Link

The default transition duration is 100ms, which doesn't look good (this transition is kind of a special case). I think adding a new variable just for this (for now) would be the best.

The default transition duration is 100ms, which doesn't look good (this transition is kind of a special case). I think adding a new variable just for this (for now) would be the best.
}
@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')
konrad commented 2021-01-02 13:07:15 +00:00
Outdated
Review
Copy Link

Please use vue transitions for the flashing.

Please use [vue transitions](https://vuejs.org/v2/api/#transition) for the flashing.
profi248 commented 2021-01-02 13:58:02 +00:00
Outdated
Review
Copy Link

Okay, will try that

Okay, will try that
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"});
}
})
},