Elastic: Add "Show unread messages" button to the search bar (#6587)

CHANGELOG

@@ -28,6 +28,7 @@ CHANGELOG Roundcube Webmail
 - Elastic: Add default icon on Settings/Preferences lists for external plugins (#6814)
 - Elastic: Move compose attachments/options to the right side (#6839)
 - Elastic: Add border/background to attachments list widget (#6842)
+- Elastic: Add "Show unread messages" button to the search bar (#6587)
 - Elastic: Fix bug where toolbar disappears on attachment menu use in Chrome (#6677)
 - Elastic: Fix folders list scrolling on touch devices (#6706)
 - Elastic: Fix non-working pretty selects in Chrome browser (#6705)

program/localization/en_US/labels.inc

@@ -193,6 +193,7 @@ $labels['expand-all'] = 'Expand All';
 $labels['expand-unread'] = 'Expand Unread';
 $labels['collapse-all'] = 'Collapse All';
 $labels['threaded'] = 'Threaded';
+$labels['showunread'] = 'Show unread messages';
 
 $labels['autoexpand_threads'] = 'Expand message threads';
 $labels['do_expand'] = 'all threads';

skins/elastic/styles/widgets/menu.less

@@ -698,24 +698,27 @@ a.toolbar-button {
             margin: 0;
         }
 
-        &.options {
-            &:before {
+        &.options:before {
             content: @fa-var-angle-down;
         }
-        }
-
-        &.reset {
-            display: none;
 
-            &:before {
+        &.reset:before {
             content: @fa-var-times;
             font-size: 1rem;
         }
+
+        &.unread:before {
+            .font-icon-solid(@fa-var-envelope);
         }
 
+        &.reset,
         &.search {
             display: none;
         }
+
+        &.selected {
+            color: @color-success;
+        }
     }
 
     span.inner {

skins/elastic/templates/mail.html

@@ -43,6 +43,7 @@
 			label="refresh" title="checkmail" innerclass="inner" />
 		<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 	</div>
+	<roundcube:add_label name="showunread" />
 	<roundcube:object name="searchform" id="mailsearchform" wrapper="searchbar menu"
 		label="mailquicksearchbox" buttontitle="findmail" options="searchmenu" ariatag="h2" />
 	<div id="searchmenu" class="hidden searchoptions scroller propform formcontainer" aria-labelledby="aria-label-search-menu" aria-controls="messagelist">

skins/elastic/ui.js

@@ -1949,7 +1949,8 @@ function rcube_elastic_ui()
      */
     function searchbar_init(bar)
     {
-        var options_button = $('a.button.options', bar),
+        var unread_button = $(),
+            options_button = $('a.button.options', bar),
             input = $('input:not([type=hidden])', bar),
             placeholder = input.attr('placeholder'),
             form = $('form', bar),
@@ -1977,8 +1978,20 @@ function rcube_elastic_ui()
             },
             update_func = function() {
                 $(bar)[is_search_pending() ? 'addClass' : 'removeClass']('active');
+                unread_button[rcmail.gui_objects.search_filter && $(rcmail.gui_objects.search_filter).val() == 'UNSEEN' ? 'addClass' : 'removeClass']('selected');
             };
 
+        // Add Unread filter button
+        if (input.is('#mailsearchform')) {
+            unread_button = $('<a>')
+                .attr({'class': 'button unread', href: '#', role: 'button', title: rcmail.gettext('showunread')})
+                .on('click', function(e) {
+                    $(rcmail.gui_objects.search_filter).val($(e.target).is('.selected') ? 'ALL' : 'UNSEEN');
+                    rcmail.command('search');
+                })
+                .insertBefore(options_button);
+        }
+
         options_button.on('click', function(e) {
             var id = $(this).data('target'),
                 options = $('#' + id),