replace labels with badges

This commit is contained in:
Oliver 2021-10-28 17:41:40 +11:00
parent c4fd9b7177
commit f8ac016d60
19 changed files with 82 additions and 181 deletions

View File

@ -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 {

View File

@ -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 "<span class='{cl}'>{value}</span>".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 = [

View File

@ -92,7 +92,7 @@ src="{% static 'img/blank_image.png' %}"
<td>
{{ build.target_date }}
{% if build.is_overdue %}
<span title='{% blocktrans with target=build.target_date %}This build was due on {{target}}{% endblocktrans %}' class='label label-red'>{% trans "Overdue" %}</span>
<span title='{% blocktrans with target=build.target_date %}This build was due on {{target}}{% endblocktrans %}' class='badge rounded-pill bg-danger'>{% trans "Overdue" %}</span>
{% endif %}
</td>
</tr>
@ -175,7 +175,7 @@ src="{% static 'img/blank_image.png' %}"
<h3>
{% build_status_label build.status large=True %}
{% if build.is_overdue %}
<span class='label label-large label-large-red'>{% trans "Overdue" %}</span>
<span class='badge rounded-pill bg-danger'>{% trans "Overdue" %}</span>
{% endif %}
</h3>
<hr>

View File

@ -34,7 +34,7 @@ src="{% static 'img/blank_image.png' %}"
<h4>
{% purchase_order_status_label order.status large=True %}
{% if order.is_overdue %}
<span class='label label-large label-large-red'>{% trans "Overdue" %}</span>
<span class='badge rounded-pill bg-danger'>{% trans "Overdue" %}</span>
{% endif %}
</h4>
<p>{{ order.description }}{% include "clip.html"%}</p>
@ -92,7 +92,7 @@ src="{% static 'img/blank_image.png' %}"
<td>
{% purchase_order_status_label order.status %}
{% if order.is_overdue %}
<span class='label label-red'>{% trans "Overdue" %}</span>
<span class='badge rounded-pill bg-danger'>{% trans "Overdue" %}</span>
{% endif %}
</td>
</tr>

View File

@ -35,7 +35,7 @@ src="{% static 'img/blank_image.png' %}"
<h4>
{% sales_order_status_label order.status large=True %}
{% if order.is_overdue %}
<span class='label label-large label-large-red'>{% trans "Overdue" %}</span>
<span class='badge rounded-pill bg-danger'>{% trans "Overdue" %}</span>
{% endif %}
</h4>
<p>{{ order.description }}{% include "clip.html"%}</p>
@ -99,7 +99,7 @@ src="{% static 'img/blank_image.png' %}"
<td>
{% sales_order_status_label order.status %}
{% if order.is_overdue %}
<span class='label label-red'>{% trans "Overdue" %}</span>
<span class='badge rounded-pill bg-danger'>{% trans "Overdue" %}</span>
{% endif %}
</td>
</tr>

View File

@ -51,7 +51,7 @@
<!-- Part active -->
{% if not part.active %}
&ensp;
<div class='label label-large label-large-red'>
<div class='badge rounded-pill bg-danger'>
<span class='fas fa-skull-crossbones' title='{% trans "Part is virtual (not a physical part)" %}'></span>
{% trans 'Inactive' %}
</div>
@ -59,7 +59,7 @@
<!-- Part virtual -->
{% if part.virtual and part.active %}
&ensp;
<div class='label label-large label-large-yellow'>
<div class='badge rounded-pill bg-warning'>
<span class='fas fa-ghost' title='{% trans "Part is virtual (not a physical part)" %}'></span>
{% trans 'Virtual' %}
</div>

View File

@ -4,7 +4,7 @@
{% decimal total_stock %}
{% if total_stock == 0 %}
<span class='label label-danger label-right'>{% trans "No Stock" %}</span>
<span class='badge rounded-pill bg-danger'>{% trans "No Stock" %}</span>
{% elif total_stock < part.minimum_stock %}
<span class='label label-warning label-right'>{% trans "Low Stock" %}</span>
<span class='badge rounded-pill bg-warning'>{% trans "Low Stock" %}</span>
{% endif %}

View File

@ -48,7 +48,7 @@
</h4>
<h4>
{% if item.is_expired %}
<span class='label label-large label-large-red'>{% trans "Expired" %}</span>
<span class='badge rounded-pill bg-danger'>{% trans "Expired" %}</span>
{% else %}
{% if roles.stock.change %}
<a href='#' id='stock-edit-status'>
@ -58,7 +58,7 @@
</a>
{% endif %}
{% if item.is_stale %}
<span class='label label-large label-large-yellow'>{% trans "Stale" %}</span>
<span class='badge rounded-pill bg-warning'>{% trans "Stale" %}</span>
{% endif %}
{% endif %}
</h4>
@ -390,9 +390,9 @@
<td>
{{ item.expiry_date }}
{% if item.is_expired %}
<span title='{% blocktrans %}This StockItem expired on {{ item.expiry_date }}{% endblocktrans %}' class='label label-red'>{% trans "Expired" %}</span>
<span title='{% blocktrans %}This StockItem expired on {{ item.expiry_date }}{% endblocktrans %}' class='badge rounded-pill bg-danger'>{% trans "Expired" %}</span>
{% elif item.is_stale %}
<span title='{% blocktrans %}This StockItem expires on {{ item.expiry_date }}{% endblocktrans %}' class='label label-yellow'>{% trans "Stale" %}</span>
<span title='{% blocktrans %}This StockItem expires on {{ item.expiry_date }}{% endblocktrans %}' class='badge rounded-pill bg-warning'>{% trans "Stale" %}</span>
{% endif %}
</td>
</tr>

View File

@ -24,12 +24,12 @@
<a href="https://github.com/inventree/InvenTree/releases">{% inventree_version %}</a>{% include "clip.html" %}
{% inventree_is_development as dev %}
{% if dev %}
<span class='label label-blue float-right'>{% trans "Development Version" %}</span>
<span class='badge rounded-pill bg-primary'>{% trans "Development Version" %}</span>
{% else %}
{% if up_to_date %}
<span class='label label-green float-right'>{% trans "Up to Date" %}</span>
<span class='badge rounded-pill bg-success'>{% trans "Up to Date" %}</span>
{% else %}
<span class='label label-red float-right'>{% trans "Update Available" %}</span>
<span class='badge rounded-pill bg-info'>{% trans "Update Available" %}</span>
{% endif %}
{% endif %}
</td>

View File

@ -169,12 +169,7 @@ function inventreeDocReady() {
html += '</span>';
if (user_settings.SEARCH_SHOW_STOCK_LEVELS) {
html += partStockLabel(
item.data,
{
label_class: 'label-right',
}
);
html += partStockLabel(item.data);
}
html += '</a>';

View File

@ -407,7 +407,7 @@ function loadBomTable(table, options) {
// Display an extra icon if this part is an assembly
if (sub_part.assembly) {
var text = `<span title='{% trans "Open subassembly" %}' class='fas fa-stream label-right'></span>`;
var text = `<span title='{% trans "Open subassembly" %}' class='fas fa-stream float-right'></span>`;
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 = `<span class='label label-warning'>{% trans "No Stock" %}</span>`;
text = `<span class='badge rounded-pill bg-danger'>{% trans "No Stock" %}</span>`;
}
return renderLink(text, url);

View File

@ -325,15 +325,15 @@ function loadCompanyTable(table, url, options={}) {
var html = imageHoverIcon(row.image) + renderLink(value, row.url);
if (row.is_customer) {
html += `<span title='{% trans "Customer" %}' class='fas fa-user-tie label-right'></span>`;
html += `<span title='{% trans "Customer" %}' class='fas fa-user-tie float-right'></span>`;
}
if (row.is_manufacturer) {
html += `<span title='{% trans "Manufacturer" %}' class='fas fa-industry label-right'></span>`;
html += `<span title='{% trans "Manufacturer" %}' class='fas fa-industry float-right'></span>`;
}
if (row.is_supplier) {
html += `<span title='{% trans "Supplier" %}' class='fas fa-building label-right'></span>`;
html += `<span title='{% trans "Supplier" %}' class='fas fa-building float-right'></span>`;
}
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 += `<span class='fas fa-clone label-right' title='{% trans "Template part" %}'></span>`;
html += `<span class='fas fa-clone float-right' title='{% trans "Template part" %}'></span>`;
}
if (row.part_detail.assembly) {
html += `<span class='fas fa-tools label-right' title='{% trans "Assembled part" %}'></span>`;
html += `<span class='fas fa-tools float-right' title='{% trans "Assembled part" %}'></span>`;
}
if (!row.part_detail.active) {
html += `<span class='label label-warning label-right'>{% trans "Inactive" %}</span>`;
html += `<span class='badge rounded-pill bg-warning'>{% trans "Inactive" %}</span>`;
}
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 += `<span class='fas fa-clone label-right' title='{% trans "Template part" %}'></span>`;
html += `<span class='fas fa-clone float-right' title='{% trans "Template part" %}'></span>`;
}
if (row.part_detail.assembly) {
html += `<span class='fas fa-tools label-right' title='{% trans "Assembled part" %}'></span>`;
html += `<span class='fas fa-tools float-right' title='{% trans "Assembled part" %}'></span>`;
}
if (!row.part_detail.active) {
html += `<span class='label label-warning label-right'>{% trans "Inactive" %}</span>`;
html += `<span class='badge rounded-pill bg-warning'>{% trans "Inactive" %}</span>`;
}
return html;

View File

@ -16,9 +16,9 @@
function yesNoLabel(value) {
if (value) {
return `<span class='label label-green'>{% trans "YES" %}</span>`;
return `<span class='badge rounded-pill bg-success'>{% trans "YES" %}</span>`;
} else {
return `<span class='label label-yellow'>{% trans "NO" %}</span>`;
return `<span class='badge rounded-pill bg-warning'>{% trans "NO" %}</span>`;
}
}
@ -92,7 +92,7 @@ function select2Thumbnail(image) {
*/
function makeIconBadge(icon, title) {
var html = `<span class='fas ${icon} label-right' title='${title}'></span>`;
var html = `<span class='fas ${icon} float-right' title='${title}'></span>`;
return html;
}

View File

@ -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 = `<span class='label-form label-red'>{% trans "No Stock"% }</span>`;
stock_detail = `<span class='badge rounded-pill bg-danger'>{% trans "No Stock"% }</span>`;
} else {
stock_detail = `{% trans "Quantity" %}: ${data.quantity}`;
}
@ -172,7 +172,7 @@ function renderPart(name, data, parameters, options) {
}
if (!data.active) {
extra += `<span class='label-form label-red'>{% trans "Inactive" %}</span>`;
extra += `<span class='badge rounded-pill bg-danger'>{% trans "Inactive" %}</span>`;
}
html += `

View File

@ -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 `<span class='label ${label_class} label-green'>{% trans "Stock" %}: ${part.in_stock}</span>`;
return `<span class='badge rounded-pill bg-success'>{% trans "Stock" %}: ${part.in_stock}</span>`;
} else {
return `<span class='label ${label_class} label-red'>{% trans "No Stock" %}</span>`;
return `<span class='badge rounded-pill bg-danger'>{% trans "No Stock" %}</span>`;
}
}
@ -453,7 +451,7 @@ function makePartIcons(part) {
}
if (!part.active) {
html += `<span class='label label-warning label-right'>{% trans "Inactive" %}</span>`;
html += `<span class='badge rounded-pill bg-warning'>{% trans "Inactive" %}</span>`;
}
return html;
@ -530,7 +528,7 @@ function loadPartVariantTable(table, partId, options={}) {
}
if (!row.active) {
html += `<span class='label label-warning label-right'>{% trans "Inactive" %}</span>`;
html += `<span class='badge rounded-pill bg-warning'>{% trans "Inactive" %}</span>`;
}
return html;
@ -769,14 +767,10 @@ function partGridTile(part) {
// Rows for table view
var rows = '';
if (part.IPN) {
rows += `<tr><td><b>{% trans "IPN" %}</b></td><td>${part.IPN}</td></tr>`;
}
var stock = `${part.in_stock}`;
if (!part.in_stock) {
stock = `<span class='label label-red'>{% trans "No Stock" %}</label>`;
stock = `<span class='badge rounded-pill bg-danger'>{% trans "No Stock" %}</span>`;
}
rows += `<tr><td><b>{% trans "Stock" %}</b></td><td>${stock}</td></tr>`;
@ -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 += `<span class='label label-right label-warning'>{% trans "Low stock" %}</span>`;
value += `<span class='badge rounded-pill bg-warning'>{% trans "Low stock" %}</span>`;
}
} else if (row.on_order) {
// There is no stock available, but stock is on order
value = `0<span class='label label-right label-primary'>{% trans "On Order" %}: ${row.on_order}</span>`;
value = `0<span class='badge rounded-pill bg-info'>{% trans "On Order" %}: ${row.on_order}</span>`;
link = '?display=purchase-orders';
} else if (row.building) {
// There is no stock available, but stock is being built
value = `0<span class='label label-right label-info'>{% trans "Building" %}: ${row.building}</span>`;
value = `0<span class='badge rounded-pill bg-info'>{% trans "Building" %}: ${row.building}</span>`;
link = '?display=build-orders';
} else {
// There is no stock available
value = `0<span class='label label-right label-danger'>{% trans "No Stock" %}</span>`;
value = `0<span class='badge rounded-pill bg-danger'>{% trans "No Stock" %}</span>`;
}
return renderLink(value, `/part/${row.pk}/${link}`);

View File

@ -450,17 +450,17 @@ function removeStockRow(e) {
}
function passFailBadge(result, align='float-right') {
function passFailBadge(result) {
if (result) {
return `<span class='label label-green ${align}'>{% trans "PASS" %}</span>`;
return `<span class='badge rounded-pill bg-success'>{% trans "PASS" %}</span>`;
} else {
return `<span class='label label-red ${align}'>{% trans "FAIL" %}</span>`;
return `<span class='badge rounded-pill bg-danger'>{% trans "FAIL" %}</span>`;
}
}
function noResultBadge(align='float-right') {
return `<span class='label label-blue ${align}'>{% trans "NO RESULT" %}</span>`;
function noResultBadge() {
return `<span class='badge rounded-pill bg-info'>{% trans "NO RESULT" %}</span>`;
}
function formatDate(row) {
@ -472,7 +472,7 @@ function formatDate(row) {
}
if (row.attachment) {
html += `<a href='${row.attachment}'><span class='fas fa-file-alt label-right'></span></a>`;
html += `<a href='${row.attachment}'><span class='fas fa-file-alt float-right'></span></a>`;
}
return html;
@ -878,7 +878,7 @@ function loadStockTable(table, options) {
}
if (row.quantity <= 0) {
html += `<span class='label label-right label-danger'>{% trans "Depleted" %}</span>`;
html += `<span class='badge rounded-pill bg-danger'>{% trans "Depleted" %}</span>`;
}
return html;

View File

@ -40,9 +40,9 @@
<td>{% trans "Server status" %}</td>
<td>
{% if system_healthy %}
<span class='label label-green'>{% trans "Healthy" %}</span>
<span class='badge rounded-pill bg-success'>{% trans "Healthy" %}</span>
{% else %}
<span class='label label-red'>{% trans "Issues detected" %}</span>
<span class='badge rounded-pill bg-warning'>{% trans "Issues detected" %}</span>
{% endif %}
</td>
</tr>
@ -52,7 +52,7 @@
<td>{% trans "Background Worker" %}</td>
<td>
<a href='{% inventree_docs_url %}/admin/tasks'>
<span class='label label-red'>{% trans "Background worker not running" %}</span>
<span class='badge rounded-pill bg-danger'>{% trans "Background worker not running" %}</span>
</a>
</td>
</tr>
@ -63,7 +63,7 @@
<td>{% trans "Email Settings" %}</td>
<td>
<a href='{% inventree_docs_url %}/admin/email'>
<span class='label label-yellow'>{% trans "Email settings not configured" %}</span>
<span class='badge rounded-pill bg-warning'>{% trans "Email settings not configured" %}</span>
</a>
</td>
</tr>

View File

@ -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;

View File

@ -1,7 +1,7 @@
{% load i18n %}
{% if value %}
<span class='label label-success'>{% trans 'Yes' %}</span>
<span class='badge rounded-pill bg-success'>{% trans 'Yes' %}</span>
{% else %}
<span class='label label-warning'>{% trans 'No' %}</span>
<span class='badge rounded-pill bg-danger'>{% trans 'No' %}</span>
{% endif %}