From 9e785ab019b5b46f047a7c2f91843823231e946f Mon Sep 17 00:00:00 2001
From: Joseph Schorr <joseph.schorr@coreos.com>
Date: Wed, 24 Jun 2015 16:48:05 -0400
Subject: [PATCH] Make multiselect dropdown faster and nicer for large lists

---
 static/directives/multiselect-dropdown.html |  9 ++++++++-
 static/directives/new-header-bar.html       | 20 ++++++++++----------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/static/directives/multiselect-dropdown.html b/static/directives/multiselect-dropdown.html
index 11acda579..c4fbf4f74 100644
--- a/static/directives/multiselect-dropdown.html
+++ b/static/directives/multiselect-dropdown.html
@@ -11,13 +11,20 @@
         <input type="search" class="form-control" ng-model="filter" placeholder="{{ itemName }} filter...">
       </li>
       <li role="presentation" class="divider"></li>
-      <li ng-repeat="item in items | filter:filter">
+      <li ng-repeat="item in items | filter:filter | limitTo:10">
         <a class="menu-item" href="javascript:void(0)" ng-click="toggleItem(item)">
             <span class="co-checkable-item" ng-class="isChecked(selectedItems, item) ? 'checked': 'not-checked'">
             </span>
             <span class="menu-item-template" ng-transcope></span>
         </a>
       </li>
+      <li role="presentation" ng-if="(items | filter:filter | limitTo:11).length == 11">
+        <div class="empty" style="margin-top: 10px;">
+          <div class="empty-secondary-msg">
+            + {{ (items | filter:filter).length - 10 }} additional
+          </div>
+        </div>
+      </li>
       <li role="presentation" ng-if="(items | filter:filter).length == 0">
         <div class="empty">
           <div class="empty-primary-msg">No matching {{ itemName }}s found</div>
diff --git a/static/directives/new-header-bar.html b/static/directives/new-header-bar.html
index 37bc74e4b..f59baca39 100644
--- a/static/directives/new-header-bar.html
+++ b/static/directives/new-header-bar.html
@@ -5,7 +5,7 @@
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
         &equiv;
       </button>
-      <a class="navbar-brand" ng-href="{{ user.anonymous ? '/' : '/repository/' }}" target="{{ appLinkTarget() }}">
+      <a class="navbar-brand" ng-href="{{ user.anonymous ? '/' : '/repository/' }}" target="{{ appLinkTarget }}">
         <span id="quay-logo" ng-style="{'background-image': 'url(' + getEnterpriseLogo() + ')'}"></span>
       </a>
       <span class="user-tools visible-xs" style="float: right;">
@@ -19,29 +19,29 @@
     <div class="collapse navbar-collapse navbar-ex1-collapse">
       <!-- Not signed in -->
       <ul class="nav navbar-nav navbar-links" ng-if="user.anonymous">
-        <li><a ng-href="/tour/" target="{{ appLinkTarget() }}" quay-section="tour">Tour</a></li>
-        <li><a ng-href="/tutorial/" target="{{ appLinkTarget() }}" quay-section="tutorial">Tutorial</a></li>
-        <li quay-require="['BILLING']"><a ng-href="/plans/" target="{{ appLinkTarget() }}" quay-section="plans">Pricing</a></li>
+        <li><a ng-href="/tour/" target="{{ appLinkTarget }}" quay-section="tour">Tour</a></li>
+        <li><a ng-href="/tutorial/" target="{{ appLinkTarget }}" quay-section="tutorial">Tutorial</a></li>
+        <li quay-require="['BILLING']"><a ng-href="/plans/" target="{{ appLinkTarget }}" quay-section="plans">Pricing</a></li>
         <li><a href="http://docs.quay.io/" target="_blank">Docs</a></li>
       </ul>
 
       <!-- Signed in -->
       <ul class="nav navbar-nav navbar-links" ng-if="!user.anonymous">
-        <li><a ng-href="/repository/" target="{{ appLinkTarget() }}" quay-section="repository">Repositories</a></li>
-        <li><a ng-href="/tutorial/" target="{{ appLinkTarget() }}" quay-section="tutorial">Tutorial</a></li>
+        <li><a ng-href="/repository/" target="{{ appLinkTarget }}" quay-section="repository">Repositories</a></li>
+        <li><a ng-href="/tutorial/" target="{{ appLinkTarget }}" quay-section="tutorial">Tutorial</a></li>
         <li><a href="http://docs.quay.io/" target="_blank">Docs</a></li>
       </ul>
 
       <!-- Phone -->
       <ul class="nav navbar-nav navbar-right visible-xs" ng-switch on="user.anonymous">
         <li ng-switch-when="false">
-          <a href="/user/{{ user.username }}?tab=settings" class="user-view" target="{{ appLinkTarget() }}">
+          <a href="/user/{{ user.username }}?tab=settings" class="user-view" target="{{ appLinkTarget }}">
             <span class="avatar" size="32" data="user.avatar"></span>
             {{ user.username }}
           </a>
         </li>
         <li ng-switch-default>
-          <a class="user-view" href="/signin/" target="{{ appLinkTarget() }}">Sign in</a>
+          <a class="user-view" href="/signin/" target="{{ appLinkTarget }}">Sign in</a>
         </li>
       </ul>
 
@@ -123,7 +123,7 @@
           </a>
           <ul class="dropdown-menu">
             <li>
-              <a href="/user/{{ user.username }}?tab=settings" target="{{ appLinkTarget() }}">
+              <a href="/user/{{ user.username }}?tab=settings" target="{{ appLinkTarget }}">
                 Account Settings
               </a>
             </li>
@@ -132,7 +132,7 @@
           </ul>
         </li>
         <li ng-switch-default>
-          <a class="user-view" href="/signin/" target="{{ appLinkTarget() }}">Sign in</a>
+          <a class="user-view" href="/signin/" target="{{ appLinkTarget }}">Sign in</a>
         </li>
       </ul>
     </div><!-- /.navbar-collapse -->