diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css index 28b1166e1a..1c10897b6c 100644 --- a/InvenTree/InvenTree/static/css/inventree.css +++ b/InvenTree/InvenTree/static/css/inventree.css @@ -725,6 +725,7 @@ input[type="submit"] { top: 70px; position: sticky; font-size: 115%; + margin-left: 5px; } .sidenav-right svg { diff --git a/InvenTree/InvenTree/static/script/inventree/sidenav.js b/InvenTree/InvenTree/static/script/inventree/sidenav.js index 376380e09a..ce1214abc4 100644 --- a/InvenTree/InvenTree/static/script/inventree/sidenav.js +++ b/InvenTree/InvenTree/static/script/inventree/sidenav.js @@ -67,79 +67,91 @@ function loadTree(url, tree, options={}) { }); } -function openSideNav(navId) { -// document.getElementById("sidenav").style.display = "block"; -// document.getElementById("sidenav").style.width = "250px"; - if (!navId) { - navId = '#sidenav-left'; - } - - sessionStorage.setItem('inventree-sidenav-state', 'open'); +/** + * Initialize navigation tree display + */ +function initNavTree(options) { - $(navId).animate({ - width: '250px', - 'min-width': '200px', - display: 'block' - }, 50); + var resize = true; - -} - -function closeSideNav(navId) { - - if (!navId) { - navId = '#sidenav-left'; + if ('resize' in options) { + resize = options.resize; } - sessionStorage.setItem('inventree-sidenav-state', 'closed'); - - $(navId).animate({ + var label = options.label || 'nav'; + + var stateLabel = `${label}-tree-state`; + var widthLabel = `${label}-tree-width`; + + var treeId = options.treeId || '#sidenav-left'; + var toggleId = options.toggleId; + + // Initially hide the tree + $(treeId).animate({ width: '0px', - 'min-width': '0px', - display: 'none', - }, 50); + }, 0, function() { - //document.getElementById("sidenav").style.display = "none"; - //document.getElementById("sidenav").style.width = "0"; - //document.getElementById("inventree-content").style.marginLeft = "0px"; + if (resize) { + $(treeId).resizable({ + minWidth: '0px', + maxWidth: '500px', + handles: 'e, se', + grid: [5, 5], + stop: function(event, ui) { + var width = Math.round(ui.element.width()); -} + if (width < 75) { + $(treeId).animate({ + width: '0px' + }, 50); -function toggleSideNav(nav) { - if ($(nav).width() <= 0) { - openSideNav(nav); - } - else { - closeSideNav(nav); - } -} + sessionStorage.setItem(stateLabel, 'closed'); + } else { + sessionStorage.setItem(stateLabel, 'open'); + sessionStorage.setItem(widthLabel, `${width}px`); + } + } + }); + } -function initSideNav(navId) { + var state = sessionStorage.getItem(stateLabel); + var width = sessionStorage.getItem(widthLabel) || '300px'; - // Make it resizable + if (state && state == 'open') { - if (!navId) { - navId = '#sidenav-left'; - } - - $(navId).resizable({ - minWidth: '100px', - maxWidth: '500px', - stop: function(event, ui) { - console.log(ui.element.width()); - //console.log(ui.size.width); + $(treeId).animate({ + width: width, + }, 50); } }); - if (sessionStorage.getItem("inventree-sidenav-state") && sessionStorage.getItem('inventree-sidenav-state') == 'open') { - openSideNav(navId); - } - else { - closeSideNav(navId); + // Register callback for 'toggle' button + if (toggleId) { + + $(toggleId).click(function() { + + var state = sessionStorage.getItem(stateLabel) || 'closed'; + var width = sessionStorage.getItem(widthLabel) || '300px'; + + if (state == 'open') { + $(treeId).animate({ + width: '0px' + }, 50); + + sessionStorage.setItem(stateLabel, 'closed'); + } else { + $(treeId).animate({ + width: width, + }, 50); + + sessionStorage.setItem(stateLabel, 'open'); + } + }); } } + /** * Handle left-hand icon menubar display */ diff --git a/InvenTree/part/templates/part/part_app_base.html b/InvenTree/part/templates/part/part_app_base.html index 045027e063..94773f1e79 100644 --- a/InvenTree/part/templates/part/part_app_base.html +++ b/InvenTree/part/templates/part/part_app_base.html @@ -29,8 +29,6 @@ InvenTree | {% trans "Part List" %} {% block js_ready %} {{ block.super }} - closeSideNav(); - loadTree("{% url 'api-part-tree' %}", "#part-tree", { @@ -38,11 +36,9 @@ InvenTree | {% trans "Part List" %} } ); - $("#toggle-part-tree").click(function() { - toggleSideNav("#sidenav-left"); - return false; + initNavTree({ + label: 'part', + treeId: '#sidenav-left', + toggleId: '#toggle-part-tree', }); - - initSideNav(); - {% endblock %} \ No newline at end of file diff --git a/InvenTree/stock/templates/stock/stock_app_base.html b/InvenTree/stock/templates/stock/stock_app_base.html index d415261d7f..a9ae20830e 100644 --- a/InvenTree/stock/templates/stock/stock_app_base.html +++ b/InvenTree/stock/templates/stock/stock_app_base.html @@ -11,7 +11,9 @@ InvenTree | Stock {% endblock %} {% block sidenav %} -
+
+ {% trans "Loading..." %} +
{% endblock %} {% block pre_content %} @@ -24,6 +26,7 @@ InvenTree | Stock {% block js_ready %} {{ block.super }} + loadTree("{% url 'api-stock-tree' %}", "#stock-tree", { @@ -31,10 +34,10 @@ InvenTree | Stock } ); - $("#toggle-stock-tree").click(function() { - toggleSideNav("#sidenav-left"); - return false; - }) + initNavTree({ + label: 'stock', + treeId: '#sidenav-left', + toggleId: '#toggle-stock-tree', + }); - initSideNav(); {% endblock %} \ No newline at end of file