From ce06d32dd81e3a9c5c5c8a5e27562b5c55b49c81 Mon Sep 17 00:00:00 2001 From: alecpl Date: Thu, 17 Jun 2010 19:08:00 +0000 Subject: - UI unification - Added button to hide/unhide the preview pane (#1484215) --- skins/default/addressbook.css | 17 +--- skins/default/common.css | 143 +++++++++++++++------------- skins/default/functions.js | 32 +++++++ skins/default/ie6hacks.css | 12 ++- skins/default/iehacks.css | 24 ++--- skins/default/images/mail_footer.gif | Bin 0 -> 1336 bytes skins/default/images/mail_footer.png | Bin 2416 -> 2235 bytes skins/default/includes/header.html | 2 +- skins/default/mail.css | 139 ++++++++++++++------------- skins/default/settings.css | 2 +- skins/default/templates/addressbook.html | 22 +++-- skins/default/templates/compose.html | 14 +-- skins/default/templates/editidentity.html | 2 + skins/default/templates/error.html | 2 + skins/default/templates/identities.html | 2 + skins/default/templates/importcontacts.html | 2 + skins/default/templates/login.html | 2 +- skins/default/templates/mail.html | 72 +++++++------- skins/default/templates/managefolders.html | 2 + skins/default/templates/message.html | 10 +- skins/default/templates/messageerror.html | 2 + 21 files changed, 286 insertions(+), 217 deletions(-) create mode 100644 skins/default/images/mail_footer.gif (limited to 'skins') diff --git a/skins/default/addressbook.css b/skins/default/addressbook.css index 73375ced0..dc9e865b7 100644 --- a/skins/default/addressbook.css +++ b/skins/default/addressbook.css @@ -74,18 +74,9 @@ #abookcountbar { - position: absolute; - bottom: 6px; - left: 225px; - width: 240px; - height: 20px; - text-align: left; -} - -#abookcountbar span -{ - font-size: 11px; - color: #333333; + margin-top: 4px; + margin-left: 4px; + min-width: 200px; } #addressscreen @@ -122,7 +113,7 @@ bottom: 0px; border: 1px solid #999999; background-color: #F9F9F9; - overflow: auto; + overflow: hidden; } #contactgroupslist diff --git a/skins/default/common.css b/skins/default/common.css index 66ea82dd0..583f8a157 100644 --- a/skins/default/common.css +++ b/skins/default/common.css @@ -243,73 +243,6 @@ img left: 20px; } -.pagenav a.button, -.pagenav a.buttonPas -{ - display: block; - float: left; - width: 11px; - height: 11px; - padding: 0; - margin: 1px; - overflow: hidden; - background: url(images/pagenav.gif) 0 0 no-repeat transparent; - opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */ -} - -.pagenav a.buttonPas { - opacity: 0.35; -} - -.pagenav a.firstpageSel { - background-position: 0 -11px; -} - -.pagenav a.prevpage { - background-position: -11px 0; -} - -.pagenav a.prevpageSel { - background-position: -11px -11px; -} - -.pagenav a.nextpage { - background-position: -22px 0; -} - -.pagenav a.nextpageSel { - background-position: -22px -11px; -} - -.pagenav a.lastpage { - background-position: -33px 0; -} - -.pagenav a.lastpageSel { - background-position: -33px -11px; -} - -.splitter -{ - user-select: none; - -moz-user-select: none; - -khtml-user-select: none; - position: absolute; - background: url(images/dimple.png) center no-repeat; -} - -.splitter-h -{ - cursor: n-resize; - background-position: center 2px; -} - -.splitter-v -{ - cursor: e-resize; - background-position: 2px center; -} - .boxtitle { height: 12px !important; @@ -350,6 +283,7 @@ img bottom: 0px; left: 0px; right: 0px; + overflow: hidden; height: 22px; border-top: 1px solid #999; background: url('images/listheader.gif') top left repeat-x #CCC; @@ -379,6 +313,80 @@ img opacity: 0.35; } +.pagenav span +{ + color: #666; + font-size: 11px; + text-shadow: white 1px 1px; +} + +.pagenav a.button, +.pagenav a.buttonPas +{ + display: block; + float: left; + width: 11px; + height: 11px; + padding: 0; + margin: 1px; + overflow: hidden; + background: url(images/pagenav.gif) 0 0 no-repeat transparent; + opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */ +} + +.pagenav a.buttonPas { + opacity: 0.35; +} + +.pagenav a.firstpageSel { + background-position: 0 -11px; +} + +.pagenav a.prevpage { + background-position: -11px 0; +} + +.pagenav a.prevpageSel { + background-position: -11px -11px; +} + +.pagenav a.nextpage { + background-position: -22px 0; +} + +.pagenav a.nextpageSel { + background-position: -22px -11px; +} + +.pagenav a.lastpage { + background-position: -33px 0; +} + +.pagenav a.lastpageSel { + background-position: -33px -11px; +} + +.splitter +{ + user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + position: absolute; + background: url(images/dimple.png) center no-repeat; +} + +.splitter-h +{ + cursor: n-resize; + background-position: center 2px; +} + +.splitter-v +{ + cursor: e-resize; + background-position: 2px center; +} + .popupmenu { position: absolute; @@ -436,7 +444,6 @@ img } - /***** common table settings ******/ table.records-table thead tr td diff --git a/skins/default/functions.js b/skins/default/functions.js index 3a37b6d8d..4ef069b88 100644 --- a/skins/default/functions.js +++ b/skins/default/functions.js @@ -325,6 +325,38 @@ body_keypress: function(evt, p) this[k].hide(); } } +}, + +switch_preview_pane: function(elem) +{ + var uid, prev_frm = $('#mailpreviewframe'); + + if (elem.checked) { + rcmail.env.contentframe = 'messagecontframe'; + if (mailviewsplit.layer) { + mailviewsplit.resize(); + mailviewsplit.layer.elm.style.display = ''; + } else + mailviewsplit.init(); + prev_frm.show(); + if (uid = rcmail.message_list.get_single_selection()) + rcmail.show_message(uid, false, true); + rcmail.http_post('save-pref', '_name=preview_pane&_value=1'); + } else { + prev_frm.hide(); + if (bw.ie6 || bw.ie7) { + var fr = document.getElementById('mailcontframe'); + fr.style.bottom = 0; + fr.style.height = parseInt(fr.parentNode.offsetHeight)+'px'; + } + else + $('#mailcontframe').css({height: 'auto', bottom: 0}); + if (mailviewsplit.layer) + mailviewsplit.layer.elm.style.display = 'none'; + rcmail.env.contentframe = null; + rcmail.show_contentframe(false); + rcmail.http_post('save-pref', '_name=preview_pane&_value=0'); + } } }; diff --git a/skins/default/ie6hacks.css b/skins/default/ie6hacks.css index 5b42f1cfb..9fa3eb804 100644 --- a/skins/default/ie6hacks.css +++ b/skins/default/ie6hacks.css @@ -10,7 +10,7 @@ img behavior: url(skins/default/pngbehavior.htc); } -#header img +#logo { width: 178px; height: 47px; @@ -49,6 +49,11 @@ img padding-right: 10px; } +#listcontrols a.button, +#listcontrols a.buttonPas { + background-image: url(images/mail_footer.gif); +} + #messagetoolbar a.button, #messagetoolbar a.buttonPas { background-image: url(images/mail_toolbar.gif); @@ -76,6 +81,7 @@ ul.toolbarmenu li.separator_below .boxfooter { width: 100%; + bottom: -1px; } .boxtitle, @@ -86,6 +92,6 @@ ul.toolbarmenu li.separator_below .boxlistcontent { - height: expression((parseInt(this.parentNode.offsetHeight)-42)+'px'); - width: 100%; + top: 21px; + height: expression((parseInt(this.parentNode.offsetHeight)-24-parseInt(this.style.top?this.style.top:21))+'px'); } diff --git a/skins/default/iehacks.css b/skins/default/iehacks.css index cf27c3be8..d070ea328 100644 --- a/skins/default/iehacks.css +++ b/skins/default/iehacks.css @@ -61,8 +61,7 @@ input, textarea background-image: url(images/mail_toolbar.gif); } -#listcontrols a.buttonPas, -#mailboxcontrols a.buttonPas +#listcontrols a.buttonPas { filter: alpha(opacity=35); } @@ -75,12 +74,12 @@ input, textarea #mainscreen { width: expression((parseInt(document.documentElement.clientWidth)-40)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-101)+'px'); + height: expression((parseInt(document.documentElement.clientHeight)-96)+'px'); } #directorylistbox { - height: expression((parseInt(document.documentElement.clientHeight)-125)+'px'); + height: expression((parseInt(document.documentElement.clientHeight)-115)+'px'); } #addresslist, @@ -102,7 +101,7 @@ input, textarea #messagepartcontainer { width: expression((parseInt(document.documentElement.clientWidth)-40)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-100)+'px'); + height: expression((parseInt(document.documentElement.clientHeight)-90)+'px'); } #mailrightcontent @@ -148,11 +147,7 @@ input, textarea { width: expression((parseInt(this.parentNode.offsetWidth)-180)+'px'); height: expression((parseInt(this.parentNode.offsetHeight)-20)+'px'); -} - -#messagecanvas -{ - width: expression((parseInt(this.parentNode.offsetWidth)-20)+'px'); + overflow: hidden; } #countcontrols @@ -189,7 +184,7 @@ div.message-part div.pre #addressscreen { width: expression((parseInt(document.documentElement.clientWidth)-245)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-125)+'px'); + height: expression((parseInt(document.documentElement.clientHeight)-115)+'px'); } #prefsscreen @@ -201,7 +196,7 @@ div.message-part div.pre #importbox { width: expression((parseInt(document.documentElement.clientWidth)-40)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-145)+'px'); + height: expression((parseInt(document.documentElement.clientHeight)-140)+'px'); } #contacts-table @@ -266,3 +261,8 @@ table.records-table thead tr td margin: 0 4px; padding: 0.8em; } + +#listcontrols input +{ + margin-top: 2px; +} diff --git a/skins/default/images/mail_footer.gif b/skins/default/images/mail_footer.gif new file mode 100644 index 000000000..302b55870 Binary files /dev/null and b/skins/default/images/mail_footer.gif differ diff --git a/skins/default/images/mail_footer.png b/skins/default/images/mail_footer.png index 7e0867748..e0f82b578 100644 Binary files a/skins/default/images/mail_footer.png and b/skins/default/images/mail_footer.png differ diff --git a/skins/default/includes/header.html b/skins/default/includes/header.html index 14cc80caf..393ee9218 100644 --- a/skins/default/includes/header.html +++ b/skins/default/includes/header.html @@ -1,3 +1,3 @@ - + diff --git a/skins/default/mail.css b/skins/default/mail.css index b29688492..fae7a82a5 100644 --- a/skins/default/mail.css +++ b/skins/default/mail.css @@ -265,36 +265,36 @@ td.formlinks a:visited position: absolute; top: 85px; right: 20px; - bottom: 16px; + bottom: 30px; left: 20px; } #mailleftcontainer { position: absolute; - top: 0px; - left: 0px; - bottom: 0px; + top: 0; + left: 0; + bottom: 0; width: 195px; } #mailrightcontainer { position: absolute; - top: 0px; + top: 0; left: 170px; - bottom: 0px; - right: 0px; + bottom: 0; + right: 0; min-width: 600px; } #mailrightcontent { position: absolute; - top: 0px; - left: 0px; - right: 0px; - bottom: 20px; + top: 0; + left: 0; + right: 0; + bottom: 0; } #messagepartcontainer @@ -310,13 +310,11 @@ td.formlinks a:visited { position: absolute; width: 100%; - top: 0px; - bottom: 0px; + top: 0; + bottom: 0; border: 1px solid #999999; background-color: #F9F9F9; - overflow: auto; - overflow-y: auto; - overflow-x: hidden; + overflow: hidden; } #mailpreviewframe @@ -372,16 +370,31 @@ td.formlinks a:visited font-weight: bold; } +#quota +{ + position: absolute; + bottom: 12px; + left: 20px; +} + +#quota span +{ + display: block; + float: left; + font-size: 11px; + color: #666; +} + /** mailbox list styles */ #mailboxlist-container { position: absolute; - top: 0px; - left: 0px; + top: 0; + left: 0; width: 100%; - bottom: 20px; + bottom: 0; border: 1px solid #999; background-color: #F9F9F9; overflow: hidden; @@ -512,32 +525,32 @@ td.formlinks a:visited font-weight: normal; } -#listcontrols, -#mailboxcontrols +#listcontrols { - position: absolute; + position: relative; white-space: nowrap; - left: 0px; - bottom: 0px; - height: 15px; + left: 4px; + height: 22px; width: auto; min-width: 300px; } #listcontrols a, -#listcontrols span, -#mailboxcontrols a, -#mailboxcontrols span +#listcontrols span { display: block; float: left; + margin-top: 4px; font-size: 11px; } +#listcontrols input +{ + margin-top: 6px; +} + #listcontrols a.button, -#listcontrols a.buttonPas, -#mailboxcontrols a.button, -#mailboxcontrols a.buttonPas +#listcontrols a.buttonPas { display: block; float: left; @@ -550,28 +563,11 @@ td.formlinks a:visited opacity: 0.99; /* this is needed to make buttons appear correctly in Chrome */ } -#listcontrols a.buttonPas, -#mailboxcontrols a.buttonPas +#listcontrols a.buttonPas { opacity: 0.35; } -#mailboxcontrols a.expunge { - background-position: 0 0; -} - -#mailboxcontrols a.expungesel { - background-position: 0 -15px; -} - -#mailboxcontrols a.purge { - background-position: -15px 0; -} - -#mailboxcontrols a.purgesel { - background-position: -15px -15px; -} - #listcontrols a.all { background-position: -30px 0; } @@ -638,10 +634,9 @@ td.formlinks a:visited #countcontrols { - height: 15px; position: absolute; - bottom: 0; - right: 0; + top: 4px; + right: 4px; min-width: 25em; white-space: nowrap; font-size: 11px; @@ -926,10 +921,10 @@ td span.branch div.l3 #messageframe { position: absolute; - top: 0px; + top: 0; left: 180px; - right: 0px; - bottom: 20px; + right: 0; + bottom: 0; border: 1px solid #999; background-color: #FFF; overflow: auto; @@ -1155,13 +1150,6 @@ div.message-htmlpart div.rcmBody white-space: nowrap; } -#priority-selector, -#receipt-selector -{ - padding-left: 30px; - white-space: nowrap; -} - #compose-container { position: absolute; @@ -1178,11 +1166,6 @@ div.message-htmlpart div.rcmBody padding-top: 3px; } -#editor-select -{ - float: left; -} - #compose-div { position: absolute; @@ -1207,7 +1190,7 @@ div.message-htmlpart div.rcmBody #compose-subject td.title { width: 80px !important; - color: #666666; + color: #666; font-size: 11px; font-weight: bold; padding-right: 10px; @@ -1302,6 +1285,26 @@ div.message-htmlpart div.rcmBody margin-top: 4px; } +#editor-select +{ + float: left; + white-space: nowrap; + width: auto; +} + +#editor-select label +{ + color: #666; + font-size: 11px; + font-weight: bold; + padding-left: 20px; +} + +#editor-select input +{ + width: auto !important; +} + td.show-headers { background: url(images/icons/down_small.gif) no-repeat center; diff --git a/skins/default/settings.css b/skins/default/settings.css index 46a02d81f..36567fa9f 100644 --- a/skins/default/settings.css +++ b/skins/default/settings.css @@ -197,7 +197,7 @@ input.disabled width: 600px; height: 120px; left: 20px; - bottom: 20px; + bottom: 25px; } div.settingsbox diff --git a/skins/default/templates/addressbook.html b/skins/default/templates/addressbook.html index 974622210..aa3f288e7 100644 --- a/skins/default/templates/addressbook.html +++ b/skins/default/templates/addressbook.html @@ -56,7 +56,19 @@
- +
+
+ +
+
+ +
-
+
style="display:none">
- - -
- -
- :  - - - - - - - - :  - - - - - - : - -
-
@@ -216,5 +215,14 @@ + +
+ : + +
+ + +
+ diff --git a/skins/default/templates/managefolders.html b/skins/default/templates/managefolders.html index 97758880a..a61904b2f 100644 --- a/skins/default/templates/managefolders.html +++ b/skins/default/templates/managefolders.html @@ -36,5 +36,7 @@ +
+ diff --git a/skins/default/templates/message.html b/skins/default/templates/message.html index 0bafc3e08..c154dc434 100644 --- a/skins/default/templates/message.html +++ b/skins/default/templates/message.html @@ -45,15 +45,14 @@
-
+
-
- +
+
+
+