Use jQuery UI tabs widget for tabbed fieldsets

2 files changed, 26 insertions, 60 deletions

diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index add47324d..85757f6e7 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -2764,26 +2764,18 @@ ul.toolbarmenu li span.copy {
 
 /*** fieldset tabs ***/
 
-.tabsbar {
-	margin-bottom: 12px;
-	padding-top: 15px;
-	height: 27px;
-	white-space: nowrap;
+.tabbed.ui-tabs {
+	padding: 0;
+	border: 0 !important;
+	background: none;
 }
 
-.ui-dialog-content .tabsbar {
-	margin-bottom: 0;
+.ui-tabs .tabsbar.ui-tabs-nav {
+	margin-bottom: 10px;
 }
 
-.tabsbar .tablink {
-	padding: 15px 1px 15px 0;
-	background: #f8f8f8;
-	background: -moz-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(50%,#d3d3d3), color-stop(100%,#f8f8f8));
-	background: -webkit-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
-	background: -o-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
-	background: -ms-linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
-	background: linear-gradient(top, #f8f8f8 0%, #d3d3d3 50%, #f8f8f8 100%);
+.ui-dialog-content .tabsbar {
+	margin-bottom: 0;
 }
 
 .tabsbar .tablink:last-child {
@@ -2794,28 +2786,13 @@ ul.toolbarmenu li span.copy {
 	border-right: 0;
 }
 
-.tabsbar .tablink a {
-	padding: 15px;
-	color: #999;
-	font-size: 12px;
-	font-weight: bold;
-	text-decoration: none;
+.ui-tabs .ui-tabs-nav li.tablink a {
 	background: #fff;
-	border-right: 1px solid #fafafa;
 }
 
-.tabsbar .tablink.selected a {
-	color: #004458;
-	background: #f6f6f6;
-	background: -moz-linear-gradient(top, #fff 40%, #efefef 100%);
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(40%,#fff), color-stop(100%,#efefef));
-	background: -o-linear-gradient(top, #fff 40%, #efefef 100%);
-	background: -ms-linear-gradient(top, #fff 40%, #efefef 100%);
-	background: linear-gradient(top, #fff 40%, #efefef 100%);
-}
-
-fieldset.tab {
+.ui-tabs fieldset.ui-tabs-panel {
 	border: 0;
 	padding: 0;
 	margin-left: 0;
+	background: none;
 }
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index af801088d..ff0b2e41a 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -1053,47 +1053,35 @@ function rcube_mail_ui()
       content.attr('id', id);
     }
 
-    // first hide not selected tabs
-    current = current || 0;
-    fs.each(function(idx) { if (idx != current) $(this).hide(); });
-
     // create tabs container
-    var tabs = $('<div>').addClass('tabsbar').prependTo(content);
+    var tabs = $('<ul>').addClass('tabsbar').prependTo(content);
 
     // convert fildsets into tabs
     fs.each(function(idx) {
-      var tab, a, elm = $(this), legend = elm.children('legend');
+      var tab, a, elm = $(this),
+        legend = elm.children('legend'),
+        tid = id + '-t' + idx;
 
       // create a tab
-      a   = $('<a>').text(legend.text()).attr('href', '#');
-      tab = $('<span>').attr({'id': 'tab'+idx, 'class': 'tablink'})
-        .click(function() { show_tab(id, idx); return false })
+      a   = $('<a>').text(legend.text()).attr('href', '#' + tid);
+      tab = $('<li>').addClass('tablink');
 
       // remove legend
       legend.remove();
-      // style fieldset
-      elm.addClass('tab');
-      // style selected tab
-      if (idx == current)
-        tab.addClass('selected');
+
+      // link fieldset with tab item
+      elm.attr('id', tid);
 
       // add the tab to container
       tab.append(a).appendTo(tabs);
     });
-  }
-
-  function show_tab(id, index)
-  {
-    var fs = $('#'+id).children('fieldset');
 
-    fs.each(function(idx) {
-      // Show/hide fieldset (tab content)
-      $(this)[index==idx ? 'show' : 'hide']();
-      // Select/unselect tab
-      $('#tab'+idx).toggleClass('selected', idx==index);
+    // use jquery UI tabs widget to do the interaction and styling
+    content.tabs({
+      active: current || 0,
+      heightStyle: 'content',
+      activate: function(e, ui) {resize(); }
     });
-
-    resize();
   }
 
   /**
@@ -1204,6 +1192,7 @@ function rcube_splitter(p)
     this.handle = $('<div>')
       .attr('id', this.id)
       .attr('unselectable', 'on')
+      .attr('role', 'presentation')
       .addClass('splitter ' + (this.horizontal ? 'splitter-h' : 'splitter-v'))
       .appendTo(this.parent)
       .bind('mousedown', onDragStart);