From 9029ab89eb222cccea0dc4636c6bb53fbc1355af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Mon, 4 Sep 2023 13:16:08 +0200
Subject: [PATCH] Webapp: show placeholder when worker tag has no description

Show a 'click to set a description' placeholder, when a worker tag has
no description. That way it's clear where to click to edit it.
---
 web/app/src/views/TagsView.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/web/app/src/views/TagsView.vue b/web/app/src/views/TagsView.vue
index eca653fb..2f235625 100644
--- a/web/app/src/views/TagsView.vue
+++ b/web/app/src/views/TagsView.vue
@@ -35,7 +35,7 @@
   <footer class="app-footer"></footer>
 </template>
 
-<style scoped>
+<style>
 .create-tag-container {
   width: 100%;
   display: flex;
@@ -47,6 +47,9 @@
   margin-right: 10px;
   height: 30px;
 }
+.placeholder {
+  color: var(--color-text-hint);
+}
 </style>
 
 <script>
@@ -85,6 +88,13 @@ export default {
           field: "description",
           sorter: "string",
           editor: "input",
+          formatter(cell) {
+            const cellValue = cell.getData().description;
+            if (!cellValue) {
+              return '<span class="placeholder">click to set a description</span>';
+            }
+            return cellValue;
+          },
         },
       ],
       layout: "fitData",