Refactored status code label generation

- Larger style available

InvenTree/InvenTree/static/css/inventree.css

@@ -149,6 +149,13 @@
 .label-large {
     margin: 3px;
     font-size: 100%;
+    border: 3px solid;
+    border-radius: 15px;
+    background: none;
+    padding-right: 10px;
+    padding-left: 10px;
+    padding-top: 5px;
+    padding-bottom: 5px;
 }
 
 .label-right {

InvenTree/InvenTree/status_codes.py

@@ -7,12 +7,18 @@ class StatusCode:
     This is used to map a set of integer values to text.
     """
 
-    labels = {}
+    # Colors used for label rendering
+    LBL_WHITE = '#FFF'
+    LBL_GREY = "#AAA"
+    LBL_GREEN = "#50aa51"
+    LBL_BLUE = "#4194bd"
+    LBL_YELLOW = "#fdc82a"
+    LBL_RED = "#e35a57"
 
     @classmethod
-    def render(cls, key):
+    def render(cls, key, large=False):
         """
-        Render the value as a label.
+        Render the value as a HTML label.
         """
 
         # If the key cannot be found, pass it back
@@ -20,12 +26,20 @@ class StatusCode:
             return key
         
         value = cls.options.get(key, key)
-        label = cls.labels.get(key, None)
+        color = cls.colors.get(key, StatusCode.LBL_GREY)
 
-        if label:
+        if large:
-            return "<span class='label label-{label}'>{value}</span>".format(label=label, value=value)
+            span_class = 'label label-large'
+            style = 'color: {c}; border-color: {c}; background: none;'.format(c=color)
         else:
-            return value
+            span_class = 'label'
+            style = 'color: {w}; background: {c}'.format(w=StatusCode.LBL_WHITE, c=color)
+
+        return "<span class='{cl}' style='{st}'>{value}</span>".format(
+            cl=span_class,
+            st=style,
+            value=value
+        )
 
     @classmethod
     def list(cls):
@@ -42,10 +56,10 @@ class StatusCode:
                 'value': cls.options[key]
             }
 
-            label = cls.labels.get(key)
+            color = cls.colors.get(key, None)
 
-            if label:
+            if color:
-                opt['label'] = label
+                opt['color'] = color
 
             codes.append(opt)
 
@@ -92,13 +106,13 @@ class PurchaseOrderStatus(StatusCode):
         RETURNED: _("Returned"),
     }
 
-    labels = {
+    colors = {
-        PENDING: "primary",
+        PENDING: StatusCode.LBL_BLUE,
-        PLACED: "primary",
+        PLACED: StatusCode.LBL_BLUE,
-        COMPLETE: "success",
+        COMPLETE: StatusCode.LBL_GREEN,
-        CANCELLED: "danger",
+        CANCELLED: StatusCode.LBL_RED,
-        LOST: "warning",
+        LOST: StatusCode.LBL_YELLOW,
-        RETURNED: "warning",
+        RETURNED: StatusCode.LBL_YELLOW,
     }
 
     # Open orders
@@ -132,12 +146,12 @@ class SalesOrderStatus(StatusCode):
         RETURNED: _("Returned"),
     }
 
-    labels = {
+    colors = {
-        PENDING: "primary",
+        PENDING: StatusCode.LBL_BLUE,
-        SHIPPED: "success",
+        SHIPPED: StatusCode.LBL_GREEN,
-        CANCELLED: "danger",
+        CANCELLED: StatusCode.LBL_RED,
-        LOST: "warning",
+        LOST: StatusCode.LBL_YELLOW,
-        RETURNED: "warning",
+        RETURNED: StatusCode.LBL_YELLOW,
     }
 
 
@@ -166,11 +180,11 @@ class StockStatus(StatusCode):
         RETURNED: _("Returned"),
     }
 
-    labels = {
+    colors = {
-        OK: 'success',
+        OK: StatusCode.LBL_GREEN,
-        ATTENTION: 'warning',
+        ATTENTION: StatusCode.LBL_YELLOW,
-        DAMAGED: 'danger',
+        DAMAGED: StatusCode.LBL_RED,
-        DESTROYED: 'danger',
+        DESTROYED: StatusCode.LBL_RED,
     }
 
     # The following codes correspond to parts that are 'available' or 'in stock'
@@ -204,11 +218,11 @@ class BuildStatus(StatusCode):
         COMPLETE: _("Complete"),
     }
 
-    labels = {
+    colors = {
-        PENDING: 'primary',
+        PENDING: StatusCode.LBL_BLUE,
-        ALLOCATED: 'info',
+        ALLOCATED: StatusCode.LBL_BLUE,
-        COMPLETE: 'success',
+        COMPLETE: StatusCode.LBL_GREEN,
-        CANCELLED: 'danger',
+        CANCELLED: StatusCode.LBL_RED,
     }
 
     ACTIVE_CODES = [

InvenTree/build/templates/build/build_base.html

@@ -26,7 +26,7 @@ src="{% static 'img/blank_image.png' %}"
 {% endblock %}
 
 {% block page_data %}
-<h3>{% trans "Build" %}</h3>
+<h3>{% trans "Build" %} {% build_status_label build.status large=True %}</h3>
 <hr>
 <h4>{{ build.quantity }} x {{ build.part.full_name }}</h4>
 <div class='btn-row'>

InvenTree/order/templates/order/order_base.html

@@ -20,7 +20,7 @@ src="{% static 'img/blank_image.png' %}"
 {% endblock %}
 
 {% block page_data %}
-<h3>{% trans "Purchase Order" %}</h3>
+<h3>{% trans "Purchase Order" %} {% purchase_order_status_label order.status large=True %}</h3>
 <hr>
 <h4>{{ order }}</h4>
 <p>{{ order.description }}</p>

InvenTree/order/templates/order/sales_order_base.html

@@ -30,7 +30,7 @@ src="{% static 'img/blank_image.png' %}"
 
 {% block page_data %}
 
-<h3>{% trans "Sales Order" %}</h3>
+<h3>{% trans "Sales Order" %} {% sales_order_status_label order.status large=True %}</h3>
 <hr>
 <h4>{{ order }}</h4>
 <p>{{ order.description }}</p>

InvenTree/part/templatetags/status_codes.py

@@ -13,22 +13,22 @@ register = template.Library()
 @register.simple_tag
 def purchase_order_status_label(key, *args, **kwargs):
     """ Render a PurchaseOrder status label """
-    return mark_safe(PurchaseOrderStatus.render(key))
+    return mark_safe(PurchaseOrderStatus.render(key, large=kwargs.get('large', False)))
 
 
 @register.simple_tag
 def sales_order_status_label(key, *args, **kwargs):
     """ Render a SalesOrder status label """
-    return mark_safe(SalesOrderStatus.render(key))
+    return mark_safe(SalesOrderStatus.render(key, large=kwargs.get('large', False)))
 
 
 @register.simple_tag
 def stock_status_label(key, *args, **kwargs):
     """ Render a StockItem status label """
-    return mark_safe(StockStatus.render(key))
+    return mark_safe(StockStatus.render(key, large=kwargs.get('large', False)))
 
 
 @register.simple_tag
 def build_status_label(key, *args, **kwargs):
     """ Render a Build status label """
-    return mark_safe(BuildStatus.render(key))
+    return mark_safe(BuildStatus.render(key, large=kwargs.get('large', False)))

InvenTree/templates/status_codes.html

@@ -4,8 +4,8 @@
 var {{ label }}Codes = {
     {% for opt in options %}'{{ opt.key }}': {
         key: '{{ opt.key }}',
-        value: '{{ opt.value }}',{% if opt.label %}
+        value: '{{ opt.value }}',{% if opt.color %}
-        label: '{{ opt.label }}',{% endif %}
+        color: '{{ opt.color }}',{% endif %}
     },{% endfor %}
 };
 
@@ -18,18 +18,14 @@ function {{ label }}StatusDisplay(key) {
 
     key = String(key);
 
-    var label = {{ label }}Codes[key].label;
-
     var value = {{ label }}Codes[key].value;
 
     if (value == null || value.length == 0) {
         value = key;
     }
 
-    // Label not found, return the original string
+    // Select the label color
-    if (label == null || label.length == 0) {
+    var color = {{ label }}Codes[key].color ?? '#AAA';
-        return value;
-    }
 
-    return `<span class='label label-${label}'>${value}</span>`;
+    return `<span class='label' style='background: ${color};'>${value}</span>`;
 }