Feature #3748: More responsive menu for sunstone

src/sunstone/etc/sunstone-views/admin.yaml

@@ -1,4 +1,4 @@
-small_logo: images/opennebula-sunstone-v4.0-small.png
+small_logo: images/opennebula-sunstone-v4.14-small.png
 provision_logo: images/one_small_logo.png
 enabled_tabs:
     dashboard-tab: true

src/sunstone/etc/sunstone-views/admin_vcenter.yaml

@@ -1,4 +1,4 @@
-small_logo: images/opennebula-sunstone-v4.0-small.png
+small_logo: images/opennebula-sunstone-v4.14-small.png
 provision_logo: images/one_small_logo.png
 enabled_tabs:
     dashboard-tab: true

src/sunstone/etc/sunstone-views/user.yaml

@@ -1,4 +1,4 @@
-small_logo: images/opennebula-sunstone-v4.0-small.png
+small_logo: images/opennebula-sunstone-v4.14-small.png
 provision_logo: images/one_small_logo.png
 enabled_tabs:
     dashboard-tab: true

src/sunstone/public/app/app.js

@@ -9,6 +9,7 @@ define(function(require) {
   var Config = require('sunstone-config');
   var OpenNebula = require('opennebula');
   var Notifier = require('utils/notifier');
+  var Menu = require('utils/menu');
 
   var _tabs;
   if (Config.isTabEnabled(PROVISION_TAB_ID)) {
@@ -65,6 +66,12 @@ define(function(require) {
   $(document).ready(function() {
     Sunstone.insertTabs();
 
+    if (Config.isTabEnabled(PROVISION_TAB_ID)){
+      Menu.insertProvision();
+    }else{
+      Menu.insert();
+    }
+
     _setupAccordion();
     _setupCloseDropdownsOnClick();
     _insertUserAndZoneSelector();

src/sunstone/public/app/sunstone-config.js

@@ -109,7 +109,8 @@ define(function(require) {
     'autoRefresh' : _config['view']['autorefresh'],
     'tableOrder': _config['user_config']['table_order'],
     'vncProxyPort': _config['system_config']['vnc_proxy_port'],
-    'vncWSS': _config['user_config']['vnc_wss']
+    'vncWSS': _config['user_config']['vnc_wss'],
+    'logo': (_config['view']["small_logo"] || "images/one_small_logo.png")
   }
 
   return Config;

src/sunstone/public/app/sunstone.js

@@ -7,6 +7,7 @@ define(function(require) {
   var Config = require('sunstone-config');
   var Locale = require('utils/locale');
   var Notifier = require('utils/notifier');
+  var Menu = require('utils/menu');
 
   var TOP_INTERVAL = 10000; //ms
   var CONFIRM_DIALOG_ID = require('utils/dialogs/confirm/dialogId');
@@ -485,6 +486,9 @@ define(function(require) {
       return false;
     }
 
+    // Hide the menu in small windows
+    Menu.entryClick();
+
     // TODO check if necessary
     // last_selected_row = null;
 

src/sunstone/public/app/tabs/provision-tab.js

@@ -969,25 +969,12 @@ define(function(require) {
       var tab = $("#"+tab_name);
 
       if (Config.isTabEnabled(tab_name)) {
-        $('.right-header').prepend(TemplateHeader({'logo': Config.provision.logo}));
+        $('.right-header').prepend(TemplateHeader());
 
-        $(".left-content").remove();
         $(".right-content").addClass("large-centered small-centered");
         $("#footer").removeClass("right");
         $("#footer").addClass("large-centered small-centered");
 
-        //$(".user-zone-info").remove();
-
-        $("#provision_logout").click(function(){
-            OpenNebula.Auth.logout({
-              success: function(){
-                window.location.href = "login";
-              }
-            });
-
-            return false;
-        });
-
         ProvisionVmsList.generate($(".provision_vms_list_section"), {active: true});
 
         if (Config.isTabPanelEnabled("provision-tab", "templates")) {

src/sunstone/public/app/tabs/provision-tab/header.hbs

@@ -1,10 +1,6 @@
 <div style=" padding: 15px 0px 10px 0px; margin-bottom: 10px">
   <div class="row">
     <div class="large-12 columns">
-      <a href="#" class="provision_image_header" >
-        <img src="{{logo}}" style="height:40px; vertical-align:top;"></a>
-      <br>
-      <br>
       <ul class="inline-list provision-header text-center">
         {{#isTabPanelEnabled "provision-tab" "users"}}
         <li>

src/sunstone/public/app/utils/menu.js

@@ -0,0 +1,87 @@
+define(function(require) {
+
+  var TopRowHTML = require('hbs!./menu/top-row');
+  var ProvisionTopRowHTML = require('hbs!./menu/provision-top-row');
+  var Config = require('sunstone-config');
+
+  return {
+    'insert': _insert,
+    'insertProvision': _insertProvision,
+    'setup': _setup,
+    'hide': _hide,
+    'show': _show,
+    'entryClick': _entryClick,
+  };
+
+  function _insert(){
+    $('#top-row').html(TopRowHTML({logo: Config.logo}));
+
+    _setup();
+  }
+
+  function _insertProvision(){
+    $('#top-row').html(ProvisionTopRowHTML({logo: Config.provision.logo}));
+
+    $("#menu-wrapper").remove();
+  }
+
+  function _setup(){
+    $('#menu-toggle').on('click', function(){
+      var hiding = $('.right-content').hasClass("large-10");
+
+      if(!hiding){
+        $('.right-content').toggleClass('large-10');
+        $('.right-content').toggleClass('large-12');
+      }
+
+      $('#menu-wrapper').toggle(200, function(){
+        if(hiding){
+          $('.right-content').toggleClass('large-10');
+          $('.right-content').toggleClass('large-12');
+        }
+      });
+    });
+
+    var prevWindowLarge = Foundation.utils.is_large_up();
+
+    $(window).resize(function() {
+      if(Foundation.utils.is_large_up()){
+        $('#menu-wrapper').removeClass("menu-small");
+
+        if(!prevWindowLarge){ // resizing from small to large, show menu
+          _show();
+        }
+
+        prevWindowLarge = true;
+      } else {
+        $('#menu-wrapper').addClass("menu-small");
+
+        if(prevWindowLarge){ // resizing from large to small, hide menu
+          _hide();
+        }
+
+        prevWindowLarge = false;
+      }
+    });
+
+    $(window).resize();
+  }
+
+  function _hide(){
+    if($('#menu-wrapper').is(':visible')){
+      $('#menu-toggle').click();
+    }
+  }
+
+  function _show(){
+    if(!$('#menu-wrapper').is(':visible')){
+      $('#menu-toggle').click();
+    }
+  }
+
+  function _entryClick(){
+    if(!Foundation.utils.is_large_up()){
+      _hide();
+    }
+  }
+});

src/sunstone/public/app/utils/menu/provision-top-row.hbs

@@ -0,0 +1,13 @@
+<div class="right-content small-12 large-10 columns">
+  <div class="row">
+    <div class="small-12 medium-4 columns">
+      <a href="#" class="provision_image_header" >
+        <img src="{{logo}}" style="height:40px; vertical-align:top;">
+      </a>
+    </div>
+    <div class="small-12 medium-8 columns">
+      <div class="user-zone-info right">
+      </div>
+    </div>
+  </div>
+</div>

src/sunstone/public/app/utils/menu/top-row.hbs

@@ -0,0 +1,14 @@
+<div class="small-12 columns" style="padding-top: 15px">
+  <div id="" class="row left-body left-header">
+    <div class="logo-header small-12 medium-4 columns">
+      <button id="menu-toggle" class="button small radius secondary white_button">
+        <i class="fa fa-lg fa-fw fa-bars"></i>
+      </button>
+      <img src="{{logo}}" style="height: 25px;vertical-align: middle;"/>
+    </div>
+    <div class="small-12 medium-8 columns">
+      <div class="user-zone-info right">
+      </div>
+    </div>
+  </div>
+</div>

src/sunstone/public/scss/app.scss

@@ -171,27 +171,19 @@ input.search {
 
 
 // User settings and zone
-.user-zone-container {
-    position: relative;
 
-    .user-zone-info {
-        position: absolute;
-        top: 0px;
-        right: 0px;
-        z-index: 1;
+.user-zone-info {
+    .button {
+        background: #fff;
+        border: none;
+        margin-top: 8px;
+    }
 
-        .button {
-            background: #fff;
-            border: none;
-        }
-
-        .button:hover {
-            background: #F5F5F5;
-        }
+    .button:hover {
+        background: #F5F5F5;
     }
 }
 
-
 .white_button {
     background-color: #fff !important;
     border: none;
@@ -263,7 +255,6 @@ input.search {
 
 .header-row {
   margin-bottom: 20px !important;
-  margin-top: 25px !important;
 
   .resource-id {
     color: #999;
@@ -1312,3 +1303,14 @@ hr {
     padding: 0 0.5rem;
   }
 }
+
+.menu-small {
+  position: absolute;
+  z-index: 20;
+  box-shadow: 5px 10px 15px 5px rgba(0,0,0,.1);
+}
+
+#menu-wrapper {
+  padding-top: 5px;
+  background-color: white
+}

src/sunstone/views/index.erb

@@ -60,13 +60,15 @@
       </span>
     </div>
 
+    <div id="top-row" class="row">
+    </div>
+
     <div class="row">
-      <div class="small-12 large-2 columns left-content" style="padding-top: 35px">
+      <div id="menu-wrapper" class="small-8 medium-4 large-2 columns left-content">
         <div id="menu" class="row left-body">
           <ul class="side-nav" id="navigation">
             <div class="row left-header">
               <div class="large-12 columns">
-                <img src="<%= view['provision_logo'] %>" style="width: 100px; padding: 15px"/>
               </div>
             </div>
           </ul>
@@ -74,10 +76,6 @@
       </div>
 
       <div class="small-12 large-10 columns right-content">
-        <div class="row user-zone-container">
-          <div class="user-zone-info">
-          </div>
-        </div>
         <div class="right-header">
         </div>
       </div>