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

Contact form support

Browse Source
pull/5742/merge
Aleksander Machniak 7 years ago
parent f0bc2cb50e
commit f0b09608cf
8 changed files with 197 additions and 60 deletions
Show Stats Download Patch File Download Diff File

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

@ -154,26 +154,6 @@ a:hover {
/*** Addressbook UI ***/
#contacts-table {
.contact.readonly td {
font-style: italic;
}
td.action {
/* TODO */
a {
/* TODO */
}
}
span.email {
display: inline;
color: @color-list-secondary;
font-style: italic;
margin-left: .5em;
}
}
#contactpic {
/* TODO: merge with file-upload? */
min-width: 112px;
@ -188,11 +168,14 @@ a:hover {
}
}
#contactphoto {
/* TODO */
float: left;
margin-right: .5em;
}
#contacthead {
.names {
margin-bottom: .5rem;
#contacthead { /* TODO */ }
.contactfieldgroup { /* TODO */ }
span.namefield {
font-size: 1.5rem;
font-weight: bold;
line-height: 1.2;
}
}
}

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

@ -121,6 +121,83 @@ input.smart-upload {
.rulerow {
margin-bottom: .5rem;
}
&.groupped {
legend {
margin: 0;
}
&.readonly {
label {
min-width: 7rem;
/* Overwrite Bootstrap .input-group-addon style to make the label transparent */
background-color: transparent;
border: 0;
border-radius: 0;
}
}
.row.input-group {
margin-bottom: .5rem;
flex-wrap: nowrap;
& > *:first-child {
min-width: 8rem;
height: auto;
padding-right: .375rem;
padding-left: .375rem;
}
& > *:nth-child(2) {
flex-grow: 30;
}
select {
text-align: left;
height: auto;
}
.content {
padding: 0;
display: flex;
flex-wrap: wrap;
input {
border-radius: 0;
border-color: transparent;
}
.ff_street {
width: 100%;
}
.ff_locality {
width: 75%;
}
.ff_zipcode {
width: 25%;
}
.ff_country, .ff_region {
width: 50%;
}
}
}
.form-control-plaintext {
flex-grow: 1;
}
}
.addfield {
margin: 0;
select {
width: 8rem;
margin-top: .5rem;
}
}
}
@media screen and (max-width: 576px) {
@ -205,6 +282,10 @@ html.ms .propform {
.formbuttons {
padding: 0.5rem 1rem;
button {
margin-right: .5rem;
}
}
}
@ -229,6 +310,7 @@ html.layout-phone {
padding: 0;
}
.form-control-plaintext,
label.col-form-label {
padding-top: .375rem;
padding-bottom: .375rem;
@ -274,6 +356,23 @@ html.layout-phone {
margin-bottom: 1em;
font-style: italic;
}
.contact-header {
display: flex;
margin-bottom: 1rem;
.contact-head {
margin-left: 1rem;
legend {
display: none;
}
&.propform {
margin-left: 2.5rem;
}
}
}
}
@media screen and (max-width: @screen-width-mini) {
@ -311,6 +410,9 @@ html.layout-phone {
&.cancel:before {
content: @fa-var-close;
}
&.delete:before {
content: @fa-var-trash-o;
}
&.edit:before {
content: @fa-var-pencil;
}
@ -331,10 +433,6 @@ html.layout-phone {
td.editfield { width: 99%; /* TODO */ }
.form-group {
margin-bottom: .5rem; /* overwrites Bootstrap style */
}
ul.proplist {
padding-left: 15px;
@ -544,10 +642,12 @@ html.touch .popupmenu.form {
/*** Smart recipient input field ***/
@recipient-input-margin-fix: .375rem;
.recipient-input {
display: flex;
flex-wrap: wrap;
padding: 0 .75rem .25rem .75rem;
padding: 0 .75rem @recipient-input-margin-fix .75rem;
&.focus {
border-color: @color-input-border-focus;
@ -562,7 +662,7 @@ html.touch .popupmenu.form {
background-color: @color-recipient-input-background;
border-radius: .25em;
padding: 0 .25em;
margin-top: .25rem;
margin-top: @recipient-input-margin-fix;
margin-right: .2em;
white-space: nowrap;
@ -576,7 +676,7 @@ html.touch .popupmenu.form {
flex-grow: 1;
display: inline-block;
line-height: 1.1;
padding: .25em;
padding: .25rem;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
@ -612,7 +712,7 @@ html.touch .popupmenu.form {
min-width: 25%;
background: transparent !important;
border: 0 !important;
margin-top: .25rem;
margin-top: @recipient-input-margin-fix;
outline: 0;
}
}
@ -679,6 +779,7 @@ html.touch .popupmenu.form {
width: 2.5em;
padding: .5em;
margin: .5em;
line-height: 1;
}
&.changed a.button {
@ -848,6 +949,8 @@ html.touch input.icon-checkbox + label {
}
}
/* Bootstrap style overrides */
.form-control, .form-control:focus {
color: @color-font;
}
@ -859,3 +962,7 @@ html.touch input.icon-checkbox + label {
.form-control.is-invalid {
border-color: @color-input-border-invalid;
}
.form-group {
margin-bottom: .5rem;
}

24
skins/elastic/styles/widgets/lists.less
Unescape Escape View File

@ -628,7 +628,6 @@ table.fixedcopy {
}
html.layout-phone,
html.touch {
.messagelist {
@ -649,6 +648,29 @@ html.touch {
}
/* Contacts list */
.contactlist {
.contact.readonly td {
font-style: italic;
}
td.action {
/* TODO */
a {
/* TODO */
}
}
span.email {
display: inline;
color: @color-list-secondary;
font-style: italic;
margin-left: .5em;
}
}
/* Attachments list */
.attachmentslist {

2
skins/elastic/templates/addressbook.html
Unescape Escape View File

@ -35,7 +35,7 @@
<roundcube:include file="includes/pagenav.html" />
<div class="scroller">
<roundcube:object name="addresslisttitle" label="contacts" tag="h2" class="voice" id="aria-label-contactslist" />
<roundcube:object name="addresslist" id="contacts-table" class="listing iconized" noheader="true"
<roundcube:object name="addresslist" id="contacts-table" class="listing iconized contactlist" noheader="true"
role="listbox" data-list="contact_list" />
</div>
</div>

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

@ -15,7 +15,7 @@
<div class="scroller" tabindex="-1">
<roundcube:object name="addressbooks" id="directorylist" class="treelist listing iconized"
summary="ariasummarycomposecontacts" />
<roundcube:object name="addresslist" id="contacts-table" class="listing iconized"
<roundcube:object name="addresslist" id="contacts-table" class="listing iconized contactlist"
noheader="true" role="listbox" data-list="contact_list" />
</div>
<div class="footer toolbar" role="toolbar">

11
skins/elastic/templates/contact.html
Unescape Escape View File

@ -6,13 +6,14 @@
<roundcube:if condition="strlen(env:sourcename)" />
<div id="sourcename"><roundcube:label name="addressbook" />: <roundcube:var name="env:sourcename" /></div>
<roundcube:endif />
<div id="contactphoto">
<roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" placeholderGroup="/images/contactgroup.png" />
<div class="contact-header">
<div id="contactphoto" class="contact-photo">
<roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" placeholderGroup="/images/contactgroup.png" />
</div>
<roundcube:object name="contacthead" id="contacthead" class="contact-head" />
</div>
<roundcube:object name="contacthead" id="contacthead" />
<br style="clear:both">
<div id="contacttabs" class="tabbed">
<roundcube:object name="contactdetails" />
<roundcube:object name="contactdetails" fieldset-class="propform groupped readonly" />
</div>
</div>

23
skins/elastic/templates/contactedit.html
Unescape Escape View File

@ -9,17 +9,20 @@
<roundcube:object name="sourceselector" id="sourceselect" condition="env:action=='add'" />
</div>
<roundcube:endif />
<fieldset id="contactphoto">
<legend class="voice"><roundcube:label name="contactphoto" /></legend>
<roundcube:object name="contactphoto" id="contactpic" class="image-upload" placeholder="/images/contactpic.png" />
<roundcube:if condition="env:photocol" />
<roundcube:object name="fileDropArea" id="contactpic" />
<roundcube:endif />
</fieldset>
<roundcube:object name="contactedithead" id="contacthead" size="16" form="editform" />
<br style="clear:both">
<div class="contact-header">
<fieldset id="contactphoto" class="contact-photo">
<legend class="voice"><roundcube:label name="contactphoto" /></legend>
<roundcube:object name="contactphoto" id="contactpic" class="image-upload" placeholder="/images/contactpic.png" />
<roundcube:if condition="env:photocol" />
<roundcube:object name="fileDropArea" id="contactpic" />
<roundcube:endif />
</fieldset>
<roundcube:object name="contactedithead" id="contacthead" form="editform"
class="propform contact-head" use-labels="true" />
</div>
<div id="contacttabs" class="tabbed">
<roundcube:object name="contacteditform" size="40" textareacols="60" form="editform" />
<roundcube:object name="contacteditform" textareacols="60" form="editform"
fieldset-class="propform groupped" compact-form="true" />
</div>
</form>

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

@ -507,13 +507,34 @@ function rcube_elastic_ui()
});
// Other forms, e.g. Contact advanced search
$('fieldset.propform > .contactfieldgroup', context).each(function() {
$('.row', this).addClass('form-group').each(function() {
$('div:first', this).addClass('col-sm-4');
$('div:last', this).addClass('col-sm-8');
$('fieldset.propform:not(.groupped) div.row', context).each(function() {
var has_input = $('input,select,textarea', this).addClass('form-control').length > 0;
$(this).children().last().addClass('col-sm-8' + (!has_input ? ' form-control-plaintext' : ''));
$(this).children().first().addClass('col-sm-4 col-form-label');
$(this).addClass('form-group');
});
// Contact info/edit form
$('fieldset.propform.groupped fieldset', context).each(function() {
$('.row', this).each(function() {
var label, has_input = $('input,select,textarea', this).addClass('form-control').length > 0,
items = $(this).children();
if (items.length < 2) {
return;
}
items.first().addClass('input-group-addon').not('select').addClass('col-form-label');
if (!has_input) {
items.last().addClass('form-control-plaintext');
}
$('.content', this).addClass('input-group-addon');
$('a.deletebutton', this).addClass('input-group-addon icon delete');
$(this).addClass('input-group');
});
$('.label', this).addClass('col-form-label');
$('input,select,textarea', this).addClass('form-control');
});
// Other forms, e.g. Insert response
@ -2210,7 +2231,7 @@ function rcube_elastic_ui()
function image_upload_input(obj)
{
var reset_button = $('<a>')
.attr({'class': 'icon button cancel', href: '#', })
.attr({'class': 'icon button delete', href: '#', })
.click(function(e) { rcmail.command('delete-photo', '', this, e); return false; });
$(obj).append(reset_button).click(function() { rcmail.upload_input('upload-form'); });

Write Preview
Loading…
Cancel
Save