From ce2b445efdce63cddaef9ad8dae7bf0943b24613 Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <machniak@kolabsys.com>
Date: Thu, 13 Apr 2017 20:01:02 +0200
Subject: [PATCH] Make mail compose headers more pretty with some Bootstrap
 styles

---
 skins/elastic/styles/styles.less        |   3 +-
 skins/elastic/styles/widgets/forms.less |  19 ++++
 skins/elastic/templates/compose.html    | 127 +++++++++---------------
 skins/elastic/ui.js                     |   8 ++
 4 files changed, 78 insertions(+), 79 deletions(-)

diff --git a/skins/elastic/styles/styles.less b/skins/elastic/styles/styles.less
index 42ca407bc..a92deb8e2 100644
--- a/skins/elastic/styles/styles.less
+++ b/skins/elastic/styles/styles.less
@@ -123,8 +123,9 @@ button, input, select, textarea {
 
 /*** Common UI elements ***/
 
+.hidden,
 .voice {
-    display: none;
+    display: none !important;
 }
 
 #rcmdraglayer {
diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less
index 9d7efc5ed..524c10288 100644
--- a/skins/elastic/styles/widgets/forms.less
+++ b/skins/elastic/styles/widgets/forms.less
@@ -25,6 +25,10 @@ input.smart-upload {
         margin-right: 0; /* without these the form is too wide causing horizontal scrollbar appearence */
         margin-left: 0;
     }
+    .row .input-group {
+        padding-right: 0; /* without these e.g. inputs in compose screen are not aligned properly */
+        padding-left: 0;
+    }
 }
 
 .formbuttons {
@@ -34,6 +38,7 @@ input.smart-upload {
 
 /* Some common icons for "iconized inputs" */
 .input-group-addon.icon {
+    text-decoration: none;
 
     &:before {
         &:extend(.font-icon-class);
@@ -49,6 +54,19 @@ input.smart-upload {
     &.host:before {
         content: @fa-var-home;
     }
+    &.cancel:before {
+        content: @fa-var-close;
+    }
+    &.edit:before {
+        content: @fa-var-pencil;
+    }
+    &.add:before {
+        content: @fa-var-plus;
+    }
+
+    .inner {
+        display: none;
+    }
 }
 
 
@@ -58,6 +76,7 @@ td.editfield { width: 99%;  /* TODO */ }
 /*** Smart recipient input field ***/
 
 .recipient-input {
+    display: block !important; /* overwrites Bootstrap */
     min-height: 2.4em;
 /*    padding: 0.2em 0.5em; */
 
diff --git a/skins/elastic/templates/compose.html b/skins/elastic/templates/compose.html
index a170d27bc..9116d8bea 100644
--- a/skins/elastic/templates/compose.html
+++ b/skins/elastic/templates/compose.html
@@ -84,83 +84,54 @@
 		<!-- message headers -->
 		<div id="composeheaders" role="region" aria-labelledby="aria-label-composeheaders">
 			<h2 id="aria-label-composeheaders" class="voice"><roundcube:label name="arialabelmessageheaders" /></h2>
-			<table class="headers-table compose-headers">
-				<tr id="compose-from">
-					<td class="title">
-						<label for="_from"><roundcube:label name="from" /></label>
-					</td>
-					<td class="editfield">
-						<roundcube:object name="composeHeaders" part="from" form="form" id="_from" tabindex="1" />
-					</td>
-					<td class="button">
-						<a href="#identities" onclick="return rcmail.command('identities')" class="button edit" tabindex="1"><roundcube:label name="editidents" /></a>
-					</td>
-				</tr>
-				<tr id="compose-to">
-					<td class="title">
-						<label for="_to"><roundcube:label name="to" /></label>
-					</td>
-					<td class="editfield">
-						<roundcube:object name="composeHeaders" part="to" form="form" id="_to" cols="70" rows="1" tabindex="1" aria-required="true" data-recipient-input="true" />
-					</td>
-					<td class="button">
-						<a href="#add-header" onclick="" class="button add-recipient" tabindex="1"><roundcube:label name="addheader" /></a>
-					</td>
-				</tr>
-				<tr id="compose-cc" class="hidden">
-					<td class="title">
-						<label for="_cc"><roundcube:label name="cc" /></label>
-					</td>
-					<td class="editfield">
-						<roundcube:object name="composeHeaders" part="cc" form="form" id="_cc" cols="70" rows="1" tabindex="1" data-recipient-input="true" />
-					</td>
-					<td class="button">
-						<a href="#delete" onclick="return UI.hide_header_row('cc');" class="button cancel" title="<roundcube:label name='delete' />" tabindex="1"><roundcube:label name="delete" /></a>
-					</td>
-				</tr>
-				<tr id="compose-bcc" class="hidden">
-					<td class="title">
-						<label for="_bcc"><roundcube:label name="bcc" /></label>
-					</td>
-					<td class="editfield">
-						<roundcube:object name="composeHeaders" part="bcc" form="form" id="_bcc" cols="70" rows="1" tabindex="1" data-recipient-input="true" />
-					</td>
-					<td class="button">
-						<a href="#delete" onclick="return UI.hide_header_row('bcc');" class="button cancel" title="<roundcube:label name='delete' />" tabindex="1"><roundcube:label name="delete" /></a>
-					</td>
-				</tr>
-				<tr id="compose-replyto" class="hidden">
-					<td class="title">
-						<label for="_replyto"><roundcube:label name="replyto" /></label>
-					</td>
-					<td class="editfield">
-						<roundcube:object name="composeHeaders" part="replyto" form="form" id="_replyto" size="70" tabindex="1" data-recipient-input="true" />
-					</td>
-					<td class="button">
-						<a href="#delete" onclick="return UI.hide_header_row('replyto');" class="button cancel" title="<roundcube:label name='delete' />" tabindex="1"><roundcube:label name="delete" /></a>
-					</td>
-				</tr>
-				<tr id="compose-followupto" class="hidden">
-					<td class="title">
-						<label for="_followupto"><roundcube:label name="followupto" /></label>
-					</td>
-					<td class="editfield">
-						<roundcube:object name="composeHeaders" part="followupto" form="form" id="_followupto" size="70" tabindex="1" data-recipient-input="true" />
-					</td>
-					<td class="button">
-						<a href="#delete" onclick="return UI.hide_header_row('followupto');" class="button cancel" title="<roundcube:label name='delete' />" tabindex="1"><roundcube:label name="delete" /></a>
-					</td>
-				</tr>
-				<tr id="compose-subject">
-					<td class="title">
-						<label for="compose-subject"><roundcube:label name="subject" /></label>
-					</td>
-					<td class="editfield">
-						<roundcube:object name="composeSubject" id="compose-subject" form="form" tabindex="1" />
-					</td>
-					<td></td>
-				</tr>
-			</table>
+			<div class="compose-headers">
+				<div id="compose_from" class="form-group row">
+					<label for="_from" class="col-1 col-form-label"><roundcube:label name="from" /></label>
+					<div class="input-group col-11">
+						<roundcube:object name="composeHeaders" part="from" id="_from" tabindex="1" class="form-control" />
+						<a href="#identities" onclick="return rcmail.command('identities')" class="input-group-addon icon edit" title="<roundcube:label name="editidents" />" tabindex="1"><span class="inner"><roundcube:label name="editidents" /></span></a>
+					</div>
+				</div>
+				<div id="compose_to" class="form-group row">
+					<label for="_to" class="col-1 col-form-label"><roundcube:label name="to" /></label>
+					<div class="input-group col-11">
+						<roundcube:object name="composeHeaders" part="to" id="_to" tabindex="1" aria-required="true" data-recipient-input="true" />
+						<a href="#add-header" onclick="/* TODO */" class="input-group-addon icon add" title="<roundcube:label name="addheader" />" tabindex="1"><span class="inner"><roundcube:label name="addheader" /></span></a>
+					</div>
+				</div>
+				<div id="compose_cc" class="hidden form-group row">
+					<label for="_cc" class="col-1 col-form-label"><roundcube:label name="cc" /></label>
+					<div class="input-group col-11">
+						<roundcube:object name="composeHeaders" part="cc" id="_cc" tabindex="1" data-recipient-input="true" />
+						<a href="#delete" onclick="$('#_cc').val('').change()" class="input-group-addon icon cancel" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
+					</div>
+				</div>
+				<div id="compose_bcc" class="hidden form-group row">
+					<label for="_bcc" class="col-1 col-form-label"><roundcube:label name="bcc" /></label>
+					<div class="input-group col-11">
+						<roundcube:object name="composeHeaders" part="bcc" id="_bcc" rows="1" tabindex="1" data-recipient-input="true" />
+						<a href="#delete" onclick="$('#_bcc').val('').change()" class="input-group-addon icon cancel" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
+					</div>
+				</div>
+				<div id="compose_replyto" class="hidden form-group row">
+					<label for="_replyto" class="col-1 col-form-label"><roundcube:label name="replyto" /></label>
+					<div class="input-group col-11">
+						<roundcube:object name="composeHeaders" part="replyto" id="_replyto" tabindex="1" data-recipient-input="true" />
+						<a href="#delete" onclick="$('#_replyto').val('').change()" class="input-group-addon icon cancel" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
+					</div>
+				</div>
+				<div id="compose_followupto" class="hidden form-group row">
+					<label for="_followupto" class="col-1 col-form-label"><roundcube:label name="followupto" /></label>
+					<div class="input-group col-11">
+						<roundcube:object name="composeHeaders" part="followupto" id="_followupto" tabindex="1" data-recipient-input="true" />
+						<a href="#delete" onclick="$('#_followupto').val('').change()" class="input-group-addon icon cancel" title="<roundcube:label name='delete' />" tabindex="1"><span class="inner"><roundcube:label name="delete" /></span></a>
+					</div>
+				</div>
+				<div id="compose_subject" class="form-group row">
+					<label for="compose-subject" class="col-1 col-form-label"><roundcube:label name="subject" /></label>
+					<roundcube:object name="composeSubject" id="_subject" form="form" tabindex="1" class="col-11 form-control" />
+				</div>
+			</div>
 		</div>
 		<!-- (collapsable) message options -->
 		<div id="composeoptions" role="region" aria-labelledby="aria-label-composeoptions">
@@ -195,7 +166,7 @@
 		<!-- message compose body -->
 		<div id="composebodycontainer">
 			<label for="composebody" class="voice"><roundcube:label name="arialabelmessagebody" /></label>
-			<roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" tabindex="1" />
+			<roundcube:object name="composeBody" id="composebody" form="form" cols="70" rows="20" class="form-control" tabindex="1" />
 		</div>
 		<div id="compose-attachments" class="rightcol" role="region" aria-labelledby="aria-label-composeattachments">
 			<h2 id="aria-label-composeattachments" class="voice"><roundcube:label name="attachments" /></h2>
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index 64e836b7c..ded93e3be 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -146,6 +146,14 @@ function rcube_elastic_ui()
         }
 
         $('[data-recipient-input]').each(function() { recipient_input(this); });
+
+        // Show input elements with non-empty value
+        // These event handlers need to be registered before rcmail 'init' event
+        $('#_cc, #_bcc, #_replyto, #_followupto', $('.compose-headers')).each(function() {
+            $(this).on('change', function() {
+                $('#compose' + $(this).attr('id'))[this.value ? 'removeClass' : 'addClass']('hidden');
+            });
+        });
     };
 
     /**