vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Make multiselect dropdown faster and nicer for large lists

Browse source
This commit is contained in:
Joseph Schorr 2015-06-24 16:48:05 -04:00
parent e7915baf8c
commit 9e785ab019
2 changed files with 18 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
static/directives/multiselect-dropdown.html
View file

@ -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>

20
static/directives/new-header-bar.html
View file

@ -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 -->