CSS tweaks

InvenTree/InvenTree/static/css/inventree.css

@@ -1,6 +1,6 @@
 :root {
     --primary-color: #335d88;
-    --secondary-color: #f7f5ee;
+    --secondary-color: #eef3f7;
     --highlight-color: #ffffff;
 
     --border-color: #ccc;
@@ -920,7 +920,7 @@ input[type="date"].form-control, input[type="time"].form-control, input[type="da
 
 .sidebar-wrapper {
     overflow-y: auto;
-    background: var(--secondary-color);
+    /* background: var(--secondary-color); */
     margin-top: 0.3rem;
     padding-top: 0.25rem;
     padding-left: 0px !important;

InvenTree/part/templates/part/category.html

@@ -180,8 +180,16 @@
     </div>
     <div class='panel-content'>
         <div id='subcategory-button-toolbar'>
-            <div class='button-toolbar container-fluid' style='float: right;'>
+            <div class='btn-group' role='group'>
     
+                <!-- Buttons to toggle between tree and table view -->
+                <button id='view-cat-list' class='btn btn-outline-secondary' type='button' title='{% trans "View list display" %}'>
+                    <span class='fas fa-th-list'></span>
+                </button>
+                <button id='view-cat-tree' class='btn btn-outline-secondary' type='button' title='{% trans "View tree display" %}'>
+                    <span class='fas fa-sitemap'></span>
+                </button>
+
                 <div class='filter-list' id='filter-list-category'>
                     <!-- An empty div in which the filter list will be constructed -->
                 </div>
@@ -202,16 +210,6 @@
 {% block js_ready %}
 {{ block.super }}
 
-    loadPartCategoryTable($('#subcategory-table'), {
-        params: {
-            {% if category %}
-            parent: {{ category.pk }}
-            {% else %}
-            parent: 'null'
-            {% endif %}
-        }
-    });
-
     {% if category %}
     loadParametricPartTable(
         "#parametric-part-table",
@@ -224,14 +222,58 @@
 
     enableSidebar('category');
 
+    // Callback to view the category table in "list" mode
+    $('#view-cat-list').click(function() {
+        $('#view-cat-list').hide();
+        $('#view-cat-tree').show();
+
+        inventreeSave('category-tree-view', '');
+
+        loadPartCategoryTable($('#subcategory-table'), {
+            params: {
+                {% if category %}
+                parent: {{ category.pk }}
+                {% else %}
+                parent: 'null'
+                {% endif %}
+            },
+            tree_view: false,
+        });
+
+        $('#subcategory-table').bootstrapTable('resetView');
+    });
+
+    // Callback to view the category table in "tree" mode
+    $('#view-cat-tree').click(function() {
+        $('#view-cat-list').show();
+        $('#view-cat-tree').hide();
+
+        inventreeSave('category-tree-view', 1);
+
+        loadPartCategoryTable($('#subcategory-table'), {
+            params: {
+                {% if category %}
+                parent: {{ category.pk }}
+                {% else %}
+                parent: 'null'
+                {% endif %}
+            },
+            tree_view: true,
+        });
+
+        $('#subcategory-table').bootstrapTable('resetView');
+    });
+
+    // Callback to view the part table in "list" mode
     $('#view-list').click(function() {
         $('#view-list').hide();
         $('#view-grid').show();
-
+        
         $('#part-table').bootstrapTable('toggleCustomView');
         inventreeSave('part-grid-view', '');
     });
-
+    
+    // Callback to view the part table in "grid" mode
     $('#view-grid').click(function() {
         $('#view-grid').hide();
         $('#view-list').show();
@@ -333,4 +375,26 @@
         $('#view-list').hide();
     }
 
+    var tree_view = false;
+
+    if (inventreeLoad('category-tree-view')) {
+        $('#view-cat-tree').hide();
+
+        tree_view = true;
+    } else {
+        $('#view-cat-list').hide();
+    }
+
+    loadPartCategoryTable($('#subcategory-table'), {
+        params: {
+            {% if category %}
+            parent: {{ category.pk }}
+            {% else %}
+            parent: 'null'
+            {% endif %}
+        },
+        tree_view: tree_view
+    });
+
+
 {% endblock %}

InvenTree/part/templates/part/detail.html

@@ -18,7 +18,7 @@
     <div class='panel-content'>
         
         <!-- Details Table -->
-        <table class="table table-striped">
+        <table class="table table-striped table-condensed">
             <col width='25'>
             {% if part.IPN %}
             <tr>