<roundcube:object name="pagetitle" />

@@ -108,10 +108,11 @@ -

diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html index e99f2066a..92bb3589d 100644 --- a/skins/larry/templates/message.html +++ b/skins/larry/templates/message.html @@ -4,7 +4,7 @@ <roundcube:object name="pagetitle" /> - + @@ -12,14 +12,18 @@ + +

@@ -32,6 +36,10 @@

+ + +

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

-- cgit v1.2.3 From 3bc6ae04ae11a2e84a457a80a3892d6072bcc334 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Wed, 17 Oct 2012 23:32:08 +0200 Subject: Adapt classic skin to new extwin feature --- skins/classic/common.css | 5 +++++ skins/classic/includes/messagetoolbar.html | 6 ++++-- skins/classic/mail.css | 19 ++++++++++++++++++- skins/classic/templates/compose.html | 10 +++++++++- skins/classic/templates/message.html | 7 +++++++ skins/classic/templates/messagepreview.html | 2 +- skins/larry/mail.css | 5 +++++ 7 files changed, 49 insertions(+), 5 deletions(-) (limited to 'skins') diff --git a/skins/classic/common.css b/skins/classic/common.css index 735a73614..8f5daee2e 100644 --- a/skins/classic/common.css +++ b/skins/classic/common.css @@ -156,6 +156,11 @@ img left: 20px; } +.extwin #mainscreen +{ + top: 43px; +} + body > #logo { margin-left: 12px; diff --git a/skins/classic/includes/messagetoolbar.html b/skins/classic/includes/messagetoolbar.html index 302e95002..eebb55708 100644 --- a/skins/classic/includes/messagetoolbar.html +++ b/skins/classic/includes/messagetoolbar.html @@ -1,10 +1,12 @@

- + + + - + diff --git a/skins/classic/mail.css b/skins/classic/mail.css index 4b54f22de..08d1266f1 100644 --- a/skins/classic/mail.css +++ b/skins/classic/mail.css @@ -13,6 +13,12 @@ /* border: 1px solid #cccccc; */ } +.extwin #messagetoolbar +{ + top: 5px; + left: 20px; +} + #messagetoolbar a, #messagetoolbar select { @@ -1041,6 +1047,11 @@ td span.branch div.l3 z-index: 1; } +.extwin #messageframe +{ + left: 0; +} + div.messageheaderbox { margin: -14px 8px 0px 8px; @@ -1245,7 +1256,7 @@ div.message-htmlpart div.rcmBody color: #333333; } -#messageviewlink +#openextwinlink { position: absolute; top: 8px; @@ -1255,6 +1266,12 @@ div.message-htmlpart div.rcmBody border: 0; } +#compose-headers #openextwinlink +{ + top: 4px; + right: 2px; +} + #full-headers { color: #666666; diff --git a/skins/classic/templates/compose.html b/skins/classic/templates/compose.html index 1e1403e18..985e62e86 100644 --- a/skins/classic/templates/compose.html +++ b/skins/classic/templates/compose.html @@ -15,15 +15,22 @@ } + + + - +

+ + + + @@ -64,6 +71,7 @@ + diff --git a/skins/classic/templates/message.html b/skins/classic/templates/message.html index c03376e4a..9b7cb9f1c 100644 --- a/skins/classic/templates/message.html +++ b/skins/classic/templates/message.html @@ -12,13 +12,19 @@ } + + + + +

@@ -28,6 +34,7 @@

diff --git a/skins/classic/templates/messagepreview.html b/skins/classic/templates/messagepreview.html index a606311e1..78b2306f6 100644 --- a/skins/classic/templates/messagepreview.html +++ b/skins/classic/templates/messagepreview.html @@ -7,7 +7,7 @@

- + diff --git a/skins/larry/mail.css b/skins/larry/mail.css index b819e777b..3ec325b6f 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -1174,6 +1174,11 @@ div.message-part blockquote blockquote blockquote { z-index: 100; } +#composebuttons a.button.extwin { + padding: 2px 3px; + margin-top: -3px; +} + .compose-headers { width: 99%; margin: 4px 0; -- 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') 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 @@

- -

+ @@ -109,43 +115,33 @@

- - -

- -

+ - - + + - -

- - - - - - - - - - - - - - - - - - - - -

+ + + + + + + + + + + + + + + +

@@ -155,11 +151,18 @@

- +

@@ -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 From eb514742ecf9ca2fb5331d6ccbe2f1a13accd438 Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Wed, 24 Oct 2012 18:14:31 +0200 Subject: Show compose options if they were visible in opener --- program/js/app.js | 2 +- skins/larry/ui.js | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) (limited to 'skins') diff --git a/program/js/app.js b/program/js/app.js index b73148219..b80422983 100644 --- a/program/js/app.js +++ b/program/js/app.js @@ -3039,7 +3039,7 @@ function rcube_webmail() // close compose step in opener if (window.opener && opener.rcmail && opener.rcmail.env.action == 'compose') { - opener.history.back(); + setTimeout(function(){ opener.history.back(); }, 100); } // configure parallel autocompletion diff --git a/skins/larry/ui.js b/skins/larry/ui.js index 12dae3118..da4f2300e 100644 --- a/skins/larry/ui.js +++ b/skins/larry/ui.js @@ -96,6 +96,10 @@ function rcube_mail_ui() return false; }).css('cursor', 'pointer'); + // toggle compose options if opened in new window and they were visible before + if (window.opener && opener.rcmail && opener.rcmail.env.action == 'compose' && $('#composeoptionstoggle', opener.document).hasClass('remove')) + $('#composeoptionstoggle').click(); + new rcube_splitter({ id:'composesplitterv', p1:'#composeview-left', p2:'#composeview-right', orientation:'v', relative:true, start:248, min:170, size:12, render:layout_composeview }).init(); } -- cgit v1.2.3 From 9e2ff8ca95bac0b689342bcb79b27645ddaf59b5 Mon Sep 17 00:00:00 2001 From: Aleksander Machniak Date: Fri, 26 Oct 2012 10:16:53 +0200 Subject: Style improvements in compose screen --- skins/larry/mail.css | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) (limited to 'skins') diff --git a/skins/larry/mail.css b/skins/larry/mail.css index b95be00fc..6d350d714 100644 --- a/skins/larry/mail.css +++ b/skins/larry/mail.css @@ -51,7 +51,9 @@ left: 0; bottom: 0; width: 100%; - height: 26px; + height: 27px; + border-radius: 0 0 4px 4px; + border-top: none; } #folderlist-header { @@ -1145,24 +1147,19 @@ div.message-part blockquote blockquote blockquote { background-position: 6px -1627px; } - #compose-content { position: absolute; top: 42px; left: 0; width: 100%; bottom: 28px; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-radius: 4px 4px 0 0; + border-bottom: none; overflow: hidden; } #composeheaders { border-radius: 4px 4px 0 0; - -webkit-box-shadow: 0 2px 3px 0 #999; - -moz-box-shadow: 0 2px 3px 0 #999; - box-shadow: 0 2px 3px 0 #999; - border-bottom: 0; padding-left: 19px; } @@ -1262,6 +1259,10 @@ div.message-part blockquote blockquote blockquote { padding-right: 4px; } +.mozilla .composeoption input { + vertical-align: -3px; +} + #composeview-bottom { position: relative; width: 100%; @@ -1357,8 +1358,12 @@ div.message-part blockquote blockquote blockquote { border: 0 !important; } +.defaultSkin td.mceToolbar { + border: 0 !important; +} + .defaultSkin table.mceLayout tr.mceFirst td { - background: #dfdfdf; + background: #f0f0f0; } #composebody_toolbargroup { -- cgit v1.2.3