diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css index ac7cf1f4e1..1f01037f28 100644 --- a/InvenTree/InvenTree/static/css/inventree.css +++ b/InvenTree/InvenTree/static/css/inventree.css @@ -912,6 +912,10 @@ input[type="submit"] { box-shadow: 1px 1px #DDD; } +.panel-hidden { + display: none; +} + .float-right { float: right; } diff --git a/InvenTree/InvenTree/urls.py b/InvenTree/InvenTree/urls.py index f3ea86e8cc..a3af143f92 100644 --- a/InvenTree/InvenTree/urls.py +++ b/InvenTree/InvenTree/urls.py @@ -104,22 +104,23 @@ settings_urls = [ dynamic_javascript_urls = [ url(r'^api.js', DynamicJsView.as_view(template_name='js/api.js'), name='api.js'), url(r'^attachment.js', DynamicJsView.as_view(template_name='js/attachment.js'), name='attachment.js'), - url(r'^forms.js', DynamicJsView.as_view(template_name='js/forms.js'), name='forms.js'), - url(r'^model_renderers.js', DynamicJsView.as_view(template_name='js/model_renderers.js'), name='model_renderers.js'), - url(r'^modals.js', DynamicJsView.as_view(template_name='js/modals.js'), name='modals.js'), url(r'^barcode.js', DynamicJsView.as_view(template_name='js/barcode.js'), name='barcode.js'), url(r'^bom.js', DynamicJsView.as_view(template_name='js/bom.js'), name='bom.js'), url(r'^build.js', DynamicJsView.as_view(template_name='js/build.js'), name='build.js'), url(r'^calendar.js', DynamicJsView.as_view(template_name='js/calendar.js'), name='calendar.js'), url(r'^company.js', DynamicJsView.as_view(template_name='js/company.js'), name='company.js'), + url(r'^filters.js', DynamicJsView.as_view(template_name='js/filters.js'), name='filters.js'), + url(r'^forms.js', DynamicJsView.as_view(template_name='js/forms.js'), name='forms.js'), + url(r'^label.js', DynamicJsView.as_view(template_name='js/label.js'), name='label.js'), + url(r'^model_renderers.js', DynamicJsView.as_view(template_name='js/model_renderers.js'), name='model_renderers.js'), + url(r'^modals.js', DynamicJsView.as_view(template_name='js/modals.js'), name='modals.js'), + url(r'^nav.js', DynamicJsView.as_view(template_name='js/nav.js'), name='nav.js'), url(r'^order.js', DynamicJsView.as_view(template_name='js/order.js'), name='order.js'), url(r'^part.js', DynamicJsView.as_view(template_name='js/part.js'), name='part.js'), - url(r'^label.js', DynamicJsView.as_view(template_name='js/label.js'), name='label.js'), url(r'^report.js', DynamicJsView.as_view(template_name='js/report.js'), name='report.js'), url(r'^stock.js', DynamicJsView.as_view(template_name='js/stock.js'), name='stock.js'), url(r'^tables.js', DynamicJsView.as_view(template_name='js/tables.js'), name='tables.js'), url(r'^table_filters.js', DynamicJsView.as_view(template_name='js/table_filters.js'), name='table_filters.js'), - url(r'^filters.js', DynamicJsView.as_view(template_name='js/filters.js'), name='filters.js'), ] urlpatterns = [ diff --git a/InvenTree/order/templates/order/sales_order_detail.html b/InvenTree/order/templates/order/sales_order_detail.html index 9da0c88c82..8ba91ee0ab 100644 --- a/InvenTree/order/templates/order/sales_order_detail.html +++ b/InvenTree/order/templates/order/sales_order_detail.html @@ -12,7 +12,7 @@ {% block page_content %} -
+

{% trans "Sales Order Items" %}

@@ -29,7 +29,7 @@
-
+

{% trans "Build Orders" %}

@@ -38,7 +38,7 @@
-
+

{% trans "Attachments" %}

@@ -47,7 +47,7 @@
-
+
@@ -611,6 +611,11 @@ function setupCallbacks() { } ); }); + + attachNavCallbacks({ + name: 'sales-order', + default: 'order-items' + }); } {% endblock %} \ No newline at end of file diff --git a/InvenTree/order/templates/order/so_navbar.html b/InvenTree/order/templates/order/so_navbar.html index b3b0ac30f5..d7571ab691 100644 --- a/InvenTree/order/templates/order/so_navbar.html +++ b/InvenTree/order/templates/order/so_navbar.html @@ -9,29 +9,29 @@ -
  • - +
  • + {% trans "Order Items" %}
    • -
  • - +
  • + {% trans "Build Orders" %}
    • -
  • - +
  • + {% trans "Attachments" %}
    • -
  • - +
  • + {% trans "Notes" %} diff --git a/InvenTree/templates/base.html b/InvenTree/templates/base.html index 4818fda1c6..9d4eaa5142 100644 --- a/InvenTree/templates/base.html +++ b/InvenTree/templates/base.html @@ -149,22 +149,23 @@ - - + + - - + + + + + + + - - - - diff --git a/InvenTree/templates/js/nav.js b/InvenTree/templates/js/nav.js new file mode 100644 index 0000000000..a7f4ac8555 --- /dev/null +++ b/InvenTree/templates/js/nav.js @@ -0,0 +1,60 @@ + +/* +* Attach callbacks to navigation bar elements. +* +* Searches for elements with the class 'nav-toggle'. +* A callback is added to each element, +* to display the matching panel. +* +* The 'id' of the .nav-toggle element should be of the form "select-", +* and point to a matching "panel-" +*/ +function attachNavCallbacks(options={}) { + + $('.nav-toggle').click(function() { + var el = $(this); + + // Find the matching "panel" element + var panelName = el.attr('id').replace('select-', ''); + + activatePanel(panelName, options); + }); + + + var panelClass = options.name || 'unknown'; + + // Look for a default panel to initialize + var defaultPanel = localStorage.getItem(`selected-panel-${panelClass}`) || options.default; + + if (defaultPanel) { + activatePanel(defaultPanel); + } +} + + +function activatePanel(panelName, options={}) { + + var panelClass = options.name || 'unknown'; + + // Save the selected panel + localStorage.setItem(`selected-panel-${panelClass}`, panelName); + + // First, cause any other panels to "fade out" + $('.panel-visible').hide(); + $('.panel-visible').removeClass('panel-visible'); + + // Find the target panel + var panel = `#panel-${panelName}`; + + // Display the panel + $(panel).addClass('panel-visible'); + $(panel).fadeIn(50); + + // Un-select all selectors + $('.nav-item').removeClass('active'); + + // Find the associated selector + var select = `#select-${panelName}`; + + $(select).parent('.nav-item').addClass('active'); +} \ No newline at end of file