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

Implement new search UI

Browse source 
We now have both autocomplete-based searching for quick results, as well as a full search page for a full listing of results
This commit is contained in:
Joseph Schorr 2017-04-07 17:25:44 -04:00
parent 8b148bf1d4
commit e9ffe0e27b
23 changed files with 649 additions and 393 deletions
Download patch file Download diff file Expand all files Collapse all files

54
static/js/directives/ui/search-box/search-box.component.html Normal file
View file

@ -0,0 +1,54 @@
<span class="search-box-element">
<script type="text/ng-template" id="search-result-template">
<div class="search-box-result">
<span class="kind">{{ result.title || result.kind }}</span>
<span ng-switch on="result.kind">
<!-- Team -->
<span ng-switch-when="team">
<strong>
<span class="avatar" data="result.avatar" size="16"></span>
<span class="result-name">{{ result.name }}</span>
</strong>
<span class="clarification">
in
<span class="avatar" data="result.organization.avatar" size="16"></span>
<span class="result-name">{{ result.organization.name }}</span>
</span>
</span>
<span ng-switch-when="user">
<span class="avatar" data="result.avatar" size="16"></span>
<span class="result-name">{{ result.name }}</span>
</span>
<span ng-switch-when="organization">
<span class="avatar" data="result.avatar" size="16"></span>
<span class="result-name">{{ result.name }}</span>
</span>
<span ng-switch-when="robot">
<i class="fa ci-robot"></i>
<span class="result-name">{{ result.name }}</span>
</span>
<span ng-switch-when="repository">
<span class="avatar" data="result.namespace.avatar" size="16"></span>
<span class="result-name">{{ result.namespace.name }}/{{ result.name }}</span>
<div class="result-description" ng-if="result.description">
<div class="description markdown-view" content="result.description"
first-line-only="true" placeholder-needed="false"></div>
</div>
</span>
</span>
</div>
</script>
<input class="form-control" type="text" placeholder="search"
ng-model="$ctrl.enteredQuery"
typeahead="$ctrl.onTypeahead($event)"
ta-display-key="name"
ta-suggestion-tmpl="search-result-template"
ta-clear-on-select="true"
(ta-selected)="$ctrl.onSelected($event)"
(ta-entered)="$ctrl.onEntered($event)">
<span class="search-icon">
<span class="cor-loader-inline" ng-if="$ctrl.isSearching"></span>
<i class="fa fa-search" ng-if="!$ctrl.isSearching"></i>
</span>
</span>