mirror of
https://github.com/inventree/InvenTree
synced 2024-08-30 18:33:04 +00:00
Complete refactoring of part sidebar
This commit is contained in:
Oliver
parent
f542bdc19f
commit
f0fe7f2d5c
@ -2903,17 +2903,6 @@ a.ui-button:active,
|
||||
.ui-widget-header .ui-state-disabled {
|
||||
background-image: none;
|
||||
}
|
||||
.ui-state-active .ui-icon,
|
||||
.ui-button:active .ui-icon {
|
||||
background-image: url("/static/script/jquery-ui/images/ui-icons_ffffff_256x240.png");
|
||||
}
|
||||
.ui-state-highlight .ui-icon,
|
||||
.ui-button .ui-state-highlight.ui-icon {
|
||||
background-image: url("/static/script/jquery-ui/images/ui-icons_777620_256x240.png");
|
||||
}
|
||||
.ui-button .ui-icon {
|
||||
background-image: url("/static/script/jquery-ui/images/ui-icons_777777_256x240.png");
|
||||
}
|
||||
.ui-widget-overlay {
|
||||
background-image: initial;
|
||||
background-color: rgb(72, 78, 81);
|
||||
@ -3118,13 +3107,6 @@ input[type="submit"] {
|
||||
.modal .btn-secondary {
|
||||
background-color: rgb(75, 100, 108);
|
||||
}
|
||||
.sidenav {
|
||||
background-color: rgb(24, 26, 27);
|
||||
}
|
||||
.sidenav .list-group-item.active {
|
||||
background-color: rgb(43, 47, 49);
|
||||
border-color: rgb(62, 68, 70);
|
||||
}
|
||||
.help-inline {
|
||||
color: rgb(238, 90, 90);
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
:root {
|
||||
--primary-color: #335d88;
|
||||
--secondary-color: #f7f5ee;
|
||||
--highlight-color: #f5efe8;
|
||||
--highlight-color: #ffffff;
|
||||
|
||||
--border-color: #ccc;
|
||||
|
||||
@ -540,7 +540,7 @@
|
||||
.inventree-body {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
margin: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.inventree-pre-content {
|
||||
@ -558,7 +558,7 @@
|
||||
}
|
||||
|
||||
.body {
|
||||
padding-top: 70px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
@ -713,56 +713,15 @@ input[type="submit"] {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.inventree-navs {
|
||||
display: flex;
|
||||
.sidebar-list-group-item {
|
||||
background-color: var(--secondary-color);
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
.sidenav {
|
||||
height: 100%; /* 100% Full-height */
|
||||
width: 0px; /* 0 width - change this with JavaScript */
|
||||
position: relative; /* Stay in place */
|
||||
overflow-x: hidden; /* Disable horizontal scroll */
|
||||
overflow: hidden;
|
||||
transition: 0.1s; /* 0.5 second transition effect to slide in the sidenav */
|
||||
z-index: 100;
|
||||
background-color: #fff; /* Black*/
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.sidenav li {
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidenav .list-group-item.active {
|
||||
background-color: #c6d4ea;
|
||||
border: 2px #aab solid;
|
||||
}
|
||||
|
||||
/* The side navigation menu */
|
||||
.sidenav-left {
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 0px;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.sidenav-left .badge {
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.sidenav-right {
|
||||
left: 0px;
|
||||
top: 70px;
|
||||
position: sticky;
|
||||
font-size: 115%;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.sidenav-right svg {
|
||||
margin-right: 10px;
|
||||
.sidebar-list-group-item.active {
|
||||
color: var(--highlight-color);
|
||||
background-color: var(--bs-body-color);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.container > aside,
|
||||
@ -955,8 +914,21 @@ input[type="date"].form-control, input[type="time"].form-control, input[type="da
|
||||
background: var(--label-grey);
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
min-width: 19px;
|
||||
.sidebar-wrapper {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-item-icon {
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.sidebar-item-text {
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.sidebar-nav a {
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
.row.full-height {
|
||||
|
||||
@ -417,6 +417,7 @@
|
||||
|
||||
// Load the "suppliers" tab
|
||||
onPanelLoad('suppliers', function() {
|
||||
|
||||
function reloadSupplierPartTable() {
|
||||
$('#supplier-part-table').bootstrapTable('refresh');
|
||||
}
|
||||
@ -1113,9 +1114,4 @@
|
||||
var SalePriceChart = loadSellPricingChart($('#SalePriceChart'), salepricedata)
|
||||
{% endif %}
|
||||
|
||||
attachNavCallbacks({
|
||||
name: 'part',
|
||||
default: 'part-stock'
|
||||
});
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
{% load i18n %}
|
||||
{% load inventree_extras %}
|
||||
|
||||
{% block menubar %}
|
||||
{% include "part/navbar.html" %}
|
||||
{% block sidebar %}
|
||||
{% include "part/part_sidebar.html" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block thumbnail %}
|
||||
@ -216,10 +216,12 @@
|
||||
{% block js_ready %}
|
||||
{{ block.super }}
|
||||
|
||||
enableNavbar({
|
||||
label: 'part',
|
||||
toggleId: '#part-menu-toggle',
|
||||
});
|
||||
enableSidebar(
|
||||
'part',
|
||||
{
|
||||
default: 'part-details',
|
||||
}
|
||||
);
|
||||
|
||||
{% if part.image %}
|
||||
$('#part-thumb').click(function() {
|
||||
|
||||
38
InvenTree/part/templates/part/part_sidebar.html
Normal file
38
InvenTree/part/templates/part/part_sidebar.html
Normal file
@ -0,0 +1,38 @@
|
||||
{% load i18n %}
|
||||
{% load static %}
|
||||
{% load inventree_extras %}
|
||||
|
||||
{% settings_value "PART_INTERNAL_PRICE" as show_internal_price %}
|
||||
{% settings_value 'PART_SHOW_RELATED' as show_related %}
|
||||
|
||||
{% include "sidebar_item.html" with label="part-details" text="Details" icon="fa-shapes" %}
|
||||
{% include "sidebar_item.html" with label="part-parameters" text="Parameters" icon="fa-th-list" %}
|
||||
{% if part.is_template %}
|
||||
{% include "sidebar_item.html" with label="variants" text="Variants" icon="fa-shapes" %}
|
||||
{% endif %}
|
||||
{% include "sidebar_item.html" with label="part-stock" text="Stock" icon="fa-boxes" %}
|
||||
{% if part.assembly %}
|
||||
{% include "sidebar_item.html" with label="bom" text="Bill of Materials" icon="fa-list" %}
|
||||
{% if roles.build.view %}
|
||||
{% include "sidebar_item.html" with label="build-orders" text="Build Orders" icon="fa-tools" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if part.component %}
|
||||
{% include "sidebar_item.html" with label="used-in" text="Used In" icon="fa-layer-group" %}
|
||||
{% endif %}
|
||||
{% include "sidebar_item.html" with label="pricing" text="Pricing" icon="fa-dollar-sign" %}
|
||||
{% if part.purchaseable and roles.purchase_order.view %}
|
||||
{% include "sidebar_item.html" with label="suppliers" text="Suppliers" icon="fa-building" %}
|
||||
{% include "sidebar_item.html" with label="purchase-orders" text="Purchase Orders" icon="fa-shopping-cart" %}
|
||||
{% endif %}
|
||||
{% if part.salable and roles.sales_order.view %}
|
||||
{% include "sidebar_item.html" with label="sales-orders" text="Sales Orders" icon="fa-truck" %}
|
||||
{% endif %}
|
||||
{% if part.trackable %}
|
||||
{% include "sidebar_item.html" with label="test-templates" text="Test Templates" icon="fa-vial" %}
|
||||
{% endif %}
|
||||
{% if show_related %}
|
||||
{% include "sidebar_item.html" with label="related-parts" text="Related Parts" icon="fa-random" %}
|
||||
{% endif %}
|
||||
{% include "sidebar_item.html" with label="part-attachments" text="Attachments" icon="fa-paperclip" %}
|
||||
{% include "sidebar_item.html" with label="part-notes" text="Notes" icon="fa-clipboard" %}
|
||||
@ -67,58 +67,41 @@
|
||||
|
||||
{% include "navbar.html" %}
|
||||
|
||||
<div class='main body wrapper'>
|
||||
<div class='main body wrapper container-fluid inventree-body'>
|
||||
|
||||
<div class='inventree-body'>
|
||||
<div class='row flex-nowrap inventree-body'>
|
||||
<div class='sidebar-wrapper col-auto px-1'>
|
||||
<div id='sidebar' class='collapse collapse-horizontal show border-end' style='display: none;'>
|
||||
<div id='sidebar-nav' class='list-group text-sm-start'>
|
||||
<ul class='list-group sidebar-list-group'>
|
||||
{% block sidebar %}
|
||||
<!-- Sidebar goes here -->
|
||||
{% endblock %}
|
||||
{% include "sidebar_toggle.html" %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main class='col ps-md-2 pt-2'>
|
||||
{% block breadcrumb_list %}
|
||||
<div class='container-fluid'>
|
||||
<nav aria-label='breadcrumb'>
|
||||
<ol class='breadcrumb'>
|
||||
{% block breadcrumbs %}
|
||||
{% endblock %}
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block breadcrumb_list %}
|
||||
<div class='container-fluid'>
|
||||
<nav aria-label='breadcrumb'>
|
||||
<ol class='breadcrumb'>
|
||||
{% block breadcrumbs %}
|
||||
{% endblock %}
|
||||
</ol>
|
||||
</nav>
|
||||
{% block content %}
|
||||
<!-- Each view fills in here.. -->
|
||||
{% endblock %}
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
<div class='containter-fluid inventree-pre-content'>
|
||||
{% block pre_content %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
<div class='inventree-navs'>
|
||||
|
||||
<div class='sidenav sidenav-left' id='sidenav-left'>
|
||||
{% block sidenav %}
|
||||
<!-- Sidenav code here -->
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
<div class='sidenav sidenav-right' id='sidenav-right'>
|
||||
{% block menubar %}
|
||||
<!-- Menubar code here -->
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
<div class="container container-fluid inventree-content" id='inventree-content'>
|
||||
{% block content %}
|
||||
<!-- Each view fills in here.. -->
|
||||
{% endblock %}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{% block post_content %}
|
||||
{% endblock %}
|
||||
|
||||
</div>
|
||||
|
||||
{% include 'modals.html' %}
|
||||
{% include 'about.html' %}
|
||||
{% include 'notification.html' %}
|
||||
</div>
|
||||
|
||||
{% include 'modals.html' %}
|
||||
{% include 'about.html' %}
|
||||
{% include 'notification.html' %}
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
|
||||
@ -2,8 +2,7 @@
|
||||
*/
|
||||
|
||||
/* exported
|
||||
attachNavCallbacks,
|
||||
enableNavbar,
|
||||
enableSidebar,
|
||||
initNavTree,
|
||||
loadTree,
|
||||
onPanelLoad,
|
||||
@ -19,7 +18,7 @@
|
||||
* The 'id' of the .nav-toggle element should be of the form "select-<x>",
|
||||
* and point to a matching "panel-<x>"
|
||||
*/
|
||||
function attachNavCallbacks(options={}) {
|
||||
function attachNavCallbacksX(options={}) {
|
||||
|
||||
$('.nav-toggle').click(function() {
|
||||
var el = $(this);
|
||||
@ -44,18 +43,18 @@ function attachNavCallbacks(options={}) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function activatePanel(panelName, options={}) {
|
||||
|
||||
var panelClass = options.name || 'unknown';
|
||||
/*
|
||||
* Activate (display) the selected panel
|
||||
*/
|
||||
function activatePanel(label, panel_name, options={}) {
|
||||
|
||||
// First, cause any other panels to "fade out"
|
||||
$('.panel-visible').hide();
|
||||
$('.panel-visible').removeClass('panel-visible');
|
||||
|
||||
// Find the target panel
|
||||
var panel = `#panel-${panelName}`;
|
||||
var select = `#select-${panelName}`;
|
||||
var panel = `#panel-${panel_name}`;
|
||||
var select = `#select-${panel_name}`;
|
||||
|
||||
// Check that the selected panel (and select) exist
|
||||
if ($(panel).length && $(select).length) {
|
||||
@ -63,22 +62,22 @@ function activatePanel(panelName, options={}) {
|
||||
} else {
|
||||
// Either the select or the panel are not displayed!
|
||||
// Iterate through the available 'select' elements until one matches
|
||||
panelName = null;
|
||||
panel_name = null;
|
||||
|
||||
$('.nav-toggle').each(function() {
|
||||
var panel_name = $(this).attr('id').replace('select-', '');
|
||||
$('.sidebar-selector').each(function() {
|
||||
var name = $(this).attr('id').replace('select-', '');
|
||||
|
||||
if ($(`#panel-${panel_name}`).length && (panelName == null)) {
|
||||
panelName = panel_name;
|
||||
if ($(`#panel-${name}`).length && (panel_name == null)) {
|
||||
panel_name = name;
|
||||
}
|
||||
|
||||
panel = `#panel-${panelName}`;
|
||||
select = `#select-${panelName}`;
|
||||
panel = `#panel-${panel_name}`;
|
||||
select = `#select-${panel_name}`;
|
||||
});
|
||||
}
|
||||
|
||||
// Save the selected panel
|
||||
localStorage.setItem(`inventree-selected-panel-${panelClass}`, panelName);
|
||||
localStorage.setItem(`inventree-selected-panel-${label}`, panel_name);
|
||||
|
||||
// Display the panel
|
||||
$(panel).addClass('panel-visible');
|
||||
@ -93,9 +92,9 @@ function activatePanel(panelName, options={}) {
|
||||
$('.list-group-item').removeClass('active');
|
||||
|
||||
// Find the associated selector
|
||||
var selectElement = `#select-${panelName}`;
|
||||
var selector = `#select-${panel_name}`;
|
||||
|
||||
$(selectElement).parent('.list-group-item').addClass('active');
|
||||
$(selector).addClass('active');
|
||||
}
|
||||
|
||||
|
||||
@ -271,10 +270,90 @@ function initNavTree(options) {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Enable support for sidebar on this page
|
||||
*/
|
||||
function enableSidebar(label, options) {
|
||||
|
||||
// Enable callbacks for sidebar buttons
|
||||
$('.sidebar-selector').click(function() {
|
||||
var el = $(this);
|
||||
|
||||
// Find the matching panel element to display
|
||||
var panel_name = el.attr('id').replace('select-', '');
|
||||
|
||||
activatePanel(label, panel_name, options);
|
||||
});
|
||||
|
||||
/* Look for a "default" panel to initialize for this page
|
||||
*
|
||||
* - First preference = URL parameter e.g. ?display=part-stock
|
||||
* - Second preference = local storage
|
||||
* - Third preference = default
|
||||
*/
|
||||
|
||||
var selected_panel = $.urlParam('display') || localStorage.getItem(`inventree-selected-panel-${label}`) || options.default;
|
||||
|
||||
if (selected_panel) {
|
||||
activatePanel(label, selected_panel);
|
||||
} else {
|
||||
// Find the "first" available panel (according to the sidebar)
|
||||
var selector = $('.sidebar-selector').first();
|
||||
|
||||
var panel_name = selector.attr('id').replace('select-', '');
|
||||
|
||||
activatePanel(label, panel_name);
|
||||
}
|
||||
|
||||
// Add callback to "collapse" and "expand" the sidebar
|
||||
$('#sidebar-toggle').click(function() {
|
||||
|
||||
// By default, the menu is "expanded"
|
||||
var state = localStorage.getItem(`inventree-menu-state-${label}`) || 'expanded';
|
||||
|
||||
// We wish to "toggle" the state!
|
||||
setSidebarState(label, state == "expanded" ? "collapsed" : "expanded");
|
||||
});
|
||||
|
||||
// Set the initial state (default = expanded)
|
||||
var state = localStorage.getItem(`inventree-menu-state-${label}`) || 'expanded';
|
||||
|
||||
setSidebarState(label, state);
|
||||
|
||||
// Finally, show the sidebar
|
||||
$('#sidebar').show();
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Set the "toggle" state of the sidebar
|
||||
*/
|
||||
function setSidebarState(label, state) {
|
||||
|
||||
if (state == "collapsed") {
|
||||
$('.sidebar-item-text').animate({
|
||||
opacity: 0.0,
|
||||
}, 100, function() {
|
||||
$('.sidebar-item-text').hide();
|
||||
$('#sidebar-toggle-icon').removeClass('fa-chevron-left').addClass('fa-chevron-right');
|
||||
});
|
||||
} else {
|
||||
$('.sidebar-item-text').show();
|
||||
$('#sidebar-toggle-icon').removeClass('fa-chevron-right').addClass('fa-chevron-left');
|
||||
$('.sidebar-item-text').animate({
|
||||
opacity: 1.0,
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// Save the state of this sidebar
|
||||
localStorage.setItem(`inventree-menu-state-${label}`, state);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Handle left-hand icon menubar display
|
||||
*/
|
||||
function enableNavbar(options) {
|
||||
function enableNavbarX(options) {
|
||||
|
||||
var resize = true;
|
||||
|
||||
|
||||
4
InvenTree/templates/sidebar_item.html
Normal file
4
InvenTree/templates/sidebar_item.html
Normal file
@ -0,0 +1,4 @@
|
||||
{% load i18n %}
|
||||
<a href="#" id='select-{{ label }}' class="list-group-item sidebar-list-group-item border-end-0 d-inline-block text-truncate sidebar-selector" data-bs-parent="#sidebar">
|
||||
<i class="bi bi-bootstrap"></i><span class='sidebar-item-icon fas {{ icon }}'></span><span class='sidebar-item-text' style='display: none;'>{% trans text %}</span>
|
||||
</a>
|
||||
3
InvenTree/templates/sidebar_toggle.html
Normal file
3
InvenTree/templates/sidebar_toggle.html
Normal file
@ -0,0 +1,3 @@
|
||||
<a href="#" id='sidebar-toggle' class="list-group-item sidebar-list-group-item border-end-0 d-inline-block text-truncate sidebar-toggle" data-bs-parent="#sidebar">
|
||||
<i class="bi bi-bootstrap"></i><span id='sidebar-toggle-icon' class='sidebar-item-icon fas fa-chevron-left'></span>
|
||||
</a>
|
||||
Loading…
Reference in New Issue
Block a user