Add color indicators to task list #321
No reviewers
Labels
No Label
area/internal-code
changes requested
confirmed
dependencies
duplicate
good first issue
help wanted
hosting
invalid
kind/bug
kind/feature
question
wontfix
No Milestone
No project
No Assignees
2 Participants
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: vikunja/frontend#321
Loading…
Reference in New Issue
No description provided.
Delete Branch "Bouni/vikunja-frontend:task-list-color-bubbles"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
This PR adds color bubbles to the task list to make it more easy to spot to which list they belong as requestd in #246
WIP: Add color indicators to task listto Add color indicators to task listHey, thanks for the PR!
Some small nits, but looks great overall.
@ -2,2 +2,4 @@
<div :class="{'is-loading': taskService.loading}" class="task loader-container">
<fancycheckbox :disabled="isArchived || disabled" @change="markAsDone" v-model="task.done"/>
<span
:style="{backgroundColor: $store.getters['lists/getListById'](task.listId).hexColor }"
Could you put this in a computed property?
@ -53,6 +53,14 @@
display: none;
}
.color-bubble {
Could you move the general styling (everything but the sizing) from
theme/navigation.scss
totheme/theme.scss
and then just override the size here?Hi,
I tried to put the listColor into computed as you suggested, it works but I see a lot of errors in the console!?
Any ideas why this happens?
I figured it out, at first the getter is called with listId 0 which returns null 🤷♂️
@ -122,2 +127,4 @@
},
computed: {
listColor() {
return listId => listId > 0 ? this.$store.getters['lists/getListById'](listId).hexColor : ""
Since this component only ever has one task, could you change this to include the task directly? Instead of passing it as an argument.
It would also be great if you would check if the list is null instead of checking if the
listId
is > 0 - imagine a bad list id which is > 0, that would still yield an error to the console.TL;DR:
The last part should return
''
if the list is null, my bad.Thanks!