Show tree status icons in file viewer

opensafely-core · Jul 2, 2024 · 22d9289 · 22d9289
1 parent d2f409d
commit 22d9289
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 12 deletions.
diff --git a/airlock/static/assets/file_browser/index.css b/airlock/static/assets/file_browser/index.css
@@ -46,19 +46,53 @@
   padding: 0.25rem 0.75rem;
 }
 
-.file-status--success {
+.file-status__icon {
+  background-image: var(--icon-url);
+  background-size: 100%;
+  filter: var(--icon-filter);
+  height: 14px;
+  margin-right: 0.25rem;
+  width: 14px;
+}
+
+.file-status--approved {
   --status-color: var(--color-green-800);
   --status-bg: var(--color-green-100);
+  --icon-filter: invert(18%) sepia(77%) saturate(1712%) hue-rotate(142deg)
+    brightness(102%) contrast(95%);
+  --icon-url: url("/static/icons/check_circle_outline.svg");
 }
 
-.file-status--danger {
+.file-status--rejected {
   --status-color: var(--color-fuchsia-800);
   --status-bg: var(--color-fuchsia-100);
+  --icon-filter: invert(17%) sepia(40%) saturate(5736%) hue-rotate(284deg)
+    brightness(89%) contrast(98%);
+  --icon-url: url("/static/icons/help_circle_outline.svg");
 }
 
-.file-status--warning {
+.file-status--unknown {
   --status-color: var(--color-yellow-800);
   --status-bg: var(--color-yellow-100);
+  --icon-filter: invert(30%) sepia(79%) saturate(491%) hue-rotate(351deg)
+    brightness(95%) contrast(99%);
+  --icon-url: url("/static/icons/unknown.svg");
+}
+
+.file-status--withdrawn {
+  --status-color: var(--color-orange-800);
+  --status-bg: var(--color-orange-50);
+  --icon-filter: invert(25%) sepia(6%) saturate(7490%) hue-rotate(333deg)
+    brightness(115%) contrast(111%);
+  --icon-url: url("/static/icons/cancel_circle_outline.svg");
+}
+
+.file-status--supporting {
+  --status-color: var(--color-slate-800);
+  --status-bg: var(--color-slate-50);
+  --icon-filter: invert(10%) sepia(9%) saturate(3595%) hue-rotate(178deg)
+    brightness(93%) contrast(85%);
+  --icon-url: url("/static/icons/attach_file.svg");
 }
 
 /* More dropdown */

diff --git a/airlock/templates/file_browser/file.html b/airlock/templates/file_browser/file.html
@@ -43,15 +43,26 @@
           </form>
         {% endif %}
       {% elif is_output_checker %}
-        <div>
-          {% if not file_reset_review_url %}
-            <span class="file-status file-status--warning">No status</span>
-          {% elif file_approve_url %}
-            <span class="file-status file-status--danger">Changes requested</span>
-          {% elif file_reject_url %}
-            <span class="file-status file-status--success">Approved</span>
-          {% endif %}
-        </div>
+        {% if not path_item.is_supporting and not path_item.is_withdrawn %}
+          <div>
+            {% if not file_reset_review_url %}
+              <span class="file-status file-status--unknown">
+                <span class="file-status__icon"></span>
+                No status
+              </span>
+            {% elif file_approve_url %}
+              <span class="file-status file-status--rejected">
+                <span class="file-status__icon"></span>
+                Changes requested
+              </span>
+            {% elif file_reject_url %}
+              <span class="file-status file-status--approved">
+                <span class="file-status__icon"></span>
+                Approved
+              </span>
+            {% endif %}
+          </div>
+        {% endif %}
 
         <div class="btn-group">
           {% if file_approve_url %}