This is an automated email from the ASF dual-hosted git repository.
heneveld pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/brooklyn-ui.git
The following commit(s) were added to refs/heads/master by this push:
new d21646b4 Improves filter layout
d21646b4 is described below
commit d21646b4ddbce4e68d06230725890b5530df2d88
Author: Martin Harris <[email protected]>
AuthorDate: Wed Mar 22 11:47:31 2023 +0000
Improves filter layout
---
.../components/adjuncts-list/adjuncts-list.html | 2 +-
ui-modules/utils/br-core/style/dropdown.less | 43 ++++++++++++++++++++--
ui-modules/utils/table/index.html | 4 +-
3 files changed, 43 insertions(+), 6 deletions(-)
diff --git
a/ui-modules/app-inspector/app/components/adjuncts-list/adjuncts-list.html
b/ui-modules/app-inspector/app/components/adjuncts-list/adjuncts-list.html
index 07901c1f..b6c3e1a6 100644
--- a/ui-modules/app-inspector/app/components/adjuncts-list/adjuncts-list.html
+++ b/ui-modules/app-inspector/app/components/adjuncts-list/adjuncts-list.html
@@ -26,7 +26,7 @@
<ul class="dropdown-menu" uib-dropdown-menu role="menu"
aria-labelledby="single-button">
<li role="menuitem" class="dropdown-header">Filters</li>
<li role="menuitem" ng-repeat="types in filters.types
track by $index" ng-class="{'active': types.active}" class="layer">
- <a href="#" ng-click="$event.preventDefault();
types.active = !types.active"><i class="fa fa-fw fa-circle"></i> {{types.value
| lowercase}}</a>
+ <a href="#" ng-click="$event.preventDefault();
types.active = !types.active"><i class="fa fa-fw fa-check-thin"
ng-class="{'fa-check': types.active, 'fa-check-thin': !types.active}"></i>
{{types.value | lowercase}}</a>
</li>
</ul>
</div>
diff --git a/ui-modules/utils/br-core/style/dropdown.less
b/ui-modules/utils/br-core/style/dropdown.less
index 7411ef51..833127da 100644
--- a/ui-modules/utils/br-core/style/dropdown.less
+++ b/ui-modules/utils/br-core/style/dropdown.less
@@ -16,9 +16,9 @@
* specific language governing permissions and limitations
* under the License.
*/
-@dropdown-link-hover-bg: lighten(@primary-500, 55%);
-@dropdown-link-active-bg: @dropdown-link-hover-bg;
-@dropdown-link-active-color: black;
+
+@dropdown-link-hover-bg: @primary-light;
+@dropdown-link-active-bg: white;
.dropdown-menu {
overflow-y: auto;
@@ -29,6 +29,39 @@
padding-top: 0;
padding-bottom: 0;
+ .active a {
+ color: @primary-900;
+ &:hover,
+ &:focus {
+ color: @primary-900;
+ background-color: @dropdown-link-hover-bg;
+ }
+ }
+
+ .a {
+ color: @primary-900;
+ &:hover,
+ &:focus {
+ color: @primary-900;
+ background-color: @dropdown-link-hover-bg;
+ }
+ }
+
+ .toggle.active a {
+ &:hover,
+ &:focus {
+ color: @primary-900;
+ background-color: @dropdown-link-hover-bg;
+ }
+ }
+
+ .toggle a {
+ &:hover,
+ &:focus {
+ color: @primary-900;
+ }
+ }
+
li a {
padding: 7px 20px;
}
@@ -78,6 +111,10 @@
&:not(:first-child) {
border-top: 1px solid lighten(@primary-500, 65%);
}
+ &:hover,
+ &:focus {
+ background-color: @dropdown-link-hover-bg;
+ }
}
///////////////////////////////////////////////
diff --git a/ui-modules/utils/table/index.html
b/ui-modules/utils/table/index.html
index 820ce9fd..2cd292e0 100644
--- a/ui-modules/utils/table/index.html
+++ b/ui-modules/utils/table/index.html
@@ -27,11 +27,11 @@
typeahead-template-url="SuggestionTemplate.html" />
<span class="input-group-btn" uib-dropdown auto-close="outsideClick">
<button class="btn btn-default" uib-dropdown-toggle><i class="fa
fa-fw fa-cog"></i></button>
- <ul class="dropdown-menu dropdown-menu-right" role="menu"
uib-dropdown-menu>
+ <ul class="dropdown-menu with-checks" role="menu"
uib-dropdown-menu>
<li role="menuitem" class="dropdown-header">Columns to
display</li>
<li ng-repeat="column in ctrl.state.columns track by $index"
ng-class="{'active': !column.hidden}" class="toggle" role="menuitem">
<a ng-click="hideColumn(column)">
- <i class="fa fa-fw " ng-class="{'fa-circle':
!column.hidden, 'fa-circle-thin': column.hidden}"></i>
+ <i class="fa fa-fw " ng-class="{'fa-check':
!column.hidden, 'fa-check-thin': column.hidden}"></i>
{{column.header}}
</a>
</li>
