Option to toggle checkboxes on message list (#60)

skins/elastic/styles/widgets/lists.less

@@ -60,6 +60,10 @@
         }
     }
 
+    &:not(.withselection) td.selection {
+        display: none;
+    }
+
     td.name {
         .overflow-ellipsis;
     }
@@ -109,11 +113,14 @@
     // - half will be hidden to the left
     @media screen and (min-width: @screen-width-large) {
         li > a,
-        tbody tr > td:first-child {
+        &.withselection tbody tr > td:nth-child(1),
+        &:not(.withselection) tbody tr > td:nth-child(2) {
             border-left: 2px solid transparent;
         }
+
         li > a:focus,
-        &.focus tbody tr.focused > td:first-child {
+        &.focus.withselection tbody tr.focused > td:nth-child(1),
+        &.focus:not(.withselection) tbody tr.focused > td:nth-child(2) {
             border-left: 2px solid @color-list-focus-indicator;
             outline: 0;
         }

skins/elastic/styles/widgets/toolbar.less

@@ -130,6 +130,9 @@
         &.lastpage:before {
             content: @fa-var-fast-forward;
         }
+        &.toggleselect:before {
+            .font-icon-regular(@fa-var-hand-pointer);
+        }
         &.send:before {
             content: @fa-var-paper-plane;
         }
@@ -294,7 +297,6 @@
         }
     }
 
-
     .listselectors {
         max-width: 100%;
         display: flex;

skins/elastic/ui.js

@@ -422,9 +422,27 @@ function rcube_elastic_ui()
     {
         // Enable checkbox selection on list widgets
         $('table[data-list]').each(function() {
-            var list = $(this).data('list');
+            var button, table = $(this), list = table.data('list');
             if (rcmail[list] && rcmail[list].multiselect) {
                 rcmail[list].checkbox_selection = true;
+
+                // Add Select button to the list navigation bar
+                button = $('<a>').attr({'class': 'button toggleselect disabled', role: 'button'})
+                    .on('click', function() { if ($(this).is('.active')) table.toggleClass('withselection'); })
+                    .append($('<span class="inner">').text(rcmail.gettext('select')))
+                    .prependTo(table.parent().prev('.pagenav'));
+
+                // Update Select button state on list update
+                rcmail.addEventListener('listupdate', function(prop) {
+                    if (prop.list && prop.list == rcmail[list]) {
+                        if (prop.rowcount) {
+                            button.addClass('active').removeClass('disabled').attr('tabindex', 0);
+                        }
+                        else {
+                            button.removeClass('active').addClass('disabled').attr('tabindex', -1);
+                        }
+                    }
+                });
             }
         });