From 564ccdf4d8d77d6a849b031d4c3180b17c1e0672 Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <machniak@kolabsys.com>
Date: Sat, 14 Jan 2017 10:36:33 +0100
Subject: [PATCH] Implemented smart search boxes

---
 skins/elastic/styles.css                 | 49 ++++++++++++++++--
 skins/elastic/templates/addressbook.html |  4 +-
 skins/elastic/templates/folders.html     | 17 +++----
 skins/elastic/templates/mail.html        |  5 +-
 skins/elastic/ui.js                      | 65 ++++++++++++++++++++++--
 5 files changed, 120 insertions(+), 20 deletions(-)

diff --git a/skins/elastic/styles.css b/skins/elastic/styles.css
index 880f18b60..558ceec54 100644
--- a/skins/elastic/styles.css
+++ b/skins/elastic/styles.css
@@ -195,9 +195,10 @@ body {
 	font-weight: bold;
 	line-height: 30pt;
 	height: 30pt;
-	overflow: hidden;
 	padding: 0 0.5em;
 	margin: 0;
+	position: relative; /* for absolute positioning of searchbar */
+	overflow: hidden;
 }
 #layout > div > .header {
 	border-bottom: 1px solid #ddd;
@@ -208,7 +209,7 @@ body {
 
 /*** Login form ***/
 
-.task-login .content {
+.task-login #content {
 	text-align: center;
 	width: 100%;
 	background: url(images/watermark.jpg) center -20px no-repeat;
@@ -388,7 +389,39 @@ ul.listing li input[type=checkbox] {
 
 .toolbar > .spacer {
 	display: inline-block;
-	width: 1em;
+	width: 1.2em;
+}
+
+.searchbar {
+	display: table;
+	text-align: right;
+	position: absolute;
+	background-color: #f9f9f9;
+	z-index: 10;
+	top: 0;
+	right: 0;
+}
+
+.searchbar > form,
+.searchbar > a.button.options,
+.searchbar > a.button.reset {
+	display: none;
+	width: 1%;
+}
+
+.searchbar > form,
+.searchbar > form > input {
+	width: 98%;
+}
+
+.searchbar input {
+	border: none;
+	border-bottom: 1px solid #ddd;
+	background: transparent;
+}
+
+.searchbar > a.button.search.active {
+	color: green;
 }
 
 .header > .buttons > input.button {
@@ -688,6 +721,13 @@ button.ui.button.icon:before {
 	content: "\f050"; /* i.icon.fast.forward */
 }
 
+.searchbar > a.button.reset:before {
+	content: "\f00d"; /* i.icon.remove */
+}
+.searchbar > a.button.options:before {
+	content: "\f107"; /* i.icon.angle.down */
+}
+
 button.icon.save:before {
   content: "\f00c"; /* i.icon.checkmark */
 }
@@ -697,6 +737,9 @@ button.icon.edit:before {
 button.icon.qrcode:before {
   content: "\f029"; /* i.icon.qrcode */
 }
+button.icon.search:before {
+	content: "\f002"; /* i.icon.search */
+}
 
 
 /**** Styles for widescreen (3-column) view ****/
diff --git a/skins/elastic/templates/addressbook.html b/skins/elastic/templates/addressbook.html
index 6119402b3..8532b00c0 100644
--- a/skins/elastic/templates/addressbook.html
+++ b/skins/elastic/templates/addressbook.html
@@ -27,6 +27,8 @@
 		<a class="button menu-button" href="#menu"><i class="content icon"></i></a>
 		<a class="button back-sidebar-button" href="#sidebar"><i class="chevron left icon"></i></a>
 		<roundcube:object name="addresslisttitle" label="contacts" tag="span" />
+		<roundcube:object name="searchform" id="searchform" wrapper="searchbar toolbar"
+			label="contactsearchform" buttontitle="findcontacts" options="search-menu" ariatag="h2" />
 	</div>
 	<div class="scroller">
 		<roundcube:object name="addresslist" id="contacts-table" class="listing iconized" noheader="true" role="listbox" />
@@ -119,7 +121,7 @@
 		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="email" id="s_mod_email" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="email" /></span></label></li>
 		<li role="menuitem"><label><input type="checkbox" name="s_mods[]" value="*" id="s_mod_all" onclick="UI.set_searchmod(this)" /> <span><roundcube:label name="allfields" /></span></label></li>
 	</ul>
-	<div class="buttons"><a class="button" href="#" onclick="if (rcmail.command('search')) UI.show_popup('searchmenu',false)"><roundcube:label name="search" /></a></div>
+	<div class="buttons"><button class="ui button primary icon search" href="#" onclick="if (rcmail.command('search')) UI.show_popup('searchmenu',false)"><roundcube:label name="search" /></button></div>
 </div>
 
 <div id="dragcontact-menu" class="ui popup">
diff --git a/skins/elastic/templates/folders.html b/skins/elastic/templates/folders.html
index abf2a0d8b..59ad20539 100644
--- a/skins/elastic/templates/folders.html
+++ b/skins/elastic/templates/folders.html
@@ -10,17 +10,8 @@
 		<a class="button menu-button" href="#menu"><i class="content icon"></i></a>
 		<a class="button back-sidebar-button" href="#sidebar"><i class="chevron left icon"></i></a>
 		<roundcube:label name="folders" />
-		<a href="#folders" class="button" title="<roundcube:label name='findfolders' />" tabindex="0"><i class="icon search"></i></a>
-<!--
-		<roundcube:object name="folderfilter" id="folderlist-filter" class="listing" noheader="true" />
-		<div class="searchbox" role="search" aria-labelledby="aria-label-foldersearchform">
-			<h3 id="aria-label-foldersearchform" class="voice"><roundcube:label name="arialabelfoldersearchform" /></h3>
-			<label for="foldersearch" class="voice"><roundcube:label name="arialabelsearchterms" /></label>
-			<input type="text" name="q" id="foldersearch" placeholder="<roundcube:label name='findfolders' />" />
-			<a class="iconbutton searchicon"></a>
-			<roundcube:button command="reset-foldersearch" id="folderlistsearch-reset" class="iconbutton reset" title="resetsearch" label="resetsearch" />
-		</div>
--->
+		<roundcube:object name="searchform" id="foldersearch" wrapper="searchbar toolbar"
+			label="foldersearchform" buttontitle="findfolders" options="search-filter" ariatag="h2" />
 	</div>
 	<div class="scroller">
 		<roundcube:object name="foldersubscription" form="subscriptionform" id="subscription-table" class="treelist listing folderlist iconized" />
@@ -57,4 +48,8 @@
 	</ul>
 </div>
 
+<div id="search-filter" class="ui popup">
+	<roundcube:object name="folderfilter" id="folderlist-filter" class="listing" noheader="true" />
+</div>
+
 <roundcube:include file="/includes/footer.html" />
diff --git a/skins/elastic/templates/mail.html b/skins/elastic/templates/mail.html
index ff25e5b4e..b4ce62a43 100644
--- a/skins/elastic/templates/mail.html
+++ b/skins/elastic/templates/mail.html
@@ -30,7 +30,10 @@
 		<span id="folder-name"></span>
 		<div class="toolbar">
 			<roundcube:object name="listmenulink" class="button settings" innerclass="inner" />
+			<span class="spacer"></span><!-- spacer to compensate the search icon -->
 		</div>
+		<roundcube:object name="searchform" id="mailsearchform" wrapper="searchbar toolbar"
+			label="mailquicksearchbox" buttontitle="findmail" options="search-menu" ariatag="h2" />
 	</div>
 	<div id="messagelist-content" class="scroller" tabindex="-1">
 		<h2 id="aria-label-messagelist" class="voice"><roundcube:label name="arialabelmessagelist" /></h2>
@@ -112,7 +115,7 @@
 		<li role="menuitem"><label><input type="radio" name="s_scope" value="sub" id="s_scope_sub" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="subfolders" /></span></label></li>
 		<li role="menuitem"><label><input type="radio" name="s_scope" value="all" id="s_scope_all" onclick="UI.set_searchscope(this)" /> <span><roundcube:label name="allfolders" /></span></label></li>
 	</ul>
-	<div class="buttons"><a class="button" href="#" onclick="if (rcmail.command('search')) UI.show_popup('searchmenu',false)"><roundcube:label name="search" /></a></div>
+	<div class="buttons"><button class="ui button primary icon search" href="#" onclick="if (rcmail.command('search')) UI.show_popup('searchmenu',false)"><roundcube:label name="search" /></button></div>
 </div>
 
 <div id="dragmessage-menu" class="ui popup">
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index dc0814120..385e81264 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -23,7 +23,6 @@ function rcube_elastic_ui()
     // public methods
     this.register_frame_buttons = register_frame_buttons;
 
-
     env.last_selected = $('#layout > div.selected')[0];
 
     $(window).on('resize', function() {
@@ -115,10 +114,13 @@ function rcube_elastic_ui()
             .popup({
                 popup: '#' + popup_id,
                 exclusive: true,
-                on: 'click'
+                on: 'click',
+                position: $(this).data('popup-pos') || 'top left',
+                lastResort: true
             });
 
-        // TOOD: Set aria attributes on menu show/hide
+        // TODO: Set aria attributes on menu show/hide
+        // TODO: Set popup height so it is less that window height
     });
     $('.ui.popup').attr('aria-hidden', 'true');
 
@@ -178,6 +180,8 @@ function rcube_elastic_ui()
 
     // TODO: In phone mode convert the content toolbar into "hamburger menu"
 
+    // Initialize search forms (in list headers)
+    $('.header > .searchbar').each(function() { searchbar_init(this); });
 
     // Make login form pretty
     if (rcmail.env.task == 'login') {
@@ -391,7 +395,60 @@ function rcube_elastic_ui()
             rcmail.hide_message(p.object);
         }
 */
-    }
+    };
+
+    /**
+     * Initializes searchbar widget
+     */
+    function searchbar_init(bar)
+    {
+        var input = $('input', bar),
+            button = $('a.button.search', bar),
+            form = $('form', bar),
+            all_elements = $('form, a.button.options, a.button.reset', bar),
+            is_search_pending = function() {
+                // TODO: This have to be improved to detect real searching state
+                //       There are cases when search is active but the input is empty
+                return input.val();
+            },
+            hide_func = function() {
+                $(bar).animate({'width': '0'}, 200, 'swing', function() {
+                    all_elements.hide();
+                    button[is_search_pending() ? 'addClass' : 'removeClass']('active')
+                        .css('display', 'inline-block')
+                        .focus();
+                });
+            };
+
+        if (is_search_pending()) {
+            button.addClass('active');
+        }
+
+        // Display search form (with animation effect)
+        button.on('click', function() {
+            $(bar).animate({'width': '100%'}, 200);
+            all_elements.css('display', 'table-cell');
+            button.hide();
+            input.focus();
+        });
+
+        // Search reset action
+        $('a.button.reset', bar).on('click', function() {
+            // for treelist widget's search setting val and keyup.treelist is needed
+            // in normal search form reset-search command will do the trick
+            // TODO: This calls for some generalization, what about two searchboxes on a page?
+            input.val('').change().trigger('keyup.treelist', {keyCode: 27});
+            hide_func();
+        });
+
+        // These will hide the form, but not reset it
+        rcube_webmail.set_iframe_events({mousedown: hide_func});
+        $('body').on('mousedown', function(e) {
+            if (!button.is(':visible') && $.inArray(bar, $(e.target).parents()) == -1) {
+                hide_func();
+            }
+        });
+    };
 }
 
 var UI = new rcube_elastic_ui();