Feature #1112: Support improved submenus and menu expansion

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 {

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

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(){

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>