Add color indicators to task list (#321)
continuous-integration/drone/push Build is passing Details

fix requested changes

use computed for listColor, moved .colorBubble to theme.scss

fixed tabs

add color indicator to task list

Reviewed-on: #321
Reviewed-by: konrad <konrad@kola-entertainments.de>
Co-Authored-By: Bouni <bouni@owee.de>
Co-Committed-By: Bouni <bouni@owee.de>
This commit is contained in:
Bouni 2020-12-10 12:06:49 +00:00 committed by konrad
parent ffde50453a
commit 1dcf4520a0
4 changed files with 20 additions and 3 deletions

View File

@ -1,6 +1,11 @@
<template>
<div :class="{'is-loading': taskService.loading}" class="task loader-container">
<fancycheckbox :disabled="isArchived || disabled" @change="markAsDone" v-model="task.done"/>
<span
:style="{backgroundColor: listColor }"
class="color-bubble"
v-if="listColor !== ''">
</span>
<span :class="{ 'done': task.done}" class="tasktext">
<router-link :to="{ name: taskDetailRoute, params: { id: task.id } }">
<router-link
@ -121,6 +126,10 @@ export default {
this.taskService = new TaskService()
},
computed: {
listColor() {
const list = this.$store.getters['lists/getListById'](this.task.listId)
return list !== null ? list.hexColor : ''
},
currentList() {
return typeof this.$store.state.currentList === 'undefined' ? {
id: 0,

View File

@ -53,6 +53,11 @@
display: none;
}
.color-bubble {
width: 11px;
height: 10px;
}
.tag {
margin: 0 0.5em;
}

View File

@ -163,11 +163,8 @@
}
.color-bubble {
display: inline-block;
width: 14px; // Without this, the bubble is only 10.2342357612px wide and seems squashed.
height: 12px;
border-radius: 100%;
margin-right: 4px;
}
.favorite {

View File

@ -98,3 +98,9 @@ button.table {
.is-fullwidth {
width: 100%;
}
.color-bubble {
display: inline-block;
border-radius: 100%;
margin-right: 4px;
}