From 5178369f0a3683110ef56ba9ca4f574902fefedb Mon Sep 17 00:00:00 2001
From: Hector Sanjuan <hsanjuan@opennebula.org>
Date: Mon, 12 Mar 2012 16:27:51 +0100
Subject: [PATCH] Feature #1112: Support improved submenus and menu expansion

---
 src/sunstone/public/css/layout.css | 16 +++++++---
 src/sunstone/public/js/layout.js   | 49 +++++++++++++++++++-----------
 src/sunstone/public/js/sunstone.js |  7 ++++-
 src/sunstone/views/index.erb       |  2 +-
 4 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/src/sunstone/public/css/layout.css b/src/sunstone/public/css/layout.css
index f7b14cf703..6bf81da6ed 100644
--- a/src/sunstone/public/css/layout.css
+++ b/src/sunstone/public/css/layout.css
@@ -120,15 +120,23 @@ background-image: -moz-linear-gradient(
     rgb(53,55,53) 100%
 );
 }
-#navigation {
+
+.navigation {
     list-style:     none;
     padding:        0;
 }
 
-#navigation li {
+.navigation li.topTab {
     line-height:        2em;
-    text-align:         right;
-    padding-right:      10px;
+    text-align:         left;
+    padding-left:       15px;
+}
+
+.navigation li.subTab {
+    line-height:        1.8em;
+    font-size:          12px;
+    text-align:         left;
+    padding-left:       30px;
 }
 
 #navigation li a {
diff --git a/src/sunstone/public/js/layout.js b/src/sunstone/public/js/layout.js
index b783835236..b0489446bc 100644
--- a/src/sunstone/public/js/layout.js
+++ b/src/sunstone/public/js/layout.js
@@ -48,28 +48,44 @@ function showTab(tabname){
     $(".tab").hide();
     $(activeTab).show();
     //~ if (activeTab == '#dashboard') {
-		//~ emptyDashboard();
-		//~ preloadTables();
-	//~ }
+                //~ emptyDashboard();
+                //~ preloadTables();
+        //~ }
     innerLayout.close("south");
 }
 
+function setupTabs(){
+
+    var topTabs = $(".outer-west ul li.topTab");
+    var subTabs = $(".outer-west ul li.subTab");
+
+    subTabs.live("click",function(){
+        var tab = $('a',this).attr('href');
+        showTab(tab);
+        return false;
+    });
+
+    topTabs.live("click",function(e){
+        var tab = $('a',this).attr('href');
+        //toggle subtabs trick
+        if ($(e.target).is('span')){
+            $('li.'+tab.substr(1)).fadeToggle('fast');
+            $('span',this).toggleClass('ui-icon-circle-plus ui-icon-circle-minus');
+            return false;
+        } else  if ($(this).hasClass("navigation-active-li")){//duplicate
+            $('li.'+tab.substr(1)).fadeToggle('fast');
+            $('span',this).toggleClass('ui-icon-circle-plus ui-icon-circle-minus');
+        };
+        showTab(tab);
+        return false;
+    });
+
+};
+
 $(document).ready(function () {
     $(".tab").hide();
 
-    $(".outer-west ul li.subTab").live("click",function(){
-        var tab = $('a',this).attr('href');
-        showTab(tab);
-        return false;
-    });
-
-    $(".outer-west ul li.topTab").live("click",function(){
-        var tab = $('a',this).attr('href');
-        //toggle subtabs trick
-        $('li.'+tab.substr(1)).toggle();
-        showTab(tab);
-        return false;
-    });
+    setupTabs();
 
     outerLayout = $('body').layout({
         applyDefaultStyles:       false
@@ -106,4 +122,3 @@ $(document).ready(function () {
     });
 
 });
-
diff --git a/src/sunstone/public/js/sunstone.js b/src/sunstone/public/js/sunstone.js
index 73cb79fd84..6edbc35447 100644
--- a/src/sunstone/public/js/sunstone.js
+++ b/src/sunstone/public/js/sunstone.js
@@ -470,7 +470,12 @@ function insertTab(tab_name){
 
     $('div#'+tab_name,main_tabs_context).html(tab_info.content);
 
-    $('div#menu ul#navigation').append('<li id="li_'+tab_name+'" class="'+tabClass+' '+parent+'"><a href="#'+tab_name+'">'+tab_info.title+'</a></li>');
+    $('div#menu ul#navigation').append('<li id="li_'+tab_name+'" class="'+tabClass+' '+parent+'"><a href="#'+tab_name+'">'+tab_info.title+'<span style="display:none;float:right;margin-right:1em;margin-top:5px;" class="ui-icon ui-icon-circle-plus"></span></a></li>');
+
+    if (parent){ //this is a subtab
+        $('div#menu li#li_'+tab_name).hide();//hide by default
+        $('div#menu li#li_'+parent+' span').css("display","inline-block");
+    };
 }
 
 function hideSubTabs(){
diff --git a/src/sunstone/views/index.erb b/src/sunstone/views/index.erb
index 45f277b48c..bca3dc5a1f 100644
--- a/src/sunstone/views/index.erb
+++ b/src/sunstone/views/index.erb
@@ -58,7 +58,7 @@
 </div>
 
 <div id="menu" class="outer-west">
-    <ul id="navigation">
+    <ul id="navigation" class="navigation">
     </ul>
 </div>