- Improve tabs to fixed width and add tabs in identities info (#1486974)

alecpl

2010-10-06 6769ba767005b8adc93a077c04eb745502b01238

- Improve tabs to fixed width and add tabs in identities info (#1486974)

 CHANGELOG

@@ -22,6 +22,7 @@
- Fix confirmation message isn't displayed after sending mail on Chrome (#1486177)
- Fix keyboard doesn't work with autocomplete list with Chrome (#1487029)
- Fix handling of backslash as IMAP delimiter
- Improve tabs to fixed width and add tabs in identities info (#1486974)

RELEASE 0.4.1
-------------

 skins/default/common.css

@@ -698,6 +698,16 @@
  opacity: 0.8;
}

.disabled
{
  color: #999;
}

font.bold
{
  font-weight: bold;
}


/***** onclick menu list *****/

@@ -767,12 +777,75 @@
  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;
}


 skins/default/functions.js

@@ -21,6 +21,56 @@
  $('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
 */

 skins/default/images/tabs-left.gif

 skins/default/images/tabs-right.gif

 skins/default/images/tabs.gif

Binary files differ

 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;

 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>