From edf18381c16e563d46e9692d9b050e0ff95b0047 Mon Sep 17 00:00:00 2001
From: Floran Brutel <f.brutel@hexanet.fr>
Date: Sun, 10 Jan 2016 10:56:16 +0100
Subject: [PATCH] Add show/hide top menu in the WebUI

---
 glances/outputs/static/html/help.html         |  2 +-
 glances/outputs/static/html/stats.html        | 16 ++++++++--------
 glances/outputs/static/js/stats_controller.js | 14 ++++++++++++++
 glances/outputs/static/js/variables.js        |  2 ++
 4 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/glances/outputs/static/html/help.html b/glances/outputs/static/html/help.html
index 5919ba16..52b385dc 100644
--- a/glances/outputs/static/html/help.html
+++ b/glances/outputs/static/html/help.html
@@ -44,7 +44,7 @@
 </div>
 <div class="row">
     <div class="col-sm-12 col-lg-6">{{help.show_hide_network}}</div>
-    <div class="col-sm-12 col-lg-6"></div>
+    <div class="col-sm-12 col-lg-6">{{help.show_hide_top_menu}}</div>
 </div>
 <div class="row">
     <div class="col-sm-12 col-lg-6">{{help.show_hide_sensors}}</div>
diff --git a/glances/outputs/static/html/stats.html b/glances/outputs/static/html/stats.html
index 2d9b245a..7a029e94 100644
--- a/glances/outputs/static/html/stats.html
+++ b/glances/outputs/static/html/stats.html
@@ -20,28 +20,28 @@
         </div>
     </div>
     <div class="row">
-        <div class="hidden-xs hidden-sm hidden-md col-lg-6" ng-show="show.quick_look">
+        <div class="hidden-xs hidden-sm hidden-md col-lg-6" ng-if="show.quick_look">
             <section id="quicklook" class="plugin" ng-include src="'plugins/quicklook.html'"></section>
         </div>
-        <div class="col-sm-6 col-md-4 col-lg-3" ng-show="!show.per_cpu">
+        <div class="col-sm-6 col-md-4 col-lg-3" ng-if="show.cpu && !show.per_cpu">
             <section id="cpu" class="plugin" ng-include src="'plugins/cpu.html'"></section>
         </div>
-        <div class="hidden-xs hidden-sm col-md-4 col-lg-3" ng-show="!show.per_cpu">
+        <div class="hidden-xs hidden-sm col-md-4 col-lg-3" ng-if="show.cpu && !show.per_cpu">
             <section id="cpu_more" class="plugin" ng-if="statsCpu.nice != undefined" ng-include src="'plugins/cpu_more.html'"></section>
         </div>
-        <div class="col-sm-12 col-md-8 col-lg-6" ng-show="show.per_cpu">
+        <div class="col-sm-12 col-md-8 col-lg-6" ng-if="show.cpu && show.per_cpu">
             <section id="per_cpu" class="plugin" ng-include src="'plugins/per_cpu.html'"></section>
         </div>
-        <div class="col-sm-6 col-md-4 col-lg-3">
+        <div class="col-sm-6 col-md-4 col-lg-3" ng-if="show.mem">
             <section id="mem" class="plugin" ng-include src="'plugins/mem.html'"></section>
         </div>
-        <div class="hidden-xs hidden-sm col-md-4 col-lg-3">
+        <div class="hidden-xs hidden-sm col-md-4 col-lg-3" ng-if="show.mem">
             <section id="mem_more" class="plugin" ng-include src="'plugins/mem_more.html'"></section>
         </div>
-        <div class="col-sm-6 col-md-4 col-lg-3">
+        <div class="col-sm-6 col-md-4 col-lg-3" ng-if="show.swap">
             <section id="memswap" class="plugin" ng-include src="'plugins/memswap.html'"></section>
         </div>
-        <div class="col-sm-6 col-md-4 col-lg-3">
+        <div class="col-sm-6 col-md-4 col-lg-3" ng-if="show.load">
             <section id="load" class="plugin" ng-if="statsLoad.cpucore != undefined" ng-include src="'plugins/load.html'"></section>
         </div>
     </div>
diff --git a/glances/outputs/static/js/stats_controller.js b/glances/outputs/static/js/stats_controller.js
index 6198a476..2587e9ed 100644
--- a/glances/outputs/static/js/stats_controller.js
+++ b/glances/outputs/static/js/stats_controller.js
@@ -14,12 +14,18 @@ glancesApp.controller('statsController', function ($scope, $rootScope, $interval
             }
         }
     };
+
     $scope.help_screen = false;
     $scope.show = {
         'diskio': true,
         'network': true,
         'fs': true,
+        'cpu': true,
+        'mem': true,
+        'swap': true,
+        'load': true,
         'sensors': true,
+        'top_menu': false,
         'sidebar': true,
         'alert': true,
         'short_process_name': true,
@@ -224,6 +230,14 @@ glancesApp.controller('statsController', function ($scope, $rootScope, $interval
                 // 3 => Enable/disable quick look plugin
                 $scope.show_hide('quick_look');
                 break;
+            case $event.shiftKey && $event.keyCode == keycodes.FIVE:
+                // 5 => Show/hide top menu (QL, CPU, MEM, SWAP and LOAD)
+                $scope.show_hide('quick_look');
+                $scope.show_hide('cpu');
+                $scope.show_hide('mem');
+                $scope.show_hide('swap');
+                $scope.show_hide('load');
+                break;
         }
     };
 });
diff --git a/glances/outputs/static/js/variables.js b/glances/outputs/static/js/variables.js
index 807e6b03..fe258f85 100644
--- a/glances/outputs/static/js/variables.js
+++ b/glances/outputs/static/js/variables.js
@@ -21,6 +21,8 @@ var keycodes = {
 	'ONE': '49',
 	'TWO': '50',
 	'THREE': '51',
+	'FOUR': '52',
+	'FIVE': '53',
 	'h' : '72',
 	'T' : '84',
 	'F' : '70',
-- 
GitLab