From 8fe362c2677a9bd79387a2f5b3eaaa7d44bd7c29 Mon Sep 17 00:00:00 2001
From: profi248 <kostal.david8@gmail.com>
Date: Wed, 30 Dec 2020 21:20:33 +0000
Subject: [PATCH] Show an icon if a task has non-empty description (Kanban view
 and List view) (#360)

Add an icon to indicate that task has a description (similar to Trello). Would also be nice to add a counter for comments, but it's not possible to reasonably currently implement unless the API also gets changed.

Also add attachment icon to List view, and change the icon in Kanban view to be consistent with the rest of the icon set.

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/360
Reviewed-by: konrad <konrad@kola-entertainments.de>
Co-authored-by: profi248 <kostal.david8@gmail.com>
Co-committed-by: profi248 <kostal.david8@gmail.com>
---
 .../tasks/partials/singleTaskInList.vue         |  8 ++++++++
 src/styles/components/kanban.scss               | 15 +++++++++++++++
 src/styles/components/tasks.scss                |  9 +++++++++
 src/views/list/views/Kanban.vue                 | 17 +++++++----------
 4 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index ef43c716d..6cb90706d 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -47,6 +47,14 @@
 				<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task"/>
 			</transition>
 			<priority-label :priority="task.priority"/>
+			<span>
+				<span class="list-task-icon" v-if="task.attachments.length > 0">
+					<icon icon="paperclip"/>
+				</span>
+				<span class="list-task-icon" v-if="task.description">
+					<icon icon="align-left"/>
+				</span>
+			</span>
 		</span>
 		<router-link
 			:to="{ name: 'list.list', params: { listId: task.listId } }"
diff --git a/src/styles/components/kanban.scss b/src/styles/components/kanban.scss
index 8ec541684..653ad86c7 100644
--- a/src/styles/components/kanban.scss
+++ b/src/styles/components/kanban.scss
@@ -97,6 +97,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
           padding: 0;
           display: flex;
           justify-content: space-between;
+          margin-top: 8px;
 
           .items {
             display: flex;
@@ -120,6 +121,20 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
             }
           }
 
+          .icons-container {
+            display: flex;
+            align-items: flex-end;
+            .icon {
+              padding: 0px .4rem;
+              &:not(:first-child) {
+                margin-left: 4px;
+              }
+              svg {
+                margin: 0;
+              }
+            }
+          }
+
           .icon {
             svg {
               margin: 4px 0 4px 4px;
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index 8add68d05..bb106d8b9 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -70,6 +70,15 @@
       width: 27px;
     }
 
+    .list-task-icon {
+      margin-left: 6px;
+
+      &:not(:first-of-type) {
+        margin-left: 8px;
+      }
+        
+    }
+
     a {
       color: $text;
       transition: color ease $transition-duration;
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index c75d38105..082e0a821 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -153,16 +153,13 @@
 											/>
 										</div>
 									</div>
-									<div>
-									<span class="icon" v-if="task.attachments.length > 0">
-										<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-											<rect fill="none" rx="0" ry="0"></rect>
-											<path
-												clip-rule="evenodd"
-												d="M19.86 8.29994C19.8823 8.27664 19.9026 8.25201 19.9207 8.22634C20.5666 7.53541 20.93 6.63567 20.93 5.68001C20.93 4.69001 20.55 3.76001 19.85 3.06001C18.45 1.66001 16.02 1.66001 14.62 3.06001L9.88002 7.80001C9.86705 7.81355 9.85481 7.82753 9.8433 7.8419L4.58 13.1C3.6 14.09 3.06 15.39 3.06 16.78C3.06 18.17 3.6 19.48 4.58 20.46C5.6 21.47 6.93 21.98 8.26 21.98C9.59 21.98 10.92 21.47 11.94 20.46L17.74 14.66C17.97 14.42 17.98 14.04 17.74 13.81C17.5 13.58 17.12 13.58 16.89 13.81L11.09 19.61C10.33 20.36 9.33 20.78 8.26 20.78C7.19 20.78 6.19 20.37 5.43 19.61C4.68 18.85 4.26 17.85 4.26 16.78C4.26 15.72 4.68 14.71 5.43 13.96L15.47 3.91996C15.4962 3.89262 15.5195 3.86346 15.54 3.83292C16.4992 2.95103 18.0927 2.98269 19.01 3.90001C19.48 4.37001 19.74 5.00001 19.74 5.67001C19.74 6.34001 19.48 6.97001 19.01 7.44001L14.27 12.18C14.2571 12.1935 14.2448 12.2075 14.2334 12.2218L8.96 17.4899C8.59 17.8699 7.93 17.8699 7.55 17.4899C7.36 17.2999 7.26 17.0399 7.26 16.7799C7.26 16.5199 7.36 16.2699 7.55 16.0699L15.47 8.14994C15.7 7.90994 15.71 7.52994 15.47 7.29994C15.23 7.06994 14.85 7.06994 14.62 7.29994L6.7 15.2199C6.29 15.6399 6.06 16.1899 6.06 16.7799C6.06 17.3699 6.29 17.9199 6.7 18.3399C7.12 18.7499 7.67 18.9799 8.26 18.9799C8.85 18.9799 9.4 18.7599 9.82 18.3399L19.86 8.29994Z"
-												fill-rule="evenodd"></path>
-										</svg>
-									</span>
+									<div class="icons-container">
+										<span class="icon" v-if="task.attachments.length > 0">
+											<icon icon="paperclip"/>	
+										</span>
+										<span v-if="task.description" class="icon">
+											<icon icon="align-left"/>
+										</span>
 									</div>
 								</div>
 							</div>