diff options
Diffstat (limited to 'skins/larry')
| -rw-r--r-- | skins/larry/styles.css | 45 | ||||
| -rw-r--r-- | skins/larry/ui.js | 41 |
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); |