Implement container icons, extract item generic list widget

static/css/custom.css

@@ -9,3 +9,14 @@
     color: inherit;
     font-weight: bold;
 }
+
+.containericon {
+    white-space: nowrap;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.containericon span {
+    padding-left: 0.5rem;
+    font-weight: bold;
+}

static/icons/pappis.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg2"
+   viewBox="0 0 35.433071 35.433071"
+   height="10mm"
+   width="10mm">
+  <defs
+     id="defs4" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(0,-1016.9291)"
+     id="layer1">
+    <g
+       style="stroke-width:1.77165354;stroke-miterlimit:5.5;stroke-dasharray:none"
+       transform="translate(31.983255,31.558824)"
+       id="g4754">
+      <g
+         style="opacity:0.976;stroke-width:1.77165354;stroke-miterlimit:5.5;stroke-dasharray:none"
+         id="g4149"
+         transform="translate(0.44802853,-0.31856458)">
+        <g
+           style="stroke-width:1.77165354;stroke-miterlimit:5.5;stroke-dasharray:none"
+           id="g4726"
+           transform="translate(-31.999999,-32.749999)">
+          <rect
+             y="1022.3572"
+             x="2.9567235"
+             height="27.596395"
+             width="28.657055"
+             id="rect4715"
+             style="opacity:1;fill:#ffffff;fill-opacity:0.72820512;fill-rule:nonzero;stroke:#000000;stroke-width:1.77165354;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:5.5;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+          <path
+             id="path4722"
+             d="m 3.0403194,1022.8579 5.7201828,5.9602 22.8000638,0 0,-6.4621 -28.1589719,0 z"
+             style="fill:#000000;fill-opacity:0.09490741;fill-rule:evenodd;stroke:#000000;stroke-width:1.77165354;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:5.5;stroke-dasharray:none;stroke-opacity:1" />
+        </g>
+      </g>
+      <path
+         id="rect4724"
+         d="m -17.510012,998.41219 6.486585,0 c 0.675301,0 1.2189557,0.54366 1.2189557,1.21896 l 0,0.0871 0,1.21895 -8.9244967,0 c 0,0 0,-0.5437 0,-1.21895 l 0,-0.0871 c 0,-0.6753 0.543654,-1.21896 1.218956,-1.21896 z"
+         style="opacity:0.976;fill:#000000;fill-opacity:0.15972222;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866142;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:5.5;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.80787039" />
+    </g>
+  </g>
+</svg>

static/icons/samla.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg2"
+   viewBox="0 0 35.433071 35.433071"
+   height="10mm"
+   width="10mm">
+  <defs
+     id="defs4" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(0,-1016.9291)"
+     id="layer1">
+    <g
+       transform="translate(0.25983633,-0.63106457)"
+       id="g4149">
+      <path
+         style="opacity:1;fill:#ffffff;fill-opacity:0.72820512;fill-rule:evenodd;stroke:#000000;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 11.577295,1049.6836 0.535714,-16.9083 10.565562,0 0.714286,16.9083"
+         id="path4142" />
+      <path
+         style="fill:#ffffff;fill-opacity:0.72820512;fill-rule:evenodd;stroke:#000000;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:5.5;stroke-dasharray:none;stroke-opacity:1"
+         d="m 4.375,1023.7907 0.9821429,25.8036 6.4285711,0 0.892857,-2.7652 9.821429,0 0.982143,2.8545 6.160714,0 0.788252,-25.8929 z"
+         id="path4136" />
+      <path
+         style="opacity:1;fill:#ffffff;fill-opacity:0.72820512;fill-rule:nonzero;stroke:#000000;stroke-width:1.77165353;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 2.8157069,1022.6198 29.2819841,0 c 0.680653,0 1.228615,0.548 1.228615,1.2286 l 0,3.125 -31.7392138,-0.017 0,-3.108 c 0,-0.6805 0.5479621,-1.2286 1.2286147,-1.2286 z"
+         id="rect4146" />
+    </g>
+  </g>
+</svg>

storage/migrations/0006_category_icon_id.py

@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.10.1 on 2017-10-24 17:48
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('storage', '0005'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='category',
+            name='icon_id',
+            field=models.CharField(blank=True, max_length=64, null=True),
+        ),
+    ]

storage/models.py

@@ -24,6 +24,8 @@ STATES = (
 class Category(models.Model):
     name = models.CharField(max_length=127)
 
+    icon_id = models.CharField(max_length=64, null=True, blank=True)
+
     def __str__(self):
         return self.name
 
@@ -74,6 +76,10 @@ class Item(models.Model, TreeModelMixin):
 
         return obj
 
+    @property
+    def primary_category(self):
+        return next((c for c in self.categories.all() if c.icon_id), None)
+
     class Meta:
         ordering = ('path',)
 

storage/templates/item.html

@@ -10,6 +10,8 @@
     </ol>
     <h2>
         <small class="pull-right"><a href="{% url 'admin:storage_item_change' item.pk %}"><span class="glyphicon glyphicon-pencil"></span></a></small>
+
+        {% include "widgets/categoryicon.html" with category=item.primary_category %}
         {{ item.name }} <small>{{ item.pk }}</small>
     </h2>
     <div class="row">
@@ -49,6 +51,22 @@
                 {% endfor %}
             </table>
 
+            {% if categories %}
+            <h3>Categories</h3>
+            <table class="table table-hover table-striped">
+                {% for category in categories %}
+                <tr>
+                <td style="padding: 0px 8px; width: 2rem;">
+                    {% include "widgets/categoryicon.html" with category=category %}
+                </td>
+                <td>
+                    {{ category.name }}
+                </td>
+                </tr>
+                {% endfor %}
+            </table>
+            {% endif %}
+
             {% if images %}
             <h3>Photos</h3>
             <div class="row">
@@ -80,17 +98,7 @@
             {% endif %}
 
             <h3>Children</h3>
-            <table class="table table-striped table-hover">
+            {% include "widgets/itemlist.html" with list=children|dictsort:"name" item=item %}
-            {% for child in children|dictsort:"name" %}
-                <tr><td><a href="{{ child.get_absolute_url }}">{{ child.name }}</a></td></tr>
-            {% endfor %}
-            <tr><td colspan=2 class="placeholder">
-                    <a href="/admin/storage/item/add?parent={{ item.uuid }}">
-                        <span class="glyphicon glyphicon-plus"></span>
-                        Add child
-                    </a>
-            </td></tr>
-            </table>
         </div>
     </div>
 {% endblock %}

storage/templates/results.html

@@ -1,16 +1,5 @@
 {% extends "base.html" %}
 
 {% block content %}
-    <table class="table table-striped table-hover">
+    {% include "widgets/itemlist.html" with list=results show_paths=True show_placeholder=True %}
-        {% for item in results %}
-        <tr>
-            <td>
-                {% for parent in item.get_ancestors %}
-                    {{ parent.name }} &raquo;
-                {% endfor %}
-                <a href="{{ item.get_absolute_url }}">{{ item.name }}</a>
-            </td>
-        </tr>
-        {% endfor %}
-    </table>
 {% endblock %}

storage/views.py

@@ -62,10 +62,11 @@ def item_display(request, pk):
 
     return render(request, 'item.html', {
         'item': item,
+        'categories': item.categories.all(),
         'images': item.images.all(),
         'labels': item.labels.all(),
         'ancestors': item.get_ancestors(),
-        'children': item.get_children(),
+        'children': item.get_children().prefetch_related('categories'),
         })
 
 def label_lookup(request, pk):

templates/widgets/categoryicon.html

@@ -0,0 +1,3 @@
+{% if category and category.icon_id %}
+<div class="containericon" title="{{ category.name }}"><img src="/static/icons/{{ category.icon_id }}.svg" /></div>
+{% endif %}

templates/widgets/itemlist.html

@@ -0,0 +1,32 @@
+<table class="table table-striped table-hover">
+    {% for item in list %}
+    <tr>
+        <td style="padding: 0px 8px; width: 2rem;">
+            {% include "widgets/categoryicon.html" with category=item.primary_category %}
+        </td>
+        <td>
+            {% if show_paths %}
+            {% for parent in item.get_ancestors %}
+            {{ parent.name }} &raquo;
+            {% endfor %}
+            {% endif %}
+            <a href="{{ item.get_absolute_url }}" style="display: block">{{ item.name }}</a>
+        </td>
+    </tr>
+    {% empty %}
+    {% if show_placeholder %}
+    <tr>
+        <td colspan=2 class="placeholder">Nothing found</td>
+    </tr>
+    {% endif %}
+    {% endfor %}
+
+    {% if item %}
+    <tr><td colspan=2 class="placeholder">
+            <a href="/admin/storage/item/add?parent={{ item.uuid }}">
+                <span class="glyphicon glyphicon-plus"></span>
+                Add child
+            </a>
+        </td></tr>
+        {% endif %}
+</table>