quick-search: improve styling of search input and results.

rhodecode/apps/home/tests/__init__.py

@@ -1,63 +1,69 b''
 # -*- coding: utf-8 -*-
 
 # Copyright (C) 2016-2019 RhodeCode GmbH
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License, version 3
 # (only), as published by the Free Software Foundation.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #
 # This program is dual-licensed. If you wish to learn more about the
 # RhodeCode Enterprise Edition, including its added features, Support services,
 # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 
 def assert_and_get_main_filter_content(result):
     repos = []
     groups = []
     commits = []
     users = []
     for data_item in result:
         assert data_item['id']
         assert data_item['value']
         assert data_item['value_display']
         assert data_item['url']
 
         if data_item['type'] == 'search':
             display_val = data_item['value_display']
-            assert 'Search for:' in display_val, display_val
+            if data_item['id'] == -1:
+                assert 'File search for:' in display_val, display_val
+            elif data_item['id'] == -2:
+                assert 'Commit search for:' in display_val, display_val
+            else:
+                assert False, 'No Proper ID returned {}'.format(data_item['id'])
+
         elif data_item['type'] == 'repo':
             repos.append(data_item)
         elif data_item['type'] == 'repo_group':
             groups.append(data_item)
         elif data_item['type'] == 'user':
             users.append(data_item)
         elif data_item['type'] == 'commit':
             commits.append(data_item)
         else:
             raise Exception('invalid type `%s`' % data_item['type'])
 
     return repos, groups, users, commits
 
 
 def assert_and_get_repo_list_content(result):
     repos = []
     for data in result:
         for data_item in data['children']:
             assert data_item['id']
             assert data_item['text']
             assert data_item['url']
 
             if data_item['type'] == 'repo':
                 repos.append(data_item)
             else:
                 raise Exception('invalid type %s' % data_item['type'])
 
     return repos

rhodecode/apps/home/views.py

@@ -1,596 +1,607 b''
 # -*- coding: utf-8 -*-
 
 # Copyright (C) 2016-2019 RhodeCode GmbH
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License, version 3
 # (only), as published by the Free Software Foundation.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #
 # This program is dual-licensed. If you wish to learn more about the
 # RhodeCode Enterprise Edition, including its added features, Support services,
 # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 import re
 import logging
 import collections
 
 from pyramid.view import view_config
 
 from rhodecode.apps._base import BaseAppView
 from rhodecode.lib import helpers as h
 from rhodecode.lib.auth import (
     LoginRequired, NotAnonymous, HasRepoGroupPermissionAnyDecorator,
     CSRFRequired)
 from rhodecode.lib.index import searcher_from_config
 from rhodecode.lib.utils2 import safe_unicode, str2bool, safe_int
 from rhodecode.lib.ext_json import json
 from rhodecode.model.db import (
     func, true, or_, in_filter_generator, Repository, RepoGroup, User, UserGroup)
 from rhodecode.model.repo import RepoModel
 from rhodecode.model.repo_group import RepoGroupModel
 from rhodecode.model.scm import RepoGroupList, RepoList
 from rhodecode.model.user import UserModel
 from rhodecode.model.user_group import UserGroupModel
 
 log = logging.getLogger(__name__)
 
 
 class HomeView(BaseAppView):
 
     def load_default_context(self):
         c = self._get_local_tmpl_context()
         c.user = c.auth_user.get_instance()
 
         return c
 
     @LoginRequired()
     @view_config(
         route_name='user_autocomplete_data', request_method='GET',
         renderer='json_ext', xhr=True)
     def user_autocomplete_data(self):
         self.load_default_context()
         query = self.request.GET.get('query')
         active = str2bool(self.request.GET.get('active') or True)
         include_groups = str2bool(self.request.GET.get('user_groups'))
         expand_groups = str2bool(self.request.GET.get('user_groups_expand'))
         skip_default_user = str2bool(self.request.GET.get('skip_default_user'))
 
         log.debug('generating user list, query:%s, active:%s, with_groups:%s',
                   query, active, include_groups)
 
         _users = UserModel().get_users(
             name_contains=query, only_active=active)
 
         def maybe_skip_default_user(usr):
             if skip_default_user and usr['username'] == UserModel.cls.DEFAULT_USER:
                 return False
             return True
         _users = filter(maybe_skip_default_user, _users)
 
         if include_groups:
             # extend with user groups
             _user_groups = UserGroupModel().get_user_groups(
                 name_contains=query, only_active=active,
                 expand_groups=expand_groups)
             _users = _users + _user_groups
 
         return {'suggestions': _users}
 
     @LoginRequired()
     @NotAnonymous()
     @view_config(
         route_name='user_group_autocomplete_data', request_method='GET',
         renderer='json_ext', xhr=True)
     def user_group_autocomplete_data(self):
         self.load_default_context()
         query = self.request.GET.get('query')
         active = str2bool(self.request.GET.get('active') or True)
         expand_groups = str2bool(self.request.GET.get('user_groups_expand'))
 
         log.debug('generating user group list, query:%s, active:%s',
                   query, active)
 
         _user_groups = UserGroupModel().get_user_groups(
             name_contains=query, only_active=active,
             expand_groups=expand_groups)
         _user_groups = _user_groups
 
         return {'suggestions': _user_groups}
 
     def _get_repo_list(self, name_contains=None, repo_type=None, limit=20):
         org_query = name_contains
         allowed_ids = self._rhodecode_user.repo_acl_ids(
             ['repository.read', 'repository.write', 'repository.admin'],
             cache=False, name_filter=name_contains) or [-1]
 
         query = Repository.query()\
             .order_by(func.length(Repository.repo_name))\
             .order_by(Repository.repo_name)\
             .filter(Repository.archived.isnot(true()))\
             .filter(or_(
                 # generate multiple IN to fix limitation problems
                 *in_filter_generator(Repository.repo_id, allowed_ids)
             ))
 
         if repo_type:
             query = query.filter(Repository.repo_type == repo_type)
 
         if name_contains:
             ilike_expression = u'%{}%'.format(safe_unicode(name_contains))
             query = query.filter(
                 Repository.repo_name.ilike(ilike_expression))
             query = query.limit(limit)
 
         acl_iter = query
 
         return [
             {
                 'id': obj.repo_name,
                 'value': org_query,
                 'value_display': obj.repo_name,
                 'text': obj.repo_name,
                 'type': 'repo',
                 'repo_id': obj.repo_id,
                 'repo_type': obj.repo_type,
                 'private': obj.private,
                 'url': h.route_path('repo_summary', repo_name=obj.repo_name)
             }
             for obj in acl_iter]
 
     def _get_repo_group_list(self, name_contains=None, limit=20):
         org_query = name_contains
         allowed_ids = self._rhodecode_user.repo_group_acl_ids(
             ['group.read', 'group.write', 'group.admin'],
             cache=False, name_filter=name_contains) or [-1]
 
         query = RepoGroup.query()\
             .order_by(func.length(RepoGroup.group_name))\
             .order_by(RepoGroup.group_name) \
             .filter(or_(
                 # generate multiple IN to fix limitation problems
                 *in_filter_generator(RepoGroup.group_id, allowed_ids)
             ))
 
         if name_contains:
             ilike_expression = u'%{}%'.format(safe_unicode(name_contains))
             query = query.filter(
                 RepoGroup.group_name.ilike(ilike_expression))
             query = query.limit(limit)
 
         acl_iter = query
 
         return [
             {
                 'id': obj.group_name,
                 'value': org_query,
                 'value_display': obj.group_name,
                 'text': obj.group_name,
                 'type': 'repo_group',
                 'repo_group_id': obj.group_id,
                 'url': h.route_path(
                     'repo_group_home', repo_group_name=obj.group_name)
             }
             for obj in acl_iter]
 
     def _get_user_list(self, name_contains=None, limit=20):
         org_query = name_contains
         if not name_contains:
             return []
 
         name_contains = re.compile('(?:user:)(.+)').findall(name_contains)
         if len(name_contains) != 1:
             return []
         name_contains = name_contains[0]
 
         query = User.query()\
             .order_by(func.length(User.username))\
             .order_by(User.username) \
             .filter(User.username != User.DEFAULT_USER)
 
         if name_contains:
             ilike_expression = u'%{}%'.format(safe_unicode(name_contains))
             query = query.filter(
                 User.username.ilike(ilike_expression))
             query = query.limit(limit)
 
         acl_iter = query
 
         return [
             {
                 'id': obj.user_id,
                 'value': org_query,
                 'value_display': obj.username,
                 'type': 'user',
                 'icon_link': h.gravatar_url(obj.email, 30),
                 'url': h.route_path(
                     'user_profile', username=obj.username)
             }
             for obj in acl_iter]
 
     def _get_user_groups_list(self, name_contains=None, limit=20):
         org_query = name_contains
         if not name_contains:
             return []
 
         name_contains = re.compile('(?:user_group:)(.+)').findall(name_contains)
         if len(name_contains) != 1:
             return []
         name_contains = name_contains[0]
 
         query = UserGroup.query()\
             .order_by(func.length(UserGroup.users_group_name))\
             .order_by(UserGroup.users_group_name)
 
         if name_contains:
             ilike_expression = u'%{}%'.format(safe_unicode(name_contains))
             query = query.filter(
                 UserGroup.users_group_name.ilike(ilike_expression))
             query = query.limit(limit)
 
         acl_iter = query
 
         return [
             {
                 'id': obj.users_group_id,
                 'value': org_query,
                 'value_display': obj.users_group_name,
                 'type': 'user_group',
                 'url': h.route_path(
                     'user_group_profile', user_group_name=obj.users_group_name)
             }
             for obj in acl_iter]
 
     def _get_hash_commit_list(self, auth_user, searcher, query):
         org_query = query
         if not query or len(query) < 3 or not searcher:
             return []
 
         commit_hashes = re.compile('(?:commit:)([0-9a-f]{2,40})').findall(query)
 
         if len(commit_hashes) != 1:
             return []
         commit_hash = commit_hashes[0]
 
         result = searcher.search(
             'commit_id:{}*'.format(commit_hash), 'commit', auth_user,
             raise_on_exc=False)
 
-        return [
-            {
+        commits = []
+        for entry in result['results']:
+            repo_data = {
+                'repository_id': entry.get('repository_id'),
+                'repository_type': entry.get('repo_type'),
+                'repository_name': entry.get('repository'),
+            }
+
+            commit_entry = {
                 'id': entry['commit_id'],
                 'value': org_query,
-                'value_display': 'repo `{}` commit: {}'.format(
+                'value_display': '`{}` commit: {}'.format(
                     entry['repository'], entry['commit_id']),
                 'type': 'commit',
                 'repo': entry['repository'],
+                'repo_data': repo_data,
+
                 'url': h.route_path(
                     'repo_commit',
                     repo_name=entry['repository'], commit_id=entry['commit_id'])
             }
-            for entry in result['results']]
+
+            commits.append(commit_entry)
+        return commits
 
     @LoginRequired()
     @view_config(
         route_name='repo_list_data', request_method='GET',
         renderer='json_ext', xhr=True)
     def repo_list_data(self):
         _ = self.request.translate
         self.load_default_context()
 
         query = self.request.GET.get('query')
         repo_type = self.request.GET.get('repo_type')
         log.debug('generating repo list, query:%s, repo_type:%s',
                   query, repo_type)
 
         res = []
         repos = self._get_repo_list(query, repo_type=repo_type)
         if repos:
             res.append({
                 'text': _('Repositories'),
                 'children': repos
             })
 
         data = {
             'more': False,
             'results': res
         }
         return data
 
     @LoginRequired()
     @view_config(
         route_name='repo_group_list_data', request_method='GET',
         renderer='json_ext', xhr=True)
     def repo_group_list_data(self):
         _ = self.request.translate
         self.load_default_context()
 
         query = self.request.GET.get('query')
 
         log.debug('generating repo group list, query:%s',
                   query)
 
         res = []
         repo_groups = self._get_repo_group_list(query)
         if repo_groups:
             res.append({
                 'text': _('Repository Groups'),
                 'children': repo_groups
             })
 
         data = {
             'more': False,
             'results': res
         }
         return data
 
     def _get_default_search_queries(self, search_context, searcher, query):
         if not searcher:
             return []
 
         is_es_6 = searcher.is_es_6
 
         queries = []
         repo_group_name, repo_name, repo_context = None, None, None
 
         # repo group context
         if search_context.get('search_context[repo_group_name]'):
             repo_group_name = search_context.get('search_context[repo_group_name]')
         if search_context.get('search_context[repo_name]'):
             repo_name = search_context.get('search_context[repo_name]')
             repo_context = search_context.get('search_context[repo_view_type]')
 
         if is_es_6 and repo_name:
             # files
             def query_modifier():
                 qry = query
                 return {'q': qry, 'type': 'content'}
             label = u'File search for `{}` in this repository.'.format(query)
             queries.append(
                 {
                     'id': -10,
                     'value': query,
                     'value_display': label,
                     'type': 'search',
                     'url': h.route_path('search_repo',
                                         repo_name=repo_name,
                                         _query=query_modifier())
                 }
             )
 
             # commits
             def query_modifier():
                 qry = query
                 return {'q': qry, 'type': 'commit'}
 
             label = u'Commit search for `{}` in this repository.'.format(query)
             queries.append(
                 {
-                    'id': -10,
+                    'id': -20,
                     'value': query,
                     'value_display': label,
                     'type': 'search',
                     'url': h.route_path('search_repo',
                                         repo_name=repo_name,
                                         _query=query_modifier())
                 }
             )
 
         elif is_es_6 and repo_group_name:
             # files
             def query_modifier():
                 qry = query
                 return {'q': qry, 'type': 'content'}
 
             label = u'File search for `{}` in this repository group'.format(query)
             queries.append(
                 {
-                    'id': -20,
+                    'id': -30,
                     'value': query,
                     'value_display': label,
                     'type': 'search',
                     'url': h.route_path('search_repo_group',
                                         repo_group_name=repo_group_name,
                                         _query=query_modifier())
                 }
             )
 
             # commits
             def query_modifier():
                 qry = query
                 return {'q': qry, 'type': 'commit'}
 
             label = u'Commit search for `{}` in this repository group'.format(query)
             queries.append(
                 {
-                    'id': -20,
+                    'id': -40,
                     'value': query,
                     'value_display': label,
                     'type': 'search',
                     'url': h.route_path('search_repo_group',
                                         repo_group_name=repo_group_name,
                                         _query=query_modifier())
                 }
             )
 
         if not queries:
             queries.append(
                 {
                     'id': -1,
                     'value': query,
-                    'value_display': u'Commit search for: `{}`'.format(query),
+                    'value_display': u'File search for: `{}`'.format(query),
                     'type': 'search',
                     'url': h.route_path('search',
                                         _query={'q': query, 'type': 'content'})
                 })
             queries.append(
                 {
-                    'id': -1,
+                    'id': -2,
                     'value': query,
-                    'value_display': u'File search for: `{}`'.format(query),
+                    'value_display': u'Commit search for: `{}`'.format(query),
                     'type': 'search',
                     'url': h.route_path('search',
                                         _query={'q': query, 'type': 'commit'})
                 })
 
         return queries
 
     @LoginRequired()
     @view_config(
         route_name='goto_switcher_data', request_method='GET',
         renderer='json_ext', xhr=True)
     def goto_switcher_data(self):
         c = self.load_default_context()
 
         _ = self.request.translate
 
         query = self.request.GET.get('query')
         log.debug('generating main filter data, query %s', query)
 
         res = []
         if not query:
             return {'suggestions': res}
 
         searcher = searcher_from_config(self.request.registry.settings)
         for _q in self._get_default_search_queries(self.request.GET, searcher, query):
             res.append(_q)
 
         repo_group_id = safe_int(self.request.GET.get('search_context[repo_group_id]'))
         if repo_group_id:
             repo_group = RepoGroup.get(repo_group_id)
             composed_hint = '{}/{}'.format(repo_group.group_name, query)
             show_hint = not query.startswith(repo_group.group_name)
             if repo_group and show_hint:
                 hint = u'Repository search inside: `{}`'.format(composed_hint)
                 res.append({
                     'id': -1,
                     'value': composed_hint,
                     'value_display': hint,
                     'type': 'hint',
                     'url': ""
                 })
 
         repo_groups = self._get_repo_group_list(query)
         for serialized_repo_group in repo_groups:
             res.append(serialized_repo_group)
 
         repos = self._get_repo_list(query)
         for serialized_repo in repos:
             res.append(serialized_repo)
 
         # TODO(marcink): should all logged in users be allowed to search others?
         allowed_user_search = self._rhodecode_user.username != User.DEFAULT_USER
         if allowed_user_search:
             users = self._get_user_list(query)
             for serialized_user in users:
                 res.append(serialized_user)
 
             user_groups = self._get_user_groups_list(query)
             for serialized_user_group in user_groups:
                 res.append(serialized_user_group)
 
         commits = self._get_hash_commit_list(c.auth_user, searcher, query)
         if commits:
             unique_repos = collections.OrderedDict()
             for commit in commits:
                 repo_name = commit['repo']
                 unique_repos.setdefault(repo_name, []).append(commit)
 
             for repo, commits in unique_repos.items():
                 for commit in commits:
                     res.append(commit)
 
         return {'suggestions': res}
 
     def _get_groups_and_repos(self, repo_group_id=None):
         # repo groups groups
         repo_group_list = RepoGroup.get_all_repo_groups(group_id=repo_group_id)
         _perms = ['group.read', 'group.write', 'group.admin']
         repo_group_list_acl = RepoGroupList(repo_group_list, perm_set=_perms)
         repo_group_data = RepoGroupModel().get_repo_groups_as_dict(
             repo_group_list=repo_group_list_acl, admin=False)
 
         # repositories
         repo_list = Repository.get_all_repos(group_id=repo_group_id)
         _perms = ['repository.read', 'repository.write', 'repository.admin']
         repo_list_acl = RepoList(repo_list, perm_set=_perms)
         repo_data = RepoModel().get_repos_as_dict(
             repo_list=repo_list_acl, admin=False)
 
         return repo_data, repo_group_data
 
     @LoginRequired()
     @view_config(
         route_name='home', request_method='GET',
         renderer='rhodecode:templates/index.mako')
     def main_page(self):
         c = self.load_default_context()
         c.repo_group = None
 
         repo_data, repo_group_data = self._get_groups_and_repos()
         # json used to render the grids
         c.repos_data = json.dumps(repo_data)
         c.repo_groups_data = json.dumps(repo_group_data)
 
         return self._get_template_context(c)
 
     @LoginRequired()
     @HasRepoGroupPermissionAnyDecorator(
         'group.read', 'group.write', 'group.admin')
     @view_config(
         route_name='repo_group_home', request_method='GET',
         renderer='rhodecode:templates/index_repo_group.mako')
     @view_config(
         route_name='repo_group_home_slash', request_method='GET',
         renderer='rhodecode:templates/index_repo_group.mako')
     def repo_group_main_page(self):
         c = self.load_default_context()
         c.repo_group = self.request.db_repo_group
         repo_data, repo_group_data = self._get_groups_and_repos(
             c.repo_group.group_id)
 
         # json used to render the grids
         c.repos_data = json.dumps(repo_data)
         c.repo_groups_data = json.dumps(repo_group_data)
 
         return self._get_template_context(c)
 
     @LoginRequired()
     @CSRFRequired()
     @view_config(
         route_name='markup_preview', request_method='POST',
         renderer='string', xhr=True)
     def markup_preview(self):
         # Technically a CSRF token is not needed as no state changes with this
         # call. However, as this is a POST is better to have it, so automated
         # tools don't flag it as potential CSRF.
         # Post is required because the payload could be bigger than the maximum
         # allowed by GET.
 
         text = self.request.POST.get('text')
         renderer = self.request.POST.get('renderer') or 'rst'
         if text:
             return h.render(text, renderer=renderer, mentions=True)
         return ''
 
     @LoginRequired()
     @CSRFRequired()
     @view_config(
         route_name='store_user_session_value', request_method='POST',
         renderer='string', xhr=True)
     def store_user_session_attr(self):
         key = self.request.POST.get('key')
         val = self.request.POST.get('val')
 
         existing_value = self.request.session.get(key)
         if existing_value != val:
             self.request.session[key] = val
 
         return 'stored:{}'.format(key)

rhodecode/public/css/navigation.less

@@ -1,684 +1,698 b''
 // navigation.less
 // For use in RhodeCode applications;
 // see style guide documentation for guidelines.
 
 // HEADER NAVIGATION
 
 .horizontal-list {
     float: right;
     display: block;
     margin: 0;
     padding: 0;
     -webkit-padding-start: 0;
     text-align: left;
     font-size: @navigation-fontsize;
     color: @grey6;
     z-index:10;
 
     li {
         line-height: 1em;
         list-style-type: none;
 
         a {
             padding: 0 .5em;
 
             &.menu_link_notifications {
                 .pill(7px,@rcblue);
                 display: inline;
                 margin: 0 7px 0 .7em;
                 font-size: @basefontsize;
                 color: white;
 
                 &.empty {
                     background-color: @grey4;
                 }
 
                 &:hover {
                     background-color: @rcdarkblue;
                 }
             }
         }
         .pill_container {
             margin: 1.25em 0px 0px 0px;
             float: right;
         }
 
         &#quick_login_li {
             &:hover {
                 color: @grey5;
             }
 
             a.menu_link_notifications {
                 color: white;
             }
 
             .user {
                 padding-bottom: 10px;
             }
 
             &.open {
                 .user {
                     border-bottom: 5px solid @rcblue;
                 }
             }
         }
 
         &:before { content: none; }
 
         &:last-child {
             .menulabel {
                 padding-right: 0;
                 border-right: none;
 
                 .show_more {
                     padding-right: 0;
                 }
             }
 
             &> a {
                 border-bottom: none;
             }
         }
 
         &.active {
             border-bottom: 5px solid @rcblue;
         }
 
         &.open {
 
             a {
                 color: white;
             }
         }
 
         &:focus {
             outline: none;
         }
 
         ul li  {
             display: block;
 
             &:last-child> a {
                 border-bottom: none;
             }
 
             ul li:last-child a {
                 /* we don't expect more then 3 levels of submenu and the third
                 level can have different html structure */
                 border-bottom: none;
             }
         }
     }
 
     > li {
         float: left;
         display: block;
         padding: 0;
 
         > a,
         &.has_select2 a {
             display: block;
             padding: 10px 0 2px;
         }
 
         .menulabel {
             padding: 0 .5em;
             line-height: 1em;
             // for this specifically we do not use a variable
             border-right: 1px solid @grey4;
         }
 
         .pr_notifications {
             padding-left: .5em;
         }
 
         .pr_notifications + .menulabel {
             display:inline;
             padding-left: 0;
         }
 
         &:hover,
         &.open,
         &.active {
             a {
                 color: @grey1;
             }
         }
     }
 
     pre {
         margin: 0;
         padding: 0;
     }
 
     .select2-container,
     .menulink.childs {
         position: relative;
     }
 
     #quick_login {
 
         li a {
             padding: .5em 0;
             border-bottom: none;
             color: @grey2;
 
             &:hover { color: @grey1; }
         }
     }
 
     #quick_login_link {
         display: inline-block;
 
         .gravatar {
             border: 1px solid @grey5;
         }
 
         .gravatar-login {
             height: 20px;
             width: 20px;
             margin: -8px 0;
             padding: 0;
         }
 
         &:hover .user {
             color: @grey6;
         }
     }
 }
 .header .horizontal-list {
 
     li {
 
         &#quick_login_li {
             padding-left: .5em;
 
             &:hover #quick_login_link {
                 color: inherit;
             }
 
             .menu_link_user {
                 padding: 0 2px;
             }
         }
         list-style-type: none;
     }
 
     > li {
 
         a {
             padding: 18px 0 12px 0;
             color: @nav-grey;
 
             &.menu_link_notifications {
                 padding: 1px 8px;
             }
         }
 
         &:hover,
         &.open,
         &.active {
             .pill_container a {
                 // don't select text for the pill container, it has it' own
                 // hover behaviour
                 color: @nav-grey;
             }
         }
 
         &:hover,
         &.open,
         &.active {
             a {
                 color: @grey6;
             }
         }
 
         .select2-dropdown-open a {
             color: @grey6;
         }
 
         .repo-switcher {
             padding-left: 0;
 
             .menulabel {
                 padding-left: 0;
             }
         }
     }
 
     li ul li  {
         background-color:@grey2;
 
         a {
             padding: .5em 0;
             border-bottom: @border-thickness solid @border-default-color;
             color: @grey6;
         }
 
          &:last-child a, &.last a{
             border-bottom: none;
         }
 
         &:hover {
             background-color: @grey3;
         }
     }
 
     .submenu {
         margin-top: 5px;
     }
 }
 
 // SUBMENUS
 .navigation .submenu {
     display: none;
 }
 
 .navigation li.open {
     .submenu {
         display: block;
     }
 }
 
 .navigation li:last-child .submenu {
     right: -20px;
     left: auto;
 }
 
 .submenu {
     position: absolute;
     top: 100%;
     left: 0;
     min-width: 150px;
     margin: 6px 0 0;
     padding: 0;
     text-align: left;
     font-family: @text-light;
     border-radius: @border-radius;
     z-index: 20;
 
     li {
         display: block;
         margin: 0;
         padding: 0 .5em;
         line-height: 1em;
         color: @grey3;
         background-color: @grey6;
         list-style-type: none;
 
         a {
             display: block;
             width: 100%;
             padding: .5em 0;
             border-right: none;
             border-bottom: @border-thickness solid white;
             color: @grey3;
         }
 
         ul {
             display: none;
             position: absolute;
             top: 0;
             right: 100%;
             padding: 0;
             z-index: 30;
         }
         &:hover {
             background-color: @grey5;
             -webkit-transition: background .3s;
                -moz-transition: background .3s;
                  -o-transition: background .3s;
                     transition: background .3s;
 
             ul {
                 display: block;
             }
         }
     }
 
 }
 
 
 
 
 // repo dropdown
 .quick_repo_menu {
     width: 15px;
     text-align: center;
     position: relative;
     cursor: pointer;
 
     div {
         overflow: visible !important;
     }
 
     &.sorting {
         cursor: auto;
     }
 
     &:hover {
         .menu_items_container {
             position: absolute;
             display: block;
         }
         .menu_items {
             display: block;
         }
     }
 
     i {
         margin: 0;
         color: @grey4;
     }
 
     .menu_items_container {
         position: absolute;
         top: 0;
         left: 100%;
         margin: 0;
         padding: 0;
         list-style: none;
         background-color: @grey6;
         z-index: 999;
         text-align: left;
 
         a {
             color: @grey2;
         }
 
         ul.menu_items {
             margin: 0;
             padding: 0;
         }
 
         li {
             margin: 0;
             padding: 0;
             line-height: 1em;
             list-style-type: none;
 
             a {
                 display: block;
                 height: 16px;
                 padding: 8px; //must add up to td height (28px)
                 width: 120px; // set width
 
                 &:hover {
                     background-color: @grey5;
                     -webkit-transition: background .3s;
                        -moz-transition: background .3s;
                          -o-transition: background .3s;
                             transition: background .3s;
                 }
             }
         }
     }
 }
 
 // Header Repository Switcher
 // Select2 Dropdown
 #select2-drop.select2-drop.repo-switcher-dropdown  {
     width: auto !important;
     margin-top: 5px;
     padding: 1em 0;
     text-align: left;
     .border-radius-bottom(@border-radius);
     border-color: transparent;
     color: @grey6;
     background-color: @grey2;
 
     input {
         min-width: 90%;
     }
 
     ul.select2-result-sub {
 
         li {
             line-height: 1em;
 
             &:hover,
             &.select2-highlighted {
                 background-color: @grey3;
             }
         }
 
         &:before { content: none; }
     }
 
     ul.select2-results {
         min-width: 200px;
         margin: 0;
         padding: 0;
         list-style-type: none;
         overflow-x: visible;
         overflow-y: scroll;
 
         li {
             padding: 0 8px;
             line-height: 1em;
             color: @grey6;
 
             &>.select2-result-label {
                 padding: 8px 0;
                 border-bottom: @border-thickness solid @grey3;
                 white-space: nowrap;
                 color: @grey5;
                 cursor: pointer;
             }
 
             &.select2-result-with-children {
                 margin: 0;
                 padding: 0;
             }
 
             &.select2-result-unselectable > .select2-result-label {
                 margin: 0 8px;
             }
 
         }
     }
 
     ul.select2-result-sub {
         margin: 0;
         padding: 0;
 
         li {
             display: block;
             margin: 0;
             border-right: none;
             line-height: 1em;
             font-family: @text-light;
             color: @grey2;
             list-style-type: none;
 
             &:hover {
                 background-color: @grey3;
             }
         }
     }
 }
 
 
 #context-bar {
     display: block;
     margin: 0 auto;
     padding: 0 @header-padding;
     background-color: @grey6;
     border-bottom: @border-thickness solid @grey5;
 
     .clear {
         clear: both;
     }
 }
 
 ul#context-pages {
     li {
         line-height: 1em;
         list-style-type: none;
 
         a {
             color: @grey3;
         }
 
         &.active {
             // special case, non-variable color
             border-bottom: 4px solid @nav-grey;
 
             a {
                 color: @grey1;
             }
         }
     }
 }
 
 // PAGINATION
 
 .pagination {
     border: @border-thickness solid @rcblue;
     color: @rcblue;
 
     .current {
         color: @grey4;
     }
 }
 
 .dataTables_processing {
     text-align: center;
     font-size: 1.1em;
     position: relative;
     top: 95px;
 }
 
 .dataTables_paginate, .pagination-wh {
     text-align: left;
     display: inline-block;
     border-left: 1px solid @rcblue;
     float: none;
     overflow: hidden;
 
     .paginate_button, .pager_curpage,
     .pager_link, .pg-previous, .pg-next, .pager_dotdot {
         display: inline-block;
         padding: @menupadding/4 @menupadding;
         border: 1px solid @rcblue;
         border-left: 0;
         color: @rcblue;
         cursor: pointer;
         float: left;
     }
 
     .pager_curpage, .pager_dotdot,
     .paginate_button.current, .paginate_button.disabled,
     .disabled {
         color: @grey3;
         cursor: default;
     }
 
     .ellipsis {
         display: inline-block;
         text-align: left;
         padding: @menupadding/4 @menupadding;
         border: 1px solid @rcblue;
         border-left: 0;
         float: left;
     }
 }
 
 // SIDEBAR
 
 .sidebar {
     .block-left;
     clear: left;
     max-width: @sidebar-width;
     margin-right: @sidebarpadding;
     padding-right: @sidebarpadding;
     font-family: @text-regular;
     color: @grey1;
 
     &#graph_nodes {
         clear:both;
         width: auto;
         margin-left: -100px;
         padding: 0;
         border: none;
     }
 
     .nav-pills {
         margin: 0;
     }
 
     .nav {
         list-style: none;
         padding: 0;
 
         li {
             padding-bottom: @menupadding;
             line-height: 1em;
             color: @grey4;
             list-style-type: none;
 
             &.active a {
                 color: @grey2;
             }
 
             a {
                 color: @grey4;
             }
         }
 
     }
 }
 
 .main_filter_help_box {
     padding: 7px 7px;
     border-top: 1px solid @grey4;
     border-right: 1px solid @grey4;
     border-bottom: 1px solid @grey4;
     display: inline-block;
     vertical-align: top;
-    margin-left: -7px;
-    background: @grey3;
+    background: inherit;
+    position: absolute;
+    right: 8px;
+    top: 9px;
 }
 
 .main_filter_input_box {
     display: inline-block;
 }
 
 .main_filter_box {
     margin: 9px 0 0 0;
 }
 
 #main_filter_help {
     background: @grey3;
     border: 1px solid black;
     position: absolute;
-    white-space: pre-wrap;
+    white-space: pre;
     z-index: 9999;
     color: @nav-grey;
     margin: 1px 7px;
-    padding: 0 2px;
+    padding: 0 10px;
 }
 
 .main_filter_input {
     padding: 5px;
-    min-width: 220px;
+    min-width: 260px;
     color: @nav-grey;
     background: @grey3;
     min-height: 18px;
+
+
+    &:active {
+      color: @grey2 !important;
+      background: white !important;
 }
+    &:focus {
+      color: @grey2 !important;
+      background: white !important;
+    }
+}
+
+
 
 .main_filter_input::placeholder {
    color: @nav-grey;
    opacity: 1;
 }
 
 .notice-box {
     display:block !important;
     padding: 9px 0 !important;
 }
 
 .menulabel-notice {
     border: 1px solid @color5;
     padding:7px 10px;
     color: @color5;
 }

rhodecode/templates/base/base.mako

@@ -1,796 +1,815 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="root.mako"/>
 
 <%include file="/ejs_templates/templates.html"/>
 
 <div class="outerwrapper">
   <!-- HEADER -->
   <div class="header">
       <div id="header-inner" class="wrapper">
           <div id="logo">
               <div class="logo-wrapper">
                   <a href="${h.route_path('home')}"><img src="${h.asset('images/rhodecode-logo-white-216x60.png')}" alt="RhodeCode"/></a>
               </div>
               %if c.rhodecode_name:
                <div class="branding">- ${h.branding(c.rhodecode_name)}</div>
               %endif
           </div>
           <!-- MENU BAR NAV -->
           ${self.menu_bar_nav()}
           <!-- END MENU BAR NAV -->
       </div>
   </div>
   ${self.menu_bar_subnav()}
   <!-- END HEADER -->
 
   <!-- CONTENT -->
   <div id="content" class="wrapper">
 
       <rhodecode-toast id="notifications"></rhodecode-toast>
 
       <div class="main">
           ${next.main()}
       </div>
   </div>
   <!-- END CONTENT -->
 
 </div>
 <!-- FOOTER -->
 <div id="footer">
    <div id="footer-inner" class="title wrapper">
        <div>
            <p class="footer-link-right">
                % if c.visual.show_version:
                    RhodeCode Enterprise ${c.rhodecode_version} ${c.rhodecode_edition}
                % endif
                &copy; 2010-${h.datetime.today().year}, <a href="${h.route_url('rhodecode_official')}" target="_blank">RhodeCode GmbH</a>. All rights reserved.
                % if c.visual.rhodecode_support_url:
                   <a href="${c.visual.rhodecode_support_url}" target="_blank">${_('Support')}</a>
                % endif
            </p>
            <% sid = 'block' if request.GET.get('showrcid') else 'none' %>
            <p class="server-instance" style="display:${sid}">
                ## display hidden instance ID if specially defined
                % if c.rhodecode_instanceid:
                    ${_('RhodeCode instance id: {}').format(c.rhodecode_instanceid)}
                % endif
            </p>
        </div>
    </div>
 </div>
 
 <!-- END FOOTER -->
 
 ### MAKO DEFS ###
 
 <%def name="menu_bar_subnav()">
 </%def>
 
 <%def name="breadcrumbs(class_='breadcrumbs')">
     <div class="${class_}">
     ${self.breadcrumbs_links()}
     </div>
 </%def>
 
 <%def name="admin_menu()">
   <ul class="admin_menu submenu">
       <li><a href="${h.route_path('admin_audit_logs')}">${_('Admin audit logs')}</a></li>
       <li><a href="${h.route_path('repos')}">${_('Repositories')}</a></li>
       <li><a href="${h.route_path('repo_groups')}">${_('Repository groups')}</a></li>
       <li><a href="${h.route_path('users')}">${_('Users')}</a></li>
       <li><a href="${h.route_path('user_groups')}">${_('User groups')}</a></li>
       <li><a href="${h.route_path('admin_permissions_application')}">${_('Permissions')}</a></li>
       <li><a href="${h.route_path('auth_home', traverse='')}">${_('Authentication')}</a></li>
       <li><a href="${h.route_path('global_integrations_home')}">${_('Integrations')}</a></li>
       <li><a href="${h.route_path('admin_defaults_repositories')}">${_('Defaults')}</a></li>
       <li class="last"><a href="${h.route_path('admin_settings')}">${_('Settings')}</a></li>
   </ul>
 </%def>
 
 
 <%def name="dt_info_panel(elements)">
     <dl class="dl-horizontal">
     %for dt, dd, title, show_items in elements:
       <dt>${dt}:</dt>
       <dd title="${h.tooltip(title)}">
       %if callable(dd):
           ## allow lazy evaluation of elements
           ${dd()}
       %else:
           ${dd}
       %endif
       %if show_items:
           <span class="btn-collapse" data-toggle="item-${h.md5_safe(dt)[:6]}-details">${_('Show More')} </span>
       %endif
       </dd>
 
       %if show_items:
           <div class="collapsable-content" data-toggle="item-${h.md5_safe(dt)[:6]}-details" style="display: none">
           %for item in show_items:
               <dt></dt>
               <dd>${item}</dd>
           %endfor
           </div>
       %endif
 
     %endfor
     </dl>
 </%def>
 
 
 <%def name="gravatar(email, size=16)">
   <%
     if (size > 16):
         gravatar_class = 'gravatar gravatar-large'
     else:
         gravatar_class = 'gravatar'
   %>
   <%doc>
     TODO: johbo: For now we serve double size images to make it smooth
     for retina. This is how it worked until now. Should be replaced
     with a better solution at some point.
   </%doc>
   <img class="${gravatar_class}" src="${h.gravatar_url(email, size * 2)}" height="${size}" width="${size}">
 </%def>
 
 
 <%def name="gravatar_with_user(contact, size=16, show_disabled=False)">
   <% email = h.email_or_none(contact) %>
   <div class="rc-user tooltip" title="${h.tooltip(h.author_string(email))}">
     ${self.gravatar(email, size)}
     <span class="${'user user-disabled' if show_disabled else 'user'}"> ${h.link_to_user(contact)}</span>
   </div>
 </%def>
 
 
 ## admin menu used for people that have some admin resources
 <%def name="admin_menu_simple(repositories=None, repository_groups=None, user_groups=None)">
   <ul class="submenu">
    %if repositories:
       <li class="local-admin-repos"><a href="${h.route_path('repos')}">${_('Repositories')}</a></li>
    %endif
    %if repository_groups:
       <li class="local-admin-repo-groups"><a href="${h.route_path('repo_groups')}">${_('Repository groups')}</a></li>
    %endif
    %if user_groups:
       <li class="local-admin-user-groups"><a href="${h.route_path('user_groups')}">${_('User groups')}</a></li>
    %endif
   </ul>
 </%def>
 
 <%def name="repo_page_title(repo_instance)">
 <div class="title-content">
     <div class="title-main">
         ## SVN/HG/GIT icons
         %if h.is_hg(repo_instance):
             <i class="icon-hg"></i>
         %endif
         %if h.is_git(repo_instance):
             <i class="icon-git"></i>
         %endif
         %if h.is_svn(repo_instance):
             <i class="icon-svn"></i>
         %endif
 
         ## public/private
         %if repo_instance.private:
             <i class="icon-repo-private"></i>
         %else:
             <i class="icon-repo-public"></i>
         %endif
 
         ## repo name with group name
         ${h.breadcrumb_repo_link(repo_instance)}
 
     </div>
 
     ## FORKED
     %if repo_instance.fork:
     <p>
         <i class="icon-code-fork"></i> ${_('Fork of')}
         ${h.link_to_if(c.has_origin_repo_read_perm,repo_instance.fork.repo_name, h.route_path('repo_summary', repo_name=repo_instance.fork.repo_name))}
     </p>
     %endif
 
     ## IMPORTED FROM REMOTE
     %if repo_instance.clone_uri:
     <p>
        <i class="icon-code-fork"></i> ${_('Clone from')}
        <a href="${h.safe_str(h.hide_credentials(repo_instance.clone_uri))}">${h.hide_credentials(repo_instance.clone_uri)}</a>
     </p>
     %endif
 
     ## LOCKING STATUS
      %if repo_instance.locked[0]:
        <p class="locking_locked">
            <i class="icon-repo-lock"></i>
            ${_('Repository locked by %(user)s') % {'user': h.person_by_id(repo_instance.locked[0])}}
        </p>
      %elif repo_instance.enable_locking:
          <p class="locking_unlocked">
              <i class="icon-repo-unlock"></i>
              ${_('Repository not locked. Pull repository to lock it.')}
          </p>
      %endif
 
 </div>
 </%def>
 
 <%def name="repo_menu(active=None)">
     <%
     def is_active(selected):
         if selected == active:
             return "active"
     %>
 
   <!--- CONTEXT BAR -->
   <div id="context-bar">
     <div class="wrapper">
       <ul id="context-pages" class="navigation horizontal-list">
         <li class="${is_active('summary')}"><a class="menulink" href="${h.route_path('repo_summary', repo_name=c.repo_name)}"><div class="menulabel">${_('Summary')}</div></a></li>
         <li class="${is_active('changelog')}"><a class="menulink" href="${h.route_path('repo_changelog', repo_name=c.repo_name)}"><div class="menulabel">${_('Changelog')}</div></a></li>
         <li class="${is_active('files')}"><a class="menulink" href="${h.route_path('repo_files', repo_name=c.repo_name, commit_id=c.rhodecode_db_repo.landing_rev[1], f_path='')}"><div class="menulabel">${_('Files')}</div></a></li>
         <li class="${is_active('compare')}"><a class="menulink" href="${h.route_path('repo_compare_select',repo_name=c.repo_name)}"><div class="menulabel">${_('Compare')}</div></a></li>
         <li class="${is_active('search')}"><a class="menulink" href="${h.route_path('search_repo',repo_name=c.repo_name)}"><div class="menulabel">${_('Search')}</div></a></li>
 
         ## TODO: anderson: ideally it would have a function on the scm_instance "enable_pullrequest() and enable_fork()"
         %if c.rhodecode_db_repo.repo_type in ['git','hg']:
           <li class="${is_active('showpullrequest')}">
             <a class="menulink" href="${h.route_path('pullrequest_show_all', repo_name=c.repo_name)}" title="${h.tooltip(_('Show Pull Requests for %s') % c.repo_name)}">
               %if c.repository_pull_requests:
                 <span class="pr_notifications">${c.repository_pull_requests}</span>
               %endif
               <div class="menulabel">${_('Pull Requests')}</div>
             </a>
           </li>
         %endif
 
         <li class="${is_active('options')}">
           <a class="menulink dropdown">
               <div class="menulabel">${_('Options')} <div class="show_more"></div></div>
           </a>
           <ul class="submenu">
              %if h.HasRepoPermissionAll('repository.admin')(c.repo_name):
                    <li><a href="${h.route_path('edit_repo',repo_name=c.repo_name)}">${_('Repository Settings')}</a></li>
              %endif
               %if c.rhodecode_db_repo.fork:
                <li>
                    <a title="${h.tooltip(_('Compare fork with %s' % c.rhodecode_db_repo.fork.repo_name))}"
                       href="${h.route_path('repo_compare',
                             repo_name=c.rhodecode_db_repo.fork.repo_name,
                             source_ref_type=c.rhodecode_db_repo.landing_rev[0],
                             source_ref=c.rhodecode_db_repo.landing_rev[1],
                             target_repo=c.repo_name,target_ref_type='branch' if request.GET.get('branch') else c.rhodecode_db_repo.landing_rev[0],
                             target_ref=request.GET.get('branch') or c.rhodecode_db_repo.landing_rev[1],
                             _query=dict(merge=1))}"
                     >
                    ${_('Compare fork')}
                    </a>
                </li>
               %endif
 
               %if h.HasRepoPermissionAny('repository.write','repository.admin')(c.repo_name) and c.rhodecode_db_repo.enable_locking:
                 %if c.rhodecode_db_repo.locked[0]:
                   <li><a class="locking_del" href="${h.route_path('repo_edit_toggle_locking',repo_name=c.repo_name)}">${_('Unlock')}</a></li>
                 %else:
                   <li><a class="locking_add" href="${h.route_path('repo_edit_toggle_locking',repo_name=c.repo_name)}">${_('Lock')}</a></li>
                 %endif
               %endif
               %if c.rhodecode_user.username != h.DEFAULT_USER:
                 %if c.rhodecode_db_repo.repo_type in ['git','hg']:
                   <li><a href="${h.route_path('repo_fork_new',repo_name=c.repo_name)}">${_('Fork')}</a></li>
                   <li><a href="${h.route_path('pullrequest_new',repo_name=c.repo_name)}">${_('Create Pull Request')}</a></li>
                 %endif
               %endif
              </ul>
         </li>
       </ul>
     </div>
     <div class="clear"></div>
   </div>
     % if c.rhodecode_db_repo.archived:
     <div class="alert alert-warning text-center">
         <strong>${_('This repository has been archived. It is now read-only.')}</strong>
     </div>
     % endif
   <!--- END CONTEXT BAR -->
 
 </%def>
 
 <%def name="repo_group_page_title(repo_group_instance)">
 <div class="title-content">
     <div class="title-main">
         ## Repository Group icon
         <i class="icon-folder-close"></i>
 
         ## repo name with group name
         ${h.breadcrumb_repo_group_link(repo_group_instance)}
     </div>
 
     <%namespace name="dt" file="/data_table/_dt_elements.mako"/>
     <div class="repo-group-desc">
     ${dt.repo_group_desc(repo_group_instance.description_safe, repo_group_instance.personal, c.visual.stylify_metatags)}
     </div>
 
 </div>
 </%def>
 
 <%def name="repo_group_menu(active=None)">
     <%
     def is_active(selected):
         if selected == active:
             return "active"
 
     is_admin = h.HasPermissionAny('hg.admin')('can create repos index page')
 
     gr_name = c.repo_group.group_name if c.repo_group else None
     # create repositories with write permission on group is set to true
     create_on_write = h.HasPermissionAny('hg.create.write_on_repogroup.true')()
     group_admin = h.HasRepoGroupPermissionAny('group.admin')(gr_name, 'group admin index page')
     group_write = h.HasRepoGroupPermissionAny('group.write')(gr_name, 'can write into group index page')
 
     %>
 
   <!--- CONTEXT BAR -->
   <div id="context-bar">
     <div class="wrapper">
       <ul id="context-pages" class="navigation horizontal-list">
         <li class="${is_active('home')}"><a class="menulink" href="${h.route_path('repo_group_home', repo_group_name=c.repo_group.group_name)}"><div class="menulabel">${_('Group Home')}</div></a></li>
         <li class="${is_active('search')}"><a class="menulink" href="${h.route_path('search_repo_group', repo_group_name=c.repo_group.group_name)}"><div class="menulabel">${_('Search')}</div></a></li>
 
         <li class="${is_active('options')}">
           <a class="menulink dropdown">
               <div class="menulabel">${_('Options')} <div class="show_more"></div></div>
           </a>
           <ul class="submenu">
                 %if is_admin or group_admin:
                    <li><a href="${h.route_path('edit_repo_group',repo_group_name=c.repo_group.group_name)}" title="${_('You have admin right to this group, and can edit it')}">${_('Group Settings')}</a></li>
                 %endif
                 %if is_admin or group_admin or (group_write and create_on_write):
                     <li><a href="${h.route_path('repo_new',_query=dict(parent_group=c.repo_group.group_id))}">${_('Add Repository')}</a></li>
                 %endif
                 %if is_admin or group_admin:
                     <li><a href="${h.route_path('repo_group_new',_query=dict(parent_group=c.repo_group.group_id))}">${_(u'Add Parent Group')}</a></li>
                 %endif
              </ul>
         </li>
       </ul>
     </div>
     <div class="clear"></div>
   </div>
 
   <!--- END CONTEXT BAR -->
 
 </%def>
 
 
 <%def name="usermenu(active=False)">
     ## USER MENU
     <li id="quick_login_li" class="${'active' if active else ''}">
         % if c.rhodecode_user.username == h.DEFAULT_USER:
           <a id="quick_login_link" class="menulink childs" href="${h.route_path('login', _query={'came_from': h.current_route_path(request)})}">
             ${gravatar(c.rhodecode_user.email, 20)}
             <span class="user">
                 <span>${_('Sign in')}</span>
             </span>
           </a>
         % else:
           ## logged in user
           <a id="quick_login_link" class="menulink childs">
             ${gravatar(c.rhodecode_user.email, 20)}
             <span class="user">
                 <span class="menu_link_user">${c.rhodecode_user.username}</span>
                 <div class="show_more"></div>
             </span>
           </a>
           ## subnav with menu for logged in user
           <div class="user-menu submenu">
               <div id="quick_login">
                 %if c.rhodecode_user.username != h.DEFAULT_USER:
                     <div class="">
                         <div class="big_gravatar">${gravatar(c.rhodecode_user.email, 48)}</div>
                         <div class="full_name">${c.rhodecode_user.full_name_or_username}</div>
                         <div class="email">${c.rhodecode_user.email}</div>
                     </div>
                     <div class="">
                     <ol class="links">
                       <li>${h.link_to(_(u'My account'),h.route_path('my_account_profile'))}</li>
                       % if c.rhodecode_user.personal_repo_group:
                       <li>${h.link_to(_(u'My personal group'), h.route_path('repo_group_home', repo_group_name=c.rhodecode_user.personal_repo_group.group_name))}</li>
                       % endif
                       <li>${h.link_to(_(u'Pull Requests'), h.route_path('my_account_pullrequests'))}</li>
                       ## bookmark-items
                       <li class="bookmark-items">
                           ${_('Bookmarks')}
                           <div class="pull-right">
                               <a href="${h.route_path('my_account_bookmarks')}">${_('Manage')}</a>
                           </div>
                       </li>
                       % if not c.bookmark_items:
                           <li>
                               <a href="${h.route_path('my_account_bookmarks')}">${_('No Bookmarks yet.')}</a>
                           </li>
                       % endif
                       % for item in c.bookmark_items:
                       <li>
                           % if item.repository:
                               <div>
                                 <a class="bookmark-item" href="${h.route_path('my_account_goto_bookmark', bookmark_id=item.position)}">
                                 <code>${item.position}</code>
                                 % if item.repository.repo_type == 'hg':
                                     <i class="icon-hg" title="${_('Repository')}" style="font-size: 16px"></i>
                                 % elif item.repository.repo_type == 'git':
                                     <i class="icon-git" title="${_('Repository')}" style="font-size: 16px"></i>
                                 % elif item.repository.repo_type == 'svn':
                                     <i class="icon-svn" title="${_('Repository')}" style="font-size: 16px"></i>
                                 % endif
                                 ${(item.title or h.shorter(item.repository.repo_name, 30))}
                               </a>
                               </div>
                           % elif item.repository_group:
                               <div>
                                 <a class="bookmark-item" href="${h.route_path('my_account_goto_bookmark', bookmark_id=item.position)}">
                                 <code>${item.position}</code>
                                 <i class="icon-folder-close" title="${_('Repository group')}" style="font-size: 16px"></i>
                                 ${(item.title or h.shorter(item.repository_group.group_name, 30))}
                               </a>
                               </div>
                           % else:
                               <a class="bookmark-item" href="${h.route_path('my_account_goto_bookmark', bookmark_id=item.position)}">
                                 <code>${item.position}</code>
                                 ${item.title}
                               </a>
                           % endif
                       </li>
                       % endfor
 
                       <li class="logout">
                       ${h.secure_form(h.route_path('logout'), request=request)}
                           ${h.submit('log_out', _(u'Sign Out'),class_="btn btn-primary")}
                       ${h.end_form()}
                       </li>
                     </ol>
                     </div>
                 %endif
               </div>
           </div>
           ## unread counter
           <div class="pill_container">
             <a class="menu_link_notifications ${'empty' if c.unread_notifications == 0 else ''}" href="${h.route_path('notifications_show_all')}">${c.unread_notifications}</a>
           </div>
         % endif
     </li>
 </%def>
 
 <%def name="menu_items(active=None)">
     <%
     def is_active(selected):
         if selected == active:
             return "active"
         return ""
     %>
 
     <ul id="quick" class="main_nav navigation horizontal-list">
        ## notice box for important system messages
        <li style="display: none">
           <a class="notice-box" href="#openNotice" onclick="showNoticeBox(); return false">
             <div class="menulabel-notice" >
                 0
             </div>
           </a>
        </li>
 
         ## Main filter
        <li>
         <div class="menulabel main_filter_box">
             <div class="main_filter_input_box">
                 <input class="main_filter_input" id="main_filter" size="15" type="text" name="main_filter" placeholder="${_('search / go to...')}" value=""/>
             </div>
             <div class="main_filter_help_box">
                 <a href="#showFilterHelp" onclick="showMainFilterBox(); return false">?</a>
             </div>
         </div>
 
         <div id="main_filter_help" style="display: none">
-Use '/' key to quickly access this field.
-Enter name of repository, or repository group for quick search.
+- Use '/' key to quickly access this field.
 
-Prefix query to allow special search:
+- Enter a name of repository, or repository group for quick search.
+
+- Prefix query to allow special search:
 
 user:admin, to search for usernames
 
 user_group:devops, to search for user groups
 
 commit:efced4, to search for commits
-
         </div>
        </li>
 
       ## ROOT MENU
       %if c.rhodecode_user.username != h.DEFAULT_USER:
         <li class="${is_active('journal')}">
           <a class="menulink" title="${_('Show activity journal')}" href="${h.route_path('journal')}">
             <div class="menulabel">${_('Journal')}</div>
           </a>
         </li>
       %else:
         <li class="${is_active('journal')}">
           <a class="menulink" title="${_('Show Public activity journal')}" href="${h.route_path('journal_public')}">
             <div class="menulabel">${_('Public journal')}</div>
           </a>
         </li>
       %endif
         <li class="${is_active('gists')}">
           <a class="menulink childs" title="${_('Show Gists')}" href="${h.route_path('gists_show')}">
             <div class="menulabel">${_('Gists')}</div>
           </a>
         </li>
       <li class="${is_active('search')}">
           <a class="menulink" title="${_('Search in repositories you have access to')}" href="${h.route_path('search')}">
             <div class="menulabel">${_('Search')}</div>
           </a>
       </li>
       % if h.HasPermissionAll('hg.admin')('access admin main page'):
         <li class="${is_active('admin')}">
           <a class="menulink childs" title="${_('Admin settings')}" href="#" onclick="return false;">
             <div class="menulabel">${_('Admin')} <div class="show_more"></div></div>
           </a>
           ${admin_menu()}
         </li>
       % elif c.rhodecode_user.repositories_admin or c.rhodecode_user.repository_groups_admin or c.rhodecode_user.user_groups_admin:
       <li class="${is_active('admin')}">
           <a class="menulink childs" title="${_('Delegated Admin settings')}">
             <div class="menulabel">${_('Admin')} <div class="show_more"></div></div>
           </a>
           ${admin_menu_simple(c.rhodecode_user.repositories_admin,
                               c.rhodecode_user.repository_groups_admin,
                               c.rhodecode_user.user_groups_admin or h.HasPermissionAny('hg.usergroup.create.true')())}
       </li>
       % endif
       ## render extra user menu
       ${usermenu(active=(active=='my_account'))}
 
       % if c.debug_style:
       <li>
           <a class="menulink" title="${_('Style')}" href="${h.route_path('debug_style_home')}">
             <div class="menulabel">${_('[Style]')}</div>
           </a>
       </li>
       % endif
     </ul>
 
     <script type="text/javascript">
         var visualShowPublicIcon = "${c.visual.show_public_icon}" == "True";
 
         var formatRepoResult = function(result, container, query, escapeMarkup) {
             return function(data, escapeMarkup) {
                 if (!data.repo_id){
                   return data.text; // optgroup text Repositories
                 }
 
                 var tmpl = '';
                 var repoType = data['repo_type'];
                 var repoName = data['text'];
 
                 if(data && data.type == 'repo'){
                     if(repoType === 'hg'){
                         tmpl += '<i class="icon-hg"></i> ';
                     }
                     else if(repoType === 'git'){
                         tmpl += '<i class="icon-git"></i> ';
                     }
                     else if(repoType === 'svn'){
                         tmpl += '<i class="icon-svn"></i> ';
                     }
                     if(data['private']){
                         tmpl += '<i class="icon-lock" ></i> ';
                     }
                     else if(visualShowPublicIcon){
                         tmpl += '<i class="icon-unlock-alt"></i> ';
                     }
                 }
                 tmpl += escapeMarkup(repoName);
                 return tmpl;
 
             }(result, escapeMarkup);
         };
 
         var formatRepoGroupResult = function(result, container, query, escapeMarkup) {
             return function(data, escapeMarkup) {
                 if (!data.repo_group_id){
                   return data.text; // optgroup text Repositories
                 }
 
                 var tmpl = '';
                 var repoGroupName = data['text'];
 
                 if(data){
 
                     tmpl += '<i class="icon-folder-close"></i> ';
 
                 }
                 tmpl += escapeMarkup(repoGroupName);
                 return tmpl;
 
             }(result, escapeMarkup);
         };
 
 
         var autocompleteMainFilterFormatResult = function (data, value, org_formatter) {
 
             if (value.split(':').length === 2) {
                 value = value.split(':')[1]
             }
 
             var searchType = data['type'];
             var valueDisplay = data['value_display'];
 
             var escapeRegExChars = function (value) {
             return value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
             };
             var pattern = '(' + escapeRegExChars(value) + ')';
 
+            var getRepoIcon = function(repo_type) {
+                if (repo_type === 'hg') {
+                    return '<i class="icon-hg"></i> ';
+                }
+                else if (repo_type === 'git') {
+                    return '<i class="icon-git"></i> ';
+                }
+                else if (repo_type === 'svn') {
+                    return '<i class="icon-svn"></i> ';
+                }
+                return ''
+            };
+
             // highlight match
             valueDisplay = Select2.util.escapeMarkup(valueDisplay);
             valueDisplay = valueDisplay.replace(new RegExp(pattern, 'gi'), '<strong>$1<\/strong>');
 
             var icon = '';
 
             if (searchType === 'hint') {
                 icon += '<i class="icon-folder-close"></i> ';
             }
+            // full text search
             else if (searchType === 'search') {
                 icon += '<i class="icon-more"></i> ';
             }
+            // repository
             else if (searchType === 'repo') {
-                if (data['repo_type'] === 'hg') {
-                    icon += '<i class="icon-hg"></i> ';
-                }
-                else if (data['repo_type'] === 'git') {
-                    icon += '<i class="icon-git"></i> ';
-                }
-                else if (data['repo_type'] === 'svn') {
-                    icon += '<i class="icon-svn"></i> ';
-                }
+
+                var repoIcon = getRepoIcon(data['repo_type']);
+                icon += repoIcon;
+
                 if (data['private']) {
                     icon += '<i class="icon-lock" ></i> ';
                 }
                 else if (visualShowPublicIcon) {
                     icon += '<i class="icon-unlock-alt"></i> ';
                 }
             }
+            // repository groups
             else if (searchType === 'repo_group') {
                 icon += '<i class="icon-folder-close"></i> ';
             }
+            // user group
             else if (searchType === 'user_group') {
                 icon += '<i class="icon-group"></i> ';
             }
             else if (searchType === 'user') {
                 icon += '<img class="gravatar" src="{0}"/>'.format(data['icon_link']);
             }
+            // commit
             else if (searchType === 'commit') {
+                var repo_data = data['repo_data'];
+                var repoIcon = getRepoIcon(repo_data['repository_type']);
+                if (repoIcon) {
+                    icon += repoIcon;
+                } else {
                 icon += '<i class="icon-tag"></i>';
             }
+            }
 
             var tmpl = '<div class="ac-container-wrap">{0}{1}</div>';
             return tmpl.format(icon, valueDisplay);
         };
 
         var handleSelect = function(element, suggestion) {
             if (suggestion.type === "hint") {
                 // we skip action
                 $('#main_filter').focus();
             } else {
               window.location = suggestion['url'];
             }
         };
         var autocompleteMainFilterResult = function (suggestion, originalQuery, queryLowerCase) {
             if (queryLowerCase.split(':').length === 2) {
                 queryLowerCase = queryLowerCase.split(':')[1]
             }
             return suggestion.value_display.toLowerCase().indexOf(queryLowerCase) !== -1;
         };
 
         $('#main_filter').autocomplete({
             serviceUrl: pyroutes.url('goto_switcher_data'),
             params: {"search_context": templateContext.search_context},
             minChars:2,
             maxHeight:400,
             deferRequestBy: 300, //miliseconds
             tabDisabled: true,
             autoSelectFirst: true,
             formatResult: autocompleteMainFilterFormatResult,
             lookupFilter: autocompleteMainFilterResult,
             onSelect: function (element, suggestion) {
                 handleSelect(element, suggestion);
                 return false;
             },
             onSearchError: function (element, query, jqXHR, textStatus, errorThrown) {
                 if (jqXHR !== 'abort') {
                     alert("Error during search.\nError code: {0}".format(textStatus));
                     window.location = '';
                 }
             }
         });
 
         showMainFilterBox = function () {
             $('#main_filter_help').toggle();
-        }
+        };
 
     </script>
     <script src="${h.asset('js/rhodecode/base/keyboard-bindings.js', ver=c.rhodecode_version_hash)}"></script>
 </%def>
 
 <div class="modal" id="help_kb" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h4 class="modal-title" id="myModalLabel">${_('Keyboard shortcuts')}</h4>
         </div>
         <div class="modal-body">
               <div class="block-left">
                 <table class="keyboard-mappings">
                     <tbody>
                   <tr>
                     <th></th>
                     <th>${_('Site-wide shortcuts')}</th>
                   </tr>
                   <%
                      elems = [
                          ('/', 'Use quick search box'),
                          ('g h', 'Goto home page'),
                          ('g g', 'Goto my private gists page'),
                          ('g G', 'Goto my public gists page'),
                          ('g 0-9', 'Goto bookmarked items from 0-9'),
                          ('n r', 'New repository page'),
                          ('n g', 'New gist page'),
                      ]
                   %>
                   %for key, desc in elems:
                   <tr>
                     <td class="keys">
                       <span class="key tag">${key}</span>
                     </td>
                     <td>${desc}</td>
                   </tr>
                 %endfor
                 </tbody>
                   </table>
               </div>
               <div class="block-left">
                 <table class="keyboard-mappings">
                 <tbody>
                   <tr>
                     <th></th>
                     <th>${_('Repositories')}</th>
                   </tr>
                   <%
                      elems = [
                          ('g s', 'Goto summary page'),
                          ('g c', 'Goto changelog page'),
                          ('g f', 'Goto files page'),
                          ('g F', 'Goto files page with file search activated'),
                          ('g p', 'Goto pull requests page'),
                          ('g o', 'Goto repository settings'),
                          ('g O', 'Goto repository permissions settings'),
                      ]
                   %>
                   %for key, desc in elems:
                   <tr>
                     <td class="keys">
                       <span class="key tag">${key}</span>
                     </td>
                     <td>${desc}</td>
                   </tr>
                 %endfor
                 </tbody>
               </table>
             </div>
         </div>
         <div class="modal-footer">
         </div>
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->