Merge pull request #314 from opensafely-core/fix-styles

Style updates and asset files

airlock/static/assets/activity.js

@@ -0,0 +1 @@
+window.initCustomTable();

airlock/static/assets/datatable.css

@@ -0,0 +1,24 @@
+.datatable thead {
+  position: sticky;
+  top: 0;
+  text-align: left;
+  background-color: rgba(248, 250, 252);
+}
+
+#customTable.datatable-table th:first-child,
+#customTable.datatable-table td:first-child {
+  padding-inline-start: 1.25rem;
+
+  button {
+    padding-inline-start: 0;
+  }
+}
+
+#customTable.datatable-table th:last-child,
+#customTable.datatable-table td:last-child {
+  padding-inline-end: 1.25rem;
+
+  button {
+    padding-inline-end: 0;
+  }
+}

airlock/static/assets/file_browser/csv.js

@@ -0,0 +1,17 @@
+const observer = new MutationObserver((mutations, obs) => {
+  const pageNumberEl = document.querySelector(
+    `[data-table-pagination="page-number"]`
+  );
+  if (pageNumberEl.innerText !== "#") {
+    document.querySelector("#csvtable p.spinner").style.display = "none";
+    document.querySelector("#csvtable table.datatable").style.display = "table";
+    document.querySelector("#pagination-nav").classList.remove("hidden");
+    obs.disconnect();
+    return;
+  }
+});
+
+observer.observe(document, {
+  childList: true,
+  subtree: true,
+});

airlock/static/assets/file_browser/index.css

@@ -0,0 +1,95 @@
+ul.root {
+  padding: 0.2rem;
+}
+
+ul.tree {
+  list-style: none;
+  font-size: 95%;
+}
+
+ul.tree details ul {
+  border-left: 1px dotted grey;
+  padding-left: 0.75rem;
+  margin-left: 0.5rem;
+}
+
+.tree summary {
+  cursor: pointer;
+}
+
+.tree li:has(> a.supporting) {
+  font-style: italic;
+}
+
+.tree li:has(> a.withdrawn) {
+  font-style: italic;
+  text-decoration: line-through;
+}
+
+.tree summary:has(> a.selected),
+.tree li:has(> a.selected) {
+  background-color: lightblue;
+}
+
+.tree summary:has(> a.invalid),
+.tree li:has(> a.invalid) {
+  color: darkgray;
+}
+
+.tree .selected {
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.tree .filegroup {
+  text-transform: uppercase;
+}
+
+.tree summary:has(> a.filegroup) {
+  background-color: lightgrey;
+}
+
+.tree a.directory {
+  background-repeat: no-repeat;
+  background-size: 1.4rem;
+  background-position: left 0 top 0;
+  padding-left: 1.3rem;
+}
+.tree summary {
+  padding-left: 0.25rem;
+}
+
+.content {
+  width: 100%;
+  max-width: 100%;
+}
+
+.content-scroller {
+  height: 75vh;
+  overflow: scroll;
+}
+
+.browser {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  min-height: 100%;
+  padding-inline: 1rem;
+}
+
+.browser__files {
+  background-color: white;
+  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+    rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
+  grid-column: 1 / 1;
+}
+
+.browser__content {
+  grid-column: 2 / -1;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+}

airlock/static/assets/file_browser/index.js

@@ -0,0 +1,22 @@
+// keep the selected class up to date in the tree on the client side
+function setTreeSelection(tree, event) {
+  // target here is the hx-get link that has been clicked on
+
+  // remove class from currently selected node
+  tree.querySelector(".selected")?.classList.remove("selected");
+
+  let target = event.srcElement;
+
+  // set current selected
+  target.classList.add("selected");
+  // ensure parent details container is open, which means clicking on a directory will open containers.
+  target.closest("details").open = true;
+
+  // if target link is a filegroup, ensure all child <details> are opened, to match server-side rendering of tree
+  if (target.classList.contains("filegroup")) {
+    target
+      .closest("li.tree")
+      .querySelectorAll("details")
+      .forEach((e) => (e.open = true));
+  }
+}

airlock/static/assets/login.js

@@ -0,0 +1,4 @@
+function showSpinner() {
+  document.getElementById("login-button").classList.add("hidden");
+  document.getElementById("spinner").classList.remove("hidden");
+}

airlock/templates/activity.html

@@ -1,48 +1,44 @@
-{% load django_vite %}
 {% load airlock %}
+{% load django_vite %}
+{% load static %}
 
-<style>
-  .datatable thead {
-    position: sticky;
-    top: 0;
-    text-align: left;
-    background-color: rgba(248,250,252);
-  }
-</style>
-
+<link rel="stylesheet" href="{% static 'assets/datatable.css' %}">
 
-{% #card title="Recent Activity" container=True %}
-  <table class="datatable" id="customTable">
-    <thead>
-      <tr>
-        <th><div class="flex flex-row gap-2">Time{% datatable_sort_icon %}</div></th>
-        <th><div class="flex flex-row gap-2">User{% datatable_sort_icon %}</div></th>
-        <th><div class="flex flex-row gap-2">Action{% datatable_sort_icon %}</div></th>
-        <th><div class="flex flex-row gap-2">Details{% datatable_sort_icon %}</div></th>
-      </tr>
-    </thead>
-    <tbody>
-      {% for log in activity %}
+{% #card title="Recent activity" %}
+  {% if activity %}
+    <table class="datatable" id="customTable">
+      <thead>
         <tr>
-          <td>{{ log.created_at|date:'Y-m-d H:i' }}</td>
-          <td>{{ log.user }}</td>
-          <td>{{ log.description }}</td>
-          <td>
-            <ul>
-              {% if log.path %}<li><b>path:</b> {{ log.path }}</li>{% endif %}
-              {% for k,v in log.extra.items %}
-                <li><b>{{ k }}:</b> {{ v }}</li>
-              {% endfor %}
-            </ul>
-          </td>
+          <th><div class="flex flex-row gap-2">Time{% datatable_sort_icon %}</div></th>
+          <th><div class="flex flex-row gap-2">User{% datatable_sort_icon %}</div></th>
+          <th><div class="flex flex-row gap-2">Action{% datatable_sort_icon %}</div></th>
+          <th><div class="flex flex-row gap-2">Details{% datatable_sort_icon %}</div></th>
         </tr>
-      {% endfor %}
-    </tbody>
-  </table>
-
+      </thead>
+      <tbody>
+        {% for log in activity %}
+          <tr>
+            <td>{{ log.created_at|date:'Y-m-d H:i' }}</td>
+            <td>{{ log.user }}</td>
+            <td>{{ log.description }}</td>
+            <td>
+              <ul>
+                {% if log.path %}<li><b>path:</b> {{ log.path }}</li>{% endif %}
+                {% for k,v in log.extra.items %}
+                  <li><b>{{ k }}:</b> {{ v }}</li>
+                {% endfor %}
+              </ul>
+            </td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  {% else %}
+    {% #list_group %}
+      {% list_group_empty title="No activity" description="There has been no recent activity on this workspace" %}
+    {% /list_group %}
+  {% endif %}
 {% /card %}
 
 {% vite_asset "assets/src/scripts/components.js" %}
-<script type="module">
-  window.initCustomTable();
-</script>
+<script defer src="{% static 'assets/activity.js' %}"></script>

airlock/templates/file_browser/csv.html

@@ -1,23 +1,14 @@
-{% load django_vite %}
 {% load airlock %}
+{% load django_vite %}
+{% load static %}
 
 <!DOCTYPE html>
 <html lang="en">
   <head>
-
-    <style>
-      .datatable thead {
-        position: sticky;
-        top: 0;
-        text-align: left;
-        background-color: rgba(248,250,252);
-      }
-    </style>
-
     {% vite_hmr_client %}
     {% vite_asset "assets/src/scripts/base.js" %}
     {% vite_asset "assets/src/scripts/components.js" %}
-
+    <link rel="stylesheet" href="{% static 'assets/datatable.css' %}">
   </head>
 
   <body>
@@ -88,28 +79,7 @@
       </nav>
     </div>
 
-    <script type="text/javascript">
-
-      const observer = new MutationObserver((mutations, obs) => {
-
-        const pageNumberEl = document.querySelector(
-          `[data-table-pagination="page-number"]`,
-        );
-        if (pageNumberEl.innerText !== "#") {
-          document.querySelector("#csvtable p.spinner").style.display = "none";
-          document.querySelector("#csvtable table.datatable").style.display = "table";
-          document.querySelector("#pagination-nav").classList.remove("hidden")
-          obs.disconnect();
-          return;
-        }
-      });
-      observer.observe(document, {
-        childList: true,
-        subtree: true
-      });
-
-    </script>
-
+    <script src="{% static 'assets/file_browser/csv.js' %}"></script>
   </body>
 
 </html>

airlock/templates/file_browser/directory.html

@@ -1,7 +1,7 @@
-{% #card title=path_item.name container=True %}
+{% #card title=path_item.name %}
   {% #list_group %}
     {% if not path_item.children %}
-      {% list_group_empty icon=True title="Empty Directory" %}
+      {% list_group_empty icon=True title="This directory is empty" %}
     {% else %}
       {% for entry in path_item.children %}
         {% #list_group_item href=entry.url %}