From e87642026b43164900e16cb1cedde8b13c0fc874 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 10 Jan 2021 18:27:18 +0100
Subject: [PATCH] Fix task icons on kanban if there were multiple different
 ones

---
 .../tasks/partials/priorityLabel.vue          | 22 ++++---
 src/styles/components/kanban.scss             | 58 +++++++------------
 src/views/list/views/Kanban.vue               | 54 ++++++++---------
 3 files changed, 64 insertions(+), 70 deletions(-)

diff --git a/src/components/tasks/partials/priorityLabel.vue b/src/components/tasks/partials/priorityLabel.vue
index e44363be..8e69fe18 100644
--- a/src/components/tasks/partials/priorityLabel.vue
+++ b/src/components/tasks/partials/priorityLabel.vue
@@ -1,16 +1,19 @@
 <template>
 	<span
 		:class="{'not-so-high': priority === priorities.HIGH, 'high-priority': priority >= priorities.HIGH}"
+		class="priority-label"
 		v-if="showAll || priority >= priorities.HIGH">
 		<span class="icon" v-if="priority >= priorities.HIGH">
 			<icon icon="exclamation"/>
 		</span>
-		<template v-if="priority === priorities.UNSET">Unset</template>
-		<template v-if="priority === priorities.LOW">Low</template>
-		<template v-if="priority === priorities.MEDIUM">Medium</template>
-		<template v-if="priority === priorities.HIGH">High</template>
-		<template v-if="priority === priorities.URGENT">Urgent</template>
-		<template v-if="priority === priorities.DO_NOW">DO NOW</template>
+		<span>
+			<template v-if="priority === priorities.UNSET">Unset</template>
+			<template v-if="priority === priorities.LOW">Low</template>
+			<template v-if="priority === priorities.MEDIUM">Medium</template>
+			<template v-if="priority === priorities.HIGH">High</template>
+			<template v-if="priority === priorities.URGENT">Urgent</template>
+			<template v-if="priority === priorities.DO_NOW">DO NOW</template>
+		</span>
 		<span class="icon" v-if="priority === priorities.DO_NOW">
 			<icon icon="exclamation"/>
 		</span>
@@ -40,9 +43,14 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import '../../../styles/theme/variables';
 
+.priority-label {
+	display: flex;
+	align-items: center;
+}
+
 span.high-priority {
 	color: $red;
 	width: auto !important; // To override the width set in tasks
diff --git a/src/styles/components/kanban.scss b/src/styles/components/kanban.scss
index df4ea88e..cbb6bc7e 100644
--- a/src/styles/components/kanban.scss
+++ b/src/styles/components/kanban.scss
@@ -85,8 +85,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
           align-items: center;
 
           .icon {
-            margin-right: 2px;
-            margin-left: 5px;
+            margin-right: .25rem;
           }
 
           &.overdue {
@@ -102,16 +101,12 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
           background: transparent;
           padding: 0;
           display: flex;
-          justify-content: space-between;
-          margin-top: 8px;
+          flex-wrap: wrap;
+          align-items: center;
 
-          .items {
-            display: flex;
-            align-items: center;
-
-            > :not(:last-child) {
-              margin-right: .5em;
-            }
+          .tag, .assignees, .icon, .priority-label {
+            margin-top: .25rem;
+            margin-right: .25rem;
           }
 
           .assignees {
@@ -119,36 +114,26 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
 
             .user {
               display: inline;
-              margin: 0 -12px 0 0;
+              margin: 0;
 
               img {
-                margin-right: 0;
-              }
-            }
-          }
-
-          .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;
-              fill: $dark;
+          .tag {
+            margin-left: 0;
+          }
 
-              &:not(.svg-inline--fa) {
-                width: 16px;
-              }
+          .priority-label {
+            font-size: .75rem;
+            height: 2em;
+
+            .icon {
+              height: 1rem;
+              padding: 0 .25rem;
+              margin-top: 0;
             }
           }
         }
@@ -158,12 +143,11 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
         .priority-label {
           background: darken($task-background, 5%);
           border-radius: $radius;
-          padding-right: 5px;
+          padding: 0 .5rem;
         }
 
-        .priority-label {
-          margin: .5em 0;
-          display: inline-block;
+        .due-date {
+          padding: 0 .25rem;
         }
 
         .task-id {
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index 9f60f308..ba67a504 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -131,13 +131,13 @@
 									class="due-date"
 									v-if="task.dueDate > 0"
 									v-tooltip="formatDate(task.dueDate)">
-								<span class="icon">
-									<icon :icon="['far', 'calendar-alt']"/>
+									<span class="icon">
+										<icon :icon="['far', 'calendar-alt']"/>
+									</span>
+									<span>
+										{{ formatDateSince(task.dueDate) }}
+									</span>
 								</span>
-								<span>
-									{{ formatDateSince(task.dueDate) }}
-								</span>
-							</span>
 								<h3>{{ task.title }}</h3>
 								<progress
 									class="progress is-small"
@@ -145,28 +145,30 @@
 									:value="task.percentDone * 100" max="100">
 									{{ task.percentDone * 100 }}%
 								</progress>
-								<labels :labels="task.labels"/>
 								<div class="footer">
-									<div class="items">
-										<priority-label :priority="task.priority" class="priority-label"/>
-										<div class="assignees" v-if="task.assignees.length > 0">
-											<user
-												:avatar-size="24"
-												:key="task.id + 'assignee' + u.id"
-												:show-username="false"
-												:user="u"
-												v-for="u in task.assignees"
-											/>
-										</div>
-									</div>
-									<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>
+									<span
+										:key="label.id"
+										:style="{'background': label.hexColor, 'color': label.textColor}"
+										class="tag"
+										v-for="label in task.labels">
+										<span>{{ label.title }}</span>
+									</span>
+									<priority-label :priority="task.priority"/>
+									<div class="assignees" v-if="task.assignees.length > 0">
+										<user
+											:avatar-size="24"
+											:key="task.id + 'assignee' + u.id"
+											:show-username="false"
+											:user="u"
+											v-for="u in task.assignees"
+										/>
 									</div>
+									<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>
 						</component>