Github user tbouron commented on a diff in the pull request:
https://github.com/apache/brooklyn-ui/pull/94#discussion_r228907223
--- Diff:
ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.template.html
---
@@ -30,44 +30,83 @@
</div>
</div>
- <div ng-show="!isLoading">
+ <div ng-show="!isLoading" class="catalog-palette-main
palette-full-height-wrapper">
+ <div class="catalog-palette-header">
<div class="form-group" ng-class="{'has-error': isReserved()}">
<div class="input-group input-group-sm">
- <span class="input-group-btn" uib-dropdown keyboard-nav>
- <button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" uib-dropdown-toggle>
- <i class="fa fa-sort"></i>
+ <span class="input-group-btn" keyboard-nav>
+ <button id="palette-controls-button" type="button"
class="btn btn-default dropdown-toggle" ng-class="{ 'btn-primary':
showPaletteControls }" id="palette-controls" aria-haspopup="true"
aria-expanded="false"
+ ng-click="togglePaletteControls()">
+ <i class="fa fa-cog"></i>
</button>
- {{filters | json}}
- <ul class="dropdown-menu" role="menu"
uib-dropdown-menu>
- <li role="menuitem" class="dropdown-header">Order
by</li>
- <li role="menuitem" ng-repeat="order in
state.orders track by $index" ng-class="{'active': state.currentOrder ===
order}" class="layer">
- <a ng-click="state.currentOrder = order"><i
class="fa fa-fw fa-circle"></i> {{order | capitalize}}</a>
- </li>
- </ul>
</span>
<input ng-model="search" type="text"
placeholder="{{getPlaceHolder()}}" class="form-control" auto-focus />
<span class="input-group-addon">
<strong>{{searchedItems.length === 0 && search &&
allowFreeForm() ? 1 : searchedItems.length}}</strong>
{{(searchedItems.length === 0 && search &&
allowFreeForm() ? 1 : searchedItems.length) == 1 ? 'item' : 'items'}}
</span>
</div>
+ <div class="pane-nav-row" id="palette-controls"
ng-if="showPaletteControls" aria-labelledby="palette-controls-button">
+
+ <div class="filters" ng-class="{ 'multiline':
filterSettings.showAllFilters }" ng-init="onFiltersShown()">
+
+ <div class="spacer" ng-repeat-start="filter in filters"
ng-if="filter.spacerBefore"></div>
+ <div class="nav-row-item" ng-repeat-end
ng-click="filter.enabled = !filter.enabled">
+ <span title="{{ filter.hoverTest }}" class="label"
ng-class="{'label-primary': filter.enabled, 'label-default': !filter.enabled }">
+ <i class="fa fa-{{ filter.icon }}"
ng-if="filter.icon"></i>
+ <span ng-if="filter.label">{{ filter.label }}</span>
+ </span>
+ </div>
+ </div>
+
+ <div class="nav-row-item"
ng-if="filterSettings.filtersMultilineAvailable" title="More filters available"
+ ng-click="toggleShowAllFilters()" >
+ <span class="label" ng-class="{'label-primary':
filterSettings.showAllFilters, 'label-default': !filterSettings.showAllFilters
}">
+ ...
+ </span>
+ </div>
+
+ <div class="spacer"></div>
+
+ <span uib-dropdown>
+ <a href id="palette-sort" uib-dropdown-toggle
aria-haspopup="true" aria-expanded="false" >
+ <div class="nav-row-item tool" title="Sort">
+ <i class="fa fa-sort"></i></div>
+ </a>
+ <ul class="dropdown-menu right-align-icon" role="menu"
uib-dropdown-menu aria-labelledby="palette-sort">
+ <li role="menuitem" ng-repeat="order in viewOrders
track by $index" ng-class="{'active': state.currentOrder[0] === order.field}"
class="layer">
+ <a ng-click="sortBy(order)"><i class="fa fa-fw
fa-circle"></i> {{ order.label }}</a>
+ </li>
+ </ul>
+ </span>
+
+ <span uib-dropdown>
+ <a href id="palette-view-mode" uib-dropdown-toggle
aria-haspopup="true" aria-expanded="false" >
+ <div class="nav-row-item tool" title="Display mode">
+ <i class="fa fa-th"></i></div>
+ </a>
+ <ul class="dropdown-menu right-align-icon" role="menu"
uib-dropdown-menu aria-labelledby="palette-view-mode">
+ <li role="menuitem" ng-repeat="view in viewModes
track by $index" ng-class="{'active': state.viewMode === view}" class="layer">
+ <a ng-click="state.viewMode = view"><i
class="fa fa-fw fa-circle"></i> {{view.name}}</a>
+ </li>
+ </ul>
+ </span>
+ </div>
<ng-include src="customSubHeadTemplateName"/>
</div>
- <small class="help-block text-sm no-match" ng-if="search &&
searchedItems.length === 0">
- No {{family.displayName.toLowerCase()}} matching the current
search
- </small>
+ </div>
- <div class="row grid catalog-palette">
+ <div class="row grid">
<!-- here and below, col-xs-3 or -4 or -2 all work giving
different densities;
this could be configurable ("compressed"=xs-2 w no
labels, "normal"=xs-3, "big"=xs-4) -->
- <div class="col-xs-3 catalog-palette-item"
- ng-repeat="item in searchedItems =
(filterPaletteItems(items | catalogSelectorSearch:search) |
catalogSelectorSort:family) | orderBy:state.currentOrder |
limitTo:pagination.itemsPerPage:(pagination.page-1)*pagination.itemsPerPage
track by (item.containingBundle + ':' + item.symbolicName + ':' + item.version)"
+ <div class="catalog-palette-item"
ng-class="state.viewMode.classes"
+ ng-repeat="item in searchedItems =
filterPaletteItemsWithActiveFilters(items | catalogSelectorSearch:search) |
orderBy:state.currentOrder |
limitTo:pagination.itemsPerPage:(pagination.page-1)*pagination.itemsPerPage
track by (item.containingBundle + ':' + item.symbolicName + ':' + item.version)"
--- End diff --
It's a very bad angular practice to call for a function that returns a new
array on every call: the track cannot run properly as it will be new items
every time. Considering the number of items in the list, this should use an
angular filter instead.
---
