A few more features from managesieve plugin

skins/elastic/styles/colors.less

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

skins/elastic/styles/widgets/buttons.less

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

skins/elastic/styles/widgets/common.less

@@ -47,10 +47,26 @@
     }
 }
 
-.listbox .scroller {
+.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;
+            }
+        }
+    }
 }
 
 

skins/elastic/styles/widgets/forms.less

@@ -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,6 +431,7 @@ ul.proplist {
 /*** Smart list (multiple input) field ***/
 
 .multi-input {
+    & > .content {
         max-height: 11.65em;
         overflow: hidden;
         overflow-y: auto;
@@ -421,6 +443,7 @@ ul.proplist {
         }
 
         /* 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;
+}

skins/elastic/styles/widgets/lists.less

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

skins/elastic/styles/widgets/toolbar.less

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

skins/elastic/ui.js

@@ -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',
+        var tip, id = field.id + '_list',
-            area = $('<div class="multi-input"></div>'),
+            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')) {
+        if (field.hasClass('is-invalid')) {
-            area.addClass('error');
+            area.addClass('is-invalid');
-//TODO            rcmail.managesieve_tip_register([[id, field.data('tip')]]);
+            $('.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.