Merge pull request #644 from opensafely-core/break-up-templates

Template refactoring part 1

airlock/renderers.py

@@ -119,7 +119,7 @@ def headers(self):
 
 
 class CSVRenderer(Renderer):
-    template = RendererTemplate.from_name("file_browser/csv.html")
+    template = RendererTemplate.from_name("file_browser/file_content/csv.html")
     is_text: ClassVar[bool] = True
 
     def context(self):
@@ -134,7 +134,7 @@ def context(self):
 
 
 class TextRenderer(Renderer):
-    template = RendererTemplate.from_name("file_browser/text.html")
+    template = RendererTemplate.from_name("file_browser/file_content/text.html")
     is_text: ClassVar[bool] = True
 
     def context(self):
@@ -145,11 +145,11 @@ def context(self):
 
 
 class PlainTextRenderer(TextRenderer):
-    template = RendererTemplate.from_name("file_browser/plaintext.html")
+    template = RendererTemplate.from_name("file_browser/file_content/plaintext.html")
 
 
 class InvalidFileRenderer(Renderer):
-    template = RendererTemplate.from_name("file_browser/text.html")
+    template = RendererTemplate.from_name("file_browser/file_content/text.html")
 
     def context(self):
         return {

airlock/static/assets/file_browser/dir.css

@@ -0,0 +1,14 @@
+#customTable thead {
+position: sticky;
+top: 0;
+text-align: left;
+background-color: rgba(248,250,252);
+}
+
+#customTable td.name a.directory {
+background-image: url(/static/folder.png);
+background-repeat: no-repeat;
+background-size: 1.4rem;
+background-position: left -0.2rem top 0;
+padding-left: 1.1rem;
+}

airlock/static/assets/file_browser/dir.js

@@ -0,0 +1,13 @@
+// ensure datatable is initialised when loading over HTMX
+window.initCustomTable ? window.initCustomTable() : null;
+
+// implement select all checkbox
+function toggleSelectAll(elem, event) {
+    const form = document.querySelector("#multiselect_form");
+
+    const checkboxes = form.querySelectorAll('input[type="checkbox"]');
+
+    checkboxes.forEach(function(checkbox) {
+        checkbox.checked = elem.checked;
+    });
+}

airlock/templates/_components/header/base.html

@@ -0,0 +1,13 @@
+<header class="header">
+  <h1 class="header__title">
+    {{ title }} {% block extra_title %}{% endblock %}
+  </h1>
+
+  {% block content %}{% endblock %}
+
+  {% if children %}
+    <div class="header__actions">
+      {{ children }}
+    </div>
+  {% endif %}
+</header>

airlock/templates/_components/header/repo/header.html

@@ -0,0 +1,21 @@
+{% extends "../base.html" %}
+
+{% block content %}
+
+  {% if return_url %}
+    <a class="header__link header__nav-link" href="{{ return_url }}" id="return-button">
+      &larr; Back
+    </a>
+  {% else %}
+    {% if current_request.get_url %}
+      <a class="header__link header__nav-link" href="{{ current_request.get_url }}" id="current-request-button">
+        View current release request &rarr;
+      </a>
+    {% elif workspace.get_url %}
+      <a class="header__link header__nav-link" href="{{ workspace.get_url }}" id="workspace-home-button">
+        View workspace &rarr;
+      </a>
+    {% endif %}
+  {% endif %}
+
+{% endblock %}

airlock/templates/_components/header/request/header.html

@@ -0,0 +1,37 @@
+{% extends "../base.html" %}
+
+{% block extra_title %}
+  {% pill variant="info" text=release_request.status.description %}
+{% endblock %}
+
+{% block content %}
+  <a class="header__link header__nav-link" href="{{ workspace.get_url }}" id="workspace-home-button">
+    &larr; Back to workspace
+  </a>
+
+  <div class="header__subtitle">
+    <dl class="heading__meta">
+      <div>
+        <dt>
+          <span class="sr-only">Workspace</span>
+          <img class="icon" src="/static/icons/stacks.svg" alt="">
+        </dt>
+        <dd>{{ workspace }}</dd>
+      </div>
+      <div>
+        <dt>
+          <span class="sr-only">User</span>
+          <img class="icon" src="/static/icons/person.svg" alt="">
+        </dt>
+        <dd>{{ release_request.author }}</dd>
+      </div>
+      <div>
+        <dt>
+          <span class="sr-only">ID</span>
+          <img class="icon" src="/static/icons/token.svg" alt=""></dt>
+        <dd>{{ release_request.id }}</dd>
+      </div>
+    </dl>
+
+  </div>
+{% endblock %}

airlock/templates/_components/header/workspace/header.html

@@ -0,0 +1,20 @@
+{% extends "../base.html" %}
+
+{% block content %}
+  {% if current_request.get_url %}
+    <a class="header__link header__nav-link" href="{{ current_request.get_url }}" id="current-request-button">
+      View current release request &rarr;
+    </a>
+  {% endif %}
+
+  <div class="header__subtitle">
+
+    {% if workspace.get_requests_url %}
+      <a class="header__link" href="{{ workspace.get_requests_url }}" id="requests-workspace-button">
+        View all release requests for workspace
+      </a>
+    {% endif %}
+
+  </div>
+
+{% endblock %}

airlock/templates/file_browser/_includes/file_content.html

@@ -0,0 +1,12 @@
+{% #card id="fileCard" title=path_item.name container=True custom_button=buttons %}
+  <div class="content">
+    <iframe src="{{ path_item.contents_url }}"
+            title="{{ path_item.relpath }}"
+            frameborder=0
+            height=1000
+            style="width: 100%;"
+            sandbox="{{ path_item.iframe_sandbox }} allow-same-origin"
+            id="content-iframe"
+    ></iframe>
+  </div>
+{% /card %}

airlock/templates/file_browser/_includes/more_dropdown.html

@@ -0,0 +1,42 @@
+<details-utils close-click-outside close-esc>
+  <details class="more-dropdown">
+    <summary class="more-dropdown__btn" id="file-button-more">
+      More…
+      <span class="opacity-75 ml-1">
+        <img height="16" width="16" class="icon inline-block group-open:hidden" src="/static/icons/keyboard_arrow_down.svg" alt="">
+        <img height="16" width="16" class="icon hidden group-open:inline-block" src="/static/icons/keyboard_arrow_up.svg" alt="">
+      </span>
+    </summary>
+    <ul class="more-dropdown__nav">
+      {% if include_download %}
+        <li class="more-dropdown__item">
+          <a href="{{ path_item.download_url }}" class="more-dropdown__link" id="download-button">
+            <img class="more-dropdown__icon" src="/static/icons/cloud_download.svg" alt="">
+            Download file
+          </a>
+        </li>
+      {% endif %}
+      <li class="more-dropdown__item">
+        <a href="{{ path_item.contents_url }}" class="more-dropdown__link" id="view-button" target="_blank" rel="noopener noreferrer">
+          <img class="more-dropdown__icon" src="/static/icons/open_in_new.svg" alt="">
+          Open in new tab
+        </a>
+      </li>
+      <li class="more-dropdown__item">
+        <a href="{{ path_item.contents_plaintext_url }}" class="more-dropdown__link" id="plain-text-button" target="_blank" rel="noopener noreferrer">
+          <img class="more-dropdown__icon" src="/static/icons/open_in_new.svg" alt="">
+          Open as plain text
+        </a>
+      </li>
+      {% if include_code %}
+        <li class="more-dropdown__item">
+          <a href="{{ code_url }}" class="more-dropdown__link" id="file-code-button" target="_blank" rel="noopener noreferrer">
+            <img class="more-dropdown__icon" src="/static/icons/code_blocks.svg" alt="">
+            View source code
+          </a>
+        </li>
+      {% endif %}
+    </ul>
+  </details>
+</details-utils>
+</div>