[Svn] r4043 - in trunk/roundcubemail: . skins/default skins/default/images skins/default/templates

trac at roundcube.net trac at roundcube.net
Wed Oct 6 08:48:19 CEST 2010


Author: alec
Date: 2010-10-06 01:48:19 -0500 (Wed, 06 Oct 2010)
New Revision: 4043

Added:
   trunk/roundcubemail/skins/default/images/tabs-left.gif
   trunk/roundcubemail/skins/default/images/tabs-right.gif
Removed:
   trunk/roundcubemail/skins/default/images/tabs.gif
Modified:
   trunk/roundcubemail/CHANGELOG
   trunk/roundcubemail/skins/default/common.css
   trunk/roundcubemail/skins/default/functions.js
   trunk/roundcubemail/skins/default/settings.css
   trunk/roundcubemail/skins/default/templates/editidentity.html
Log:
- Improve tabs to fixed width and add tabs in identities info (#1486974)


Modified: trunk/roundcubemail/CHANGELOG
===================================================================
--- trunk/roundcubemail/CHANGELOG	2010-10-05 19:29:13 UTC (rev 4042)
+++ trunk/roundcubemail/CHANGELOG	2010-10-06 06:48:19 UTC (rev 4043)
@@ -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
 -------------

Modified: trunk/roundcubemail/skins/default/common.css
===================================================================
--- trunk/roundcubemail/skins/default/common.css	2010-10-05 19:29:13 UTC (rev 4042)
+++ trunk/roundcubemail/skins/default/common.css	2010-10-06 06:48:19 UTC (rev 4043)
@@ -698,7 +698,17 @@
   opacity: 0.8;
 }
 
+.disabled
+{
+  color: #999;
+}
 
+font.bold
+{
+  font-weight: bold;
+}
+
+
 /***** onclick menu list *****/
 
 ul.toolbarmenu
@@ -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;
+}
+

Modified: trunk/roundcubemail/skins/default/functions.js
===================================================================
--- trunk/roundcubemail/skins/default/functions.js	2010-10-05 19:29:13 UTC (rev 4042)
+++ trunk/roundcubemail/skins/default/functions.js	2010-10-06 06:48:19 UTC (rev 4043)
@@ -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
  */

Added: trunk/roundcubemail/skins/default/images/tabs-left.gif
===================================================================
(Binary files differ)


Property changes on: trunk/roundcubemail/skins/default/images/tabs-left.gif
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Added: trunk/roundcubemail/skins/default/images/tabs-right.gif
===================================================================
(Binary files differ)


Property changes on: trunk/roundcubemail/skins/default/images/tabs-right.gif
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Deleted: trunk/roundcubemail/skins/default/images/tabs.gif
===================================================================
(Binary files differ)

Modified: trunk/roundcubemail/skins/default/settings.css
===================================================================
--- trunk/roundcubemail/skins/default/settings.css	2010-10-05 19:29:13 UTC (rev 4042)
+++ trunk/roundcubemail/skins/default/settings.css	2010-10-06 06:48:19 UTC (rev 4043)
@@ -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;

Modified: trunk/roundcubemail/skins/default/templates/editidentity.html
===================================================================
--- trunk/roundcubemail/skins/default/templates/editidentity.html	2010-10-05 19:29:13 UTC (rev 4042)
+++ trunk/roundcubemail/skins/default/templates/editidentity.html	2010-10-06 06:48:19 UTC (rev 4043)
@@ -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>

_______________________________________________
http://lists.roundcube.net/mailman/listinfo/svn



More information about the Svn mailing list