<roundcube:object name="pagetitle" />

+ + +

-- cgit v1.2.3 From edfe79a46fa31b766cc3b44799e682ddec1ac700 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Wed, 24 Oct 2012 13:13:43 +0200 Subject: Refactored compose UI according to discussions on the mailing list --- program/localization/de_CH/labels.inc | 3 +- program/localization/de_DE/labels.inc | 3 +- program/localization/en_US/labels.inc | 3 +- skins/larry/ie7hacks.css | 4 -- skins/larry/iehacks.css | 6 +- skins/larry/images/buttons.png | Bin 34940 -> 34993 bytes skins/larry/mail.css | 82 +++++++++++++----------- skins/larry/styles.css | 21 ++++++- skins/larry/svggradients.css | 2 +- skins/larry/templates/compose.html | 101 +++++++++++++++--------------- skins/larry/templates/message.html | 2 +- skins/larry/templates/messagepreview.html | 2 +- skins/larry/ui.js | 16 +++-- 13 files changed, 134 insertions(+), 111 deletions(-) (limited to 'skins/larry/templates/message.html') diff --git a/program/localization/de_CH/labels.inc b/program/localization/de_CH/labels.inc index c693805c5..f9f9531e8 100644 --- a/program/localization/de_CH/labels.inc +++ b/program/localization/de_CH/labels.inc @@ -169,8 +169,9 @@ $labels['msgtext'] = 'Ganze Nachricht'; $labels['openinextwin'] = 'In neuem Fenster öffnen'; $labels['emlsave'] = 'Herunterladen (.eml)'; $labels['editasnew'] = 'Als neue Nachricht öffnen'; -$labels['savemessage'] = 'Nachricht speichern'; +$labels['send'] = 'Senden'; $labels['sendmessage'] = 'Nachricht jetzt senden'; +$labels['savemessage'] = 'Nachricht speichern'; $labels['addattachment'] = 'Datei anfügen'; $labels['charset'] = 'Zeichensatz'; $labels['editortype'] = 'Editor-Typ'; diff --git a/program/localization/de_DE/labels.inc b/program/localization/de_DE/labels.inc index 18f4d7f1c..5c6303479 100644 --- a/program/localization/de_DE/labels.inc +++ b/program/localization/de_DE/labels.inc @@ -169,8 +169,9 @@ $labels['msgtext'] = 'Nachricht'; $labels['openinextwin'] = 'In neuem Fenster öffnen'; $labels['emlsave'] = 'Lokal speichern (.eml)'; $labels['editasnew'] = 'Als neue Nachricht öffnen'; -$labels['savemessage'] = 'Nachricht speichern'; +$labels['send'] = 'Senden'; $labels['sendmessage'] = 'Nachricht jetzt senden'; +$labels['savemessage'] = 'Nachricht speichern'; $labels['addattachment'] = 'Datei anfügen'; $labels['charset'] = 'Zeichensatz'; $labels['editortype'] = 'Editor Typ'; diff --git a/program/localization/en_US/labels.inc b/program/localization/en_US/labels.inc index fcf7fac19..2b1397f02 100644 --- a/program/localization/en_US/labels.inc +++ b/program/localization/en_US/labels.inc @@ -203,8 +203,9 @@ $labels['emlsave'] = 'Download (.eml)'; // message compose $labels['editasnew'] = 'Edit as new'; -$labels['savemessage'] = 'Save as draft'; +$labels['send'] = 'Send'; $labels['sendmessage'] = 'Send message'; +$labels['savemessage'] = 'Save as draft'; $labels['addattachment'] = 'Attach a file'; $labels['charset'] = 'Charset'; $labels['editortype'] = 'Editor type'; diff --git a/skins/larry/ie7hacks.css b/skins/larry/ie7hacks.css index 893ffdfef..f07d79a65 100644 --- a/skins/larry/ie7hacks.css +++ b/skins/larry/ie7hacks.css @@ -151,10 +151,6 @@ ul.toolbarmenu li label { bottom: 0; } -#composeoptionsbox { - padding-top: 2px; -} - #composeoptionstoggle { display: inline; top: 3px; diff --git a/skins/larry/iehacks.css b/skins/larry/iehacks.css index 93f483c11..83ea946fa 100644 --- a/skins/larry/iehacks.css +++ b/skins/larry/iehacks.css @@ -147,14 +147,10 @@ ul.toolbarmenu li a.active:hover, filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=0); } -#previewheaderstoggle { +.moreheaderstoggle { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#e9e9e9', GradientType=1); } -#composeoptionsbox { - border-top: 1px solid #999; -} - #messagelist tbody tr td span.branch div { float: left; height: 18px; diff --git a/skins/larry/images/buttons.png b/skins/larry/images/buttons.png index 0d3b5cc7a..c70a96088 100644 Binary files a/skins/larry/images/buttons.png and b/skins/larry/images/buttons.png differ diff --git a/skins/larry/mail.css b/skins/larry/mail.css index 3ec325b6f..b95be00fc 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -796,7 +796,7 @@ h3.subject { padding-right: 18px; } -#previewheaderstoggle { +.moreheaderstoggle { display: block; position: absolute; top: 0; @@ -815,7 +815,7 @@ h3.subject { border-radius: 3px 0 0 0; /* for Opera */ } -#previewheaderstoggle .iconlink { +.moreheaderstoggle .iconlink { display: inline-block; position: absolute; top: 8px; @@ -825,7 +825,7 @@ h3.subject { background: url(images/buttons.png) -27px -242px no-repeat; } -#previewheaderstoggle.remove .iconlink { +.moreheaderstoggle.remove .iconlink { top: auto; bottom: 5px; background-position: -5px -242px; @@ -842,11 +842,11 @@ div.more-headers { width: 12px; height: 10px; cursor: pointer; - background: url(images/buttons.png) center -1619px no-repeat; + background: url(images/buttons.png) center -1579px no-repeat; } div.hide-headers { - background-position: center -1629px; + background-position: center -1589px; } #all-headers { @@ -1163,12 +1163,13 @@ div.message-part blockquote blockquote blockquote { -moz-box-shadow: 0 2px 3px 0 #999; box-shadow: 0 2px 3px 0 #999; border-bottom: 0; + padding-left: 19px; } #composebuttons { position: absolute; - top: 8px; - right: 8px; + top: 6px; + right: 6px; width: auto; white-space: nowrap; z-index: 100; @@ -1176,21 +1177,21 @@ div.message-part blockquote blockquote blockquote { #composebuttons a.button.extwin { padding: 2px 3px; - margin-top: -3px; } .compose-headers { width: 99%; - margin: 4px 0; + margin-bottom: 2px; } .compose-headers td { - padding: 4px 4px 4px 8px; + padding: 2px 4px; } .compose-headers td.title { width: 11%; white-space: nowrap; + padding-left: 6px; } .compose-headers td.title label { @@ -1234,51 +1235,33 @@ div.message-part blockquote blockquote blockquote { display: none; } -#composeoptionsbox { - padding: 4px 8px 0 8px; - background: #d2d2d2; - border-bottom: 1px solid #e8e8e8; - -webkit-box-shadow: 0 2px 3px 0 #999; - -moz-box-shadow: 0 2px 3px 0 #999; - box-shadow: 0 2px 3px 0 #999; - white-space: nowrap; -} - #composeoptions { display: none; - padding: 2px 0; + padding: 2px 0 0 8px; white-space: normal; + border-top: 1px solid #dfdfdf; + box-shadow: inset 0 1px 0 0 #fff; + -o-box-shadow: inset 0 1px 0 0 #fff; + -webkit-box-shadow: inset 0 1px 0 0 #fff; + -moz-box-shadow: inset 0 1px 0 0 #fff; + } .composeoption { + color: #666; padding-right: 22px; white-space: nowrap; } #composeoptions .composeoption { display: inline-block; - padding: 4px 28px 4px 0; + padding: 4px 22px 4px 0; } #composeoptions .composeoption:last-child { padding-right: 4px; } -#composeoptionstoggle { - display: inline-block; - position: relative; - top: -1px; - left: 6px; - width: 20px; - height: 18px; - background: url(images/buttons.png) -3px -1640px no-repeat; - text-decoration: none; -} - -#composeoptionstoggle.enabled { - background-position: -28px -1640px; -} - #composeview-bottom { position: relative; width: 100%; @@ -1293,6 +1276,10 @@ div.message-part blockquote blockquote blockquote { bottom: 0; } +#composebodycontainer.buttons { + bottom: 42px; +} + #composebody { position: absolute; top: 1px; @@ -1302,15 +1289,22 @@ div.message-part blockquote blockquote blockquote { border: 0; border-radius: 0; padding: 8px 0 8px 8px; - box-shadow: none; resize: none; font-family: monospace; font-size: 9pt; outline: none; + box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2); + -moz-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2); + -webkit-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2); + -o-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.2); } #composebody:active, #composebody:focus { + box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9); + -moz-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9); + -webkit-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9); + -o-box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9); } #compose-attachments { @@ -1350,11 +1344,23 @@ div.message-part blockquote blockquote blockquote { -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); } +#composeview-bottom .formbuttons.floating { + position: absolute; + width: auto; + right: 260px; + z-index: 200; + padding-bottom: 8px; +} + .defaultSkin table.mceLayout, .defaultSkin table.mceLayout tr.mceLast td { border: 0 !important; } +.defaultSkin table.mceLayout tr.mceFirst td { + background: #dfdfdf; +} + #composebody_toolbargroup { border-bottom: 1px solid #ddd; } diff --git a/skins/larry/styles.css b/skins/larry/styles.css index be43668f6..9127fbe7c 100644 --- a/skins/larry/styles.css +++ b/skins/larry/styles.css @@ -1088,7 +1088,8 @@ body.iframe .boxtitle { z-index: 100; } -body.iframe .footerleft.floating { +body.iframe .footerleft.floating, +#composeview-bottom .formbuttons.floating { position: fixed; left: 0; bottom: 0; @@ -1099,7 +1100,8 @@ body.iframe .footerleft.floating { padding-bottom: 12px; } -body.iframe .footerleft.floating:before { +body.iframe .footerleft.floating:before, +#composeview-bottom .formbuttons.floating:before { content: " "; position: absolute; top: -6px; @@ -1480,7 +1482,7 @@ ul.proplist li { } .toolbar a.button.spellcheck.selected { - background-position: left -1580px; + background-position: left -1620px; color: #1978a1; } @@ -1500,6 +1502,19 @@ ul.proplist li { background-position: center -1054px; } +.toolbar a.button.send { + background-position: center -1660px; +} + +.toolbar a.button.savedraft { + background-position: center -1700px; +} + +.toolbar a.button.close { + background-position: 0 -1745px; +} + + a.menuselector { display: inline-block; border: 1px solid #ababab; diff --git a/skins/larry/svggradients.css b/skins/larry/svggradients.css index 5b3fedbfc..06c6f4732 100644 --- a/skins/larry/svggradients.css +++ b/skins/larry/svggradients.css @@ -137,7 +137,7 @@ ul.toolbarmenu li a.active:hover, background-image: url(svggradient.php?c=ffffff;f0f0f0); } -#previewheaderstoggle { +.moreheaderstoggle { background-image: url(svggradient.php?c=fbfbfb;e9e9e9&h=1); } diff --git a/skins/larry/templates/compose.html b/skins/larry/templates/compose.html index 33f4ba36b..2612685a9 100644 --- a/skins/larry/templates/compose.html +++ b/skins/larry/templates/compose.html @@ -9,11 +9,31 @@ -

+ +

@@ -38,25 +58,11 @@

- -

- +

@@ -172,8 +175,6 @@

diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html index 92bb3589d..f7e188f5f 100644 --- a/skins/larry/templates/message.html +++ b/skins/larry/templates/message.html @@ -42,7 +42,7 @@

- +

diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html index ae1a3acc8..9eb4d1e00 100644 --- a/skins/larry/templates/messagepreview.html +++ b/skins/larry/templates/messagepreview.html @@ -9,7 +9,7 @@

- +

diff --git a/skins/larry/ui.js b/skins/larry/ui.js index 42d5237ea..12dae3118 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -21,7 +21,6 @@ function rcube_mail_ui() dragmessagemenu: { sticky:1 }, groupmenu: { above:1 }, mailboxmenu: { above:1 }, - composeoptionsmenu: { editable:1, overlap:1 }, spellmenu: { callback: spellmenu }, // toggle: #1486823, #1486930 'attachment-form': { editable:1, above:1, toggle:!bw.ie&&!bw.linux }, @@ -90,8 +89,8 @@ function rcube_mail_ui() show_header_row(fields[f], true); } - $('#composeoptionstoggle').parent().click(function(){ - $('#composeoptionstoggle').toggleClass('enabled'); + $('#composeoptionstoggle').click(function(){ + $('#composeoptionstoggle').toggleClass('remove'); $('#composeoptions').toggle(); layout_composeview(); return false; @@ -354,9 +353,14 @@ function rcube_mail_ui() var body = $('#composebody'), form = $('#compose-content'), bottom = $('#composeview-bottom'), - w, h; + w, h, bh, ovflw, btns = 0, + minheight = 300, - bottom.css('height', (form.height() - bottom.position().top) + 'px'); + bh = (form.height() - bottom.position().top); + ovflw = minheight - bh; + btns = ovflw > -100 ? 0 : 40; + bottom.css('height', Math.max(minheight, bh) + 'px'); + form.css('overflow', ovflw > 0 ? 'auto' : 'hidden'); w = body.parent().width() - 5; h = body.parent().height() - 16; @@ -365,6 +369,8 @@ function rcube_mail_ui() $('#composebody_tbl').width((w+8)+'px').height('').css('margin-top', '1px'); $('#composebody_ifr').width((w+8)+'px').height((h-40)+'px'); $('#googie_edit_layer').height(h+'px'); +// $('#composebodycontainer')[(btns ? 'addClass' : 'removeClass')]('buttons'); +// $('#composeformbuttons')[(btns ? 'show' : 'hide')](); var abooks = $('#directorylist'); $('#compose-contacts .scroller').css('top', abooks.position().top + abooks.outerHeight()); -- cgit v1.2.3