From 1dcf4520a0cf999d3b506e8511d71150e1cb5bb7 Mon Sep 17 00:00:00 2001
From: Bouni <bouni@owee.de>
Date: Thu, 10 Dec 2020 12:06:49 +0000
Subject: [PATCH] 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 | 9 +++++++++
 src/styles/components/tasks.scss                   | 5 +++++
 src/styles/theme/navigation.scss                   | 3 ---
 src/styles/theme/theme.scss                        | 6 ++++++
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 7f9ea0fa..ef43c716 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/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,
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index e531f4c2..dfefc20d 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -53,6 +53,11 @@
       display: none;
     }
 
+    .color-bubble {
+      width: 11px;
+      height: 10px;
+    }
+
     .tag {
       margin: 0 0.5em;
     }
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index 5aa89c17..a054e55e 100644
--- a/src/styles/theme/navigation.scss
+++ b/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 {
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index 2680ffc6..1a548e5c 100644
--- a/src/styles/theme/theme.scss
+++ b/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;
+}