Style folder hierarchy in headings

This makes the display of folders in the `<h1>` look like the prototype.

It alters the behaviour we’ve initially built here by only ever showing
a maximum of two levels of hierarchy (the current folders and its
parent).

app/assets/stylesheets/components/message.scss

@@ -55,3 +55,59 @@
   }
 
 }
+
+.folder-heading {
+
+  .column-main>.grid-row:first-child &.heading-medium {
+    margin-top: 18px;
+  }
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+
+  a,
+  &-folder {
+
+    display: inline-block;
+    vertical-align: top;
+    padding: 5px 0 0 60px;
+    background-repeat: no-repeat;
+    background-size: 38px auto;
+    background-position: 0 1px;
+
+  }
+
+  a {
+
+    background-image: file-url('folder-blue.svg');
+    max-width: 33%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+  }
+
+  &-folder {
+
+    padding-left: 0;
+
+    &:first-child {
+      background-image: file-url('folder-black.svg');
+      padding-left: $gutter * 2;
+    }
+
+  }
+
+  &-separator {
+
+    display: inline-block;
+    vertical-align: top;
+    color: $secondary-text-colour;
+    padding: 5px 4px 0 5px;
+    font-weight: normal;
+
+  }
+
+
+}

app/models/service.py

@@ -316,6 +316,12 @@ class Service():
         ]
 
     def get_template_folder(self, folder_id):
+        if folder_id is None:
+            return {
+                'id': None,
+                'name': 'Templates',
+                'parent_id': None,
+            }
         return self._get_by_id(self.all_template_folders, folder_id)
 
     def is_folder_visible(self, template_folder_id, template_type='all'):
@@ -335,19 +341,16 @@ class Service():
         return False
 
     def get_template_folder_path(self, template_folder_id):
-        if template_folder_id is None:
-            return []
 
-        id_to_folder = {folder['id']: folder for folder in self.all_template_folders}
+        folder = self.get_template_folder(template_folder_id)
 
-        folder = id_to_folder[template_folder_id]
-        path = [folder]
+        if folder['id'] is None:
+            return [folder]
 
-        while folder['parent_id']:
-            folder = id_to_folder[folder['parent_id']]
-            path.append(folder)
-
-        return list(reversed(path))
+        return [
+            self.get_template_folder(folder['parent_id']),
+            folder,
+        ]
 
     def get_template_folders_and_templates(self, template_type, template_folder_id):
         return (

app/templates/components/folder-path.html

@@ -0,0 +1,50 @@
+{% macro folder_path(
+  folders,
+  service_id,
+  template_type,
+  fallback_page_title=None,
+  show_fallback_page_title=False
+) %}
+  {% if show_fallback_page_title %}
+    <h1 class="heading-large">
+      {{ fallback_page_title }}
+    </h1>
+  {% else %}
+    <h1 class="heading-medium folder-heading">
+      {% for folder in folders %}
+        {% if loop.last %}
+          <span class="folder-heading-folder">{{ folder.name }}</span>
+        {% else %}
+          {% if folder.id %}
+            <a href="{{ url_for('.choose_template', service_id=service_id, template_type=template_type, template_folder_id=folder.id) }}">{{ folder.name }}</a> {{ folder_path_separator() }}
+          {% else %}
+            <a href="{{ url_for('.choose_template', service_id=service_id, template_type=template_type) }}">Templates</a> {{ folder_path_separator() }}
+          {% endif %}
+        {% endif %}
+      {% endfor %}
+    </h1>
+  {% endif %}
+{% endmacro %}
+
+
+{% macro page_title_folder_path(
+  folders,
+  fallback_page_title=None,
+  show_fallback_page_title=False
+) %}
+  {% if show_fallback_page_title %}
+    {{ fallback_page_title }}
+  {% else %}
+    {% for folder in folders|reverse %}
+      {{ folder.name }}
+      {% if not loop.last %}
+        –
+      {% endif %}
+    {% endfor %}
+  {% endif %}
+{% endmacro %}
+
+
+{% macro folder_path_separator() %}
+  <span class="folder-heading-separator">/</span>
+{% endmacro %}

app/templates/views/templates/choose.html

@@ -1,3 +1,4 @@
+{% from "components/folder-path.html" import folder_path, page_title_folder_path %}
 {% from "components/pill.html" import pill %}
 {% from "components/message-count-label.html" import message_count_label %}
 {% from "components/textbox.html" import textbox %}
@@ -8,10 +9,11 @@
 {% set page_title = 'Templates' %}
 
 {% block service_page_title %}
-  {{ page_title }}
-  {% for folder in template_folder_path %}
-    / {{ folder.name }}
-  {% endfor %}
+  {{ page_title_folder_path(
+    template_folder_path,
+    fallback_page_title=page_title,
+    show_fallback_page_title=not current_service.all_template_folders
+  ) }}
 {% endblock %}
 
 {% block maincolumn_content %}
@@ -46,27 +48,19 @@
 
     <div class="grid-row bottom-gutter-2-3">
       <div class="column-two-thirds">
-        <h1 class="heading-large">
-          {% if template_folder_path %}
-            <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type) }}">{{ page_title }}</a>
-          {% else %}
-            {{ page_title }}
-          {% endif %}
-          {% for folder in template_folder_path %}
-            /
-            {% if loop.last %}
-              {{ folder.name }}
-            {% else %}
-              <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=folder.id) }}">{{ folder.name }}</a>
-            {% endif %}
-          {% endfor %}
-        </h1>
+        {{ folder_path(
+          folders=template_folder_path,
+          service_id=current_service.id,
+          template_type=template_type,
+          fallback_page_title=page_title,
+          show_fallback_page_title=not current_service.all_template_folders
+        ) }}
       </div>
       {% if current_user.has_permissions('manage_templates') %}
         <div class="column-one-third">
           <a href="{{ url_for('.add_template_by_type', service_id=current_service.id, template_folder_id=current_template_folder_id) }}" class="button align-with-heading">Add new template</a>
 
-        {% if can_manage_folders and template_folder_path %}
+        {% if can_manage_folders and current_template_folder_id %}
           <a href="{{ url_for('.manage_template_folder', service_id=current_service.id, template_folder_id=current_template_folder_id) }}" class="align-with-heading">Manage</a>
         {% endif %}
         </div>