From f0fe7f2d5cfc029b290a48b8deae31d34f8678b2 Mon Sep 17 00:00:00 2001 From: Oliver Date: Fri, 29 Oct 2021 00:20:39 +1100 Subject: [PATCH] Complete refactoring of part sidebar --- .../static/css/color-themes/dark-reader.css | 18 --- InvenTree/InvenTree/static/css/inventree.css | 78 ++++------- InvenTree/part/templates/part/detail.html | 6 +- InvenTree/part/templates/part/part_base.html | 14 +- .../part/templates/part/part_sidebar.html | 38 ++++++ InvenTree/templates/base.html | 85 +++++------- InvenTree/templates/js/dynamic/nav.js | 121 +++++++++++++++--- InvenTree/templates/sidebar_item.html | 4 + InvenTree/templates/sidebar_toggle.html | 3 + 9 files changed, 213 insertions(+), 154 deletions(-) create mode 100644 InvenTree/part/templates/part/part_sidebar.html create mode 100644 InvenTree/templates/sidebar_item.html create mode 100644 InvenTree/templates/sidebar_toggle.html diff --git a/InvenTree/InvenTree/static/css/color-themes/dark-reader.css b/InvenTree/InvenTree/static/css/color-themes/dark-reader.css index 1b129989dd..e963c4b411 100644 --- a/InvenTree/InvenTree/static/css/color-themes/dark-reader.css +++ b/InvenTree/InvenTree/static/css/color-themes/dark-reader.css @@ -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); } diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css index 9a7847e8df..4469568d1e 100644 --- a/InvenTree/InvenTree/static/css/inventree.css +++ b/InvenTree/InvenTree/static/css/inventree.css @@ -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 { diff --git a/InvenTree/part/templates/part/detail.html b/InvenTree/part/templates/part/detail.html index afb97ef476..4c8a5e77ae 100644 --- a/InvenTree/part/templates/part/detail.html +++ b/InvenTree/part/templates/part/detail.html @@ -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 %} diff --git a/InvenTree/part/templates/part/part_base.html b/InvenTree/part/templates/part/part_base.html index 7ed95f4dc1..43126b1fc7 100644 --- a/InvenTree/part/templates/part/part_base.html +++ b/InvenTree/part/templates/part/part_base.html @@ -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() { diff --git a/InvenTree/part/templates/part/part_sidebar.html b/InvenTree/part/templates/part/part_sidebar.html new file mode 100644 index 0000000000..9a918d17d7 --- /dev/null +++ b/InvenTree/part/templates/part/part_sidebar.html @@ -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" %} diff --git a/InvenTree/templates/base.html b/InvenTree/templates/base.html index c74426d7d2..fd6e5490f6 100644 --- a/InvenTree/templates/base.html +++ b/InvenTree/templates/base.html @@ -67,58 +67,41 @@ {% include "navbar.html" %} -
- -
- - {% block breadcrumb_list %} -
- +
+ +
+
+ +
+
+ {% block breadcrumb_list %} +
+ +
+ {% endblock %} + + {% block content %} + + {% endblock %} +
- {% endblock %} - -
- {% block pre_content %} - {% endblock %} -
- -
- -
- {% block sidenav %} - - {% endblock %} -
- -
- {% block menubar %} - - {% endblock %} -
- -
- {% block content %} - - {% endblock %} - -
- - -{% block post_content %} -{% endblock %} - -
- -{% include 'modals.html' %} -{% include 'about.html' %} -{% include 'notification.html' %} -
- + {% include 'modals.html' %} + {% include 'about.html' %} + {% include 'notification.html' %}
diff --git a/InvenTree/templates/js/dynamic/nav.js b/InvenTree/templates/js/dynamic/nav.js index ddf3cb8c12..df1573c226 100644 --- a/InvenTree/templates/js/dynamic/nav.js +++ b/InvenTree/templates/js/dynamic/nav.js @@ -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-", * and point to a matching "panel-" */ -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; diff --git a/InvenTree/templates/sidebar_item.html b/InvenTree/templates/sidebar_item.html new file mode 100644 index 0000000000..2092af355a --- /dev/null +++ b/InvenTree/templates/sidebar_item.html @@ -0,0 +1,4 @@ +{% load i18n %} + + + diff --git a/InvenTree/templates/sidebar_toggle.html b/InvenTree/templates/sidebar_toggle.html new file mode 100644 index 0000000000..5715b5db99 --- /dev/null +++ b/InvenTree/templates/sidebar_toggle.html @@ -0,0 +1,3 @@ + + +