use labels instead of checkboxes for config filters
diff --git a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.template.html b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.template.html
index 55dc304..3cf0cc9 100644
--- a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.template.html
+++ b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.template.html
@@ -52,7 +52,7 @@
<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 }">
+ <span title="{{ filter.hoverText }}" 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>
diff --git a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.directive.js b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.directive.js
index 6222f9c..dae9220 100644
--- a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.directive.js
+++ b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.directive.js
@@ -47,6 +47,8 @@
{
id: 'suggested',
label: 'Suggested',
+ icon: 'plus-circle',
+ hoverText: 'Show config keys that marked as pinned or priority',
filter: (item)=> {
return item.pinned && item.priority > -1;
}
@@ -54,6 +56,8 @@
{
id: 'required',
label: 'Required',
+ icon: 'times-circle',
+ hoverText: 'Show config keys that are required or have an issue',
filter: (item, model)=> {
return (item.constraints && item.constraints.required) ||
(model && model.issues && model.issues.some((issue)=>(issue.group === 'config' && issue.ref === item.name)) );
@@ -62,6 +66,8 @@
{
id: 'inuse',
label: 'In Use',
+ icon: 'check-circle',
+ hoverText: 'Show config keys that are in use',
filter: (item, model)=> {
return model && model.config && model.config.has(item.name);
}
@@ -69,6 +75,8 @@
{
id: 'all',
label: 'All',
+ icon: 'th-list',
+ hoverText: 'Show all config keys',
filter: (item)=> {
return item;
}
diff --git a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.less b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.less
index 6a3ad1f..e40b12a 100644
--- a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.less
+++ b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.less
@@ -833,22 +833,28 @@
.spec-configuration-filters-categories {
overflow: hidden;
- list-style: none;
padding: 0;
- li {
+ display: flex;
+ div.filter {
cursor: pointer;
+ margin-top: 4px;
+ margin-bottom: 4px;
&:not(:first-child) {
- margin-left: 1.5em;
+ margin-left: 1em;
}
- .filter-checkbox {
- width: 1em;
+ &:last-child {
+ flex-grow: 1;
+ text-align: right;
}
- &.disabled {
- color: @gray-light;
- cursor: inherit;
+ .filter-icon {
+ width: 2ex;
+ text-align: left;
+ }
+ label {
+ padding-left: 1em;
+ padding-right: 1em;
}
}
- color: @gray;
}
}
.spec-configuration-filters .form-group, .spec-parameter-filters .form-group {
diff --git a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.template.html b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.template.html
index 1b52515..d6f91f7 100644
--- a/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.template.html
+++ b/ui-modules/blueprint-composer/app/components/spec-editor/spec-editor.template.html
@@ -233,14 +233,18 @@
<input ng-model="state.config.search" type="text" class="form-control" placeholder="Search for config key by name" auto-focus="state.config.filter.open" blur-on-enter />
</div>
<div class="form-group">
- <ul class="spec-configuration-filters-categories">
- <li ng-repeat="filter in filters.config track by filter.id"
+ <div class="spec-configuration-filters-categories">
+ <div ng-repeat="filter in filters.config track by filter.id"
ng-class="{ 'disabled': isFilterDisabled(filter) }"
ng-click="onFilterClicked(filter)"
- class="pull-left">
- <i class="filter-checkbox fa" ng-class="{'fa-check-square-o': state.config.filter.values[ filter.id ], 'fa-square-o': !state.config.filter.values[ filter.id ]}"></i> {{filter.label}}
- </li>
- </ul>
+ class="filter">
+
+ <span title="{{ filter.hoverText }}" class="label" ng-class="{'label-primary': state.config.filter.values[ filter.id ], 'label-default': !state.config.filter.values[ filter.id ] }">
+ <i class="filter-icon fa fa-{{ filter.icon }}" ng-if="filter.icon"></i>
+ <span class="filter-label" ng-if="filter.label">{{ filter.label }}</span>
+ </span>
+ </div>
+ </div>
</div>
</fieldset>
