summaryrefslogtreecommitdiff
path: root/skins/default
diff options
context:
space:
mode:
authoralecpl <alec@alec.pl>2009-08-03 18:27:53 +0000
committeralecpl <alec@alec.pl>2009-08-03 18:27:53 +0000
commitf05834857c74b60a03378e01e3a178dfb15f297c (patch)
tree1a663ccf6272bca4fc7aff20e9a91bb94e73bb9c /skins/default
parent7c6bc1a187026c149fa78d7e5c28838a4ed7e3bb (diff)
- Re-designed User Preferences interface
Diffstat (limited to 'skins/default')
-rw-r--r--skins/default/iehacks.css23
-rw-r--r--skins/default/settings.css116
-rw-r--r--skins/default/templates/settings.html41
-rw-r--r--skins/default/templates/settingsedit.html34
4 files changed, 143 insertions, 71 deletions
diff --git a/skins/default/iehacks.css b/skins/default/iehacks.css
index 5cb141fad..9804a975e 100644
--- a/skins/default/iehacks.css
+++ b/skins/default/iehacks.css
@@ -33,17 +33,6 @@ input, textarea
width: expression((parseInt(document.documentElement.clientWidth)-240)+'px');
}
-#userprefs-box
-{
- height: expression((parseInt(document.documentElement.clientHeight)-155)+'px');
- width: expression((parseInt(document.documentElement.clientWidth)-40)+'px');
-}
-
-.userprefs-block
-{
- width: expression(Math.min(520, parseInt(document.documentElement.clientWidth))+'px');
-}
-
#folder-manager
{
height: expression((parseInt(document.documentElement.clientHeight)-235)+'px');
@@ -94,7 +83,8 @@ input, textarea
height: expression((parseInt(document.documentElement.clientHeight)-125)+'px');
}
-#addresslist
+#addresslist,
+#sectionslist
{
height: expression(parseInt(this.parentNode.offsetHeight)+'px');
}
@@ -200,6 +190,12 @@ div.message-part div.pre
height: expression((parseInt(document.documentElement.clientHeight)-125)+'px');
}
+#prefsscreen
+{
+ width: expression((parseInt(document.documentElement.clientWidth)-40)+'px');
+ height: expression((parseInt(document.documentElement.clientHeight)-125)+'px');
+}
+
#importbox
{
height: expression((parseInt(document.documentElement.clientHeight)-135)+'px');
@@ -210,7 +206,8 @@ div.message-part div.pre
width: expression(document.getElementById('addresslist').clientWidth);
}
-#contacts-box
+#contacts-box,
+#prefs-box
{
height: expression(parseInt(this.parentNode.offsetHeight)+'px');
width: expression((parseInt(this.parentNode.offsetWidth)-555)+'px');
diff --git a/skins/default/settings.css b/skins/default/settings.css
index c3487ba3c..c9efd33d2 100644
--- a/skins/default/settings.css
+++ b/skins/default/settings.css
@@ -44,36 +44,6 @@ span.tablink-selected a
color: #000000;
}
-#userprefs-box
-{
- position: absolute;
- top: 95px;
- left: 20px;
- bottom: 60px;
- right: 20px;
- overflow: auto;
- border: 1px solid #999999;
-}
-
-#userprefs-box table td.title
-{
- color: #666666;
- padding-right: 10px;
- white-space: nowrap;
-}
-
-#userprefs-box table tr.advanced
-{
- display: none;
-}
-
-.userprefs-block
-{
- float: left;
- margin-right: 14px;
- min-width: 520px;
-}
-
#rcmfd_timezone
{
width: 300px;
@@ -249,8 +219,8 @@ input.disabled
bottom: 20px;
}
-#userprefs-title,
#identity-title,
+#prefs-title,
div.boxtitle
{
height: 12px !important;
@@ -287,12 +257,86 @@ legend
color: #999999;
}
-div.advswitch
+#prefsscreen
{
- white-space: nowrap;
- text-align: right;
position: absolute;
- bottom: 35px;
+ top: 95px;
right: 20px;
- width: 460px;
+ bottom: 30px;
+ left: 20px;
+}
+
+#sectionslist
+{
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ bottom: 0px;
+ border: 1px solid #999999;
+ background-color: #F9F9F9;
+ overflow: auto;
+}
+
+#sections-table
+{
+ width: 100%;
+ table-layout: fixed;
+}
+
+#sections-table tbody td
+{
+ cursor: default;
+}
+
+#prefs-box
+{
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ bottom: 0px;
+ border: 1px solid #999999;
+ overflow: hidden;
+}
+
+body.iframe,
+#prefs-frame
+{
+ background-color: #F9F9F9;
+ border: none;
+}
+
+#prefs-details
+{
+ margin: 15px;
+}
+
+#prefs-details table td.title
+{
+ color: #666;
+ padding-right: 10px;
+}
+
+#prefs-details table tr.advanced
+{
+ display: none;
+}
+
+#formfooter
+{
+ width: 100%;
+}
+
+#formfooter .footerleft
+{
+ padding-left: 20px;
+ white-space: nowrap;
+ float: left;
+}
+
+#formfooter .footerright
+{
+ padding-right: 20px;
+ white-space: nowrap;
+ text-align: right;
+ float: right;
}
diff --git a/skins/default/templates/settings.html b/skins/default/templates/settings.html
index b2a3c15b9..25d4e6779 100644
--- a/skins/default/templates/settings.html
+++ b/skins/default/templates/settings.html
@@ -4,6 +4,15 @@
<title><roundcube:object name="pagetitle" /></title>
<roundcube:include file="/includes/links.html" />
<script type="text/javascript" src="/functions.js"></script>
+<script type="text/javascript" src="/splitter.js"></script>
+
+<style type="text/css">
+#sectionslist { width: <roundcube:exp expression="!empty(cookie:prefsviewsplitter) ? cookie:prefsviewsplitter-5 : 205" />px; }
+#prefs-box { left: <roundcube:exp expression="!empty(cookie:prefsviewsplitter) ? cookie:prefsviewsplitter+5 : 205" />px;
+<roundcube:exp expression="browser:ie ? ('width:expression((parseInt(this.parentNode.offsetWidth)-'.(!empty(cookie:prefsviewsplitter) ? cookie:prefsviewsplitter+5 : 205).')+\\'px\\');') : ''" />
+}
+</style>
+
</head>
<body>
@@ -11,33 +20,21 @@
<roundcube:include file="/includes/header.html" />
<roundcube:include file="/includes/settingstabs.html" />
-<form name="form" action="./" method="post">
-
-<div id="userprefs-box">
-<div id="userprefs-title"><roundcube:label name="userpreferences" /></div>
-
-<div id="userprefscontainer" style="padding:15px 0 15px 15px">
-<div class="userprefs-block">
- <roundcube:object name="userprefs" form="form" parts="general,mailbox,mailview" />
-</div>
-<div class="userprefs-block">
- <roundcube:object name="userprefs" form="form" parts="compose,folders,server" />
-</div>
-<div style="clear:left"></div>
+<div id="prefsscreen">
-<roundcube:container name="userprefs" id="userprefscontainer" />
-</div>
+<div id="sectionslist">
+<roundcube:object name="sectionslist" id="sections-table" class="records-table" cellspacing="0" />
</div>
-<p id="listbuttons">
-<roundcube:button command="save" type="input" class="button mainaction" label="save" />
-</p>
+<script type="text/javascript">
+ var prefviewsplit = new rcube_splitter({id:'prefsviewsplitter', p1: 'sectionslist', p2: 'prefs-box', orientation: 'v', relative: true, start: 200});
+ rcmail.add_onload('prefviewsplit.init()');
+</script>
-</form>
+<div id="prefs-box">
+<roundcube:object name="prefsframe" id="prefs-frame" width="100%" height="100%" frameborder="0" src="/watermark.html" />
+</div>
-<div class="advswitch">
-<label for="advswitch"><roundcube:label name="advancedoptions"></label>
-<input type="checkbox" id="advswitch" name="_advanced" value="0" onclick="rcube_show_advanced(this.checked)" />
</div>
</body>
diff --git a/skins/default/templates/settingsedit.html b/skins/default/templates/settingsedit.html
new file mode 100644
index 000000000..3a0bc603d
--- /dev/null
+++ b/skins/default/templates/settingsedit.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title><roundcube:object name="pagetitle" /></title>
+<roundcube:include file="/includes/links.html" />
+<script type="text/javascript" src="/functions.js"></script>
+</head>
+<body class="iframe">
+
+<div id="prefs-title" class="boxtitle"><roundcube:object name="sectionname" /></div>
+
+<form name="form" action="./" method="post">
+
+<div id="prefs-details">
+<roundcube:object name="userprefs" form="form" />
+</div>
+
+<div id="formfooter">
+<div class="footerleft">
+<roundcube:button command="save" type="input" class="button mainaction" label="save" />
+</div>
+
+<div class="footerright">
+<label for="advswitch"><roundcube:label name="advancedoptions"></label>
+<input type="checkbox" id="advswitch" name="_advanced" value="0" onclick="rcube_show_advanced(this.checked)" />
+</div>
+
+</div>
+<p>&nbsp;</p>
+
+</form>
+
+</body>
+</html>