From 158e697988c4d822f67f87aacd787917ff7c2820 Mon Sep 17 00:00:00 2001
From: azymondrian <azymondrian@protonmail.com>
Date: Thu, 31 Dec 2020 15:16:07 +0000
Subject: [PATCH] Show task progress on task (#354)

Shows the task completion percent as progress bar in task lists and on kanban cards.

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/354
Reviewed-by: konrad <konrad@kola-entertainments.de>
Co-authored-by: azymondrian <azymondrian@protonmail.com>
Co-committed-by: azymondrian <azymondrian@protonmail.com>
---
 .../tasks/partials/singleTaskInList.vue         |  6 ++++++
 src/styles/components/kanban.scss               |  6 ++++++
 src/styles/components/tasks.scss                | 17 +++++++++++++++--
 src/styles/theme/navigation.scss                |  2 +-
 src/views/list/views/Kanban.vue                 |  6 ++++++
 5 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 6cb90706d..325a91842 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -56,6 +56,12 @@
 				</span>
 			</span>
 		</span>
+		<progress
+			class="progress is-small"
+			v-if="task.percentDone > 0"
+			:value="task.percentDone * 100" max="100">
+			{{ task.percentDone * 100 }}%
+		</progress>
 		<router-link
 			:to="{ name: 'list.list', params: { listId: task.listId } }"
 			class="task-list"
diff --git a/src/styles/components/kanban.scss b/src/styles/components/kanban.scss
index 653ad86c7..df4ea88e8 100644
--- a/src/styles/components/kanban.scss
+++ b/src/styles/components/kanban.scss
@@ -72,6 +72,12 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 8px';
           font-size: .85rem;
           word-break: break-word;
         }
+        
+        .progress {
+          margin: 8px 0 0 0;
+          width: 100%;
+          height: 0.5rem;
+        }
 
         .due-date {
           float: right;
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index bb106d8b9..637f7fa5a 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -19,6 +19,7 @@
 
   .task {
     display: flex;
+    flex-wrap: wrap;
     padding: 0.5rem 1rem;
     border-bottom: 1px solid darken(#fff, 10%);
     transition: background-color $transition;
@@ -35,7 +36,7 @@
       text-overflow: ellipsis;
       overflow: hidden;
       display: inline-block;
-      width: 100%;
+      flex: 1 0 50%;
 
       .overdue {
         color: $red;
@@ -55,7 +56,7 @@
 
     .color-bubble {
       height: 10px;
-      flex: 1 0 10px;
+      flex: 0 0 10px;
     }
 
     .tag {
@@ -151,6 +152,18 @@
     }
   }
 
+  .progress {
+    width: 50px;
+    margin: 0 0.5rem 0 0;
+    flex: 3 1 auto;
+
+    @media screen and (max-width: $tablet) {
+      margin: 0.5rem 0 0 0;
+      order: 1;
+      width: 100%;
+    }
+  }
+
   .task:last-child {
     border-bottom: none;
   }
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index e9d5be524..9b301f64c 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -164,7 +164,7 @@
 
         .color-bubble {
           height: 12px;
-          flex: 1 0 12px;
+          flex: 0 0 12px;
         }
 
         .favorite {
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index 082e0a821..bbeec4342 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -139,6 +139,12 @@
 								</span>
 							</span>
 								<h3>{{ task.title }}</h3>
+								<progress
+									class="progress is-small"
+									v-if="task.percentDone > 0"
+									:value="task.percentDone * 100" max="100">
+									{{ task.percentDone * 100 }}%
+								</progress>
 								<labels :labels="task.labels"/>
 								<div class="footer">
 									<div class="items">