From a660578262a618ece3c302d01cc7e0dff3406d6a Mon Sep 17 00:00:00 2001 From: Oliver Walters Date: Wed, 24 Feb 2021 11:02:11 +1100 Subject: [PATCH] Move part menu to the left --- InvenTree/InvenTree/static/css/inventree.css | 4 +- .../static/script/inventree/sidenav.js | 86 ++++++++++++++- InvenTree/part/templates/part/navbar.html | 100 +++++++++++++----- InvenTree/part/templates/part/part_base.html | 8 +- InvenTree/templates/base.html | 11 +- 5 files changed, 176 insertions(+), 33 deletions(-) diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css index 6e414b9884..fe3fc5e7cf 100644 --- a/InvenTree/InvenTree/static/css/inventree.css +++ b/InvenTree/InvenTree/static/css/inventree.css @@ -704,6 +704,7 @@ input[type="submit"] { left: 0px; top: 0px; width: 0px; + z-index: 500; } .sidenav-left .badge { @@ -713,8 +714,9 @@ input[type="submit"] { } .sidenav-right { + min-width: 45px; width: 0px; - right: 0px; + left: 0px; top: 70px; position: sticky; font-size: 115%; diff --git a/InvenTree/InvenTree/static/script/inventree/sidenav.js b/InvenTree/InvenTree/static/script/inventree/sidenav.js index a2b8f96116..4be2ddef2f 100644 --- a/InvenTree/InvenTree/static/script/inventree/sidenav.js +++ b/InvenTree/InvenTree/static/script/inventree/sidenav.js @@ -133,9 +133,91 @@ function initSideNav(navId) { }); if (sessionStorage.getItem("inventree-sidenav-state") && sessionStorage.getItem('inventree-sidenav-state') == 'open') { - openSideNav(); + openSideNav(navId); } else { - closeSideNav(); + closeSideNav(navId); + } +} + + +function enableNavbar(options) { + + var resize = true; + + if ('resize' in options) { + resize = options.resize; + } + + console.log('enable navbar: ' + options.navId); + + // Make the navbar resizable + if (resize) { + $(options.navId).resizable({ + minWidth: options.minWidth || '100px', + maxWidth: options.maxWidth || '500px', + handles: 'e, se', + grid: [5, 5], + stop: function(event, ui) { + // Record the new width + var width = Math.round(ui.element.width()); + console.log('Resized to: ' + width); + } + }); + } + + // Extract the saved width for this element + $(options.navId).animate({ + width: '250px', + display: 'block', + }, 50); + + console.log('Done'); +} + + +function enableLeftNavbar(options={}) { + /** + * Enable the left-hand nav bar for this page. + */ + + options.navId = options.navId || '#sidenav-left'; + + enableNavbar(options); +} + +function enableRightNavbar(options={}) { + + options.navId = options.navId || '#sidenav-right'; + + enableNavbar(options); +} + +/** + * Function to toggle a menu + */ +function toggleMenuExpand(menuId) { + + var stateKey = `menu-state-${menuId}`; + var widthKey = `menu-width-${menuId}`; + + if (sessionStorage.getItem(stateKey) && sessionStorage.getItem(stateKey) == 'open') { + + // Close the menu + $('#sidenav-right').animate({ + 'width': '45px' + }, 50); + + sessionStorage.setItem(stateKey, 'closed'); + } else { + + var width = sessionStorage.getItem(widthKey) || '250px'; + + // Open the menu + $('#sidenav-right').animate({ + 'width': width, + }, 50); + + sessionStorage.setItem(stateKey, 'open'); } } \ No newline at end of file diff --git a/InvenTree/part/templates/part/navbar.html b/InvenTree/part/templates/part/navbar.html index e25df85256..5e3b9ca19e 100644 --- a/InvenTree/part/templates/part/navbar.html +++ b/InvenTree/part/templates/part/navbar.html @@ -4,56 +4,108 @@ diff --git a/InvenTree/part/templates/part/part_base.html b/InvenTree/part/templates/part/part_base.html index 08d5c53214..8dd11bbf08 100644 --- a/InvenTree/part/templates/part/part_base.html +++ b/InvenTree/part/templates/part/part_base.html @@ -200,7 +200,13 @@ {% block js_ready %} {{ block.super }} - enableRightNavbar(); + enableRightNavbar({ + minWidth: '50px', + }); + + $('#part-menu-toggle').click(function() { + toggleMenuExpand(); + }) enableDragAndDrop( '#part-thumb', diff --git a/InvenTree/templates/base.html b/InvenTree/templates/base.html index 7b1951bea2..bff711d1b2 100644 --- a/InvenTree/templates/base.html +++ b/InvenTree/templates/base.html @@ -83,6 +83,12 @@ InvenTree {% endblock %} +
+ {% block menubar %} + + {% endblock %} +
+
{% block content %} @@ -90,11 +96,6 @@ InvenTree
-
- {% block menubar %} - - {% endblock %} -
{% block post_content %} {% endblock %}