diff options
author | alecpl <alec@alec.pl> | 2010-10-06 06:48:19 +0000 |
---|---|---|
committer | alecpl <alec@alec.pl> | 2010-10-06 06:48:19 +0000 |
commit | 6769ba767005b8adc93a077c04eb745502b01238 (patch) | |
tree | faab9d68069ae9ee4abb416b89ac3f4ae607a6bf /skins | |
parent | 76ee6cafcd7847c802857431ec4224a577fa7ee3 (diff) |
- Improve tabs to fixed width and add tabs in identities info (#1486974)
Diffstat (limited to 'skins')
-rw-r--r-- | skins/default/common.css | 81 | ||||
-rw-r--r-- | skins/default/functions.js | 50 | ||||
-rw-r--r-- | skins/default/images/tabs-left.gif | bin | 0 -> 461 bytes | |||
-rw-r--r-- | skins/default/images/tabs-right.gif | bin | 0 -> 2851 bytes | |||
-rw-r--r-- | skins/default/images/tabs.gif | bin | 821 -> 0 bytes | |||
-rw-r--r-- | skins/default/settings.css | 45 | ||||
-rw-r--r-- | skins/default/templates/editidentity.html | 5 |
7 files changed, 130 insertions, 51 deletions
diff --git a/skins/default/common.css b/skins/default/common.css index c068ca270..dd01774e5 100644 --- a/skins/default/common.css +++ b/skins/default/common.css @@ -698,6 +698,16 @@ a.rcmContactAddress:hover opacity: 0.8; } +.disabled +{ + color: #999; +} + +font.bold +{ + font-weight: bold; +} + /***** onclick menu list *****/ @@ -767,12 +777,75 @@ ul.toolbarmenu li.separator_above padding-top: 2px; } -.disabled + +/***** tabbed interface elements *****/ + +div.tabsbar, +#tabsbar { - color: #999; + position: absolute; + top: 50px; + left: 220px; + right: 20px; + height: 22px; + border-bottom: 1px solid #999999; + white-space: nowrap; } -font.bold +div.tabsbar { - font-weight: bold; + top: 35px; + left: 12px; + right: 12px; +} + +span.tablink, +span.tablink-selected +{ + float: left; + height: 23px !important; + height: 22px; + overflow: hidden; + background: url(images/tabs-left.gif) top left no-repeat; +} + +span.tablink +{ + cursor: pointer; +} + +span.tablink-selected +{ + cursor: default; + background-position: 0px -23px; +} + +span.tablink a, +span.tablink-selected a +{ + display: block; + padding: 5px 10px 0 5px; + margin-left: 5px; + height: 23px; + color: #555555; + max-width: 185px; + text-decoration: none; + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + background: url(images/tabs-right.gif) top right no-repeat; +} + +span.tablink-selected a +{ + cursor: inherit; + color: #000000; + background-position: right -23px; +} + +fieldset.tabbed +{ + margin-top: 22px; + padding-top: 12px; } + diff --git a/skins/default/functions.js b/skins/default/functions.js index 64a6d9921..82f7c1562 100644 --- a/skins/default/functions.js +++ b/skins/default/functions.js @@ -21,6 +21,56 @@ function rcube_show_advanced(visible) $('tr.advanced').css('display', (visible ? (bw.ie ? 'block' : 'table-row') : 'none')); } +// Fieldsets-to-tabs converter +// Warning: don't place "caller" <script> inside page element (id) +function rcube_init_tabs(id, current) +{ + var content = document.getElementById(id), + fs = $('fieldset', content); + + current = current ? current : 0; + + // first hide not selected tabs + fs.each(function(idx) { if (idx != current) $(this).hide(); }); + + // create tabs container + var tabs = $('<div>').addClass('tabsbar').appendTo($(content)); + + // convert fildsets into tabs + fs.each(function(idx) { + var tab, a, elm = $(this), legend = $('legend', elm); + + // create a tab + a = $('<a>').text(legend.text()).attr('href', '#'); + tab = $('<span>').attr({'id': 'tab'+idx, 'class': 'tablink'}) + .click(function() { return rcube_show_tab(id, idx); }) + + // remove legend + legend.remove(); + // style fieldset + elm.addClass('tabbed'); + // style selected tab + if (idx == current) + tab.addClass('tablink-selected'); + + // add the tab to container + tab.append(a).appendTo(tabs); + }); +} + +function rcube_show_tab(id, index) +{ + var content = document.getElementById(id), + fs = $('fieldset', content); + + fs.each(function(idx) { + // Show/hide fieldset (tab content) + $(this)[index==idx ? 'show' : 'hide'](); + // Select/unselect tab + $('#tab'+idx).toggleClass('tablink-selected', idx==index); + }); +} + /** * Mail UI */ diff --git a/skins/default/images/tabs-left.gif b/skins/default/images/tabs-left.gif Binary files differnew file mode 100644 index 000000000..3465d1fd1 --- /dev/null +++ b/skins/default/images/tabs-left.gif diff --git a/skins/default/images/tabs-right.gif b/skins/default/images/tabs-right.gif Binary files differnew file mode 100644 index 000000000..252463c9a --- /dev/null +++ b/skins/default/images/tabs-right.gif diff --git a/skins/default/images/tabs.gif b/skins/default/images/tabs.gif Binary files differdeleted file mode 100644 index 14482273a..000000000 --- a/skins/default/images/tabs.gif +++ /dev/null diff --git a/skins/default/settings.css b/skins/default/settings.css index 83bd4e36f..e4718d40e 100644 --- a/skins/default/settings.css +++ b/skins/default/settings.css @@ -1,50 +1,5 @@ /***** Roundcube|Mail settings task styles *****/ - -#tabsbar -{ - position: absolute; - top: 50px; - left: 220px; - right: 20px; - height: 22px; - border-bottom: 1px solid #999999; - white-space: nowrap; -} - -span.tablink, -span.tablink-selected -{ - float: left; - width: 100px; - height: 24px !important; - height: 22px; - overflow: hidden; - text-overflow: ellipsis; - background: url(images/tabs.gif) top left no-repeat; -} - -span.tablink-selected -{ - background-position: -102px 0; -} - -span.tablink a, -span.tablink-selected a -{ - display: block; - padding-left: 10px; - padding-top: 5px; - color: #555555; - text-decoration: none; -} - -span.tablink-selected a -{ - color: #000000; - cursor: default; -} - #rcmfd_timezone { width: 300px; diff --git a/skins/default/templates/editidentity.html b/skins/default/templates/editidentity.html index 576a0d816..24c37a629 100644 --- a/skins/default/templates/editidentity.html +++ b/skins/default/templates/editidentity.html @@ -41,12 +41,13 @@ <div class="boxcontent"> <roundcube:object name="identityform" size="40" textareacols="60" textarearows="6" /> - -<p><br /> +<p> <roundcube:button command="delete" type="input" class="button" label="delete" condition="env:action=='edit-identity'" style="margin-right:0.5em" /> <roundcube:button command="save" type="input" class="button mainaction" label="save" /> </p> </div> +<script type="text/javascript">rcube_init_tabs('identity-details')</script> + </div> </div> |