salvator avatar salvator committed ca7d2d0

#16 menu search

Comments (0)

Files changed (2)

admintools_bootstrap/static/admintools_bootstrap/lib/style.less

 	}
 }
 
+
+#menu_search {
+	@menu_search_width: 190px;
+	position: absolute;
+	z-index: 900;
+	border: 1px solid @gray;
+	background-color: @grayLighter;
+	padding: 10px;
+	left: -@menu_search_width + 10px;
+	width: @menu_search_width;
+	top: 40px;
+	.border-radius(0 0 6px 6px);
+	.box-shadow(0 2px 4px rgba(0,0,0,.2));
+	.background-clip(padding-box);
+	display: none;
+
+	ul {
+		width: 100%;
+		margin-top: 0.5em;
+		li {
+			list-style: none;
+			float: none;
+			padding: 0px;
+			a {
+				text-shadow: none;
+				padding: 0.2em 0.5em;
+				color: @gray;
+				&:hover,&:focus {
+					color: @grayLighter;
+					span.highlight {
+						color: @grayLighter;
+						font-weight: bold;
+					}
+					background-color: @gray;
+				}
+
+				span.highlight {
+					color: @grayDark;
+					font-weight: bold;
+				}
+			}
+		}
+	}
+
+	input {
+		width: @menu_search_width - 10;
+		background-color: @white;
+		color: @black !important;
+		// Placeholder text gets special styles; can't be bundled together though for some reason
+		&:-moz-placeholder {
+		  color: @gray;
+		}
+		&::-webkit-input-placeholder {
+		  color: @gray;
+		}
+		// Hover states
+		&:hover {
+		  background-color: @grayLight;
+		  background-color: rgba(255,255,255,.5);
+		  color: @white;
+		}
+		// Focus states (we use .focused since IE8 and down doesn't support :focus)
+		&:focus,
+		&.focused {
+		  background-color: @white;
+		  color: @grayDark;
+		  text-shadow: 0 1px 0 @white;
+		  border: 0;
+		  padding: 4px 9px;
+		  .box-shadow(0 0 3px rgba(0,0,0,.15));
+		}
+	}
+
+}
+

admintools_bootstrap/templates/admin/base.html

     $(elem).chosen();
   }
 
+  // menu search
+
+  var nav_menu = $('#navigation-menu');
+  var menu_map = [];
+  var menu_url_map = {};
+  var search_results = $('#menu_search ul');
+  var menu_search_visible = false;
+
+  $('#navigation-menu a').not('.dropdown-toggle').each(function(i, a) {
+      var line = [a.text.toLowerCase().replace(/^\s+|\s+$/g, ''), a.href];
+      menu_map[i] = line;
+      menu_url_map[a.href] = a.text.replace(/^\s+|\s+$/g, '');
+  });
+
+  $('#menu_search input').keyup(function(e){
+    var code = (e.keyCode ? e.keyCode : e.which);
+    if (code == 40) {
+      // down arrow key
+      $('#menu_search ul li a:first').focus();
+      return;
+    }
+    var inp = $(this).val().toLowerCase();
+    if (inp == '') { search_results.html(''); return; }
+    var results = "";
+    var highlight_re = new RegExp('(' + inp + ')', 'ig');
+    var cnt = 0;
+    var unique_map = {};
+    $(menu_map).each(function(i, e){
+      if ((-1 != e[0].indexOf(inp)) && (cnt < 10)) {
+        if (unique_map[e[1]]) { return; }
+        var txt = menu_url_map[e[1]].replace(highlight_re, '<span class="highlight">$1</span>');
+        results = results + '<li><a href="' + e[1] + '">' + txt + '</a></li>';
+        unique_map[e[1]] = true;
+        cnt ++;
+      }
+    });
+    search_results.html(results);
+  });
+
+  $('#menu_search ul li a').live('keydown', function(e){
+    var code = (e.keyCode ? e.keyCode : e.which);
+    if (code == 40) {
+      e.preventDefault();
+      $(this).parent().next().children('a').focus();
+    }
+    if (code == 38) {
+      e.preventDefault();
+      $(this).parent().prev().children('a').focus();
+    }
+  });
+
+  $('#menu_search ul li a').live('mouseover', function(e){
+    $(this).focus();
+  });
+
+  $('#menu-search-toggle').click(function(e){
+    e.preventDefault();
+    menu_search_visible = ! menu_search_visible;
+    $('#menu_search').toggle(menu_search_visible);
+    if (menu_search_visible) {
+      $(this).twipsy('hide');
+      $('#menu_search input').focus();
+    } 
+  });
+
 });
 </script>
 </head>
         {% block search %}{% endblock %}
         {% if user.is_active and user.is_staff %}
         <ul class="nav secondary-nav">
+            <li id="menu-search-container">
+              <a href="#" id="menu-search-toggle" class="top-icon" title="{% trans "Menu Search" %}" rel="popover" data-placement="below"><span class="ui-icon ui-icon-search"></span></a>
+              <div id="menu_search">
+                <input type="text" placeholder="{% trans "Search in menu" %}"/>
+                <ul></ul>
+              </div>
+            </li>
             {% atb_site_link %}
             <li class="dropdown">
               <a class="dropdown-toggle" href="#">
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.