use pluralize, tidy messages and formatting for palette filter esp when empty
(no more lemon, now use null symbol) Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/9a22b64c Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/9a22b64c Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/9a22b64c Branch: refs/heads/master Commit: 9a22b64cb731b8721bfcc901d9de742e16c2db2e Parents: e878847 Author: Alex Heneveld <alex.henev...@cloudsoftcorp.com> Authored: Tue Oct 30 13:18:25 2018 +0000 Committer: Alex Heneveld <alex.henev...@cloudsoftcorp.com> Committed: Tue Oct 30 13:18:25 2018 +0000 ---------------------------------------------------------------------- .../catalog-selector-palette-footer.html | 22 +++++++++++++------- .../catalog-selector/catalog-selector.less | 11 +++++----- 2 files changed, 19 insertions(+), 14 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/9a22b64c/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector-palette-footer.html ---------------------------------------------------------------------- diff --git a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector-palette-footer.html b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector-palette-footer.html index 7ae9cc0..fd13c2a 100644 --- a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector-palette-footer.html +++ b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector-palette-footer.html @@ -17,14 +17,15 @@ under the License. --> <div class="paletteItemsFooter"> - <div ng-if="searchedItems.length === 0" class="no-match"> - <i class="fa fa-lemon-o"></i> + <div ng-if="searchedItems.length === 0" class="icon no-match"> + <span>ø</span> </div> - <small class="help-block text-sm palette-footer-message"> + <small class="help-block text-sm palette-footer-message" ng-class="{ 'no-match': searchedItems.length === 0 }"> <span ng-if="search"> <span ng-if="searchedItems.length === 0"> <span ng-if="!skippingFilters && itemsBeforeActiveFilters.length > itemsAfterActiveFilters.length"> - <b>{{ itemsBeforeActiveFilters.length - itemsAfterActiveFilters.length }} item{{ itemsBeforeActiveFilters.length - itemsAfterActiveFilters.length > 1 ? 's' : ''}}</b> + <strong>{{ itemsBeforeActiveFilters.length - itemsAfterActiveFilters.length }} + <ng-pluralize count="itemsBeforeActiveFilters.length" when="{ '1': 'item', 'other': 'items' }"></<ng-pluralize></strong> matching search but excluded by filters. <button class="btn btn-outline btn-info" ng-click="disableFilters()">Clear filters</button> </span> @@ -34,23 +35,28 @@ </span> <span ng-if="searchedItems.length > 0"> <span ng-if="skippingFilters"> - <b>No matches with selected filters.</b><br/> + <strong>No matches with selected filters.</strong><br/> Showing matches ignoring filters. </span> <span ng-if="!skippingFilters && itemsBeforeActiveFilters.length > itemsAfterActiveFilters.length"> - <b>{{ itemsBeforeActiveFilters.length - itemsAfterActiveFilters.length }} more item{{ itemsBeforeActiveFilters.length - itemsAfterActiveFilters.length > 1 ? 's' : ''}}</b> + <strong>{{ itemsBeforeActiveFilters.length - itemsAfterActiveFilters.length }} more + <ng-pluralize count="itemsBeforeActiveFilters.length" when="{ '1': 'item', 'other': 'items' }"></<ng-pluralize></strong> matching search but excluded by filters. <button class="btn btn-outline btn-info" ng-click="disableFilters()">Clear filters</button> </span> </span> </span> <span ng-if="!search"> + <span ng-if="itemsBeforeActiveFilters.length == 0"> + <strong>Nothing available.</strong> + </span> <span ng-if="skippingFilters && searchedItems.length > 0"> - <b>Nothing available in selected filters.</b><br/> + <strong>Nothing available in selected filters.</strong><br/> Ignoring filters. </span> <span ng-if="!skippingFilters && itemsBeforeActiveFilters.length > itemsAfterActiveFilters.length"> - <b>{{ itemsBeforeActiveFilters.length - itemsAfterActiveFilters.length }} more item{{ itemsBeforeActiveFilters.length - itemsAfterActiveFilters.length > 1 ? 's' : ''}}</b> + <strong>{{ itemsBeforeActiveFilters.length - itemsAfterActiveFilters.length }} more + <ng-pluralize count="itemsBeforeActiveFilters.length" when="{ '1': 'item', 'other': 'items' }"></<ng-pluralize></strong> excluded by filters. <button class="btn btn-outline btn-info" ng-click="disableFilters()">Clear filters</button> </span> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/9a22b64c/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.less ---------------------------------------------------------------------- diff --git a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.less b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.less index 969ac1f..d22ef1f 100644 --- a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.less +++ b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.less @@ -166,10 +166,6 @@ catalog-selector { margin-top: 3px; margin-bottom: 3px; } - .no-match { - margin-top: 12px; - font-style: italic; - } .spinner-area { height: 300px; @@ -224,10 +220,13 @@ catalog-selector { margin-left: 1em; } .no-match { + text-align: center; + font-size: 120%; + } + .no-match.icon { font-size: 8em; margin-top: 24px; - margin-bottom: 36px; - text-align: center; + margin-bottom: 6px; color: @gray-lighter; } }
