From af276f21e5364eb65a56b64c3455bc284ff1e2f2 Mon Sep 17 00:00:00 2001 From: Aleksander Machniak Date: Tue, 4 Sep 2012 09:32:24 +0200 Subject: Add full headers view in message preview window (#1488538) Fix message display page issues - unified with message preview (#1488590, #1488642) --- CHANGELOG | 2 + program/steps/mail/func.inc | 9 +++- skins/larry/ie7hacks.css | 6 +-- skins/larry/iehacks.css | 2 +- skins/larry/images/contactpic_32px.png | Bin 4883 -> 3422 bytes skins/larry/images/contactpic_48px.png | Bin 0 -> 3812 bytes skins/larry/mail.css | 78 ++++++++++++++---------------- skins/larry/svggradients.css | 2 +- skins/larry/templates/message.html | 61 ++++++++++++++--------- skins/larry/templates/messageerror.html | 10 ++-- skins/larry/templates/messagepreview.html | 5 +- skins/larry/ui.js | 34 +++++++++---- 12 files changed, 120 insertions(+), 89 deletions(-) create mode 100644 skins/larry/images/contactpic_48px.png diff --git a/CHANGELOG b/CHANGELOG index 8e9dcb3c7..3a14694c9 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,6 +1,8 @@ CHANGELOG Roundcube Webmail =========================== +- Add full headers view in message preview window (#1488538) +- Fix message display page issues - unified with message preview (#1488590, #1488642) - Fix identity selection on reply (#1488101) - Add option to enable HTML editor on forwarding (#1488517) - Add option to not include original message on reply, rename option top_posting to reply_mode (#1485149) diff --git a/program/steps/mail/func.inc b/program/steps/mail/func.inc index 7f0b4db5b..6f451e14f 100644 --- a/program/steps/mail/func.inc +++ b/program/steps/mail/func.inc @@ -1053,12 +1053,17 @@ function rcmail_message_full_headers($attrib, $headers=NULL) global $OUTPUT; $html = html::div(array('id' => "all-headers", 'class' => "all", 'style' => 'display:none'), html::div(array('id' => 'headers-source'), '')); - $html .= html::div(array('class' => "more-headers show-headers", 'onclick' => "return ".JS_OBJECT_NAME.".command('show-headers','',this)"), ''); + + if (!get_boolean($attrib['no-switch'])) { + $html .= html::div(array('class' => "more-headers show-headers", 'onclick' => "return ".JS_OBJECT_NAME.".command('show-headers','',this)"), ''); + } + + unset($attrib['no-switch']); $OUTPUT->add_gui_object('all_headers_row', 'all-headers'); $OUTPUT->add_gui_object('all_headers_box', 'headers-source'); - return html::div($attrib, $html); + return count($attrib) > 1 ? html::div($attrib, $html) : $html; } diff --git a/skins/larry/ie7hacks.css b/skins/larry/ie7hacks.css index 024c35bb2..935a504fe 100644 --- a/skins/larry/ie7hacks.css +++ b/skins/larry/ie7hacks.css @@ -29,7 +29,7 @@ a.deletebutton, .boxfooter .listbutton .inner, .attachmentslist li a.delete, .attachmentslist li a.cancelupload, -#messagepreviewheader .iconlink { +#messageheader .iconlink { /* workaround for text-indent which also offsets the background image */ text-indent: 0; font-size: 0; @@ -45,7 +45,7 @@ a.deletebutton, .pagenav a.button, .pagenav a.button span.inner, -#messagepreviewheader .iconlink, +#messageheader .iconlink, #uploadform a.iconlink { display: inline; } @@ -67,7 +67,7 @@ a.deletebutton, text-align: left; } -#messagepreviewheader .iconlink { +#messageheader .iconlink { color: #fff; height: 14px; } diff --git a/skins/larry/iehacks.css b/skins/larry/iehacks.css index 288202111..bba93dc33 100644 --- a/skins/larry/iehacks.css +++ b/skins/larry/iehacks.css @@ -143,7 +143,7 @@ ul.toolbarmenu li a.active:hover, filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#005d76', endColorstr='#004558', GradientType=0); } -#messageheader, #partheader, #composeheaders { +#partheader, #composeheaders { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e9e9e9', GradientType=0); } diff --git a/skins/larry/images/contactpic_32px.png b/skins/larry/images/contactpic_32px.png index 276f1974f..25a81418d 100644 Binary files a/skins/larry/images/contactpic_32px.png and b/skins/larry/images/contactpic_32px.png differ diff --git a/skins/larry/images/contactpic_48px.png b/skins/larry/images/contactpic_48px.png new file mode 100644 index 000000000..9cd3bceaf Binary files /dev/null and b/skins/larry/images/contactpic_48px.png differ diff --git a/skins/larry/mail.css b/skins/larry/mail.css index 4fff24307..d2ff11808 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -38,10 +38,6 @@ bottom: 28px; } -#mailview-top.fullheight { - border-radius: 4px 4px 0 0; -} - #mailview-bottom { position: absolute; left: 0; @@ -50,6 +46,10 @@ height: 26px; } +#mailview-top.fullheight { + border-radius: 4px 4px 0 0; +} + #folderlist-header { width: 100%; height: 12px; @@ -680,15 +680,14 @@ a.iconbutton.threadmode.selected { #messagecontent { position: absolute; - top: 140px; + top: 0; left: 0; width: 100%; - bottom: 0; + bottom: 28px; overflow: auto; border-radius: 4px 4px 0 0; } -#messageheader, #partheader, #composeheaders { position: relative; @@ -712,7 +711,7 @@ h2.subject { h3.subject { font-size: 14px; - margin: 0 8em 0 0; + margin: 0 13em 0 0; padding: 8px 8px 4px 8px; white-space: nowrap; overflow: hidden; @@ -787,6 +786,7 @@ h3.subject { background: -ms-linear-gradient(left, #fbfbfb 0, #e9e9e9 100%); background: linear-gradient(left, #fbfbfb 0, #e9e9e9 100%); border-right: 1px solid #dfdfdf; + border-radius: 3px 0 0 0; /* for Opera */ } #previewheaderstoggle .iconlink { @@ -801,28 +801,27 @@ h3.subject { #previewheaderstoggle.remove .iconlink { top: auto; - bottom: 5px; + bottom: 15px; background-position: -5px -242px; } -div.more-headers { - cursor: pointer; - height: 10px; - background: url(images/buttons.png) center -1619px no-repeat; +#previewheaderstoggle .iconlink.allheaders { + display: none; } -div.hide-headers { - background-position: center -1629px; +#previewheaderstoggle.remove .iconlink.allheaders { + top: auto; + bottom: 2px; + display: inline-block; + background-position: -27px -242px; } #all-headers { position: relative; - margin: 0 10px; + margin: 2px 0; padding: 0; height: 180px; - border: 1px solid #bbb; - border-radius: 4px; - background: #fff; + background-color: #f0f0f0; } #headers-source { @@ -832,25 +831,30 @@ div.hide-headers { left: 0; right: 0; bottom: 0; - padding: 2px 5px; + padding: 0; overflow: auto; text-align: left; - color: #333; + color: #666; } -#messagepreviewheader { +#messageheader { position: relative; height: auto; margin: 0 8px 0 0; - padding: 0 0 6px 72px; + padding: 0 0 0 72px; border-bottom: 2px solid #f0f0f0; } -#messagepreviewheader h3.subject { +#messagecontent #messageheader { + padding: 0 0 0 90px; + min-height: 68px; +} + +#messageheader h3.subject { padding: 8px 8px 2px 0; } -#messagepreviewheader #contactphoto { +#messageheader #contactphoto { display: block; position: absolute; top: 11px; @@ -862,45 +866,35 @@ div.hide-headers { border-radius: 3px; } -#messagepreviewheader #contactphoto img { +#messageheader #contactphoto img { width: 32px; height: auto; border-radius: 3px; } -#messageheader #contactphoto { - display: block; - position: absolute; - top: 40px; - right: 10px; +#messagecontent #messageheader #contactphoto { + top: 11px; + left: 31px; width: 48px; height: 48px; - overflow: hidden; + background: url(images/contactpic_48px.png) center center no-repeat #fff; border-radius: 4px; } -#messageheader #contactphoto img { +#messagecontent #messageheader #contactphoto img { width: 48px; height: auto; border-radius: 4px; } -#messagepreviewheader #countcontrols, #messageheader #countcontrols { position: absolute; top: 8px; - right: 8px; - width: 20em; + right: 0; text-align: right; white-space: nowrap; } -#messageheader .pagenav .countdisplay { - min-width: 0; - padding-right: 0.5em; - white-space: nowrap; -} - #messagecontent .leftcol, #messagepreview .leftcol { margin-right: 252px; diff --git a/skins/larry/svggradients.css b/skins/larry/svggradients.css index 143fb375f..4f1dd8a05 100644 --- a/skins/larry/svggradients.css +++ b/skins/larry/svggradients.css @@ -133,7 +133,7 @@ ul.toolbarmenu li a.active:hover, background-image: url(svggradient.php?c=005d76;004558); } -#messageheader, #partheader, #composeheaders { +#partheader, #composeheaders { background-image: url(svggradient.php?c=ffffff;e9e9e9); } diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html index 1becd711a..89b7bd808 100644 --- a/skins/larry/templates/message.html +++ b/skins/larry/templates/message.html @@ -24,20 +24,38 @@
-
- -
+
+ +
- + + +
+ +
+ +
+

+ + -
+
-
-
-

- - + + + + + + + + + + +
+ + + -
-
+
-
-
- -
-
- - -
+
+
+ +
+
+ + +
-
+
-
-
diff --git a/skins/larry/templates/messageerror.html b/skins/larry/templates/messageerror.html index 70181f174..2f5243200 100644 --- a/skins/larry/templates/messageerror.html +++ b/skins/larry/templates/messageerror.html @@ -27,8 +27,6 @@
-
-
@@ -36,11 +34,11 @@
-
+
-
- -
+
+ +
diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html index b53683ec1..74c414b0d 100644 --- a/skins/larry/templates/messagepreview.html +++ b/skins/larry/templates/messagepreview.html @@ -6,10 +6,10 @@ -
+

- +
@@ -25,6 +25,7 @@
+