banananetwork
/
roundcubemail
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Make mail compose headers more pretty with some Bootstrap styles

Browse Source
pull/5742/merge
Aleksander Machniak 8 years ago
parent 1fea5b531b
commit ce2b445efd
4 changed files with 78 additions and 79 deletions
Show Stats Download Patch File Download Diff File

3
skins/elastic/styles/styles.less
Unescape Escape View File

@ -123,8 +123,9 @@ button, input, select, textarea {
/*** Common UI elements ***/
.hidden,
.voice {
display: none;
display: none !important;
}
#rcmdraglayer {

19
skins/elastic/styles/widgets/forms.less
Unescape Escape View File

@ -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; */

127
skins/elastic/templates/compose.html
Unescape Escape View File

@ -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>

8
skins/elastic/ui.js
Unescape Escape View File

@ -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');
});
});
};
/**

Write Preview
Loading…
Cancel
Save