summaryrefslogtreecommitdiff
path: root/skins
diff options
context:
space:
mode:
authoralecpl <alec@alec.pl>2010-10-06 06:48:19 +0000
committeralecpl <alec@alec.pl>2010-10-06 06:48:19 +0000
commit6769ba767005b8adc93a077c04eb745502b01238 (patch)
treefaab9d68069ae9ee4abb416b89ac3f4ae607a6bf /skins
parent76ee6cafcd7847c802857431ec4224a577fa7ee3 (diff)
- Improve tabs to fixed width and add tabs in identities info (#1486974)
Diffstat (limited to 'skins')
-rw-r--r--skins/default/common.css81
-rw-r--r--skins/default/functions.js50
-rw-r--r--skins/default/images/tabs-left.gifbin0 -> 461 bytes
-rw-r--r--skins/default/images/tabs-right.gifbin0 -> 2851 bytes
-rw-r--r--skins/default/images/tabs.gifbin821 -> 0 bytes
-rw-r--r--skins/default/settings.css45
-rw-r--r--skins/default/templates/editidentity.html5
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
new file mode 100644
index 000000000..3465d1fd1
--- /dev/null
+++ b/skins/default/images/tabs-left.gif
Binary files differ
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
Binary files differ
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
Binary files differ
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>