Merge pull request #2475 from alphagov/add-folder-icons-to-list

Add folder icons to list

app/assets/stylesheets/components/message.scss

@@ -24,17 +24,34 @@
   margin-top: $gutter;
 }
 
-.template-list-item,
-.template-list-item-with-checkbox {
-  position: relative;
-}
+.template-list {
 
-.template-list-item-with-checkbox {
+  &-item {
 
-  padding-left: $gutter * 2;
+    &-with-checkbox {
+
+      position: relative;
+      padding-left: $gutter * 2;
+
+      .multiple-choice {
+        position: absolute;
+        left: 0;
+      }
+
+    }
 
-  .multiple-choice {
-    position: absolute;
-    left: 0;
   }
+
+  &-folder {
+
+    a {
+      text-indent: 40px;
+      background-image: file-url('folder-blue-bold.svg');
+      background-repeat: no-repeat;
+      background-size: auto 20px;
+      background-position: 0px 2px;
+    }
+
+  }
+
 }

app/models/service.py

@@ -289,7 +289,10 @@ class Service():
 
     @cached_property
     def all_template_folders(self):
-        return template_folder_api_client.get_template_folders(self.id)
+        return sorted(
+            template_folder_api_client.get_template_folders(self.id),
+            key=lambda folder: folder['name'].lower(),
+        )
 
     @cached_property
     def all_template_folder_ids(self):

app/templates/views/templates/_template_list.html

@@ -10,7 +10,7 @@
           value=template_folder.id,
         ) }}
       {% endif %}
-      <h2 class="message-name">
+      <h2 class="message-name template-list-folder">
         <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=template_folder.id) }}">
           {{ template_folder.name }}
         </a>