Update sidebar menu css when selected #4

* Add .btn-change.selected css for when sidebar menu is currently selected
* Fix node view to only redraw when there is a currentId
* Fix chart summary files_count error

Signed-off-by: Jillian Daguil <[email protected]>

Author: jdaguil

assets/css/main.css

@@ -239,7 +239,7 @@ div.node-content {
 .sidebar-nav li .btn-sidebar:hover {
     text-decoration: none;
     color: #fff;
-    background: rgba(255,255,255,0.2);
+    background: rgba(255, 255, 255, 0.25);
 }
 
 .sidebar-nav li .btn-sidebar:active,
@@ -248,6 +248,11 @@ div.node-content {
     outline: none;
 }
 
+.sidebar-nav li .btn-change.selected {
+    color: #fff;
+    background: rgba(255, 255, 255, 0.12);
+}
+
 /*---------------------------------------
   DataTables custom
 -----------------------------------------*/

assets/js/aboutCodeDB.js

@@ -239,7 +239,7 @@ class AboutCodeDB {
                 })
             })
             .then((count) => {
-                return count.files_count;
+                return count ? count.files_count : 0;
             });
     }
 

assets/js/nodeview.js

@@ -111,7 +111,9 @@ class NodeView {
     }
 
     redraw() {
-        this._update(this.currentId);
+        if (this.currentId) {
+            this._update(this.currentId);
+        }
     }
 
     // Resize the spacing between nodes

assets/js/renderer.js

@@ -109,6 +109,20 @@ $(document).ready(function () {
     // The Electron module used to communicate asynchronously from a renderer process to the main process.
     const ipcRenderer = require('electron').ipcRenderer;
 
+    // Setup css styling for sidebar button state when clicked.
+    const navButtons = $("#sidebar-wrapper").find(".btn-change");
+    navButtons.each((i, clickedButton) => {
+        $(clickedButton).click(function() {
+            navButtons.each((i, button) => {
+                if (button === clickedButton) {
+                    $(button).addClass("selected");
+                } else {
+                    $(button).removeClass("selected");
+                }
+            });
+        });
+    });
+
     // Define DOM element constants for the modal dialog.
     const componentModal = {
         container: $("#nodeModal"),
@@ -455,59 +469,49 @@ $(document).ready(function () {
         splitter.setSizes(splitSizes);
     }
 
-    // Show Table View (aka "clue DataTable").  Hide node view and component summary table.
-    function showTableView() {
+    // Show clue DataTable. Hide node view and component summary table
+    showClueButton.click(() => {
         restoreSplitterSizes();
         $(".gutter-horizontal").removeClass("div-hide").addClass("div-show");
         cluesContainer.show();
         nodeContainer.hide();
         componentContainer.hide();
         barChartContainer.hide();
         cluesTable.draw();
-    }
-
-    // Show clue DataTable. Hide node view and component summary table
-    showClueButton.click(showTableView);
+    });
 
     // Show clue DataTable. Hide node view and component summary table -- custom menu
-    ipcRenderer.on('table-view', showTableView);
+    ipcRenderer.on('table-view', () => showClueButton.trigger("click"));
 
     // Show node view. Hide clue and component table
-    function showNodeView() {
+    showNodeViewButton.click(() => {
         restoreSplitterSizes();
         $(".gutter-horizontal").removeClass("div-hide").addClass("div-show");
         nodeContainer.show();
         cluesContainer.hide();
         componentContainer.hide();
         barChartContainer.hide();
         nodeView.redraw();
-    }
-
-    // Show node view. Hide clue and component table
-    showNodeViewButton.click(showNodeView);
+    });
 
     // Show node view. Hide clue and component table -- custom menu
-    ipcRenderer.on('node-view', showNodeView);
+    ipcRenderer.on('node-view', () => showNodeViewButton.trigger("click"));
 
     // Show component summary table. Hide DataTable and node view
-    function showComponentSummaryView() {
+    showComponentButton.click(() => {
         $(".gutter-horizontal").removeClass("div-show").addClass("div-hide");
         splitter.collapse(0);
         componentContainer.show();
         nodeContainer.hide();
         cluesContainer.hide();
         barChartContainer.hide();
         componentsTable.reload();
-    }
-
-    // Show component summary table. Hide DataTable and node view
-    showComponentButton.click(showComponentSummaryView);
+    });
 
     // Show component summary table. Hide DataTable and node view -- custom menu
-    ipcRenderer.on('component-summary-view', showComponentSummaryView);
+    ipcRenderer.on('component-summary-view', () => showComponentButton.trigger("click"));
 
-    // Show bar chart table. Hide other views
-    function showBarChartView() {
+    showBarChartButton.click(() => {
         restoreSplitterSizes();
         $(".gutter-horizontal").removeClass("div-hide").addClass("div-show");
         barChartContainer.show();
@@ -519,12 +523,10 @@ $(document).ready(function () {
             .then((value) => {
                 barChartTotalFiles.text(value);
             });
-    }
-
-    showBarChartButton.click(showBarChartView);
+    });
 
     // Show chart summary table. Hide other views -- custom menu
-    ipcRenderer.on('chart-summary-view', showBarChartView);
+    ipcRenderer.on('chart-summary-view', () => showBarChartButton.trigger("click"));
 
     // Creates the database and all View objects from a SQLite file
     function loadDatabaseFromFile(fileName) {
@@ -808,5 +810,5 @@ $(document).ready(function () {
     });
 
     restoreSplitterSizes();
-    showTableView();
+    showClueButton.trigger("click");
 });

index.html

@@ -72,22 +72,22 @@
                 </button>
             </li>
             <li>
-                <button class="btn btn-sidebar" id="show-bar-chart" data-toggle="tooltip" data-placement="right" title="Chart Summary View">
+                <button class="btn btn-sidebar btn-change" id="show-bar-chart" data-toggle="tooltip" data-placement="right" title="Chart Summary View">
                     <i class="fa fa-bar-chart" aria-hidden="true"></i>
                 </button>
             </li>
             <li>
-                <button class="btn btn-sidebar" id="show-clue-table" data-toggle="tooltip" title="Table View">
+                <button class="btn btn-sidebar btn-change" id="show-clue-table" data-toggle="tooltip" title="Table View">
                     <i class="fa fa-table" aria-hidden="true"></i>
                 </button>
             </li>
             <li>
-                <button class="btn btn-sidebar" id="show-tree" data-toggle="tooltip" title="Node View">
+                <button class="btn btn-sidebar btn-change" id="show-tree" data-toggle="tooltip" title="Node View">
                     <i class="fa fa-code-fork" aria-hidden="true"></i>
                 </button>
             </li>
             <li>
-                <button class="btn btn-sidebar" id="show-component-table" data-toggle="modal" data-placement="right" title="Component Summary View">
+                <button class="btn btn-sidebar btn-change" id="show-component-table" data-toggle="modal" data-placement="right" title="Component Summary View">
                     <i class="fa fa-list-ol" aria-hidden="true"></i>
                 </button>
             </li>