From 087c7dc5d2e58e4aa99f1ffdb9b8f01c6121ce1d Mon Sep 17 00:00:00 2001 From: alecpl Date: Tue, 29 Jun 2010 19:27:26 +0000 Subject: - Improved compose screen: resizable body and attachments list, vertical splitter, options menu - Removed productname/version element, changed footer size to 20px --- skins/default/addressbook.css | 26 +---- skins/default/common.css | 35 +++++- skins/default/functions.js | 88 +++++++++++--- skins/default/ie6hacks.css | 10 ++ skins/default/iehacks.css | 64 ++++------ skins/default/mail.css | 170 +++++++++++++-------------- skins/default/settings.css | 45 ++----- skins/default/splitter.js | 2 + skins/default/templates/addressbook.html | 2 - skins/default/templates/compose.html | 175 +++++++++++++++++----------- skins/default/templates/editidentity.html | 4 +- skins/default/templates/error.html | 2 - skins/default/templates/identities.html | 4 +- skins/default/templates/importcontacts.html | 4 +- skins/default/templates/mail.html | 2 - skins/default/templates/managefolders.html | 7 +- skins/default/templates/message.html | 2 - skins/default/templates/messageerror.html | 2 - skins/default/templates/plugin.html | 2 +- skins/default/templates/settings.html | 4 +- 20 files changed, 342 insertions(+), 308 deletions(-) (limited to 'skins') diff --git a/skins/default/addressbook.css b/skins/default/addressbook.css index dc9e865b7..450b5bd82 100644 --- a/skins/default/addressbook.css +++ b/skins/default/addressbook.css @@ -84,7 +84,7 @@ position: absolute; top: 85px; right: 20px; - bottom: 30px; + bottom: 20px; left: 225px; } @@ -92,7 +92,7 @@ { position: absolute; top: 85px; - bottom: 30px; + bottom: 20px; left: 20px; width: 195px; border: 1px solid #999999; @@ -109,8 +109,8 @@ #addresslist { position: absolute; - top: 0px; - bottom: 0px; + top: 0; + bottom: 0; border: 1px solid #999999; background-color: #F9F9F9; overflow: hidden; @@ -121,30 +121,12 @@ border-top: 1px solid #999; } -#importbox -{ - position: absolute; - top: 85px; - bottom: 30px; - left: 20px; - right: 20px; - border: 1px solid #999999; - background-color: #F2F2F2; - padding-bottom: 4ex; - overflow: auto; -} - #addresslist { left: 0px; width: 280px; } -#importbox a -{ - color: blue; -} - #directorylist { list-style: none; diff --git a/skins/default/common.css b/skins/default/common.css index f3af5f1a6..9f386ff25 100644 --- a/skins/default/common.css +++ b/skins/default/common.css @@ -128,6 +128,15 @@ img /** common user interface objects */ +#mainscreen +{ + position: absolute; + top: 85px; + right: 20px; + bottom: 20px; + left: 20px; +} + #header { position: absolute; @@ -235,11 +244,9 @@ img border: 1px solid #CCCCCC; } -#pagecontent +.box { - position: absolute; - top: 95px; - left: 20px; + border: 1px solid #999; } .boxtitle @@ -250,6 +257,7 @@ img color: #333; font-size: 11px; font-weight: bold; + overflow: hidden; background: url(images/listheader.gif) top left repeat-x #CCC; } @@ -277,6 +285,18 @@ img overflow-x: hidden; } +.boxsubject +{ + position: absolute; + top: 0px; + left: 0px; + right: 0px; + overflow: hidden; + height: 22px; + border-bottom: 1px solid #999; + background: url(images/listheader.gif) top left repeat-x #CCC; +} + .boxfooter { position: absolute; @@ -318,6 +338,7 @@ img color: #444; font-size: 11px; text-shadow: white 1px 1px; + white-space: nowrap; } .pagenav a.button, @@ -728,3 +749,9 @@ ul.toolbarmenu li.separator_above { color: #999; } + +font.bold +{ + font-weight: bold; +} + \ No newline at end of file diff --git a/skins/default/functions.js b/skins/default/functions.js index b1ee9b088..3a97448ac 100644 --- a/skins/default/functions.js +++ b/skins/default/functions.js @@ -41,7 +41,8 @@ function rcmail_show_header_form(id) var div = document.getElementById('compose-div'), headers_div = document.getElementById('compose-headers-div'); row.style.display = (document.all && !window.opera) ? 'block' : 'table-row'; - div.style.top = parseInt(headers_div.offsetHeight, 10) + 'px'; + div.style.top = (parseInt(headers_div.offsetHeight, 10) + 1) + 'px'; + rcmail_resize_compose_body(); } return false; @@ -71,7 +72,8 @@ function rcmail_hide_header_form(id) var div = document.getElementById('compose-div'), headers_div = document.getElementById('compose-headers-div'); row.style.display = 'none'; - div.style.top = parseInt(headers_div.offsetHeight, 10) + 'px'; + div.style.top = (parseInt(headers_div.offsetHeight, 10) + 1) + 'px'; + rcmail_resize_compose_body(); } return false; @@ -115,8 +117,30 @@ function rcmail_init_compose_form() }; } - // fix editor position on some browsers - div.style.top = parseInt(headers_div.offsetHeight, 10) + 'px'; + $(window).resize(function() { + rcmail_resize_compose_body(); + }); + + $('#compose-container').resize(function() { + rcmail_resize_compose_body(); + }); + + div.style.top = (parseInt(headers_div.offsetHeight, 10) + 1) + 'px'; + $(window).resize(); +} + +function rcmail_resize_compose_body(elem) +{ + var ed, div = $('#compose-div'), w = div.width(), h = div.height(); + w = w-4; + h = h-25; + + $('#compose-body').width(w-(bw.ie || bw.opera || bw.safari ? 2 : 0)+'px').height(h+'px'); + + if (window.tinyMCE && tinyMCE.get('compose-body')) { + $('#compose-body_tbl').width((w+4)+'px').height(''); + $('#compose-body_ifr').width((w+2)+'px').height((h-54)+'px'); + } } /** @@ -132,7 +156,9 @@ function rcube_mail_ui() listmenu:'listmenu', dragmessagemenu:'dragmessagemenu', groupmenu:'groupoptionsmenu', - mailboxmenu:'mailboxoptionsmenu' + mailboxmenu:'mailboxoptionsmenu', + composemenu:'composeoptionsmenu', + uploadform:'attachment-form' }; var obj; @@ -179,6 +205,20 @@ show_mailboxmenu: function(show) this.show_popupmenu(this.mailboxmenu, 'mboxactionslink', show, true); }, +show_composemenu: function(show) +{ + this.show_popupmenu(this.composemenu, 'composemenulink', show, true); +}, + +show_uploadform: function(show) +{ + if (typeof show == 'object') // called as event handler + show = false; + if (!show) + $('input[type=file]').val(''); + this.show_popupmenu(this.uploadform, 'uploadformlink', show, true); +}, + show_searchmenu: function(show) { if (typeof show == 'undefined') @@ -297,26 +337,35 @@ body_mouseup: function(evt, p) this.show_groupmenu(false); else if (this.mailboxmenu && this.mailboxmenu.is(':visible') && target != rcube_find_object('mboxactionslink')) this.show_mailboxmenu(false); - else if (this.listmenu && this.listmenu.is(':visible') && target != rcube_find_object('listmenulink')) { - var menu = rcube_find_object('listmenu'); - while (target.parentNode) { - if (target.parentNode == menu) - return; - target = target.parentNode; - } + else if (this.composemenu && this.composemenu.is(':visible') && target != rcube_find_object('composemenulink') + && !this.target_overlaps(target, this.popupmenus.composemenu)) { + this.show_composemenu(false); + } + else if (this.uploadform && this.uploadform.is(':visible') && target != rcube_find_object('uploadformlink') + && !this.target_overlaps(target, this.popupmenus.uploadform)) { + this.show_uploadform(false); + } + else if (this.listmenu && this.listmenu.is(':visible') && target != rcube_find_object('listmenulink') + && !this.target_overlaps(target, this.popupmenus.listmenu)) { this.show_listmenu(false); } - else if (this.searchmenu && this.searchmenu.is(':visible') && target != rcube_find_object('searchmod')) { - var menu = rcube_find_object('searchmenu'); - while (target.parentNode) { - if (target.parentNode == menu) - return; - target = target.parentNode; - } + else if (this.searchmenu && this.searchmenu.is(':visible') && target != rcube_find_object('searchmod') + && !this.target_overlaps(target, this.popupmenus.searchmenu)) { this.show_searchmenu(false); } }, +target_overlaps: function (target, elementid) +{ + var element = rcube_find_object(elementid); + while (target.parentNode) { + if (target.parentNode == element) + return true; + target = target.parentNode; + } + return false; +}, + body_keypress: function(evt, p) { if (rcube_event.get_keycode(evt) == 27) { @@ -386,6 +435,7 @@ function rcube_init_mail_ui() if (rcmail.env.task == 'mail') { rcmail.addEventListener('menu-open', 'open_listmenu', rcmail_ui); rcmail.addEventListener('menu-save', 'save_listmenu', rcmail_ui); + rcmail.addEventListener('aftersend-attachment', 'show_uploadform', rcmail_ui); rcmail.gui_object('message_dragmenu', 'dragmessagemenu'); } } diff --git a/skins/default/ie6hacks.css b/skins/default/ie6hacks.css index f1d74e6ce..aaba2f2a6 100644 --- a/skins/default/ie6hacks.css +++ b/skins/default/ie6hacks.css @@ -55,6 +55,11 @@ img background-image: url(images/icons/groupactions.gif); } +.pagenav +{ + width: 200px; +} + .pagenav a.button, .pagenav a.buttonPas { @@ -107,3 +112,8 @@ ul.toolbarmenu li.separator_below top: 21px; height: expression((parseInt(this.parentNode.offsetHeight)-24-parseInt(this.style.top?this.style.top:21))+'px'); } + +#directorylistbox +{ + height: expression((parseInt(document.documentElement.clientHeight)-105)+'px'); +} diff --git a/skins/default/iehacks.css b/skins/default/iehacks.css index d070ea328..7f6529921 100644 --- a/skins/default/iehacks.css +++ b/skins/default/iehacks.css @@ -32,9 +32,15 @@ input, textarea width: expression((parseInt(document.documentElement.clientWidth)-240)+'px'); } +#mainscreen +{ + width: expression((parseInt(document.documentElement.clientWidth)-40)+'px'); + height: expression((parseInt(document.documentElement.clientHeight)-105)+'px'); +} + #folder-manager { - height: expression((parseInt(document.documentElement.clientHeight)-235)+'px'); + height: expression((parseInt(this.parentNode.offsetHeight)-105)+'px'); } #messagetoolbar @@ -71,23 +77,20 @@ input, textarea z-index: 250; } -#mainscreen -{ - width: expression((parseInt(document.documentElement.clientWidth)-40)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-96)+'px'); -} - -#directorylistbox -{ - height: expression((parseInt(document.documentElement.clientHeight)-115)+'px'); -} - #addresslist, #sectionslist, #identities-list, #mailleftcontainer, +#mailrightcontainer, +#compose-container, +#compose-attachments, #mailcontframe, -#identity-details +#mailboxlist-container, +#mailrightcontent, +#messageframe, +#identity-details, +#contacts-box, +#prefs-box { height: expression(parseInt(this.parentNode.offsetHeight)+'px'); } @@ -95,7 +98,6 @@ input, textarea #mailrightcontainer { width: expression((parseInt(this.parentNode.offsetWidth)-170)+'px'); - height: expression(parseInt(this.parentNode.offsetHeight)+'px'); } #messagepartcontainer @@ -106,18 +108,17 @@ input, textarea #mailrightcontent { - height: expression((parseInt(this.parentNode.offsetHeight)-20)+'px'); width: 100%; } -#partheader +#compose-div { - width: expression((parseInt(document.documentElement.clientWidth)-240)+'px'); + height: expression((parseInt(this.parentNode.offsetHeight)-1-parseInt(document.getElementById('compose-headers').offsetHeight))+'px'); } -#mailboxlist-container +#partheader { - height: expression((parseInt(this.parentNode.offsetHeight)-20)+'px'); + width: expression((parseInt(document.documentElement.clientWidth)-240)+'px'); } #subscription-table @@ -137,7 +138,7 @@ input, textarea { height: 18px; } - + #messagelist tbody tr.unroot td.subject { text-decoration: underline; @@ -146,7 +147,6 @@ input, textarea #messageframe { width: expression((parseInt(this.parentNode.offsetWidth)-180)+'px'); - height: expression((parseInt(this.parentNode.offsetHeight)-20)+'px'); overflow: hidden; } @@ -161,13 +161,6 @@ body.iframe width: expression((parseInt(document.documentElement.clientWidth))+'px'); } -#compose-container -{ - width: expression((parseInt(document.documentElement.clientWidth)-230)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-120)+'px'); -} - -#compose-body, #compose-headers td textarea, #compose-headers td input { @@ -184,19 +177,7 @@ div.message-part div.pre #addressscreen { width: expression((parseInt(document.documentElement.clientWidth)-245)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-115)+'px'); -} - -#prefsscreen -{ - width: expression((parseInt(document.documentElement.clientWidth)-40)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-125)+'px'); -} - -#importbox -{ - width: expression((parseInt(document.documentElement.clientWidth)-40)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-140)+'px'); + height: expression((parseInt(document.documentElement.clientHeight)-105)+'px'); } #contacts-table @@ -207,7 +188,6 @@ div.message-part div.pre #contacts-box, #prefs-box { - height: expression(parseInt(this.parentNode.offsetHeight)+'px'); width: expression((parseInt(this.parentNode.offsetWidth)-555)+'px'); } diff --git a/skins/default/mail.css b/skins/default/mail.css index 8534e17df..f78d98296 100644 --- a/skins/default/mail.css +++ b/skins/default/mail.css @@ -246,29 +246,6 @@ font-size: 11px; } -td.formlinks a, -td.formlinks a:visited -{ - color: #999999; - font-size: 11px; - text-decoration: none; -} - -td.formlinks a, -td.formlinks a:visited -{ - color: #CC0000; -} - -#mainscreen -{ - position: absolute; - top: 85px; - right: 20px; - bottom: 30px; - left: 20px; -} - #mailleftcontainer { position: absolute; @@ -515,7 +492,7 @@ td.formlinks a:visited position: relative; white-space: nowrap; left: 4px; - height: 22px; + line-height: 22px; width: auto; min-width: 300px; } @@ -525,7 +502,6 @@ td.formlinks a:visited { display: block; float: left; - margin-top: 4px; font-size: 11px; } @@ -542,6 +518,7 @@ td.formlinks a:visited width: 15px; height: 15px; padding: 0; + margin-top: 4px; margin-right: 2px; overflow: hidden; background: url(images/mail_footer.png) 0 0 no-repeat transparent; @@ -1115,35 +1092,38 @@ div.message-htmlpart div.rcmBody /** message compose styles */ -#compose-toolbar -{ - white-space: nowrap; -} - #compose-container { position: absolute; - top: 90px; - left: 205px; - right: 25px; - bottom: 30px; - margin: 0px; + top: 0; + left: 185px; + right: 0; + bottom: 0; + margin: 0; } -#spellcheck-control +#compose-div { - text-align: right; - padding-top: 3px; + position: absolute; + top: 85px; + bottom: 0; + margin: 0; + width: 100%; + border: 1px solid #999; } -#compose-div +#compose-body { position: absolute; - top: 130px; - bottom: 30px; - width: 100%; - vertical-align: top; - padding-top: 2px; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: 0; + font-size: 9pt; + border: none; + font-family: monospace; + resize: none; } #compose-headers @@ -1151,6 +1131,12 @@ div.message-htmlpart div.rcmBody width: 100%; } +#compose-headers td.editfield +{ + padding-right: 5px; + min-width: 200px; +} + #compose-headers td.top { vertical-align: top; @@ -1160,23 +1146,28 @@ div.message-htmlpart div.rcmBody #compose-subject td.title { width: 80px !important; - color: #666; font-size: 11px; font-weight: bold; padding-right: 10px; white-space: nowrap; } -#compose-body, #compose-headers td textarea, #compose-headers td input +{ + resize: none; + width: 100%; + border: 1px solid #999; +} + +#compose-headers td select { width: 100%; } #compose-headers td textarea { - height: 38px; + height: 32px; } #compose-cc, @@ -1186,28 +1177,60 @@ div.message-htmlpart div.rcmBody display: none; } -#compose-body +#formlinks { - min-height: 100px; - height: 100%; - font-size: 9pt; - font-family: monospace; + text-align: right; + white-space: nowrap; + width: 1%; + padding-left: 5px; +} + +#formlinks a, +#formlinks a:visited +{ + color: #999999; + font-size: 11px; + text-decoration: none; +} + +#formlinks a, +#formlinks a:visited +{ + color: #CC0000; +} + +#compose-editorfooter +{ + position: absolute; + right: 5px; + bottom: 0; + text-align: right; + line-height: 22px; +} + +#compose-buttons +{ + position: absolute; + left: 40px; + top: 1px; } #compose-attachments { position: absolute; - top: 100px; - left: 20px; + top: 0; + left: 0; + bottom: 0; width: 175px; + border: 1px solid #999; + background-color: #F9F9F9; } #compose-attachments ul { margin: 0px; padding: 0px; - border: 1px solid #CCCCCC; - background-color: #F9F9F9; + background-color: #FFF; list-style-image: none; list-style-type: none; } @@ -1230,16 +1253,6 @@ div.message-htmlpart div.rcmBody vertical-align: middle; } -#attachment-title -{ - color: #666666; - font-weight: bold; - font-size: 11px; - background: url(images/icons/attachment.png) top left no-repeat; - padding: 0px 0px 3px 18px; - margin-left: 3px; -} - #attachment-form { padding: 6px; @@ -1255,26 +1268,6 @@ 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; @@ -1306,11 +1299,6 @@ td.hide-headers color: #333; } -font.bold -{ - font-weight: bold; -} - #listmenu { padding: 6px; diff --git a/skins/default/settings.css b/skins/default/settings.css index 7c2f8b3e4..de05c70bf 100644 --- a/skins/default/settings.css +++ b/skins/default/settings.css @@ -53,15 +53,10 @@ span.tablink-selected a #folder-manager { position: absolute; - top: 95px; - left: 20px; - overflow: auto; -} - -#folder-manager -{ width: 600px; - bottom: 140px; + top: 0; + left: 0; + bottom: 105px; overflow: auto; border: 1px solid #999999; } @@ -195,16 +190,9 @@ input.disabled { position: absolute; width: 600px; - height: 120px; - left: 20px; - bottom: 25px; -} - -div.settingsbox -{ - width: 600px; - margin-top: 20px; - border: 1px solid #999999; + height: 95px; + left: 0; + bottom: 0; } fieldset @@ -219,22 +207,13 @@ legend color: #999999; } -#prefsscreen -{ - position: absolute; - top: 95px; - right: 20px; - bottom: 30px; - left: 20px; -} - #identities-list, #sectionslist { position: absolute; - top: 0px; - left: 0px; - bottom: 0px; + top: 0; + left: 0; + bottom: 0; border: 1px solid #999999; background-color: #F9F9F9; overflow: hidden; @@ -254,9 +233,9 @@ legend #prefs-box { position: absolute; - top: 0px; - right: 0px; - bottom: 0px; + top: 0; + right: 0; + bottom: 0; border: 1px solid #999999; overflow: hidden; } diff --git a/skins/default/splitter.js b/skins/default/splitter.js index af66575b4..2a16b0b6f 100644 --- a/skins/default/splitter.js +++ b/skins/default/splitter.js @@ -82,6 +82,8 @@ function rcube_splitter(attrib) this.p2.style.width = (new_width > 0 ? new_width : 0) + 'px'; } } + $(this.p2).resize(); + $(this.p1).resize(); }; /** diff --git a/skins/default/templates/addressbook.html b/skins/default/templates/addressbook.html index aa3f288e7..6c3d3c260 100644 --- a/skins/default/templates/addressbook.html +++ b/skins/default/templates/addressbook.html @@ -82,7 +82,5 @@ -
- diff --git a/skins/default/templates/compose.html b/skins/default/templates/compose.html index c413988c6..96f771f8f 100644 --- a/skins/default/templates/compose.html +++ b/skins/default/templates/compose.html @@ -5,8 +5,15 @@ + + - + @@ -14,89 +21,117 @@
- - -
- - - - - - - -
+ + + + + +
+
+ +
+
+
+ +
+
+ +
+
+ + +
- - +
- - + + + - - + + - - + + - - + + - - - - - - - - - - - - - -
+ +
+ +
- + + + + +
- + + + + +
-
-
- - - - - -
-
-
+ + + + + + + + + + + + +
- - - - - - -
- - - - -
+
+ +
+
+ + + + + + +
-
-
- -

+
+ +
+ + + + + + + + + + +
diff --git a/skins/default/templates/editidentity.html b/skins/default/templates/editidentity.html index 895859ce6..576a0d816 100644 --- a/skins/default/templates/editidentity.html +++ b/skins/default/templates/editidentity.html @@ -19,7 +19,7 @@ -
+
@@ -51,7 +51,5 @@
-
- diff --git a/skins/default/templates/error.html b/skins/default/templates/error.html index f21c684ce..36862ce38 100644 --- a/skins/default/templates/error.html +++ b/skins/default/templates/error.html @@ -12,7 +12,5 @@ $__page_content
-
- diff --git a/skins/default/templates/identities.html b/skins/default/templates/identities.html index aef8dceb4..f40f394fc 100644 --- a/skins/default/templates/identities.html +++ b/skins/default/templates/identities.html @@ -19,7 +19,7 @@ -
+
@@ -44,7 +44,5 @@
-
- diff --git a/skins/default/templates/importcontacts.html b/skins/default/templates/importcontacts.html index 08e5afe16..422b70ffb 100644 --- a/skins/default/templates/importcontacts.html +++ b/skins/default/templates/importcontacts.html @@ -9,7 +9,7 @@ -
+
@@ -22,7 +22,5 @@
-
- diff --git a/skins/default/templates/mail.html b/skins/default/templates/mail.html index ae3dac1d1..9b725751e 100644 --- a/skins/default/templates/mail.html +++ b/skins/default/templates/mail.html @@ -230,7 +230,5 @@
-
- diff --git a/skins/default/templates/managefolders.html b/skins/default/templates/managefolders.html index a61904b2f..164d56f54 100644 --- a/skins/default/templates/managefolders.html +++ b/skins/default/templates/managefolders.html @@ -13,6 +13,8 @@
+
+
-
-
+
@@ -36,7 +37,5 @@ -
- diff --git a/skins/default/templates/message.html b/skins/default/templates/message.html index c154dc434..419241af5 100644 --- a/skins/default/templates/message.html +++ b/skins/default/templates/message.html @@ -79,7 +79,5 @@
-
- diff --git a/skins/default/templates/messageerror.html b/skins/default/templates/messageerror.html index 26df8ba15..3712217a3 100644 --- a/skins/default/templates/messageerror.html +++ b/skins/default/templates/messageerror.html @@ -72,8 +72,6 @@
-
- diff --git a/skins/default/templates/plugin.html b/skins/default/templates/plugin.html index 03f020307..cec701301 100644 --- a/skins/default/templates/plugin.html +++ b/skins/default/templates/plugin.html @@ -13,7 +13,7 @@ -
+
diff --git a/skins/default/templates/settings.html b/skins/default/templates/settings.html index 2e00635c8..0cd623f75 100644 --- a/skins/default/templates/settings.html +++ b/skins/default/templates/settings.html @@ -20,7 +20,7 @@ -
+
@@ -37,7 +37,5 @@
-
- -- cgit v1.2.3