# HG changeset patch
# User Marcin Lulek <mlulek@rhodecode.com>
# Date 2019-06-14 20:02:15
# Node ID 200520681cc3fda7ba62c4dbdb0bbeef408b23e3
# Parent  7da1bd0606236d388dd07f4fb6b6664bb9dd932c

quick-filter: added nicer UI and hints.

diff --git a/rhodecode/apps/home/views.py b/rhodecode/apps/home/views.py
--- a/rhodecode/apps/home/views.py
+++ b/rhodecode/apps/home/views.py
@@ -442,12 +442,14 @@ class HomeView(BaseAppView):
             def query_modifier():
                 qry = query
                 return {'q': qry, 'type': 'content'}
-            label = u'File search for `{}` in this repository.'.format(query)
+
+            label = u'File search for `{}`'.format(h.escape(query))
             file_qry = {
                 'id': -10,
                 'value': query,
                 'value_display': label,
                 'type': 'search',
+                'subtype': 'repo',
                 'url': h.route_path('search_repo',
                                     repo_name=repo_name,
                                     _query=query_modifier())
@@ -458,12 +460,13 @@ class HomeView(BaseAppView):
                 qry = query
                 return {'q': qry, 'type': 'commit'}
 
-            label = u'Commit search for `{}` in this repository.'.format(query)
+            label = u'Commit search for `{}`'.format(h.escape(query))
             commit_qry = {
                 'id': -20,
                 'value': query,
                 'value_display': label,
                 'type': 'search',
+                'subtype': 'repo',
                 'url': h.route_path('search_repo',
                                     repo_name=repo_name,
                                     _query=query_modifier())
@@ -482,12 +485,13 @@ class HomeView(BaseAppView):
                 qry = query
                 return {'q': qry, 'type': 'content'}
 
-            label = u'File search for `{}` in this repository group'.format(query)
+            label = u'File search for `{}`'.format(query)
             file_qry = {
                 'id': -30,
                 'value': query,
                 'value_display': label,
                 'type': 'search',
+                'subtype': 'repo_group',
                 'url': h.route_path('search_repo_group',
                                     repo_group_name=repo_group_name,
                                     _query=query_modifier())
@@ -498,12 +502,13 @@ class HomeView(BaseAppView):
                 qry = query
                 return {'q': qry, 'type': 'commit'}
 
-            label = u'Commit search for `{}` in this repository group'.format(query)
+            label = u'Commit search for `{}`'.format(query)
             commit_qry = {
                 'id': -40,
                 'value': query,
                 'value_display': label,
                 'type': 'search',
+                'subtype': 'repo_group',
                 'url': h.route_path('search_repo_group',
                                     repo_group_name=repo_group_name,
                                     _query=query_modifier())
@@ -524,6 +529,7 @@ class HomeView(BaseAppView):
                     'value': query,
                     'value_display': u'File search for: `{}`'.format(query),
                     'type': 'search',
+                    'subtype': 'global',
                     'url': h.route_path('search',
                                         _query={'q': query, 'type': 'content'})
                 })
@@ -533,6 +539,7 @@ class HomeView(BaseAppView):
                     'value': query,
                     'value_display': u'Commit search for: `{}`'.format(query),
                     'type': 'search',
+                    'subtype': 'global',
                     'url': h.route_path('search',
                                         _query={'q': query, 'type': 'commit'})
                 })
diff --git a/rhodecode/public/css/main.less b/rhodecode/public/css/main.less
--- a/rhodecode/public/css/main.less
+++ b/rhodecode/public/css/main.less
@@ -1250,6 +1250,16 @@ table.integrations {
     background-color: white;
 }
 
+.autocomplete-qfilter-suggestions {
+    width: auto !important; // overrides autocomplete.js
+    max-height: 100% !important;
+    min-width: 376px;
+    margin: 0;
+    border: @border-thickness solid @grey5;
+    color: @grey2;
+    background-color: white;
+}
+
 .autocomplete-selected {
     background: #F0F0F0;
 }
diff --git a/rhodecode/public/css/navigation.less b/rhodecode/public/css/navigation.less
--- a/rhodecode/public/css/navigation.less
+++ b/rhodecode/public/css/navigation.less
@@ -727,7 +727,7 @@ input {
 
     &.main_filter_input {
         padding: 5px 10px;
-        min-width: 260px;
+        min-width: 340px;
         color: @grey7;
         background: @black;
         min-height: 18px;
diff --git a/rhodecode/templates/base/base.mako b/rhodecode/templates/base/base.mako
--- a/rhodecode/templates/base/base.mako
+++ b/rhodecode/templates/base/base.mako
@@ -572,7 +572,7 @@
                     % endif
 
                     <li class="searchTagInput">
-                        <input class="main_filter_input" id="main_filter" size="15" type="text" name="main_filter" placeholder="${_('search / go to...')}" value="" />
+                        <input class="main_filter_input" id="main_filter" size="25" type="text" name="main_filter" placeholder="${_('search / go to...')}" value="" />
                     </li>
                     <li class="searchTag searchTagHelp">
                         <a href="#showFilterHelp" onclick="showMainFilterBox(); return false">?</a>
@@ -733,6 +733,7 @@
             }
 
             var searchType = data['type'];
+            var searchSubType = data['subtype'];
             var valueDisplay = data['value_display'];
 
             var pattern = '(' + escapeRegExChars(value) + ')';
@@ -749,9 +750,15 @@
             if (searchType === 'hint') {
                 icon += '<i class="icon-repo-group"></i> ';
             }
-            // full text search
+            // full text search/hints
             else if (searchType === 'search') {
                 icon += '<i class="icon-more"></i> ';
+                if (searchSubType !== undefined && searchSubType == 'repo') {
+                    valueDisplay += '<div class="pull-right tag">repository</div>';
+                }
+                else if (searchSubType !== undefined && searchSubType == 'repo_group') {
+                    valueDisplay += '<div class="pull-right tag">repo group</div>';
+                }
             }
             // repository
             else if (searchType === 'repo') {
@@ -857,6 +864,7 @@
             deferRequestBy: 300, //miliseconds
             tabDisabled: true,
             autoSelectFirst: false,
+            containerClass: 'autocomplete-qfilter-suggestions',
             formatResult: autocompleteMainFilterFormatResult,
             lookupFilter: autocompleteMainFilterResult,
             onSelect: function (element, suggestion) {