diff --git a/skins/elastic/styles/styles.less b/skins/elastic/styles/styles.less index 4fd04d09a..da21350ba 100644 --- a/skins/elastic/styles/styles.less +++ b/skins/elastic/styles/styles.less @@ -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; + } + } +} diff --git a/skins/elastic/styles/widgets/forms.less b/skins/elastic/styles/widgets/forms.less index eb7234366..b224706e9 100644 --- a/skins/elastic/styles/widgets/forms.less +++ b/skins/elastic/styles/widgets/forms.less @@ -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; +} diff --git a/skins/elastic/styles/widgets/lists.less b/skins/elastic/styles/widgets/lists.less index 80b05cd91..3c1f5a31d 100644 --- a/skins/elastic/styles/widgets/lists.less +++ b/skins/elastic/styles/widgets/lists.less @@ -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 { diff --git a/skins/elastic/templates/addressbook.html b/skins/elastic/templates/addressbook.html index 1a92f8bde..82830b80d 100644 --- a/skins/elastic/templates/addressbook.html +++ b/skins/elastic/templates/addressbook.html @@ -35,7 +35,7 @@
-
diff --git a/skins/elastic/templates/compose.html b/skins/elastic/templates/compose.html index 663c041e7..3b8e5e536 100644 --- a/skins/elastic/templates/compose.html +++ b/skins/elastic/templates/compose.html @@ -15,7 +15,7 @@
-
-
- - - - - -
- -
+
+
+ + + + + +
+ +
- +
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js index 6fc39d61a..c51b1f4f4 100644 --- a/skins/elastic/ui.js +++ b/skins/elastic/ui.js @@ -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 = $('') - .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'); });