Fancify all the menubars

2024-08-30 18:33:04 +00:00 · 2021-02-25 09:10:20 +11:00 · 2021-02-25 09:10:20 +11:00 · 26e80fa0ab
commit 26e80fa0ab
parent fe42d5c54d
12 changed files with 112 additions and 96 deletions
--- a/InvenTree/InvenTree/static/css/inventree.css
+++ b/InvenTree/InvenTree/static/css/inventree.css
@ -719,8 +719,6 @@ input[type="submit"] {
 }

 .sidenav-right {
-    min-width: 45px;
-    width: 0px;
    left: 0px;
    top: 70px;
    position: sticky;
--- a/InvenTree/InvenTree/static/script/inventree/sidenav.js
+++ b/InvenTree/InvenTree/static/script/inventree/sidenav.js
@ -140,7 +140,9 @@ function initSideNav(navId) {
    }
 }

-
+/**
+ * Handle left-hand icon menubar display
+ */
 function enableNavbar(options) {

    var resize = true;
@ -149,75 +151,86 @@ function enableNavbar(options) {
        resize = options.resize;
    }

-    console.log('enable navbar: ' + options.navId);
+    var label = options.label || 'nav';

-    // 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);
+    label = `navbar-${label}`;
+
+    var stateLabel = `${label}-state`;
+    var widthLabel = `${label}-width`;
+
+    var navId = options.navId || '#sidenav-right';
+
+    var toggleId = options.toggleId;
+
+    // Extract the saved width for this element
+    $(navId).animate({
+        width: '45px',
+        'min-width': '45px',
+        display: 'block',
+    }, 50, function() {
+
+        // Make the navbar resizable
+        if (resize) {
+            $(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());
+
+                    // Reasonably narrow? Just close it!
+                    if (width <= 75) {
+                        $(navId).animate({
+                            width: '45px'
+                        }, 50);
+
+                        sessionStorage.setItem(stateLabel, 'closed');
+                    } else {
+                        sessionStorage.setItem(widthLabel, `${width}px`);
+                        sessionStorage.setItem(stateLabel, 'open');
+                    }
+                }
+            });
+        }
+
+        var state = sessionStorage.getItem(stateLabel);
+        var width = sessionStorage.getItem(widthLabel) || '250px';
+        
+        if (state && state == 'open') {
+
+            $(navId).animate({
+                width: width
+            }, 100);
+        }
+
+    });
+
+    // Register callback for 'toggle' button
+    if (toggleId) {
+
+        $(toggleId).click(function() {
+
+            var state = sessionStorage.getItem(stateLabel) || 'closed';
+            var width = sessionStorage.getItem(widthLabel) || '250px';
+
+            if (state == 'open') {
+                $(navId).animate({
+                    width: '45px',
+                    minWidth: '45px',
+                }, 50);
+
+                sessionStorage.setItem(stateLabel, 'closed');
+
+            } else {
+
+                $(navId).animate({
+                    'width': width
+                }, 50);
+
+                sessionStorage.setItem(stateLabel, 'open');
            }
        });
    }
-
-    // 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');
-    }
 }
--- a/InvenTree/build/templates/build/build_base.html
+++ b/InvenTree/build/templates/build/build_base.html
@ -148,9 +148,10 @@ src="{% static 'img/blank_image.png' %}"

 {% block js_ready %}

-enableRightNavbar({
-    minWidth: '50px'
-});
+    enableNavbar({
+        label: 'build',
+        toggleId: '#build-menu-toggle'
+    });

    $("#build-edit").click(function () {
        launchModalForm("{% url 'build-edit' build.id %}",
--- a/InvenTree/company/templates/company/company_base.html
+++ b/InvenTree/company/templates/company/company_base.html
@ -92,8 +92,9 @@ InvenTree | {% trans "Company" %} - {{ company.name }}
 {% block js_ready %}
 {{ block.super }}

-    enableRightNavbar({
-        minWidth: '50px'
+    enableNavbar({
+        label: 'company',
+        toggleId: '#company-menu-toggle'
    });

    $('#company-edit').click(function() {
--- a/InvenTree/company/templates/company/part_navbar.html
+++ b/InvenTree/company/templates/company/part_navbar.html
@ -3,7 +3,7 @@
 <ul class='list-group'>

    <li class='list-group-item'>
-        <a href='#' id='company-menu-toggle'>
+        <a href='#' id='supplier-part-menu-toggle'>
            <span class='menu-tab-icon fas fa-expand-arrows-alt'></span>
        </a>
    </li>
--- a/InvenTree/company/templates/company/supplier_part_base.html
+++ b/InvenTree/company/templates/company/supplier_part_base.html
@ -120,9 +120,10 @@ src="{% static 'img/blank_image.png' %}"
 {% block js_ready %}
 {{ block.super }}

-enableRightNavbar({
-    minWidth: '50px'
-});
+enableNavbar({
+    label: 'supplier-part',
+    toggleId: '#supplier-part-menu-toggle'
+})

 $('#order-part, #order-part2').click(function() {
    launchModalForm(
--- a/InvenTree/order/templates/order/order_base.html
+++ b/InvenTree/order/templates/order/order_base.html
@ -135,8 +135,9 @@ src="{% static 'img/blank_image.png' %}"
 {% block js_ready %}
 {{ block.super }}

-enableRightNavbar({
-    minWidth: '50px'
+enableNavbar({
+    label: 'po',
+    toggleId: '#po-menu-toggle',
 });

 {% if order.status == PurchaseOrderStatus.PENDING and order.lines.count > 0 %}
--- a/InvenTree/order/templates/order/sales_order_base.html
+++ b/InvenTree/order/templates/order/sales_order_base.html
@ -135,8 +135,9 @@ src="{% static 'img/blank_image.png' %}"
 {% block js_ready %}
 {{ block.super }}

-enableRightNavbar({
-    minWidth: '50px'
+enableNavbar({
+    label: 'so',
+    toggleId: '#so-menu-toggle',
 });

 $("#edit-order").click(function() {
--- a/InvenTree/part/templates/part/category.html
+++ b/InvenTree/part/templates/part/category.html
@ -161,10 +161,12 @@
 {% block js_ready %}
 {{ block.super }}

-enableRightNavbar({
-    minWidth: '50px',
-});
-
+    {% if category %}
+    enableNavbar({
+        label: 'category',
+        toggleId: '#category-menu-toggle',
+    });
+    {% endif %}

    if (inventreeLoadInt("show-part-cats") == 1) {
        $("#collapse-item-categories").collapse('show');
--- a/InvenTree/part/templates/part/part_base.html
+++ b/InvenTree/part/templates/part/part_base.html
@ -201,14 +201,11 @@
 {% block js_ready %}
 {{ block.super }}

-    enableRightNavbar({
-        minWidth: '50px',
+    enableNavbar({
+        label: 'part',
+        toggleId: '#part-menu-toggle',
    });

-    $('#part-menu-toggle').click(function() {
-        toggleMenuExpand();
-    })
-
    enableDragAndDrop(
        '#part-thumb',
        "{% url 'part-image-upload' part.id %}",
--- a/InvenTree/stock/templates/stock/item_base.html
+++ b/InvenTree/stock/templates/stock/item_base.html
@ -383,8 +383,9 @@ InvenTree | {% trans "Stock Item" %} - {{ item }}
 {% block js_ready %}
 {{ block.super }}

-enableRightNavbar({
-    minWidth: '50px'
+enableNavbar({
+    label: 'item',
+    toggleId: '#item-menu-toggle',
 });

 loadTree("{% url 'api-stock-tree' %}",
--- a/InvenTree/stock/templates/stock/navbar.html
+++ b/InvenTree/stock/templates/stock/navbar.html
@ -3,7 +3,7 @@
 <ul class='list-group'>

    <li class='list-group-item'>
-        <a href='#' id='company-menu-toggle'>
+        <a href='#' id='item-menu-toggle'>
            <span class='menu-tab-icon fas fa-expand-arrows-alt'></span>
        </a>
    </li>