Refactored compose UI according to discussions on the mailing list

13 files changed, 134 insertions, 111 deletions

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
--- a/skins/larry/images/buttons.png
+++ b/skins/larry/images/buttons.png
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 @@
 </head>
 <roundcube:if condition="env:extwin" /><body class="extwin"><roundcube:else /><body><roundcube:endif />
 
-<div class="minwidth">
 <roundcube:include file="/includes/header.html" />
 
 <div id="mainscreen">
 
+<!-- toolbar -->
+<div id="messagetoolbar" class="fullwidth">
+<div id="mailtoolbar" class="toolbar">
+	<roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="cancel" condition="!env:extwin" />
+	<roundcube:button command="close" type="link" class="button close disabled" classAct="button close" classSel="button close pressed" label="cancel" condition="env:extwin" />
+	<span class="spacer"></span>
+	<roundcube:button command="send" type="link" class="button send" classAct="button send" classSel="button send pressed" label="send" title="sendmessage" />
+	<roundcube:button command="savedraft" type="link" class="button savedraft" classAct="button savedraft" classSel="button savedraft pressed" label="save" title="savemessage" />
+	<span class="spacer"></span>
+	<roundcube:if condition="config:enable_spellcheck" />
+	<span class="dropbutton">
+		<roundcube:button command="spellcheck" type="link" class="button spellcheck disabled" classAct="button spellcheck" classSel="button spellcheck pressed" label="spellcheck" title="checkspelling" />
+		<span class="dropbuttontip" id="spellmenulink" onclick="UI.show_popup('spellmenu');return false"></span>
+	</span>
+	<roundcube:endif />
+	<roundcube:button name="addattachment" type="link" class="button attach" classAct="button attach" classSel="button attach pressed" label="attach" title="addattachment" onclick="UI.show_uploadform();return false" />
+	<roundcube:button command="insert-sig" type="link" class="button insertsig disabled" classAct="button insertsig" classSel="button insertsig pressed" label="signature" title="insertsignature" />
+	<roundcube:container name="toolbar" id="compose-toolbar" />
+</div>
+</div>
+
 <div id="composeview-left">
 
 <!-- inline address book -->
@@ -38,25 +58,11 @@
 
 <div id="composeview-right">
 
-<!-- toolbar -->
-<div id="messagetoolbar" class="fullwidth">
-<div id="mailtoolbar" class="toolbar">
-	<roundcube:if condition="config:enable_spellcheck" />
-	<span class="dropbutton">
-		<roundcube:button command="spellcheck" type="link" class="button spellcheck disabled" classAct="button spellcheck" classSel="button spellcheck pressed" label="spellcheck" title="checkspelling" />
-		<span class="dropbuttontip" id="spellmenulink" onclick="UI.show_popup('spellmenu');return false"></span>
-	</span>
-	<roundcube:endif />
-	<roundcube:button name="addattachment" type="link" class="button attach" classAct="button attach" classSel="button attach pressed" label="attach" title="addattachment" onclick="UI.show_uploadform();return false" />
-	<roundcube:button command="insert-sig" type="link" class="button insertsig disabled" classAct="button insertsig" classSel="button insertsig pressed" label="signature" title="insertsignature" />
-	<roundcube:container name="toolbar" id="compose-toolbar" />
-</div>
-</div>
-
 <form name="form" action="./" method="post" id="compose-content" class="uibox">
 
 <!-- message headers -->
 <div id="composeheaders">
+<a href="#options" id="composeoptionstoggle" class="moreheaderstoggle"><span class="iconlink" title="<roundcube:label name='options' />"></span></a>
 
 <table class="headers-table compose-headers">
 <tbody>
@@ -109,43 +115,33 @@
 </table>
 
 <div id="composebuttons" class="pagenav formbuttons">
-	<roundcube:button type="input" command="send" class="button mainaction" label="sendmessage" tabindex="11" />
-	<roundcube:button type="input" command="savedraft" class="button" label="savemessage" tabindex="12" />
-	<roundcube:button type="input" command="list" class="button" label="cancel" tabindex="13" />
 	<roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="inner" title="openinextwin" content="[]" condition="!env:extwin" />
 </div>
 
-</div>
-
 <!-- (collapsable) message options -->
-<div id="composeoptionsbox">
+<div id="composeoptions">
+	<roundcube:if condition="!in_array('htmleditor', (array)config:dont_override)" />
 	<span class="composeoption">
-		<label><roundcube:label name="options" />
-			<a href="#options" id="composeoptionstoggle">&nbsp;</a></label>
+		<label><roundcube:label name="editortype" />
+			<roundcube:object name="editorSelector" editorid="composebody" tabindex="14" /></label>
 	</span>
-	
-	<div id="composeoptions">
-		<roundcube:if condition="!in_array('htmleditor', (array)config:dont_override)" />
-		<span class="composeoption">
-			<label><roundcube:label name="editortype" />
-				<roundcube:object name="editorSelector" editorid="composebody" tabindex="14" /></label>
-		</span>
-		<roundcube:endif />
-		<span class="composeoption">
-			<label for="rcmcomposepriority"><roundcube:label name="priority" />
-				<roundcube:object name="prioritySelector" form="form" id="rcmcomposepriority" /></label>
-		</span>
-		<span class="composeoption">
-			<label><roundcube:object name="receiptCheckBox" form="form" id="rcmcomposereceipt" /> <roundcube:label name="returnreceipt" /></label>
-		</span>
-		<span class="composeoption">
-			<label><roundcube:object name="dsnCheckBox" form="form" id="rcmcomposedsn" /> <roundcube:label name="dsn" /></label>
-		</span>
-		<span class="composeoption">
-			<label><roundcube:label name="savesentmessagein" /> <roundcube:object name="storetarget" maxlength="30" style="max-width:12em" /></label>
-		</span>
-		<roundcube:container name="composeoptions" id="composeoptions" />
-	</div>
+	<roundcube:endif />
+	<span class="composeoption">
+		<label for="rcmcomposepriority"><roundcube:label name="priority" />
+			<roundcube:object name="prioritySelector" form="form" id="rcmcomposepriority" /></label>
+	</span>
+	<span class="composeoption">
+		<label><roundcube:object name="receiptCheckBox" form="form" id="rcmcomposereceipt" /> <roundcube:label name="returnreceipt" /></label>
+	</span>
+	<span class="composeoption">
+		<label><roundcube:object name="dsnCheckBox" form="form" id="rcmcomposedsn" /> <roundcube:label name="dsn" /></label>
+	</span>
+	<span class="composeoption">
+		<label><roundcube:label name="savesentmessagein" /> <roundcube:object name="storetarget" maxlength="30" style="max-width:12em" /></label>
+	</span>
+	<roundcube:container name="composeoptions" id="composeoptions" />
+</div>
+
 </div>
 
 <!-- message compose body -->
@@ -155,11 +151,18 @@
 	</div>
 	<div id="compose-attachments" class="rightcol">
 		<div style="text-align:center; margin-bottom:20px">
-			<roundcube:button name="addattachment" type="input" class="button" classSel="button pressed" label="addattachment" onclick="UI.show_uploadform();return false" tabindex="10" />
+			<roundcube:button name="addattachment" type="input" class="button" classSel="button pressed" label="addattachment" onclick="UI.show_uploadform();return false" />
 		</div>
 		<roundcube:object name="composeAttachmentList" id="attachment-list" class="attachmentslist" />
 		<roundcube:object name="fileDropArea" id="compose-attachments" />
 	</div>
+<!--
+	<div id="composeformbuttons" class="footerleft formbuttons floating">
+		<roundcube:button type="input" command="send" class="button mainaction" label="sendmessage" tabindex="11" />
+		<roundcube:button type="input" command="savedraft" class="button" label="savemessage" tabindex="12" />
+		<roundcube:button type="input" command="list" class="button" label="cancel" tabindex="13" />
+	</div>
+-->
 </div>
 
 </form>
@@ -172,8 +175,6 @@
 
 </div><!-- end mainscreen -->
 
-</div><!-- end minwidth -->
-
 <div id="upload-dialog" class="propform popupdialog" title="<roundcube:label name='addattachment' />">
 	<roundcube:object name="composeAttachmentForm" id="uploadform" attachmentFieldSize="40" buttons="no" />
 	<div class="formbuttons">
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 @@
 <roundcube:endif />
 
 <div id="messageheader">
-<span id="previewheaderstoggle"></span>
+<span class="moreheaderstoggle"></span>
 
 <h2 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h2>
 <roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject" max="20" />
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 @@
 <div id="messageheader" class="previewheader">
 <h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h3>
 
-<a href="#details" id="previewheaderstoggle"><span class="iconlink" title="<roundcube:label name='togglemoreheaders' />"></span></a>
+<a href="#details" id="previewheaderstoggle" class="moreheaderstoggle"><span class="iconlink" title="<roundcube:label name='togglemoreheaders' />"></span></a>
 <div id="contactphoto"><roundcube:object name="contactphoto" /></div>
 
 <table class="headers-table" id="preview-shortheaders"><tbody><tr>
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());