A few more features from managesieve plugin

pull/5742/merge
Aleksander Machniak 7 years ago
parent 74e0e5141a
commit 6753d763ae

@ -14,6 +14,7 @@
@color-link: #00acff;
@color-link-hover: darken(@color-link, 10%);
@color-border: #ddd;
@color-error: #ff5552;
// Layout elements
@ -92,7 +93,7 @@
@color-message-information: @color-main;
@color-message-success: #41b849;
@color-message-warning: #ffd452;
@color-message-error: #ff5552;
@color-message-error: @color-error;
@color-message-loading: #333;
@ -117,6 +118,7 @@
// Forms
@color-input-border: rgba(0, 0, 0, 0.15); /* from Bootstrap's .form-control */
@color-input-border-focus: #80bdff; /* from Bootstrap's .form-control:focus */
@color-input-border-invalid: @color-error;
@color-input-addon-background: #e9ecef; /* from Bootstrap's .input-group-addon */
@color-recipient-input-border: @color-input-border;
@color-recipient-input-background: #f4f4f4;

@ -116,7 +116,7 @@ a.button.icon {
}
}
@media screen and (max-width: @screen-width-small) {
html.touch {
.btn:focus {
box-shadow: none;
}

@ -47,10 +47,26 @@
}
}
.listbox .scroller {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
.listbox {
.scroller {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.navlist {
height: 0;
flex: initial !important;
.listing {
border-bottom: 1px solid @color-layout-border;
tr:last-child td,
li:last-child {
border: 0;
}
}
}
}

@ -63,6 +63,7 @@ input.smart-upload {
a {
padding: 0;
line-height: 2.3rem;
height: 2.3rem;
font-size: 1rem;
&:before {
@ -208,6 +209,13 @@ html.ms .propform {
}
}
html.layout-phone {
.formcontainer {
.formbuttons {
display: none;
}
}
}
.formcontent {
padding: 1em;
@ -356,6 +364,19 @@ ul.proplist {
margin-right: .5rem;
}
}
select {
width: auto;
display: inline;
}
}
}
.checklist {
.form-check-input + label {
margin-right: .25rem;
line-height: 1;
}
}
@ -410,17 +431,19 @@ ul.proplist {
/*** Smart list (multiple input) field ***/
.multi-input {
max-height: 11.65em;
overflow: hidden;
overflow-y: auto;
border-radius: .25rem;
border: 1px solid @color-input-border;
& > .content {
max-height: 11.65em;
overflow: hidden;
overflow-y: auto;
border-radius: .25rem;
border: 1px solid @color-input-border;
&.focused {
border: 1px solid @color-input-border-focus;
}
&.focused {
border: 1px solid @color-input-border-focus;
}
/* TODO: style button focus */
/* TODO: style button focus */
}
.input-group {
margin: 0 !important;
@ -434,6 +457,15 @@ ul.proplist {
}
}
.input-group-addon,
.form-control {
height: 2.25rem; /* to be the same height as select.form-control element */
}
input.form-control {
padding-left: .5rem;
}
input,
input:focus,
.input-group-addon {
@ -449,6 +481,16 @@ ul.proplist {
& + .btn {
margin-top: .5rem;
}
&.is-invalid {
& > .content {
border: 1px solid @color-input-border-invalid;
}
& > .invalid-feedback {
display: inline-block;
}
}
}
@ -796,3 +838,11 @@ html.touch input.icon-checkbox + label {
.form-control, .form-control:focus {
color: @color-font;
}
.invalid-feedback {
color: @color-error;
}
.form-control.is-invalid {
border-color: @color-input-border-invalid;
}

@ -77,6 +77,11 @@
background-color: @color-list-droptarget-background;
}
li.disabled,
tr.disabled td {
color: @color-list-deleted;
}
/* Focus indicator */
/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
@media screen and (min-width: @screen-width-large) {

@ -171,6 +171,12 @@
&.addressbook:before {
content: @fa-var-user;
}
&.expand:before {
content: @fa-var-caret-down;
}
&.collapse:before {
content: @fa-var-caret-up;
}
}
&:not(.popupmenu) span.inner {
@ -240,6 +246,17 @@
span.inner {
display: none;
}
&.pagenav-list {
cursor: pointer;
a.button {
flex-grow: initial;
}
.pagenav-text {
text-align: left;
}
}
}
&.footer {
@ -509,6 +526,9 @@
a.recipient:before {
content: @fa-var-envelope-o;
}
a.status:before {
content: @fa-var-lightbulb-o;
}
}
#layout > .sidebar > .header,

@ -61,6 +61,8 @@ function rcube_elastic_ui()
this.show_sidebar = show_sidebar;
this.smart_field_init = smart_field_init;
this.smart_field_reset = smart_field_reset;
this.form_errors = form_errors;
this.switch_nav_list = switch_nav_list;
// Initialize layout
@ -463,7 +465,7 @@ function rcube_elastic_ui()
});
// Forms
$('input:not(.button),select,textarea', $('.propform', context)).not('[type=checkbox]').addClass('form-control');
$('input:not(.button,[type=file],[type=radio],[type=checkbox]),select,textarea', $('.propform', context)).addClass('form-control');
$('[type=checkbox]', $('.propform', context)).addClass('form-check-input');
$('table.propform > tbody > tr', context).each(function() {
var first, last, row = $(this),
@ -580,6 +582,9 @@ function rcube_elastic_ui()
setTimeout(function() { bootstrap_style($('.ui-datepicker')); }, 5);
});
// Form validation errors (managesieve plugin)
$('.error').addClass('is-invalid');
// Make logon form prettier
if (rcmail.env.task == 'login' && context == document) {
$('#login-form table tr').each(function() {
@ -2351,8 +2356,8 @@ function rcube_elastic_ui()
// Inititalizes smart list input
function smart_field_init(field)
{
var id = field.id + '_list',
area = $('<div class="multi-input"></div>'),
var tip, id = field.id + '_list',
area = $('<div class="multi-input"><div class="content"></div><div class="invalid-feedback"></div></div>'),
list = field.value ? field.value.split("\n") : [''];
if ($('#' + id).length) {
@ -2361,7 +2366,7 @@ function rcube_elastic_ui()
// add input rows
$.each(list, function(i, v) {
smart_field_row_add(area, v, field.name, i, $(field).data('size'));
smart_field_row_add($('.content', area), v, field.name, i, $(field).data('size'));
});
area.attr('id', id);
@ -2377,9 +2382,9 @@ function rcube_elastic_ui()
field.after(area);
if (field.hasClass('error')) {
area.addClass('error');
//TODO rcmail.managesieve_tip_register([[id, field.data('tip')]]);
if (field.hasClass('is-invalid')) {
area.addClass('is-invalid');
$('.invalid-feedback', area).text(field.data('error-msg'));
}
};
@ -2458,7 +2463,7 @@ function rcube_elastic_ui()
{
var id = field.id + '_list',
list = data.length ? data : [''],
area = $('#' + id);
area = $('#' + id).children('.content');
area.empty();
@ -2468,6 +2473,46 @@ function rcube_elastic_ui()
});
};
/**
* Register form errors, mark fields as invalid, dsplay the error below the input
*/
function form_errors(tips)
{
$.each(tips, function() {
var input = $('#' + this[0]).addClass('is-invalid');
if (input.data('type') == 'list') {
input.data('error-msg', this[2]);
return;
}
input.after($('<span class="invalid-feedback">').text(this[2]));
});
};
/**
* Show/hide the navigation list
*/
function switch_nav_list(obj)
{
var records, height, speed = 250,
button = $('a.button', obj),
navlist = $(obj).next();
if (!navlist.height()) {
records = $('tr,li', navlist).filter(function() { return this.style.display != 'none'; });
height = $(records[0]).height() || 50;
navlist.animate({height: (Math.min(5, records.length) * height) + 'px'}, speed);
button.addClass('collapse').removeClass('expand');
}
else {
navlist.animate({height: '0'}, speed);
button.addClass('expand').removeClass('collapse');
}
};
/**
* Wrapper for rcmail.open_window to intercept window opening
* and display a dialog with an iframe instead of a real window.

Loading…
Cancel
Save