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

8 files changed, 131 insertions, 51 deletions

diff --git a/CHANGELOG b/CHANGELOG
index be129c655..b078c30f1 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -22,6 +22,7 @@ CHANGELOG Roundcube Webmail
 - 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
 -------------
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
new 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
new 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
deleted 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>