Elastic: Improved UX of search dialogs (#6416)

No onchange event handlers on selects, start searching only on Search button click.

CHANGELOG

@@ -6,6 +6,7 @@ CHANGELOG Roundcube Webmail
 - Managesieve: Added support for 'editheader' extension - RFC5293 (#5954)
 - Password: Added 'modoboa' driver (#6361)
 - Password: Fix bug where password_dovecotpw_with_method setting could be ignored (#6436)
+- Elastic: Improved UX of search dialogs (#6416)
 - Fix so invalid smtp_helo_host is never used, fallback to localhost (#6408)
 - Fix custom logo size in Elastic (#6424)
 - Fix listing the same attachment multiple times on forwarded messages

program/steps/mail/func.inc

@@ -1607,7 +1607,9 @@ function rcmail_search_filter($attrib)
         $attrib['id'] = 'rcmlistfilter';
     }
 
-    $attrib['onchange'] = rcmail_output::JS_OBJECT_NAME.'.filter_mailbox(this.value)';
+    if (!rcube_utils::get_boolean($attrib['noevent'])) {
+        $attrib['onchange'] = rcmail_output::JS_OBJECT_NAME.'.filter_mailbox(this.value)';
+    }
 
     // Content-Type values of messages with attachments
     // the same as in app.js:add_message_row()

program/steps/settings/folders.inc

@@ -433,7 +433,9 @@ function rcmail_folder_filter($attrib)
         $attrib['id'] = 'rcmfolderfilter';
     }
 
-    $attrib['onchange'] = rcmail_output::JS_OBJECT_NAME . '.folder_filter(this.value)';
+    if (!rcube_utils::get_boolean($attrib['noevent'])) {
+        $attrib['onchange'] = rcmail_output::JS_OBJECT_NAME . '.folder_filter(this.value)';
+    }
 
     $roots  = array();
     $select = new html_select($attrib);

skins/elastic/templates/folders.html

@@ -16,10 +16,10 @@
 	<div id="foldersearchmenu" class="hidden searchoptions scroller propform formcontainer" aria-labelledby="aria-label-search-menu" aria-controls="subscription-table">
 		<h3 id="aria-label-search-menu" class="voice"><roundcube:label name="searchmod" /></h3>
 		<div class="formcontent">
-			<roundcube:object name="folderfilter" id="folderlist-filter" noheader="true" />
+			<roundcube:object name="folderfilter" id="folderlist-filter" noheader="true" noevent="true" />
 		</div>
 		<div class="formbuttons">
-			<button class="btn btn-primary icon search" href="#" onclick="return rcmail.command('search')"><roundcube:label name="search" /></button>
+			<button class="btn btn-primary icon search" href="#" onclick="rcmail.folder_filter($('#folderlist-filter').val())"><roundcube:label name="search" /></button>
 		</div>
 	</div>
 	<div class="scroller" tabindex="-1">

skins/elastic/templates/mail.html

@@ -61,13 +61,13 @@
 				<div class="input-group-prepend">
 					<label for="searchfilter" class="input-group-text"><roundcube:label name="type" /></label>
 				</div>
-				<roundcube:object name="searchfilter" id="searchfilter" />
+				<roundcube:object name="searchfilter" id="searchfilter" noevent="true" />
 			</div>
 			<div class="input-group">
 				<div class="input-group-prepend">
 					<label for="s_interval" class="input-group-text"><roundcube:label name="date" /></label>
 				</div>
-				<roundcube:object name="searchinterval" id="s_interval" onchange="rcmail.set_searchinterval($(this).val())" />
+				<roundcube:object name="searchinterval" id="s_interval" />
 			</div>
 			<div class="input-group">
 				<div class="input-group-prepend">

skins/elastic/ui.js

@@ -1792,6 +1792,10 @@ function rcube_elastic_ui()
                     return true;
                 }
 
+                if (rcmail.task == 'mail' && $('#s_interval').val()) {
+                    return true;
+                }
+
                 if (rcmail.gui_objects.search_filter && $(rcmail.gui_objects.search_filter).val() != 'ALL') {
                     return true;
                 }
@@ -1826,19 +1830,22 @@ function rcube_elastic_ui()
 
                 $('button.search', options).off('click.search').on('click.search', function() {
                     options_button.trigger('click');
+                    update_func();
                 });
             }
         });
 
         input.on('input change', update_func)
-            .on('focus', function() { input.attr('placeholder', ''); })
-            .on('blur', function() { input.attr('placeholder', placeholder); });
+            .on('focus blur', function(e) { input.attr('placeholder', e.type == 'blur' ? placeholder : ''); });
 
         // Search reset action
         $('a.reset', bar).on('click', function(e) {
             // for treelist widget's search setting val and keyup.treelist is needed
             // in normal search form reset-search command will do the trick
             input.val('').change().trigger('keyup.treelist', {keyCode: 27});
+            if ($(bar).is('.open')) {
+                options_button.click();
+            }
 
             // Reset filter
             if (rcmail.gui_objects.search_filter) {
@@ -1847,27 +1854,21 @@ function rcube_elastic_ui()
 
             if (rcmail.gui_objects.foldersfilter) {
                 $(rcmail.gui_objects.foldersfilter).val('---').change();
+                rcmail.folder_filter('---');
             }
 
             update_func();
         });
 
-        rcmail.addEventListener('init', function() {
-            update_func();
-
-            if (rcmail.gui_objects.search_filter) {
-                $(rcmail.gui_objects.search_filter).on('change', update_func);
-            }
-
-            if (rcmail.gui_objects.foldersfilter) {
-                $(rcmail.gui_objects.foldersfilter).on('change', update_func);
-            }
-        });
-        rcmail.addEventListener('beforelist', function() {
-            if ($(bar).is('.open')) {
-                options_button.click(); // close options form on 'list' request
-            }
-        });
+        rcmail.addEventListener('init', function() { update_func(); })
+            .addEventListener('beforelist', function() {
+                if ($(bar).is('.open')) {
+                    options_button.click(); // close options form on 'list' request
+                }
+            })
+            .addEventListener('responsebeforesearch', function() {
+                update_func();
+            });
     };
 
     /**
@@ -2492,15 +2493,17 @@ function rcube_elastic_ui()
     {
         var n, all,
             list = $('input[name="s_mods[]"]', obj),
-            scope_select = $('select[name=s_scope]', obj),
+            scope_select = $('#s_scope', obj),
             mbox = rcmail.env.mailbox,
             mods = rcmail.env.search_mods,
             scope = rcmail.env.search_scope || 'base';
 
         if (!$(obj).data('initialized')) {
-            list.on('change', function() { set_searchmod(this, obj); });
-            scope_select.on('change', function() { rcmail.set_searchscope($(this).val()); });
             $(obj).data('initialized', true);
+            if (list.length) {
+                list.on('change', function() { set_searchmod(obj, this); });
+                rcmail.addEventListener('beforesearch', function() { set_searchmod(obj); });
+            }
         }
 
         if (rcmail.env.search_mods) {
@@ -2532,12 +2535,13 @@ function rcube_elastic_ui()
         }
     };
 
-    function set_searchmod(elem, menu)
+    function set_searchmod(menu, elem)
     {
         var all, m, task = rcmail.env.task,
             mods = rcmail.env.search_mods,
             mbox = rcmail.env.mailbox,
-            scope = $('select[name=s_scope]', menu).val();
+            scope = $('#s_scope', menu).val(),
+            interval = $('#s_interval', menu).val();
 
         if (scope == 'all') {
             mbox = '*';
@@ -2553,12 +2557,19 @@ function rcube_elastic_ui()
             }
             m = mods[mbox];
             all = 'text';
+
+            rcmail.env.search_scope = scope;
+            rcmail.env.search_interval = interval;
         }
         else { //addressbook
             m = mods;
             all = '*';
         }
 
+        if (!elem) {
+            return;
+        }
+
         if (!elem.checked) {
             delete(m[elem.value]);
         }