Add color indicators to task list (#321)

fix requested changes

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

fixed tabs

add color indicator to task list

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/321
Reviewed-by: konrad <konrad@kola-entertainments.de>
Co-Authored-By: Bouni <bouni@owee.de>
Co-Committed-By: Bouni <bouni@owee.de>

src/components/tasks/partials/singleTaskInList.vue

@@ -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,

src/styles/components/tasks.scss

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

src/styles/theme/navigation.scss

@@ -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 {

src/styles/theme/theme.scss

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