Add show/hide top menu in the WebUI

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>

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>

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;
         }
     };
 });

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',