From f8ac016d60161e5b026d4fdb5f2228793ba88f00 Mon Sep 17 00:00:00 2001 From: Oliver Date: Thu, 28 Oct 2021 17:41:40 +1100 Subject: [PATCH] replace labels with badges --- InvenTree/InvenTree/static/css/inventree.css | 85 ------------------- InvenTree/InvenTree/status_codes.py | 49 +++++------ .../build/templates/build/build_base.html | 4 +- .../order/templates/order/order_base.html | 4 +- .../templates/order/sales_order_base.html | 4 +- InvenTree/part/templates/part/part_base.html | 4 +- .../part/templates/part/stock_count.html | 4 +- .../stock/templates/stock/item_base.html | 8 +- InvenTree/templates/about.html | 6 +- InvenTree/templates/js/dynamic/inventree.js | 7 +- InvenTree/templates/js/translated/bom.js | 4 +- InvenTree/templates/js/translated/company.js | 18 ++-- InvenTree/templates/js/translated/helpers.js | 6 +- .../js/translated/model_renderers.js | 4 +- InvenTree/templates/js/translated/part.js | 26 +++--- InvenTree/templates/js/translated/stock.js | 14 +-- InvenTree/templates/stats.html | 8 +- InvenTree/templates/status_codes.html | 4 +- InvenTree/templates/yesnolabel.html | 4 +- 19 files changed, 82 insertions(+), 181 deletions(-) diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css index d38230fa99..2e8172d1ae 100644 --- a/InvenTree/InvenTree/static/css/inventree.css +++ b/InvenTree/InvenTree/static/css/inventree.css @@ -229,91 +229,6 @@ padding: 5px 10px; } -/* Extra label styles */ - -.label { - display: inline; - font-size: 75%; - line-height: 1; - padding-left: 4px; - padding-right: 4px; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: 5px; -} - -.label-large { - margin: 3px; - font-size: 90%; - border: 3px solid; - border-radius: 15px; - background: none; - padding: 3px; - border-radius: 10px; -} - -.label-large-red { - color: var(--label-red); - border-color: var(--label-red); -} - -.label-form { - margin: 2px; - padding: 3px; - padding-left: 10px; - padding-right: 10px; - border-radius: 5px; -} - - - -.label-red { - background: var(--label-red); -} - -.label-large-blue { - color: var(--label-blue); - border-color: var(--label-blue); -} - -.label-blue { - background: var(--label-blue); -} - -.label-large-green { - color: var(--label-green); - border-color: var(--label-green); -} - -.label-green { - background: var(--label-green); -} - -.label-large-grey { - color: var(--label-grey); - border-color: var(--label-grey); -} - -.label-grey { - background: var(--label-grey); -} - -.label-large-yellow { - color: var(--label-yellow); - border-color: var(--label-yellow); -} - -.label-yellow { - background: var(--label-yellow); -} - -.label-right { - float: right; - margin-left: 3px; - margin-right: 3px; -} - /* Bootstrap table overrides */ .stock-sub-group td { diff --git a/InvenTree/InvenTree/status_codes.py b/InvenTree/InvenTree/status_codes.py index 63fc8a491c..4de0b7ced9 100644 --- a/InvenTree/InvenTree/status_codes.py +++ b/InvenTree/InvenTree/status_codes.py @@ -20,12 +20,9 @@ class StatusCode: return key value = cls.options.get(key, key) - color = cls.colors.get(key, 'grey') + color = cls.colors.get(key, 'secondary') - if large: - span_class = 'label label-large label-large-{c}'.format(c=color) - else: - span_class = 'label label-{c}'.format(c=color) + span_class = f'badge rounded-pill bg-{color}' return "{value}".format( cl=span_class, @@ -110,12 +107,12 @@ class PurchaseOrderStatus(StatusCode): } colors = { - PENDING: 'blue', - PLACED: 'blue', - COMPLETE: 'green', - CANCELLED: 'red', - LOST: 'yellow', - RETURNED: 'yellow', + PENDING: 'primary', + PLACED: 'primary', + COMPLETE: 'success', + CANCELLED: 'danger', + LOST: 'warning', + RETURNED: 'warning', } # Open orders @@ -150,11 +147,11 @@ class SalesOrderStatus(StatusCode): } colors = { - PENDING: 'blue', - SHIPPED: 'green', - CANCELLED: 'red', - LOST: 'yellow', - RETURNED: 'yellow', + PENDING: 'primary', + SHIPPED: 'success', + CANCELLED: 'danger', + LOST: 'warning', + RETURNED: 'warning', } # Open orders @@ -193,12 +190,12 @@ class StockStatus(StatusCode): } colors = { - OK: 'green', - ATTENTION: 'yellow', - DAMAGED: 'red', - DESTROYED: 'red', - LOST: 'grey', - REJECTED: 'red', + OK: 'success', + ATTENTION: 'warning', + DAMAGED: 'danger', + DESTROYED: 'danger', + LOST: 'dark', + REJECTED: 'danger', } # The following codes correspond to parts that are 'available' or 'in stock' @@ -318,10 +315,10 @@ class BuildStatus(StatusCode): } colors = { - PENDING: 'blue', - PRODUCTION: 'blue', - COMPLETE: 'green', - CANCELLED: 'red', + PENDING: 'secondary', + PRODUCTION: 'primary', + COMPLETE: 'success', + CANCELLED: 'danger', } ACTIVE_CODES = [ diff --git a/InvenTree/build/templates/build/build_base.html b/InvenTree/build/templates/build/build_base.html index 0b6fa5f587..bbdf626b87 100644 --- a/InvenTree/build/templates/build/build_base.html +++ b/InvenTree/build/templates/build/build_base.html @@ -92,7 +92,7 @@ src="{% static 'img/blank_image.png' %}" {{ build.target_date }} {% if build.is_overdue %} - {% trans "Overdue" %} + {% trans "Overdue" %} {% endif %} @@ -175,7 +175,7 @@ src="{% static 'img/blank_image.png' %}"

{% build_status_label build.status large=True %} {% if build.is_overdue %} - {% trans "Overdue" %} + {% trans "Overdue" %} {% endif %}

diff --git a/InvenTree/order/templates/order/order_base.html b/InvenTree/order/templates/order/order_base.html index 3300ce3b3d..295e37b73f 100644 --- a/InvenTree/order/templates/order/order_base.html +++ b/InvenTree/order/templates/order/order_base.html @@ -34,7 +34,7 @@ src="{% static 'img/blank_image.png' %}"

{% purchase_order_status_label order.status large=True %} {% if order.is_overdue %} - {% trans "Overdue" %} + {% trans "Overdue" %} {% endif %}

{{ order.description }}{% include "clip.html"%}

@@ -92,7 +92,7 @@ src="{% static 'img/blank_image.png' %}" {% purchase_order_status_label order.status %} {% if order.is_overdue %} - {% trans "Overdue" %} + {% trans "Overdue" %} {% endif %} diff --git a/InvenTree/order/templates/order/sales_order_base.html b/InvenTree/order/templates/order/sales_order_base.html index d7113e6591..cd87da6aad 100644 --- a/InvenTree/order/templates/order/sales_order_base.html +++ b/InvenTree/order/templates/order/sales_order_base.html @@ -35,7 +35,7 @@ src="{% static 'img/blank_image.png' %}"

{% sales_order_status_label order.status large=True %} {% if order.is_overdue %} - {% trans "Overdue" %} + {% trans "Overdue" %} {% endif %}

{{ order.description }}{% include "clip.html"%}

@@ -99,7 +99,7 @@ src="{% static 'img/blank_image.png' %}" {% sales_order_status_label order.status %} {% if order.is_overdue %} - {% trans "Overdue" %} + {% trans "Overdue" %} {% endif %} diff --git a/InvenTree/part/templates/part/part_base.html b/InvenTree/part/templates/part/part_base.html index 54ed4d9580..7ed95f4dc1 100644 --- a/InvenTree/part/templates/part/part_base.html +++ b/InvenTree/part/templates/part/part_base.html @@ -51,7 +51,7 @@ {% if not part.active %}   -
+
{% trans 'Inactive' %}
@@ -59,7 +59,7 @@ {% if part.virtual and part.active %}   -
+
{% trans 'Virtual' %}
diff --git a/InvenTree/part/templates/part/stock_count.html b/InvenTree/part/templates/part/stock_count.html index 5b70995a22..4209b80bb6 100644 --- a/InvenTree/part/templates/part/stock_count.html +++ b/InvenTree/part/templates/part/stock_count.html @@ -4,7 +4,7 @@ {% decimal total_stock %} {% if total_stock == 0 %} -{% trans "No Stock" %} +{% trans "No Stock" %} {% elif total_stock < part.minimum_stock %} -{% trans "Low Stock" %} +{% trans "Low Stock" %} {% endif %} \ No newline at end of file diff --git a/InvenTree/stock/templates/stock/item_base.html b/InvenTree/stock/templates/stock/item_base.html index b4f6696bf1..c5c895693f 100644 --- a/InvenTree/stock/templates/stock/item_base.html +++ b/InvenTree/stock/templates/stock/item_base.html @@ -48,7 +48,7 @@

{% if item.is_expired %} - {% trans "Expired" %} + {% trans "Expired" %} {% else %} {% if roles.stock.change %} @@ -58,7 +58,7 @@ {% endif %} {% if item.is_stale %} - {% trans "Stale" %} + {% trans "Stale" %} {% endif %} {% endif %}

@@ -390,9 +390,9 @@ {{ item.expiry_date }} {% if item.is_expired %} - {% trans "Expired" %} + {% trans "Expired" %} {% elif item.is_stale %} - {% trans "Stale" %} + {% trans "Stale" %} {% endif %} diff --git a/InvenTree/templates/about.html b/InvenTree/templates/about.html index 357ae5b0ba..04f3380ca2 100644 --- a/InvenTree/templates/about.html +++ b/InvenTree/templates/about.html @@ -24,12 +24,12 @@ {% inventree_version %}{% include "clip.html" %} {% inventree_is_development as dev %} {% if dev %} - {% trans "Development Version" %} + {% trans "Development Version" %} {% else %} {% if up_to_date %} - {% trans "Up to Date" %} + {% trans "Up to Date" %} {% else %} - {% trans "Update Available" %} + {% trans "Update Available" %} {% endif %} {% endif %} diff --git a/InvenTree/templates/js/dynamic/inventree.js b/InvenTree/templates/js/dynamic/inventree.js index 054c957107..dcff1ec77f 100644 --- a/InvenTree/templates/js/dynamic/inventree.js +++ b/InvenTree/templates/js/dynamic/inventree.js @@ -169,12 +169,7 @@ function inventreeDocReady() { html += ''; if (user_settings.SEARCH_SHOW_STOCK_LEVELS) { - html += partStockLabel( - item.data, - { - label_class: 'label-right', - } - ); + html += partStockLabel(item.data); } html += ''; diff --git a/InvenTree/templates/js/translated/bom.js b/InvenTree/templates/js/translated/bom.js index 89ae428bcd..d0737cce24 100644 --- a/InvenTree/templates/js/translated/bom.js +++ b/InvenTree/templates/js/translated/bom.js @@ -407,7 +407,7 @@ function loadBomTable(table, options) { // Display an extra icon if this part is an assembly if (sub_part.assembly) { - var text = ``; + var text = ``; html += renderLink(text, `/part/${row.sub_part}/bom/`); } @@ -470,7 +470,7 @@ function loadBomTable(table, options) { var text = value; if (value == null || value <= 0) { - text = `{% trans "No Stock" %}`; + text = `{% trans "No Stock" %}`; } return renderLink(text, url); diff --git a/InvenTree/templates/js/translated/company.js b/InvenTree/templates/js/translated/company.js index 68b3079c3e..a14badc5f5 100644 --- a/InvenTree/templates/js/translated/company.js +++ b/InvenTree/templates/js/translated/company.js @@ -325,15 +325,15 @@ function loadCompanyTable(table, url, options={}) { var html = imageHoverIcon(row.image) + renderLink(value, row.url); if (row.is_customer) { - html += ``; + html += ``; } if (row.is_manufacturer) { - html += ``; + html += ``; } if (row.is_supplier) { - html += ``; + html += ``; } return html; @@ -493,15 +493,15 @@ function loadManufacturerPartTable(table, url, options) { var html = imageHoverIcon(row.part_detail.thumbnail) + renderLink(value, url); if (row.part_detail.is_template) { - html += ``; + html += ``; } if (row.part_detail.assembly) { - html += ``; + html += ``; } if (!row.part_detail.active) { - html += `{% trans "Inactive" %}`; + html += `{% trans "Inactive" %}`; } return html; @@ -750,15 +750,15 @@ function loadSupplierPartTable(table, url, options) { var html = imageHoverIcon(row.part_detail.thumbnail) + renderLink(value, url); if (row.part_detail.is_template) { - html += ``; + html += ``; } if (row.part_detail.assembly) { - html += ``; + html += ``; } if (!row.part_detail.active) { - html += `{% trans "Inactive" %}`; + html += `{% trans "Inactive" %}`; } return html; diff --git a/InvenTree/templates/js/translated/helpers.js b/InvenTree/templates/js/translated/helpers.js index 9e1898eee8..208a0a41ed 100644 --- a/InvenTree/templates/js/translated/helpers.js +++ b/InvenTree/templates/js/translated/helpers.js @@ -16,9 +16,9 @@ function yesNoLabel(value) { if (value) { - return `{% trans "YES" %}`; + return `{% trans "YES" %}`; } else { - return `{% trans "NO" %}`; + return `{% trans "NO" %}`; } } @@ -92,7 +92,7 @@ function select2Thumbnail(image) { */ function makeIconBadge(icon, title) { - var html = ``; + var html = ``; return html; } diff --git a/InvenTree/templates/js/translated/model_renderers.js b/InvenTree/templates/js/translated/model_renderers.js index bf3628d656..a1602f42c4 100644 --- a/InvenTree/templates/js/translated/model_renderers.js +++ b/InvenTree/templates/js/translated/model_renderers.js @@ -94,7 +94,7 @@ function renderStockItem(name, data, parameters, options) { if (data.serial && data.quantity == 1) { stock_detail = `{% trans "Serial Number" %}: ${data.serial}`; } else if (data.quantity == 0) { - stock_detail = `{% trans "No Stock"% }`; + stock_detail = `{% trans "No Stock"% }`; } else { stock_detail = `{% trans "Quantity" %}: ${data.quantity}`; } @@ -172,7 +172,7 @@ function renderPart(name, data, parameters, options) { } if (!data.active) { - extra += `{% trans "Inactive" %}`; + extra += `{% trans "Inactive" %}`; } html += ` diff --git a/InvenTree/templates/js/translated/part.js b/InvenTree/templates/js/translated/part.js index eb8c5d7a84..4a1df9647a 100644 --- a/InvenTree/templates/js/translated/part.js +++ b/InvenTree/templates/js/translated/part.js @@ -410,14 +410,12 @@ function toggleStar(options) { } -function partStockLabel(part, options={}) { - - var label_class = options.label_class || 'label-form'; +function partStockLabel(part) { if (part.in_stock) { - return `{% trans "Stock" %}: ${part.in_stock}`; + return `{% trans "Stock" %}: ${part.in_stock}`; } else { - return `{% trans "No Stock" %}`; + return `{% trans "No Stock" %}`; } } @@ -453,7 +451,7 @@ function makePartIcons(part) { } if (!part.active) { - html += `{% trans "Inactive" %}`; + html += `{% trans "Inactive" %}`; } return html; @@ -530,7 +528,7 @@ function loadPartVariantTable(table, partId, options={}) { } if (!row.active) { - html += `{% trans "Inactive" %}`; + html += `{% trans "Inactive" %}`; } return html; @@ -769,14 +767,10 @@ function partGridTile(part) { // Rows for table view var rows = ''; - if (part.IPN) { - rows += `{% trans "IPN" %}${part.IPN}`; - } - var stock = `${part.in_stock}`; if (!part.in_stock) { - stock = `{% trans "No Stock" %}`; + stock = `{% trans "No Stock" %}`; } rows += `{% trans "Stock" %}${stock}`; @@ -949,20 +943,20 @@ function loadPartTable(table, url, options={}) { // Is stock "low" (below the 'minimum_stock' quantity)? if (row.minimum_stock && row.minimum_stock > value) { - value += `{% trans "Low stock" %}`; + value += `{% trans "Low stock" %}`; } } else if (row.on_order) { // There is no stock available, but stock is on order - value = `0{% trans "On Order" %}: ${row.on_order}`; + value = `0{% trans "On Order" %}: ${row.on_order}`; link = '?display=purchase-orders'; } else if (row.building) { // There is no stock available, but stock is being built - value = `0{% trans "Building" %}: ${row.building}`; + value = `0{% trans "Building" %}: ${row.building}`; link = '?display=build-orders'; } else { // There is no stock available - value = `0{% trans "No Stock" %}`; + value = `0{% trans "No Stock" %}`; } return renderLink(value, `/part/${row.pk}/${link}`); diff --git a/InvenTree/templates/js/translated/stock.js b/InvenTree/templates/js/translated/stock.js index f021d1dc1f..a23ec654f2 100644 --- a/InvenTree/templates/js/translated/stock.js +++ b/InvenTree/templates/js/translated/stock.js @@ -450,17 +450,17 @@ function removeStockRow(e) { } -function passFailBadge(result, align='float-right') { +function passFailBadge(result) { if (result) { - return `{% trans "PASS" %}`; + return `{% trans "PASS" %}`; } else { - return `{% trans "FAIL" %}`; + return `{% trans "FAIL" %}`; } } -function noResultBadge(align='float-right') { - return `{% trans "NO RESULT" %}`; +function noResultBadge() { + return `{% trans "NO RESULT" %}`; } function formatDate(row) { @@ -472,7 +472,7 @@ function formatDate(row) { } if (row.attachment) { - html += ``; + html += ``; } return html; @@ -878,7 +878,7 @@ function loadStockTable(table, options) { } if (row.quantity <= 0) { - html += `{% trans "Depleted" %}`; + html += `{% trans "Depleted" %}`; } return html; diff --git a/InvenTree/templates/stats.html b/InvenTree/templates/stats.html index df42576923..cf3d225cd2 100644 --- a/InvenTree/templates/stats.html +++ b/InvenTree/templates/stats.html @@ -40,9 +40,9 @@ {% trans "Server status" %} {% if system_healthy %} - {% trans "Healthy" %} + {% trans "Healthy" %} {% else %} - {% trans "Issues detected" %} + {% trans "Issues detected" %} {% endif %} @@ -52,7 +52,7 @@ {% trans "Background Worker" %} - {% trans "Background worker not running" %} + {% trans "Background worker not running" %} @@ -63,7 +63,7 @@ {% trans "Email Settings" %} - {% trans "Email settings not configured" %} + {% trans "Email settings not configured" %} diff --git a/InvenTree/templates/status_codes.html b/InvenTree/templates/status_codes.html index 453a7914e2..fa448360b6 100644 --- a/InvenTree/templates/status_codes.html +++ b/InvenTree/templates/status_codes.html @@ -5,7 +5,7 @@ const {{ label }}Codes = { {% for opt in options %}'{{ opt.key }}': { key: '{{ opt.key }}', value: '{{ opt.value }}',{% if opt.color %} - label: 'label-{{ opt.color }}',{% endif %} + label: 'bg-{{ opt.color }}',{% endif %} }, {% endfor %} }; @@ -32,7 +32,7 @@ function {{ label }}StatusDisplay(key, options={}) { label = ''; } - var classes = `label ${label}`; + var classes = `badge rounded-pill ${label}`; if (options.classes) { classes += ' ' + options.classes; diff --git a/InvenTree/templates/yesnolabel.html b/InvenTree/templates/yesnolabel.html index 2117d42faa..480c08dfb3 100644 --- a/InvenTree/templates/yesnolabel.html +++ b/InvenTree/templates/yesnolabel.html @@ -1,7 +1,7 @@ {% load i18n %} {% if value %} -{% trans 'Yes' %} +{% trans 'Yes' %} {% else %} -{% trans 'No' %} +{% trans 'No' %} {% endif %} \ No newline at end of file