ui: navigation, fixed wrapping of new admin navigation items

rhodecode/templates/admin/admin_audit_logs.mako

@@ -1,42 +1,41 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
     ${_('Admin audit logs')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
     ${h.form(None, id_="filter_form", method="get")}
         <input class="q_filter_box ${'' if c.search_term else 'initial'}" id="j_filter" size="15" type="text" name="filter" value="${c.search_term or ''}" placeholder="${_('filter...')}"/>
         <input type='submit' value="${_('filter')}" class="btn" />
         ${_('Audit logs')} - ${_ungettext('%s entry', '%s entries', c.audit_logs.item_count) % (c.audit_logs.item_count)}
     ${h.end_form()}
     <p class="filterexample" style="position: inherit" onclick="$('#search-help').toggle()">${_('Example Queries')}</p>
     <pre id="search-help" style="display: none">${h.tooltip(h.journal_filter_help(request))}</pre>
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='admin')}
 </%def>
 
+<%def name="menu_bar_subnav()">
+    ${self.admin_menu(active='audit_logs')}
+</%def>
+
 <%def name="main()">
 <div class="box">
-    <!-- box / title -->
-    <div class="title">
-        ${self.admin_menu()}
-    </div>
-    <!-- end box / title -->
     <div class="table">
         <div id="user_log">
             <%include file="/admin/admin_log_base.mako" />
         </div>
     </div>
 </div>
 
 <script>
 $('#j_filter').autoGrowInput();
 </script>
 </%def>

rhodecode/templates/admin/auth/auth_settings.mako

@@ -1,126 +1,127 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
     ${_('Authentication Settings')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
     ${h.link_to(_('Admin'),h.route_path('admin_home'))}
     &raquo;
     ${_('Authentication Plugins')}
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='admin')}
 </%def>
 
+<%def name="menu_bar_subnav()">
+    ${self.admin_menu(active='authentication')}
+</%def>
+
 <%def name="main()">
 
 <div class="box">
-  <div class="title">
-    ${self.admin_menu()}
-  </div>
 
   <div class='sidebar-col-wrapper'>
 
     <div class="sidebar">
         <ul class="nav nav-pills nav-stacked">
           % for item in resource.get_root().get_nav_list():
             <li ${'class=active' if item == resource else ''}>
               <a href="${request.resource_path(item, route_name='auth_home')}">${item.display_name}</a>
             </li>
           % endfor
         </ul>
     </div>
 
     <div class="main-content-full-width">
       ${h.secure_form(request.resource_path(resource, route_name='auth_home'), request=request)}
         <div class="panel panel-default">
 
           <div class="panel-heading">
             <h3 class="panel-title">${_("Enabled and Available Plugins")}</h3>
           </div>
 
           <div class="panel-body">
 
 
               <div class="label">${_("Ordered Activated Plugins")}</div>
               <div class="textarea text-area editor">
                   ${h.textarea('auth_plugins',cols=120,rows=20,class_="medium")}
               </div>
               <div class="field">
                 <p class="help-block pre-formatting">${_('List of plugins, separated by commas.'
                   '\nThe order of the plugins is also the order in which '
                   'RhodeCode Enterprise will try to authenticate a user.')}
                 </p>
               </div>
 
               <table class="rctable">
                   <th>${_('Activate')}</th>
                   <th>${_('Plugin Name')}</th>
                   <th>${_('Documentation')}</th>
                   <th>${_('Plugin ID')}</th>
                   <th>${_('Enabled')}</th>
                   %for plugin in available_plugins:
                       <tr class="${'inactive' if (not plugin.is_active() and plugin.get_id() in enabled_plugins) else ''}">
                           <td>
                             <span plugin_id="${plugin.get_id()}" class="toggle-plugin btn ${'btn-success' if plugin.get_id() in enabled_plugins else ''}">
                               ${_('activated') if plugin.get_id() in enabled_plugins else _('not active')}
                             </span>
                           </td>
                           <td>${plugin.get_display_name()}</td>
                           <td>
                               % if plugin.docs():
                                 <a href="${plugin.docs()}">docs</a>
                               % endif
                           </td>
                           <td>${plugin.get_id()}</td>
                           <td>${h.bool2icon(plugin.is_active(),show_at_false=False)}</td>
                       </tr>
                   %endfor
               </table>
 
             <div class="buttons">
               ${h.submit('save',_('Save'),class_="btn")}
             </div>
           </div>
         </div>
       ${h.end_form()}
     </div>
   </div>
 </div>
 
 <script>
   $('.toggle-plugin').click(function(e){
     var auth_plugins_input = $('#auth_plugins');
     var elems = [];
 
     $.each(auth_plugins_input.val().split(',') , function (index, element) {
         if (element !== "") {
             elems.push(element.strip())
         }
     });
 
     var cur_button = e.currentTarget;
     var plugin_id = $(cur_button).attr('plugin_id');
     if($(cur_button).hasClass('btn-success')){
       elems.splice(elems.indexOf(plugin_id), 1);
       auth_plugins_input.val(elems.join(',\n'));
       $(cur_button).removeClass('btn-success');
       cur_button.innerHTML = _gettext('not active');
     }
     else{
       if (elems.indexOf(plugin_id) === -1) {
             elems.push(plugin_id);
       }
       auth_plugins_input.val(elems.join(',\n'));
       $(cur_button).addClass('btn-success');
       cur_button.innerHTML = _gettext('activated');
     }
   });
 </script>
 </%def>

rhodecode/templates/admin/defaults/defaults.mako

@@ -1,42 +1,43 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
     ${_('Repositories defaults')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
     ${h.link_to(_('Admin'),h.route_path('admin_home'))}
     &raquo;
     ${_('Repositories defaults')}
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='admin')}
 </%def>
 
+<%def name="menu_bar_subnav()">
+    ${self.admin_menu(active='defaults')}
+</%def>
+
 <%def name="main()">
 <div class="box">
-    <div class="title">
-        ${self.admin_menu()}
-    </div>
 
     ##main
     <div class="sidebar-col-wrapper">
         <div class="sidebar">
             <ul class="nav nav-pills nav-stacked">
               <li class="${'active' if c.active=='repositories' else ''}"><a href="${h.route_path('admin_defaults_repositories')}">${_('Repository')}</a></li>
             </ul>
         </div>
 
         <div class="main-content-full-width">
             <%include file="/admin/defaults/defaults_${c.active}.mako"/>
         </div>
 
     </div>
 </div>
 
 </%def>

rhodecode/templates/admin/integrations/base.mako

@@ -1,42 +1,36 b''
 ## -*- coding: utf-8 -*-
 <%!
    def inherit(context):
       if context['c'].repo:
         return "/admin/repos/repo_edit.mako"
       elif context['c'].repo_group:
         return "/admin/repo_groups/repo_group_edit.mako"
       else:
         return "/admin/integrations/global.mako"
 %>
 <%inherit file="${inherit(context)}" />
 
 <%def name="title()">
     ${_('Integrations Settings')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
     ${h.link_to(_('Admin'),h.route_path('admin_home'))}
     &raquo;
     ${_('Integrations')}
 </%def>
 
 <%def name="menu_bar_nav()">
   %if c.repo:
     ${self.menu_items(active='repositories')}
   %else:
     ${self.menu_items(active='admin')}
   %endif
 </%def>
 
-<%def name="menu_bar_subnav()">
-  %if c.repo:
-    ${self.repo_menu(active='options')}
-  %endif
-</%def>
-
 <%def name="main_content()">
   ${next.body()}
 </%def>

rhodecode/templates/admin/integrations/global.mako

@@ -1,51 +1,52 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
-    ${_('Settings administration')}
+    ${_('Integrations administration')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
     ${h.link_to(_('Admin'),h.route_path('admin_home'))}
     &raquo;
     ${_('Integrations')}
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='admin')}
 </%def>
 
+<%def name="menu_bar_subnav()">
+    ${self.admin_menu(active='integrations')}
+</%def>
+
 <%def name="side_bar_nav()">
     <li class="active">
       <a href="${h.route_path('global_integrations_home')}">Global</a>
     </li>
 </%def>
 
 <%def name="main_content()">
   <%include file="/admin/settings/settings_${c.active}.mako"/>
 </%def>
 
 <%def name="main()">
 <div class="box">
-    <div class="title">
-        ${self.admin_menu()}
-    </div>
 
     ##main
     <div class='sidebar-col-wrapper'>
       <div class="sidebar">
           <ul class="nav nav-pills nav-stacked">
             ${self.side_bar_nav()}
           </ul>
       </div>
 
       <div class="main-content-auto-width">
         ${self.main_content()}
       </div>
     </div>
 </div>
 
 </%def>

rhodecode/templates/admin/main.mako

@@ -1,49 +1,50 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
     ${_('Settings administration')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
     ${h.link_to(_('Admin'),h.route_path('admin_home'))}
     &raquo;
     ${_('Settings')}
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='admin')}
 </%def>
 
+<%def name="menu_bar_subnav()">
+    ${self.admin_menu()}
+</%def>
+
 <%def name="side_bar_nav()">
 
 </%def>
 
 <%def name="main_content()">
   Hello Admin
 </%def>
 
 <%def name="main()">
 <div class="box">
-    <div class="title">
-        ${self.admin_menu()}
-    </div>
 
     ##main
     <div class='sidebar-col-wrapper'>
       <div class="sidebar">
           <ul class="nav nav-pills nav-stacked">
             ${self.side_bar_nav()}
           </ul>
       </div>
 
       <div class="main-content-auto-width">
         ${self.main_content()}
       </div>
     </div>
 </div>
 
 </%def>
  No newline at end of file

rhodecode/templates/admin/permissions/permissions.mako

@@ -1,65 +1,65 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
     ${_('Permissions Administration')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
     ${h.link_to(_('Admin'),h.route_path('admin_home'))}
     &raquo;
     ${_('Permissions')}
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='admin')}
 </%def>
 
+<%def name="menu_bar_subnav()">
+    ${self.admin_menu(active='permissions')}
+</%def>
 
 <%def name="main()">
 <div class="box">
-  <div class="title">
-      ${self.admin_menu()}
-  </div>
 
   <div class="sidebar-col-wrapper scw-small">
     ##main
     <div class="sidebar">
         <ul class="nav nav-pills nav-stacked">
           <li class="${'active' if c.active=='application' else ''}">
             <a href="${h.route_path('admin_permissions_application')}">${_('Application')}</a>
           </li>
           <li class="${'active' if c.active=='global' else ''}">
             <a href="${h.route_path('admin_permissions_global')}">${_('Global')}</a>
           </li>
           <li class="${'active' if c.active=='objects' else ''}">
             <a href="${h.route_path('admin_permissions_object')}">${_('Object')}</a>
           </li>
           <li class="${'active' if c.active=='branch' else ''}">
             <a href="${h.route_path('admin_permissions_branch')}">${_('Branch')}</a>
           </li>
           <li class="${'active' if c.active=='ips' else ''}">
             <a href="${h.route_path('admin_permissions_ips')}">${_('IP Whitelist')}</a>
           </li>
           <li class="${'active' if c.active=='auth_token_access' else ''}">
             <a href="${h.route_path('admin_permissions_auth_token_access')}">${_('AuthToken Access')}</a>
           </li>
           <li class="${'active' if c.active=='ssh_keys' else ''}">
             <a href="${h.route_path('admin_permissions_ssh_keys')}">${_('SSH Keys')}</a>
           </li>
           <li class="${'active' if c.active=='perms' else ''}">
             <a href="${h.route_path('admin_permissions_overview')}">${_('Overview')}</a>
           </li>
         </ul>
     </div>
 
     <div class="main-content-full-width">
         <%include file="/admin/permissions/permissions_${c.active}.mako"/>
     </div>
   </div>
 </div>
 
 </%def>

rhodecode/templates/admin/repo_groups/repo_groups.mako

@@ -1,97 +1,101 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
     ${_('Repository groups administration')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
     <input class="q_filter_box" id="q_filter" size="15" type="text" name="filter" placeholder="${_('quick filter...')}" value=""/>
     ${h.link_to(_('Admin'),h.route_path('admin_home'))} &raquo; <span id="repo_group_count">0</span> ${_('repository groups')}
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='admin')}
 </%def>
 
+<%def name="menu_bar_subnav()">
+    ${self.admin_menu(active='repository_groups')}
+</%def>
+
 <%def name="main()">
 <div class="box">
     <div class="title">
-        ${self.admin_menu()}
+
         <ul class="links">
             %if h.HasPermissionAny('hg.admin','hg.repogroup.create.true')():
              <li>
                <a href="${h.route_path('repo_group_new')}" class="btn btn-small btn-success">${_(u'Add Repository Group')}</a>
              </li>
             %endif
         </ul>
     </div>
     <div id="repos_list_wrap">
         <table id="group_list_table" class="display"></table>
     </div>
 </div>
 
 <script>
 $(document).ready(function() {
 
     var get_datatable_count = function(){
       var api = $('#group_list_table').dataTable().api();
       $('#repo_group_count').text(api.page.info().recordsDisplay);
     };
 
    // repo group list
    $('#group_list_table').DataTable({
       data: ${c.data|n},
       dom: 'rtp',
       pageLength: ${c.visual.admin_grid_items},
       order: [[ 0, "asc" ]],
       columns: [
          { data: {"_": "name",
                   "sort": "name_raw"}, title: "${_('Name')}", className: "td-componentname" },
          { data: 'menu', "bSortable": false, className: "quick_repo_menu" },
          { data: {"_": "desc",
                   "sort": "desc"}, title: "${_('Description')}", className: "td-description" },
          { data: {"_": "last_change",
                   "sort": "last_change_raw",
                   "type": Number}, title: "${_('Last Change')}", className: "td-time" },
          { data: {"_": "top_level_repos",
                   "sort": "top_level_repos"}, title: "${_('Number of top level repositories')}" },
          { data: {"_": "owner",
                   "sort": "owner"}, title: "${_('Owner')}", className: "td-user" },
          { data: {"_": "action",
                   "sort": "action"}, title: "${_('Action')}", className: "td-action" }
       ],
       language: {
           paginate: DEFAULT_GRID_PAGINATION,
           emptyTable: _gettext("No repository groups available yet.")
       },
       "initComplete": function( settings, json ) {
           get_datatable_count();
           quick_repo_menu();
       }
     });
 
      // update the counter when doing search
     $('#group_list_table').on( 'search.dt', function (e,settings) {
       get_datatable_count();
     });
 
     // filter, filter both grids
     $('#q_filter').on( 'keyup', function () {
 
       var repo_group_api = $('#group_list_table').dataTable().api();
       repo_group_api
         .columns(0)
         .search(this.value)
         .draw();
     });
 
     // refilter table if page load via back button
     $("#q_filter").trigger('keyup');
 });
 </script>
 </%def>
 

rhodecode/templates/admin/repos/repos.mako

@@ -1,101 +1,104 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
     ${_('Repositories administration')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
     <input class="q_filter_box" id="q_filter" size="15" type="text" name="filter" placeholder="${_('quick filter...')}" value=""/>
     ${h.link_to(_('Admin'),h.route_path('admin_home'))} &raquo; <span id="repo_count">0</span> ${_('repositories')}
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='admin')}
 </%def>
 
+<%def name="menu_bar_subnav()">
+    ${self.admin_menu(active='repositories')}
+</%def>
+
 <%def name="main()">
 <div class="box">
     <div class="title">
-        ${self.admin_menu()}
         <ul class="links">
             %if h.HasPermissionAny('hg.admin','hg.create.repository')():
              <li>
                <a href="${h.route_path('repo_new')}" class="btn btn-small btn-success">${_(u'Add Repository')}</a>
              </li>
             %endif
         </ul>
     </div>
     <div id="repos_list_wrap">
         <table id="repo_list_table" class="display"></table>
     </div>
 </div>
 
 <script>
 $(document).ready(function() {
 
     var get_datatable_count = function(){
       var api = $('#repo_list_table').dataTable().api();
       $('#repo_count').text(api.page.info().recordsDisplay);
     };
 
 
     // repo list
     $('#repo_list_table').DataTable({
       data: ${c.data|n},
       dom: 'rtp',
       pageLength: ${c.visual.admin_grid_items},
       order: [[ 0, "asc" ]],
       columns: [
          { data: {"_": "name",
                   "sort": "name_raw"}, title: "${_('Name')}", className: "td-componentname" },
          { data: 'menu', "bSortable": false, className: "quick_repo_menu" },
          { data: {"_": "desc",
                   "sort": "desc"}, title: "${_('Description')}", className: "td-description" },
          { data: {"_": "last_change",
                   "sort": "last_change_raw",
                   "type": Number}, title: "${_('Last Change')}", className: "td-time" },
          { data: {"_": "last_changeset",
                   "sort": "last_changeset_raw",
                   "type": Number}, title: "${_('Commit')}", className: "td-commit" },
          { data: {"_": "owner",
                   "sort": "owner"}, title: "${_('Owner')}", className: "td-user" },
          { data: {"_": "state",
                   "sort": "state"}, title: "${_('State')}", className: "td-tags td-state" },
          { data: {"_": "action",
                   "sort": "action"}, title: "${_('Action')}", className: "td-action" }
       ],
       language: {
           paginate: DEFAULT_GRID_PAGINATION,
           emptyTable:_gettext("No repositories available yet.")
       },
       "initComplete": function( settings, json ) {
           get_datatable_count();
           quick_repo_menu();
       }
     });
 
     // update the counter when doing search
     $('#repo_list_table').on( 'search.dt', function (e,settings) {
       get_datatable_count();
     });
 
     // filter, filter both grids
     $('#q_filter').on( 'keyup', function () {
       var repo_api = $('#repo_list_table').dataTable().api();
       repo_api
         .columns(0)
         .search(this.value)
         .draw();
     });
 
     // refilter table if page load via back button
     $("#q_filter").trigger('keyup');
   });
 
 </script>
 
 </%def>

rhodecode/templates/admin/settings/settings.mako

@@ -1,53 +1,54 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
     ${_('Settings administration')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
     ${h.link_to(_('Admin'),h.route_path('admin_home'))}
     &raquo;
     ${_('Settings')}
 </%def>
-
+##
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='admin')}
 </%def>
 
+<%def name="menu_bar_subnav()">
+    ${self.admin_menu(active='settings')}
+</%def>
+
 <%def name="side_bar_nav()">
   % for navitem in c.navlist:
     <li class="${'active' if c.active in navitem.active_list else ''}">
       <a href="${navitem.url}">${navitem.name}</a>
     </li>
   % endfor
 </%def>
 
 <%def name="main_content()">
   <%include file="/admin/settings/settings_${c.active}.mako"/>
 </%def>
 
 <%def name="main()">
 <div class="box">
-    <div class="title">
-        ${self.admin_menu()}
-    </div>
 
     ##main
     <div class='sidebar-col-wrapper'>
       <div class="sidebar">
           <ul class="nav nav-pills nav-stacked">
             ${self.side_bar_nav()}
           </ul>
       </div>
 
       <div class="main-content-auto-width">
         ${self.main_content()}
       </div>
     </div>
 </div>
 
 </%def>
  No newline at end of file

rhodecode/templates/admin/user_groups/user_groups.mako

@@ -1,115 +1,118 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
     ${_('User groups administration')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
     <input class="q_filter_box" id="q_filter" size="15" type="text" name="filter" placeholder="${_('quick filter...')}" value=""/>
     ${h.link_to(_('Admin'),h.route_path('admin_home'))} &raquo; <span id="user_group_count">0</span>
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='admin')}
 </%def>
 
+<%def name="menu_bar_subnav()">
+    ${self.admin_menu(active='user_groups')}
+</%def>
+
 <%def name="main()">
 <div class="box">
 
     <div class="title">
-        ${self.admin_menu()}
         <ul class="links">
         %if h.HasPermissionAny('hg.admin', 'hg.usergroup.create.true')():
           <li>
             <a href="${h.route_path('user_groups_new')}" class="btn btn-small btn-success">${_(u'Add User Group')}</a>
           </li>
         %endif
         </ul>
     </div>
 
     <div id="repos_list_wrap">
         <table id="user_group_list_table" class="display"></table>
     </div>
 
 </div>
 <script>
 $(document).ready(function() {
     var $userGroupsListTable = $('#user_group_list_table');
 
     // user list
     $userGroupsListTable.DataTable({
       processing: true,
       serverSide: true,
       ajax: {
           "url": "${h.route_path('user_groups_data')}",
           "dataSrc": function (json) {
               var filteredCount = json.recordsFiltered;
               var filteredInactiveCount = json.recordsFilteredInactive;
               var totalInactive = json.recordsTotalInactive;
               var total = json.recordsTotal;
 
               var _text = _gettext(
                       "{0} ({1} inactive) of {2} user groups ({3} inactive)").format(
                       filteredCount, filteredInactiveCount, total, totalInactive);
 
               if (total === filteredCount) {
                   _text = _gettext(
                           "{0} user groups ({1} inactive)").format(total, totalInactive);
               }
               $('#user_group_count').text(_text);
               return json.data;
           },
       },
 
       dom: 'rtp',
       pageLength: ${c.visual.admin_grid_items},
       order: [[ 0, "asc" ]],
       columns: [
          { data: {"_": "users_group_name",
                   "sort": "users_group_name"}, title: "${_('Name')}", className: "td-componentname"  },
          { data: {"_": "description",
                   "sort": "description"}, title: "${_('Description')}", className: "td-description" },
          { data: {"_": "members",
                   "sort": "members"}, title: "${_('Members')}", className: "td-number" },
          { data: {"_": "sync",
                   "sort": "sync"}, title: "${_('Sync')}", className: "td-sync" },
          { data: {"_": "active",
                   "sort": "active"}, title: "${_('Active')}", className: "td-active" },
          { data: {"_": "owner",
                   "sort": "owner"}, title: "${_('Owner')}", className: "td-user" },
          { data: {"_": "action",
                   "sort": "action"}, title: "${_('Action')}", className: "td-action", orderable: false}
       ],
       language: {
           paginate: DEFAULT_GRID_PAGINATION,
           sProcessing: _gettext('loading...'),
           emptyTable: _gettext("No user groups available yet.")
       }
     });
 
     $userGroupsListTable.on('xhr.dt', function(e, settings, json, xhr){
         $userGroupsListTable.css('opacity', 1);
     });
 
     $userGroupsListTable.on('preXhr.dt', function(e, settings, data){
         $userGroupsListTable.css('opacity', 0.3);
     });
 
     // filter
     $('#q_filter').on('keyup',
         $.debounce(250, function() {
             $('#user_group_list_table').DataTable().search(
                 $('#q_filter').val()
             ).draw();
         })
     );
 
   });
 
 </script>
 
 </%def>

rhodecode/templates/admin/users/users.mako

@@ -1,123 +1,126 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
     ${_('Users administration')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
     <input class="q_filter_box" id="q_filter" size="15" type="text" name="filter" placeholder="${_('quick filter...')}" value=""/>
     ${h.link_to(_('Admin'),h.route_path('admin_home'))} &raquo; <span id="user_count">0</span>
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='admin')}
 </%def>
 
+<%def name="menu_bar_subnav()">
+    ${self.admin_menu(active='users')}
+</%def>
+
 <%def name="main()">
 
 <div class="box">
 
     <div class="title">
-        ${self.admin_menu()}
         <ul class="links">
           <li>
             <a href="${h.route_path('users_new')}" class="btn btn-small btn-success">${_(u'Add User')}</a>
           </li>
         </ul>
     </div>
 
     <div id="repos_list_wrap">
         <table id="user_list_table" class="display"></table>
     </div>
 </div>
 
 <script type="text/javascript">
 
 $(document).ready(function() {
     var $userListTable = $('#user_list_table');
     // user list
     $userListTable.DataTable({
       processing: true,
       serverSide: true,
       ajax: {
           "url": "${h.route_path('users_data')}",
           "dataSrc": function ( json ) {
               var filteredCount = json.recordsFiltered;
               var filteredInactiveCount = json.recordsFilteredInactive;
               var totalInactive = json.recordsTotalInactive;
               var total = json.recordsTotal;
 
               var _text = _gettext(
                   "{0} ({1} inactive) of {2} users ({3} inactive)").format(
                       filteredCount, filteredInactiveCount, total, totalInactive);
 
               if(total === filteredCount){
                   _text = _gettext(
                       "{0} users ({1} inactive)").format(total, totalInactive);
               }
               $('#user_count').text(_text);
               return json.data;
           }
       },
       dom: 'rtp',
       pageLength: ${c.visual.admin_grid_items},
       order: [[ 0, "asc" ]],
       columns: [
          { data: {"_": "username",
                   "sort": "username"}, title: "${_('Username')}", className: "td-user" },
          { data: {"_": "email",
                   "sort": "email"}, title: "${_('Email')}", className: "td-email"  },
          { data: {"_": "first_name",
                   "sort": "first_name"}, title: "${_('First Name')}", className: "td-user" },
          { data: {"_": "last_name",
                   "sort": "last_name"}, title: "${_('Last Name')}", className: "td-user" },
          { data: {"_": "last_activity",
                   "sort": "last_activity",
                   "type": Number}, title: "${_('Last activity')}", className: "td-time" },
          { data: {"_": "active",
                   "sort": "active"}, title: "${_('Active')}", className: "td-active" },
          { data: {"_": "admin",
                   "sort": "admin"}, title: "${_('Super admin')}", className: "td-admin" },
          { data: {"_": "extern_type",
                   "sort": "extern_type"}, title: "${_('Auth type')}", className: "td-type"  },
          { data: {"_": "action",
                   "sort": "action"}, title: "${_('Action')}", className: "td-action", orderable: false }
       ],
       language: {
           paginate: DEFAULT_GRID_PAGINATION,
           sProcessing: _gettext('loading...'),
           emptyTable: _gettext("No users available yet.")
       },
 
       "createdRow": function ( row, data, index ) {
           if (!data['active_raw']){
             $(row).addClass('closed')
           }
       }
     });
 
     $userListTable.on('xhr.dt', function(e, settings, json, xhr){
         $userListTable.css('opacity', 1);
     });
 
     $userListTable.on('preXhr.dt', function(e, settings, data){
         $userListTable.css('opacity', 0.3);
     });
 
     // filter
     $('#q_filter').on('keyup',
         $.debounce(250, function() {
             $userListTable.DataTable().search(
                 $('#q_filter').val()
             ).draw();
         })
     );
 
   });
 </script>
 
 </%def>

rhodecode/templates/base/base.mako

@@ -1,911 +1,918 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-60x60.png')}" alt="RhodeCode"/></a>
               </div>
               % if c.rhodecode_name:
                <div class="branding">
                    <a href="${h.route_path('home')}">${h.branding(c.rhodecode_name)}</a>
                </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 id="context-pages" class="navigation horizontal-list">
+<%def name="admin_menu(active=None)">
+  <div id="context-bar">
+    <div class="wrapper">
+      <ul id="context-pages" class="navigation horizontal-list">
         <%
         repositories=c.rhodecode_user.repositories_admin
         repository_groups=c.rhodecode_user.repository_groups_admin
         user_groups=c.rhodecode_user.user_groups_admin or h.HasPermissionAny('hg.usergroup.create.true')()
+        def is_active(selected):
+            if selected == active:
+                return "active"
         %>
         ## super admin case
         % if c.rhodecode_user.is_admin:
-          <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><a href="${h.route_path('admin_settings')}">${_('Settings')}</a></li>
+          <li class="${is_active('audit_logs')}"><a href="${h.route_path('admin_audit_logs')}">${_('Admin audit logs')}</a></li>
+          <li class="${is_active('repositories')}"><a href="${h.route_path('repos')}">${_('Repositories')}</a></li>
+          <li class="${is_active('repository_groups')}"><a href="${h.route_path('repo_groups')}">${_('Repository groups')}</a></li>
+          <li class="${is_active('users')}"><a href="${h.route_path('users')}">${_('Users')}</a></li>
+          <li class="${is_active('user_groups')}"><a href="${h.route_path('user_groups')}">${_('User groups')}</a></li>
+          <li class="${is_active('permissions')}"><a href="${h.route_path('admin_permissions_application')}">${_('Permissions')}</a></li>
+          <li class="${is_active('authentication')}"><a href="${h.route_path('auth_home', traverse='')}">${_('Authentication')}</a></li>
+          <li class="${is_active('integrations')}"><a href="${h.route_path('global_integrations_home')}">${_('Integrations')}</a></li>
+          <li class="${is_active('defaults')}"><a href="${h.route_path('admin_defaults_repositories')}">${_('Defaults')}</a></li>
+          <li class="${is_active('settings')}"><a href="${h.route_path('admin_settings')}">${_('Settings')}</a></li>
 
         ## delegated admin
         % elif repositories or repository_groups or user_groups:
 
            %if repositories:
-              <li class="local-admin-repos"><a href="${h.route_path('repos')}">${_('Repositories')}</a></li>
+              <li class="${is_active('repositories')} 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>
+              <li class="${is_active('repository_groups')} 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>
+              <li class="${is_active('user_groups')} local-admin-user-groups"><a href="${h.route_path('user_groups')}">${_('User groups')}</a></li>
            %endif
         % endif
     </ul>
+    </div>
+    <div class="clear"></div>
+  </div>
 </%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>
 
 
 <%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 -->
+  <!--- REPO CONTEXT BAR -->
   <div id="context-bar">
     <div class="wrapper">
 
       <div class="title">
           ${self.repo_page_title(c.rhodecode_db_repo)}
       </div>
 
       <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>
 
         ## 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 -->
+  <!--- REPO 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 -->
+  <!--- REPO GROUP 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('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 -->
+  <!--- REPO GROUP 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">
                 <ul class="searchItems">
 
                     % if c.template_context['search_context']['repo_id']:
                         <li class="searchTag searchTagFilter searchTagHidable" >
                         ##<a href="${h.route_path('search_repo',repo_name=c.template_context['search_context']['repo_name'])}">
                             <span class="tag">
                                 This repo
                                 <a href="#removeGoToFilter" onclick="removeGoToFilter(); return false"><i class="icon-delete"></i></a>
                             </span>
                         ##</a>
                         </li>
                     % elif c.template_context['search_context']['repo_group_id']:
                         <li class="searchTag searchTagFilter searchTagHidable">
                         ##<a href="${h.route_path('search_repo_group',repo_group_name=c.template_context['search_context']['repo_group_name'])}">
                             <span class="tag">
                                 This group
                                 <a href="#removeGoToFilter" onclick="removeGoToFilter(); return false"><i class="icon-delete"></i></a>
                             </span>
                         ##</a>
                         </li>
                     % endif
 
                     <li class="searchTagInput">
                         <input class="main_filter_input" id="main_filter" size="15" type="text" name="main_filter" placeholder="${_('search / go to...')}" value="" />
                     </li>
                     <li class="searchTag searchTagHelp">
                         <a href="#showFilterHelp" onclick="showMainFilterBox(); return false">?</a>
                     </li>
                 </ul>
             </div>
         </div>
 
         <div id="main_filter_help" style="display: none">
 - Use '/' key to quickly access this field.
 
 - Enter a name of repository, or repository group for quick search.
 
 - Prefix query to allow special search:
 
    user:admin, to search for usernames, always global
 
    user_group:devops, to search for user groups, always global
 
    commit:efced4, to search for commits, scoped to repositories or groups
 
    file:models.py, to search for file paths, scoped to repositories or groups
 
 % if c.template_context['search_context']['repo_id']:
    For advanced full text search visit: <a href="${h.route_path('search_repo',repo_name=c.template_context['search_context']['repo_name'])}">repository search</a>
 % elif c.template_context['search_context']['repo_group_id']:
    For advanced full text search visit: <a href="${h.route_path('search_repo_group',repo_group_name=c.template_context['search_context']['repo_group_name'])}">repository group search</a>
 % else:
    For advanced full text search visit: <a href="${h.route_path('search')}">global search</a>
 % endif
         </div>
        </li>
 
       ## ROOT MENU
         <li class="${is_active('home')}">
           <a class="menulink" title="${_('Home')}" href="${h.route_path('home')}">
             <div class="menulabel">${_('Home')}</div>
           </a>
         </li>
 
       %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('admin')}">
           <a class="menulink childs" title="${_('Admin settings')}" href="${h.route_path('admin_home')}">
             <div class="menulabel">${_('Admin')} </div>
           </a>
         </li>
 
       ## 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 escapeRegExChars = function (value) {
             return value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
         };
 
         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 ''
         };
 
         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 pattern = '(' + escapeRegExChars(value) + ')';
 
             valueDisplay = Select2.util.escapeMarkup(valueDisplay);
 
             // highlight match
             if (searchType != 'text') {
                 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') {
 
                 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> ';
             }
             // user
             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>';
                 }
             }
             // file
             else if (searchType === 'file') {
                 var repo_data = data['repo_data'];
                 var repoIcon = getRepoIcon(repo_data['repository_type']);
                 if (repoIcon) {
                     icon += repoIcon;
                 } else {
                     icon += '<i class="icon-tag"></i>';
                 }
             }
             // generic text
             else if (searchType === 'text') {
                 icon = '';
             }
 
             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 if (suggestion.type === "text") {
                 // 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]
             }
             if (suggestion.type === "text") {
                 // special case we don't want to "skip" display for
                 return true
             }
             return suggestion.value_display.toLowerCase().indexOf(queryLowerCase) !== -1;
         };
 
         var cleanContext = {
             repo_view_type: null,
 
             repo_id: null,
             repo_name: "",
 
             repo_group_id: null,
             repo_group_name: null
         };
         var removeGoToFilter = function () {
             $('.searchTagHidable').hide();
             $('#main_filter').autocomplete(
                 'setOptions', {params:{search_context: cleanContext}});
         };
 
         $('#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: false,
             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();
         };
 
         $('#main_filter').on('keydown.autocomplete', function (e) {
 
             var BACKSPACE = 8;
             var el = $(e.currentTarget);
             if(e.which === BACKSPACE){
                 var inputVal = el.val();
                 if (inputVal === ""){
                     removeGoToFilter()
                 }
             }
         });
 
     </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 -->