inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-06-19 13:35:40 +00:00
Code Activity

Complete refactoring of part sidebar

Browse Source
This commit is contained in:
Oliver
2021-10-29 00:20:39 +11:00
parent f542bdc19f
commit f0fe7f2d5c
9 changed files with 213 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
InvenTree/templates/base.html
View File

@ -67,58 +67,41 @@
{% include "navbar.html" %}
<div class='main body wrapper'>
<div class='inventree-body'>
{% block breadcrumb_list %}
<div class='container-fluid'>
<nav aria-label='breadcrumb'>
<ol class='breadcrumb'>
{% block breadcrumbs %}
{% endblock %}
</ol>
</nav>
<div class='main body wrapper container-fluid inventree-body'>
<div class='row flex-nowrap inventree-body'>
<div class='sidebar-wrapper col-auto px-1'>
<div id='sidebar' class='collapse collapse-horizontal show border-end' style='display: none;'>
<div id='sidebar-nav' class='list-group text-sm-start'>
<ul class='list-group sidebar-list-group'>
{% block sidebar %}
<!-- Sidebar goes here -->
{% endblock %}
{% include "sidebar_toggle.html" %}
</ul>
</div>
</div>
</div>
<main class='col ps-md-2 pt-2'>
{% block breadcrumb_list %}
<div class='container-fluid'>
<nav aria-label='breadcrumb'>
<ol class='breadcrumb'>
{% block breadcrumbs %}
{% endblock %}
</ol>
</nav>
</div>
{% endblock %}
{% block content %}
<!-- Each view fills in here.. -->
{% endblock %}
</main>
</div>
{% endblock %}
<div class='containter-fluid inventree-pre-content'>
{% block pre_content %}
{% endblock %}
</div>
<div class='inventree-navs'>
<div class='sidenav sidenav-left' id='sidenav-left'>
{% block sidenav %}
<!-- Sidenav code here -->
{% endblock %}
</div>
<div class='sidenav sidenav-right' id='sidenav-right'>
{% block menubar %}
<!-- Menubar code here -->
{% endblock %}
</div>
<div class="container container-fluid inventree-content" id='inventree-content'>
{% block content %}
<!-- Each view fills in here.. -->
{% endblock %}
</div>
{% block post_content %}
{% endblock %}
</div>
{% include 'modals.html' %}
{% include 'about.html' %}
{% include 'notification.html' %}
</div>
{% include 'modals.html' %}
{% include 'about.html' %}
{% include 'notification.html' %}
</div>
<!-- Scripts -->

121
InvenTree/templates/js/dynamic/nav.js
View File

@ -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-<x>",
* and point to a matching "panel-<x>"
*/
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;

4
InvenTree/templates/sidebar_item.html Normal file
View File

@ -0,0 +1,4 @@
{% load i18n %}
<a href="#" id='select-{{ label }}' class="list-group-item sidebar-list-group-item border-end-0 d-inline-block text-truncate sidebar-selector" data-bs-parent="#sidebar">
<i class="bi bi-bootstrap"></i><span class='sidebar-item-icon fas {{ icon }}'></span><span class='sidebar-item-text' style='display: none;'>{% trans text %}</span>
</a>

3
InvenTree/templates/sidebar_toggle.html Normal file
View File

@ -0,0 +1,3 @@
<a href="#" id='sidebar-toggle' class="list-group-item sidebar-list-group-item border-end-0 d-inline-block text-truncate sidebar-toggle" data-bs-parent="#sidebar">
<i class="bi bi-bootstrap"></i><span id='sidebar-toggle-icon' class='sidebar-item-icon fas fa-chevron-left'></span>
</a>