Refactor part display

This commit is contained in:
Oliver 2021-10-27 23:29:10 +11:00
parent e235e5adec
commit 9d2b4af83f
6 changed files with 326 additions and 330 deletions

View File

@ -229,16 +229,26 @@
/* Extra label styles */ /* 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 { .label-large {
margin: 3px; margin: 3px;
font-size: 100%; font-size: 90%;
border: 3px solid; border: 3px solid;
border-radius: 15px; border-radius: 15px;
background: none; background: none;
padding-right: 10px; padding: 3px;
padding-left: 10px; border-radius: 10px;
padding-top: 5px;
padding-bottom: 5px;
} }
.label-large-red { .label-large-red {
@ -254,18 +264,7 @@
border-radius: 5px; border-radius: 5px;
} }
.label {
display: inline;
font-size: 75%;
line-height: 1;
padding-left: 4px;
padding-right: 4px;
color: white;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
.label-red { .label-red {
background: var(--label-red); background: var(--label-red);

View File

@ -11,6 +11,88 @@
{% block page_content %} {% block page_content %}
<div class='panel panel-inventree panel-hidden' id='panel-part-details'>
<div class='panel-heading'>
<h4>{% trans "Part Details" %}</h4>
</div>
<div class='panel-content'>
<!-- Details Table -->
<table class="table table-striped">
<col width='25'>
{% if part.IPN %}
<tr>
<td><span class='fas fa-tag'></span></td>
<td>{% trans "IPN" %}</td>
<td>{{ part.IPN }}{% include "clip.html"%}</td>
</tr>
{% endif %}
<tr>
<td><span class='fas fa-shapes'></span></td>
<td>{% trans "Name" %}</td>
<td>{{ part.name }}{% include "clip.html"%}</td>
</tr>
<tr>
<td><span class='fas fa-info-circle'></span></td>
<td>{% trans "Description" %}</td>
<td>{{ part.description }}{% include "clip.html"%}</td>
</tr>
{% if part.revision %}
<tr>
<td><span class='fas fa-code-branch'></span></td>
<td>{% trans "Revision" %}</td>
<td>{{ part.revision }}{% include "clip.html"%}</td>
</tr>
{% endif %}
{% if part.keywords %}
<tr>
<td><span class='fas fa-key'></span></td>
<td>{% trans "Keywords" %}</td>
<td>{{ part.keywords }}{% include "clip.html"%}</td>
</tr>
{% endif %}
{% if part.link %}
<tr>
<td><span class='fas fa-link'></span></td>
<td>{% trans "External Link" %}</td>
<td><a href="{{ part.link }}">{{ part.link }}</a>{% include "clip.html"%}</td>
</tr>
{% endif %}
<tr>
<td><span class='fas fa-calendar-alt'></span></td>
<td>{% trans "Creation Date" %}</td>
<td>
{{ part.creation_date }}
{% if part.creation_user %}
<span class='badge'>{{ part.creation_user }}</span>
{% endif %}
</td>
</tr>
{% if part.trackable and part.getLatestSerialNumber %}
<tr>
<td><span class='fas fa-hashtag'></span></td>
<td>{% trans "Latest Serial Number" %}</td>
<td>{{ part.getLatestSerialNumber }}{% include "clip.html"%}</td>
</tr>
{% endif %}
{% if part.default_location %}
<tr>
<td><span class='fas fa-search-location'></span></td>
<td>{% trans "Default Location" %}</td>
<td>{{ part.default_location }}</td>
</tr>
{% endif %}
{% if part.default_supplier %}
<tr>
<td><span class='fas fa-building'></span></td>
<td>{% trans "Default Supplier" %}</td>
<td>{{ part.default_supplier }}</td>
</tr>
{% endif %}
</table>
</div>
</div>
<div class='panel panel-inventree panel-hidden' id='panel-part-stock'> <div class='panel panel-inventree panel-hidden' id='panel-part-stock'>
<div class='panel-heading'> <div class='panel-heading'>
<h4>{% trans "Part Stock" %}</h4> <h4>{% trans "Part Stock" %}</h4>

View File

@ -11,6 +11,12 @@
<span class='menu-tab-icon fas fa-expand-arrows-alt'></span> <span class='menu-tab-icon fas fa-expand-arrows-alt'></span>
</a> </a>
</li> </li>
<li class='list-group-item' title='{% trans "Details" %}'>
<a href='#' id='select-part-details' class='nav-toggle'>
<span class='menu-tab-icon fas fa-info-circle sidebar-icon'></span>
{% trans "Details" %}
</a>
</li>
<li class='list-group-item' title='{% trans "Parameters" %}'> <li class='list-group-item' title='{% trans "Parameters" %}'>
<a href='#' id='select-part-parameters' class='nav-toggle'> <a href='#' id='select-part-parameters' class='nav-toggle'>
<span class='menu-tab-icon fas fa-th-list sidebar-icon'></span> <span class='menu-tab-icon fas fa-th-list sidebar-icon'></span>

View File

@ -1,4 +1,4 @@
{% extends "base.html" %} {% extends "page_base.html" %}
{% load static %} {% load static %}
{% load i18n %} {% load i18n %}
{% load inventree_extras %} {% load inventree_extras %}

View File

@ -8,44 +8,46 @@
{% include "part/navbar.html" %} {% include "part/navbar.html" %}
{% endblock %} {% endblock %}
{% block content %} {% block thumbnail %}
{% include "part/part_thumb.html" %}
{% endblock %}
<div class="panel panel-inventree"> {% block details %}
<div class='panel-content'></div>
<!-- Default panel contents --> <h4>
<div class="panel-heading"><h3>{{ part.full_name }}</h3></div> {{ part.full_name }}
<div class="panel-content">
<div class="row">
<div class="col-sm-6">
{% include "part/part_thumb.html" %}
<div class="media-body">
<p>
<h3>
<!-- Admin View --> <!-- Admin View -->
{% if user.is_staff and roles.part.change %} {% if user.is_staff and roles.part.change %}
<a href="{% url 'admin:part_part_change' part.pk %}"><span title="{% trans 'Admin view' %}" class='fas fa-user-shield'></span></a>&ensp; <a href="{% url 'admin:part_part_change' part.pk %}"><span title="{% trans 'Admin view' %}" class='fas fa-user-shield'></span></a>&ensp;
{% endif %} {% endif %}
<!-- Properties --> </h4>
<div id='part-properties' class='btn-group' role='group'> <!-- Properties -->
<h4>
<div id='part-properties' class='btn-group'>
{% if part.is_template %} {% if part.is_template %}
&ensp;
<span class='fas fa-clone' title='{% trans "Part is a template part (variants can be made from this part)" %}'></span> <span class='fas fa-clone' title='{% trans "Part is a template part (variants can be made from this part)" %}'></span>
{% endif %} {% endif %}
{% if part.assembly %} {% if part.assembly %}
&ensp;
<span class='fas fa-tools' title='{% trans "Part can be assembled from other parts" %}'></span> <span class='fas fa-tools' title='{% trans "Part can be assembled from other parts" %}'></span>
{% endif %} {% endif %}
{% if part.component %} {% if part.component %}
&ensp;
<span class='fas fa-th' title='{% trans "Part can be used in assemblies" %}'></span> <span class='fas fa-th' title='{% trans "Part can be used in assemblies" %}'></span>
{% endif %} {% endif %}
{% if part.trackable %} {% if part.trackable %}
&ensp;
<span class='fas fa-directions' title='{% trans "Part stock is tracked by serial number" %}'></span> <span class='fas fa-directions' title='{% trans "Part stock is tracked by serial number" %}'></span>
{% endif %} {% endif %}
{% if part.purchaseable %} {% if part.purchaseable %}
&ensp;
<span class='fas fa-shopping-cart' title='{% trans "Part can be purchased from external suppliers" %}'></span> <span class='fas fa-shopping-cart' title='{% trans "Part can be purchased from external suppliers" %}'></span>
{% endif %} {% endif %}
{% if part.salable %} {% if part.salable %}
&ensp;
<span class='fas fa-dollar-sign' title='{% trans "Part can be sold to customers" %}'></span> <span class='fas fa-dollar-sign' title='{% trans "Part can be sold to customers" %}'></span>
{% endif %} {% endif %}
</div>
<!-- Part active --> <!-- Part active -->
{% if not part.active %} {% if not part.active %}
&ensp; &ensp;
@ -62,10 +64,11 @@
{% trans 'Virtual' %} {% trans 'Virtual' %}
</div> </div>
{% endif %} {% endif %}
</h3> </div>
</p> </h4>
<div class='btn-group' role='group'> <!-- Part Actions -->
<div class='btn-group' role='group'>
<button type='button' class='btn btn-outline-secondary' id='toggle-starred' title='{% trans "Star this part" %}'> <button type='button' class='btn btn-outline-secondary' id='toggle-starred' title='{% trans "Star this part" %}'>
<span id='part-star-icon' class='fas fa-star {% if starred %}icon-yellow{% endif %}'/> <span id='part-star-icon' class='fas fa-star {% if starred %}icon-yellow{% endif %}'/>
</button> </button>
@ -128,26 +131,23 @@
</ul> </ul>
</div> </div>
{% endif %} {% endif %}
</div>
<p> </div>
<!-- Details show/hide button -->
<button id="toggle-part-details" class="btn btn-primary" data-bs-toggle="collapse" data-target="#collapsible-part-details" value="show"> <!-- Part info messages -->
<span class="fas fa-chevron-down"></span> {% trans "Show Part Details" %} <div class='info-messages'>
</button>
</p>
</div>
</div>
<div class='info-messages'>
{% if part.variant_of %} {% if part.variant_of %}
<div class='alert alert-info alert-block' style='padding: 10px;'> <div class='alert alert-info alert-block' style='padding: 10px;'>
{% object_link 'part-detail' part.variant_of.id part.variant_of.full_name as link %} {% object_link 'part-detail' part.variant_of.id part.variant_of.full_name as link %}
{% blocktrans %}This part is a variant of {{link}}{% endblocktrans %} {% blocktrans %}This part is a variant of {{link}}{% endblocktrans %}
</div> </div>
{% endif %} {% endif %}
</div> </div>
</div>
<div class="col-sm-6">
{% endblock %}
{% block details_right %}
<table class='table table-condensed table-striped'> <table class='table table-condensed table-striped'>
<col width='25'> <col width='25'>
<tr> <tr>
@ -211,95 +211,7 @@
{% endif %} {% endif %}
{% endif %} {% endif %}
{% endif %} {% endif %}
</table> </table>
</div>
</div>
</div>
<div class="collapse" id="collapsible-part-details">
<div class="card card-body">
<!-- Details Table -->
<table class="table table-striped">
<col width='25'>
{% if part.IPN %}
<tr>
<td><span class='fas fa-tag'></span></td>
<td>{% trans "IPN" %}</td>
<td>{{ part.IPN }}{% include "clip.html"%}</td>
</tr>
{% endif %}
<tr>
<td><span class='fas fa-shapes'></span></td>
<td>{% trans "Name" %}</td>
<td>{{ part.name }}{% include "clip.html"%}</td>
</tr>
<tr>
<td><span class='fas fa-info-circle'></span></td>
<td>{% trans "Description" %}</td>
<td>{{ part.description }}{% include "clip.html"%}</td>
</tr>
{% if part.revision %}
<tr>
<td><span class='fas fa-code-branch'></span></td>
<td>{% trans "Revision" %}</td>
<td>{{ part.revision }}{% include "clip.html"%}</td>
</tr>
{% endif %}
{% if part.keywords %}
<tr>
<td><span class='fas fa-key'></span></td>
<td>{% trans "Keywords" %}</td>
<td>{{ part.keywords }}{% include "clip.html"%}</td>
</tr>
{% endif %}
{% if part.link %}
<tr>
<td><span class='fas fa-link'></span></td>
<td>{% trans "External Link" %}</td>
<td><a href="{{ part.link }}">{{ part.link }}</a>{% include "clip.html"%}</td>
</tr>
{% endif %}
<tr>
<td><span class='fas fa-calendar-alt'></span></td>
<td>{% trans "Creation Date" %}</td>
<td>
{{ part.creation_date }}
{% if part.creation_user %}
<span class='badge'>{{ part.creation_user }}</span>
{% endif %}
</td>
</tr>
{% if part.trackable and part.getLatestSerialNumber %}
<tr>
<td><span class='fas fa-hashtag'></span></td>
<td>{% trans "Latest Serial Number" %}</td>
<td>{{ part.getLatestSerialNumber }}{% include "clip.html"%}</td>
</tr>
{% endif %}
{% if part.default_location %}
<tr>
<td><span class='fas fa-search-location'></span></td>
<td>{% trans "Default Location" %}</td>
<td>{{ part.default_location }}</td>
</tr>
{% endif %}
{% if part.default_supplier %}
<tr>
<td><span class='fas fa-building'></span></td>
<td>{% trans "Default Supplier" %}</td>
<td>{{ part.default_supplier }}</td>
</tr>
{% endif %}
</table>
</div>
</div>
</div>
{% block page_content %}
{% endblock %}
{% endblock %} {% endblock %}
{% block js_ready %} {% block js_ready %}

View File

@ -4,18 +4,16 @@
{% settings_value "INVENTREE_DOWNLOAD_FROM_URL" as allow_download %} {% settings_value "INVENTREE_DOWNLOAD_FROM_URL" as allow_download %}
<div class="media"> <div class='dropzone' id='part-thumb'>
<div class="media-left part-thumb-container">
<div class='dropzone' id='part-thumb'>
<img class="part-thumb" id='part-image' <img class="part-thumb" id='part-image'
{% if part.image %} {% if part.image %}
src="{{ part.image.url }}" src="{{ part.image.url }}"
{% else %} {% else %}
src="{% static 'img/blank_image.png' %}" src="{% static 'img/blank_image.png' %}"
{% endif %}/> {% endif %}/>
</div> </div>
{% if roles.part.change %} {% if roles.part.change %}
<div class='btn-row part-thumb-overlay'> <div class='btn-row part-thumb-overlay'>
<div class='btn-group'> <div class='btn-group'>
<button type='button' class='btn btn-default' title="{% trans 'Select from existing images' %}" id='part-image-select'><span class='fas fa-th'></span></button> <button type='button' class='btn btn-default' title="{% trans 'Select from existing images' %}" id='part-image-select'><span class='fas fa-th'></span></button>
<button type='button' class='btn btn-default' title="{% trans 'Upload new image' %}" id='part-image-upload'><span class='fas fa-file-upload'></span></button> <button type='button' class='btn btn-default' title="{% trans 'Upload new image' %}" id='part-image-upload'><span class='fas fa-file-upload'></span></button>
@ -23,6 +21,5 @@
<button type='button' class='btn btn-default' title="{% trans 'Download image from URL' %}" id='part-image-url'><span class='fas fa-cloud-download-alt'></span></button> <button type='button' class='btn btn-default' title="{% trans 'Download image from URL' %}" id='part-image-url'><span class='fas fa-cloud-download-alt'></span></button>
{% endif %} {% endif %}
</div> </div>
</div> </div>
{% endif %} {% endif %}
</div>