Elastic: Replace .icon-checkbox with Bootstrap's custom switch

plugins/acl/skins/elastic/templates/table.html

@@ -19,7 +19,7 @@
 		<roundcube:button command="acl-edit" label="edit" type="link-menuitem" class="edit" classAct="edit active" />
 		<roundcube:button command="acl-delete" label="delete" type="link-menuitem" class="delete" classAct="delete active" />
 		<roundcube:if condition="!in_array('acl_advanced_mode', (array)config:dont_override)" />
-			<li role="menuitem" class="checkbox"><label id="acl-switch"><input type="checkbox" onchange="rcmail.command('acl-mode-switch')" /><a class="active"><roundcube:label name="acl.advanced" /></a></label></li>
+			<roundcube:button name="acl-switch" type="link-menuitem" class="active check" id="acl-switch" onclick="rcmail.command('acl-mode-switch')" label="acl.advanced" />
 		<roundcube:endif />
 	</ul>
 </div>

skins/elastic/styles/colors.less

@@ -154,8 +154,9 @@
 
 @color-checkbox:                    @color-main;
 @color-checkbox-checked:            @color-main;
-@color-checkbox-focus:              darken(@color-checkbox, 30%);
+@color-checkbox-checked-disabled:   lighten(@color-main, 15%);
-@color-checkbox-checked-focus:      darken(@color-checkbox-checked, 30%);
+@color-checkbox-focus:              @color-input-border-focus;
+@color-checkbox-focus-shadow:       @color-input-border-focus-shadow;
 
 @color-form-hint:                   @color-black-shade-text;
 

skins/elastic/styles/widgets/common.less

@@ -459,15 +459,6 @@ table.table {
         white-space: nowrap;
         overflow: hidden;
         text-align: center;
-
-        input.icon-checkbox + label {
-            padding: 0;
-
-            &:before {
-                line-height: 1;
-                height: 1em;
-            }
-        }
     }
 
     th.checkbox-cell {

skins/elastic/styles/widgets/editor.less

@@ -375,7 +375,6 @@
         &:focus {
             i.mce-i-checkbox {
                 border: 0;
-                color: @color-checkbox-focus;
             }
         }
     }

skins/elastic/styles/widgets/forms.less

@@ -484,11 +484,6 @@ html.ms .propform {
         display: flex; // https://github.com/twbs/bootstrap/issues/22348
         flex-wrap: nowrap;
 
-        // fixed checkbox vertical alignment
-        td:not(.col-form-label) {
-            padding: 0;
-        }
-
         // alignment fixes needed because we do not stick precissely to Bootstrap's form structure
         @media screen and (max-width: @screen-width-bs-phone) {
             .col-6 {
@@ -498,8 +493,7 @@ html.ms .propform {
 
             & > *:last-child {
                 width: 1%;
-                min-width: 2.2em; // for icon-checkbox
+                min-width: 2.6rem; // for .custom-switch
-                padding-right: 15px;
             }
 
             &.with-link > *:last-child {
@@ -508,13 +502,11 @@ html.ms .propform {
         }
 
         .form-check-input {
-            margin: 0; // fixes checkbox alignment with other inputs in a form
+            margin: .5rem 0; // fixes checkbox alignment with other inputs in a form
-            margin-top: .5rem;
-            margin-bottom: .5rem;
-
-            & + label {
-                display: inline;
         }
+
+        .custom-control-label {
+            overflow: unset;
         }
 
         td > label {
@@ -673,27 +665,15 @@ html.ms .propform {
             }
         }
 
+        .custom-control-label {
+            overflow: unset; // for .custom-switch
+        }
+
         label:not(.input-group-text) {
             margin: 0;
             line-height: @proplist-record-height;
         }
 
-        .icon-checkbox {
-            height: @proplist-record-height;
-            margin-left: -1.2em;
-
-            & + label {
-                height: @proplist-record-height;
-                margin-right: .5rem;
-                padding: 0 !important;
-                line-height: 1.25;
-
-                html.touch &:before {
-                    line-height: 1.1;
-                }
-            }
-        }
-
         select {
             width: auto;
             display: inline;
@@ -702,16 +682,21 @@ html.ms .propform {
 }
 
 .checklist {
-    .form-check-input + label {
+    & > div {
-        margin-right: .25rem;
+        line-height: 2rem;
-        line-height: 1;
     }
 
-    & > label {
+    .custom-control-label {
-        display: inline-block !important;
+        &:before,
+        &:after {
+            margin: -.15rem 0 0 0;
+        }
     }
-}
 
+    & > div + br {
+        display: none;
+    }
+}
 
 /*** Forms in popups ***/
 
@@ -758,14 +743,6 @@ html.ms .propform {
     }
 }
 
-html.touch .popupmenu.form {
-    li {
-        input.icon-checkbox + label:before {
-            line-height: 1.4;
-        }
-    }
-}
-
 
 /*** Smart list (multiple input) field ***/
 
@@ -1184,79 +1161,6 @@ html.touch .popupmenu.form {
     }
 }
 
-
-/*** Pretty icon checkbox ***/
-
-input.icon-checkbox {
-    opacity: 0;
-    margin-left: -1.5em;
-    cursor: pointer;
-
-    .form-check > * > & {
-        margin-left: -1.5em !important;
-    }
-
-    & + label {
-        margin: 0;
-        display: inline;
-        font-size: 1.2rem;
-        cursor: pointer;
-        width: 1.5em;
-
-        html.touch & {
-            font-size: 1.5rem;
-        }
-
-        &:before {
-            &:extend(.font-icon-class);
-            content: @fa-var-toggle-off;
-            margin: 0;
-            color: @color-checkbox;
-            height: 2rem;
-        }
-
-        // A link after checkbox in a form, used in e.g. newmail_notifier plugin
-        & + a {
-            display: inline-block;
-            line-height: 2rem;
-            padding-left: .5rem;
-            white-space: nowrap;
-        }
-
-        .input-group & {
-            padding: 0 .25rem 0 0;
-
-            &:before {
-                line-height: 1;
-                height: auto;
-            }
-        }
-    }
-
-    &:disabled + label {
-        opacity: 0.4;
-        pointer-events: none;
-    }
-
-    &:checked + label:before {
-        content: @fa-var-toggle-on;
-        color: @color-checkbox-checked;
-    }
-
-    &:focus + label:before {
-        color: @color-checkbox-focus;
-    }
-
-    &:checked:focus + label:before {
-        color: @color-checkbox-checked-focus;
-    }
-
-    &.form-check-input + label {
-        font-size: 1.25rem;
-        padding-top: .25rem;
-    }
-}
-
 .input-group-combo {
     select:first-of-type {
         &.alone {
@@ -1339,3 +1243,75 @@ input.icon-checkbox {
         border-color: @color-input-border-focus !important;
     }
 }
+
+.custom-switch {
+    .custom-control-input {
+        left: 0;
+
+        &:focus ~ .custom-control-label:before {
+            box-shadow: 0 0 0 .2rem @color-checkbox-focus-shadow;
+        }
+
+        &:focus:not(:checked) ~ .custom-control-label::before {
+            border-color: @color-checkbox-focus;
+        }
+
+        &:checked ~ .custom-control-label::before {
+            border-color: @color-checkbox;
+            background-color: @color-checkbox;
+        }
+
+        &:checked:disabled ~ .custom-control-label::before {
+            border-color: @color-checkbox-checked-disabled;
+            background-color: @color-checkbox-checked-disabled;
+        }
+    }
+
+    // Make switches bigger, we use smaller font than Bootstrap's default
+
+    html.touch & {
+        padding-left: 3rem;
+    }
+
+    .custom-control-label {
+        &:before {
+            width: 2rem;
+            height: 1.2rem;
+            border-radius: .6rem;
+            margin: .125rem 0;
+
+            html.touch & {
+                left: -3rem;
+                top: .2rem;
+                width: 2.6rem;
+                height: 1.6rem;
+                border-radius: .8rem;
+                margin: 0;
+            }
+        }
+
+        &:after {
+            width: ~"calc(1.2rem - 4px)";
+            height: ~"calc(1.2rem - 4px)";
+            border-radius: .6rem;
+            margin: .125rem 0;
+
+            html.touch & {
+                left: ~"calc(-3rem + 2px)";
+                top: ~"calc(.2rem + 2px)";
+                height: ~"calc(1.6rem - 4px)";
+                width: ~"calc(1.6rem - 4px)";
+                border-radius: .8rem;
+                margin: 0;
+            }
+        }
+    }
+
+    .custom-control-input:checked ~ .custom-control-label::after {
+        transform: translateX(.8rem);
+
+        html.touch & {
+            transform: translateX(1rem);
+        }
+    }
+}

skins/elastic/styles/widgets/lists.less

@@ -165,14 +165,29 @@ ul.listing {
             }
         }
 
-        input.icon-checkbox + label,
+        .custom-switch {
-        input[type=checkbox] {
             position: absolute;
             padding: 0;
             top: 0;
-            right: .5rem;
+            right: 0;
+            margin-right: .3rem;
             height: @listing-line-height;
             vertical-align: middle;
+
+            html.touch & {
+                margin-right: 0;
+            }
+
+            .custom-control-label {
+                &:before,
+                &:after {
+                    margin-top: .4rem;
+
+                    html.touch & {
+                        margin-top: .8rem;
+                    }
+                }
+            }
         }
     }
 

skins/elastic/styles/widgets/toolbar.less

@@ -427,25 +427,6 @@
         }
     }
 
-    &.checkbox > label {
-        margin: 0;
-        width: 100%;
-
-        input.icon-checkbox {
-            right: auto;
-
-            & + label {
-                left: 0;
-                margin: 0 .2em 0 .35em;
-                font-size: 1.1rem;
-            }
-        }
-
-        a {
-            padding: 0 !important;
-        }
-    }
-
     a {
         opacity: .5;
 
@@ -462,6 +443,12 @@
         &:extend(.font-icon-class);
     }
 
+    a.check:before {
+        content: "";
+    }
+    a.check.selected:before {
+        content: @fa-var-check;
+    }
     a.print:before {
         content: @fa-var-print;
     }
@@ -627,13 +614,7 @@
 }
 
 .toolbarmenu.listing li {
-    &.checkbox > label {
-        padding: 0 .5rem 0 2.5em;
-    }
-
     &:hover {
-        &.checkbox > label,
-        input.icon-checkbox + label:before,
         a.active {
             color: @color-toolbarmenu-hover;
             background-color: @color-toolbarmenu-hover-background;
@@ -649,15 +630,9 @@ html.touch {
     }
 
     .toolbarmenu.listing li {
-        &.checkbox > label {
-            padding: 0 .5rem 0 2.75rem;
-        }
     }
 
     .toolbarmenu li {
-        input.icon-checkbox + label {
-            font-size: 1.3rem;
-        }
     }
 }
 

skins/elastic/ui.js

@@ -27,6 +27,7 @@ function rcube_elastic_ui()
                 compose_extwin: rcmail.env.compose_extwin,
                 help_open_extwin: rcmail.env.help_open_extwin
             },
+            checkboxes: 0,
             small_screen_config: {
                 standard_windows: true,
                 message_extwin: false,
@@ -971,7 +972,7 @@ function rcube_elastic_ui()
 
         // The same for some other checkboxes
         // We do this here, not in setup() because we want to cover dialogs
-        $('input.pretty-checkbox, .propform input[type=checkbox], .form-check > input, .popupmenu.form input[type=checkbox], .toolbarmenu input[type=checkbox]', context)
+        $('input.pretty-checkbox, .propform input[type=checkbox], .form-check input, .popupmenu.form input[type=checkbox], .toolbarmenu input[type=checkbox]', context)
             .each(function() { pretty_checkbox(this); });
 
         // Also when we add action-row of the form, e.g. Managesieve plugin adds them after the page is ready
@@ -2142,7 +2143,7 @@ function rcube_elastic_ui()
                     popup = popup_orig.clone(true, true);
                     popup.attr('id', popup_id + '-clone')
                         .appendTo(document.body)
-                        .find('li > a, li.checkbox > label').attr('onclick', '').off('click').on('click', function(e) {
+                        .find('li > a').attr('onclick', '').off('click').on('click', function(e) {
                             if (!$(this).is('.disabled')) {
                                 $(item).popover('hide');
                                 win.$('#' + $(this).attr('id')).click();
@@ -3311,27 +3312,36 @@ function rcube_elastic_ui()
     };
 
     /**
-     * Checkbox wrapper
+     * Convert checkbox input into Bootstrap's custom switch
      */
     function pretty_checkbox(checkbox)
     {
-        var checkbox = $(checkbox),
+        var label, parent, id, checkbox = $(checkbox);
-            id = checkbox.attr('id');
 
-        if (checkbox.is('.icon-checkbox')) {
+        if (checkbox.is('.custom-control-input')) {
             return;
         }
 
-        if (!id) {
+        if (!(id = checkbox.attr('id'))) {
-            if (!env.icon_checkbox) env.icon_checkbox = 0;
+            id = 'icochk' + (++env.checkboxes);
-            id = 'icochk' + (++env.icon_checkbox);
             checkbox.attr('id', id);
         }
 
-        checkbox.addClass('icon-checkbox form-check-input').after(
+        if (checkbox.parent().is('label')) {
-            $('<label>').attr({'for': id, title: checkbox.attr('title') || ''})
+            label = checkbox.parent();
-                .on('click', function(e) { e.stopPropagation(); })
+            checkbox = checkbox.detach();
-        );
+            label.before(checkbox);
+        }
+        else {
+            label = $('<label>');
+        }
+
+        label.attr({'for': id, 'class': 'custom-control-label', title: checkbox.attr('title') || ''})
+            .on('click', function(e) { e.stopPropagation(); });
+
+        checkbox.addClass('form-check-input custom-control-input')
+            .wrap('<div class="custom-control custom-switch">')
+            .parent().append(label);
     };
 
     /**
@@ -3577,7 +3587,7 @@ function rcube_elastic_ui()
 
         if (is_table) {
             // Hide unwanted table cells
-            sw.parent().parent().hide();
+            sw.parents('tr').first().hide();
             parent.prev().hide();
             // Modify the textarea cell to use 100% width
             parent.addClass('col-sm-12');