feat(ui): add tags to workspace widget (#543)

Adds tags to the workspace widget on the UI.
leg100 · Jul 27, 2023 · 3000c09 · 3000c09
1 parent d792e23
commit 3000c09
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 22 deletions.
diff --git a/internal/http/html/static/css/input.css b/internal/http/html/static/css/input.css
@@ -43,7 +43,7 @@
     @apply text-blue-600
   }
   .widget {
-    @apply flex flex-col gap-4 place-content-between border border-black mt-3 p-2;
+    @apply flex flex-col gap-3 place-content-between border border-black mt-3 p-2;
   }
   .widget > div:first-child {
     @apply flex gap-2 items-baseline pb-2;
@@ -69,4 +69,7 @@
   th, td {
     @apply p-2;
   }
+  .tag {
+    @apply text-sm rounded-lg bg-blue-800 text-white font-semibold p-1
+  }
 }
diff --git a/internal/http/html/static/css/output.css b/internal/http/html/static/css/output.css
@@ -551,7 +551,7 @@ select {
   display: flex;
   flex-direction: column;
   place-content: space-between;
-  gap: 1rem;
+  gap: 0.75rem;
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -601,6 +601,18 @@ th, td {
   padding: 0.5rem;
 }
 
+.tag {
+  border-radius: 0.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
+  padding: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -776,6 +788,10 @@ th, td {
   margin-bottom: 1.25rem;
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -976,10 +992,6 @@ th, td {
   border-radius: 9999px;
 }
 
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
 .border {
   border-width: 1px;
 }

diff --git a/internal/http/html/static/templates/content/workspace_get.tmpl b/internal/http/html/static/templates/content/workspace_get.tmpl
@@ -56,20 +56,22 @@
         <div>Connected to <span class="bg-gray-200">{{ .Repo }} ({{ $.VCSProvider.CloudConfig }})</span></div>
       {{ end }}
       <div class="flex flex-col gap-2">
-        <h3 class="font-semibold mb-2">Tags</h3>
-        <div id="tags" class="flex flex-wrap gap-1">
-          {{ range .Workspace.Tags }}
-            <form action="{{ deleteTagWorkspacePath $.Workspace.ID }}" method="POST">
-              <input type="hidden" name="tag_name" id="remove-tag-name" value="{{ . }}" required>
-              <div class="flex gap-1 items-center bg-blue-800 text-white p-1 font-semibold rounded-lg">
-                <span>{{ . }}</span>
-                {{ if $.CanRemoveTags }}
-                  <button class="btn text-xs p-1 rounded-full bg-blue-800 hover:bg-white hover:text-blue-800 text-white shadow-transparent" id="button-remove-tag-{{ . }}" class="delete cross">x</button>
-                {{ end }}
-              </div>
-            </form>
-          {{ end }}
-        </div>
+        <h3 class="font-semibold mb-1">Tags</h3>
+        {{ with .Workspace.Tags }}
+          <div id="tags" class="flex flex-wrap gap-1">
+            {{ range . }}
+              <form action="{{ deleteTagWorkspacePath $.Workspace.ID }}" method="POST">
+                <input type="hidden" name="tag_name" id="remove-tag-name" value="{{ . }}" required>
+                <div class="flex gap-1 items-center tag">
+                  <span>{{ . }}</span>
+                  {{ if $.CanRemoveTags }}
+                    <button class="btn text-md p-1 rounded-full bg-blue-800 hover:bg-white hover:text-blue-800 text-white shadow-transparent" id="button-remove-tag-{{ . }}" class="delete cross">x</button>
+                  {{ end }}
+                </div>
+              </form>
+            {{ end }}
+          </div>
+        {{ end }}
         {{ if .CanAddTags }}
           {{ template "search-dropdown" .TagsDropdown }}
         {{ end }}

diff --git a/internal/http/html/static/templates/content/workspace_list.tmpl b/internal/http/html/static/templates/content/workspace_list.tmpl
@@ -19,7 +19,7 @@
         {{ range $k, $v := .TagFilters }}
           <div>
             <input id="workspace-tag-filter-{{ $k }}" class="hidden peer" name="search[tags]" value="{{ $k }}" type="checkbox" {{ checked $v }} onchange="this.form.submit()" />
-            <label for="workspace-tag-filter-{{ $k }}" class="bg-gray-300 text-white p-1 font-semibold rounded-lg peer-checked:bg-blue-800 cursor-pointer">
+            <label for="workspace-tag-filter-{{ $k }}" class="tag bg-gray-300 peer-checked:bg-blue-800 cursor-pointer">
               {{ $k }}
             </label>
           </div>

diff --git a/internal/http/html/static/templates/partials/workspace_item.tmpl b/internal/http/html/static/templates/partials/workspace_item.tmpl
@@ -6,6 +6,13 @@
         {{ template "run-status" . }}
       {{ end }}
     </div>
-    {{ template "identifier" . }}
+    <div>
+      <div class="flex gap-2 items-center">
+        {{ template "identifier" . }}
+        {{ range .Tags }}
+          <span class="tag">{{ . }}</span>
+        {{ end }}
+      </div>
+    </div>
   </div>
 {{ end }}