Get a nice dropdown of tags working on the visualize tags tab
This commit is contained in:
parent
be9906167a
commit
5741656411
8 changed files with 431 additions and 18 deletions
31
static/directives/multiselect-dropdown.html
Normal file
31
static/directives/multiselect-dropdown.html
Normal file
|
@ -0,0 +1,31 @@
|
|||
<div class="multiselect-dropdown-element">
|
||||
<div class="dropdown" style="text-align: left;">
|
||||
<button class="btn-dropdown btn btn-default" data-toggle="dropdown">
|
||||
<span class="selected-item-template" ng-repeat="item in selectedItems" ng-transcope></span>
|
||||
<span class="none" ng-if="!selectedItems.length">(No {{ itemName }}s selected)</span>
|
||||
<span class="caret" ng-if="!readOnly"></span>
|
||||
</button>
|
||||
|
||||
<ul class="dropdown-menu noclose">
|
||||
<li>
|
||||
<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">
|
||||
<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).length == 0">
|
||||
<div class="empty">
|
||||
<div class="empty-primary-msg">No matching {{ itemName }}s found</div>
|
||||
<div class="empty-secondary-msg">
|
||||
Please reduce your filter above
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
|
@ -1,23 +1,24 @@
|
|||
<div class="repo-panel-changes-element">
|
||||
<div class="resource-view" resource="imagesResource"
|
||||
error-message="'Could not load repository images'">
|
||||
<h3 class="tab-header">
|
||||
Visualize Tags:
|
||||
<span class="multiselect-dropdown" items="tagNames" selected-items="selectedTags"
|
||||
item-name="tag" item-checked="updateState()">
|
||||
<span class="tag-span">{{ item }}</span>
|
||||
</span>
|
||||
</h3>
|
||||
|
||||
<!-- No Tags Selected -->
|
||||
<div class="empty" ng-if="!selectedTags.length">
|
||||
<div class="empty-primary-msg">No tags selected to view</div>
|
||||
<div class="empty-secondary-msg">
|
||||
Please select one or more tags in the <i class="fa fa-tags" style="margin-left: 4px; margin-right: 4px;"></i> Tags tab to visualize.
|
||||
Please select one or more tags above.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tags Selected -->
|
||||
<div ng-if="selectedTags.length > 0">
|
||||
<h3 class="tab-header">
|
||||
Visualize Tags:
|
||||
<span class="visualized-tag" ng-repeat="tag in selectedTags">
|
||||
<i class="fa fa-tag"></i>{{ tag }}
|
||||
</span>
|
||||
</h3>
|
||||
|
||||
<div ng-show="selectedTags.length > 0">
|
||||
<div id="image-history row" class="resource-view" resource="imagesResource"
|
||||
error-message="'Cannot load repository images'">
|
||||
|
||||
|
|
Reference in a new issue