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

3 files changed, 28 insertions, 11 deletions

diff --git a/skins/elastic/styles/widgets/menu.less b/skins/elastic/styles/widgets/menu.less
index 952bf8b6f..450d7c61d 100644
--- a/skins/elastic/styles/widgets/menu.less
+++ b/skins/elastic/styles/widgets/menu.less
@@ -698,24 +698,27 @@ a.toolbar-button {
             margin: 0;
         }
 
-        &.options {
-            &:before {
-                content: @fa-var-angle-down;
-            }
+        &.options:before {
+            content: @fa-var-angle-down;
         }
 
-        &.reset {
-            display: none;
+        &.reset:before {
+            content: @fa-var-times;
+            font-size: 1rem;
+        }
 
-            &: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 {
diff --git a/skins/elastic/templates/mail.html b/skins/elastic/templates/mail.html
index a57140ce5..519b11c29 100644
--- a/skins/elastic/templates/mail.html
+++ b/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">
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index 6cff8fff6..cae1fb767 100644
--- a/skins/elastic/ui.js
+++ b/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),