This is an automated email from the ASF dual-hosted git repository.
tobiasistvan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/ambari-logsearch.git
The following commit(s) were added to refs/heads/master by this push:
new 77847de [AMBARI-24900] [Log Search UI] Display the number of
selection for the multiple selection dropdowns (#43)
77847de is described below
commit 77847de43b74a15c41ebb91b1cf27176770c6f95
Author: Istvan Tobias <tobias.ist...@gmail.com>
AuthorDate: Wed Nov 28 23:38:20 2018 +0100
[AMBARI-24900] [Log Search UI] Display the number of selection for the
multiple selection dropdowns (#43)
* [AMBARI-24900] [Log Search UI] Display the number of selection for the
multiple selection dropdowns
* [AMBARI-24900] [Log Search UI] Display the number of selection for the
multiple selection dropdowns. Badge solution.
---
.../menu-button/menu-button.component.html | 3 +++
.../menu-button/menu-button.component.less | 24 +++++++++++++++++-----
.../menu-button/menu-button.component.ts | 3 +++
.../dropdown-button/dropdown-button.component.html | 1 +
.../dropdown-button/dropdown-button.component.less | 16 +++++++++++++++
.../dropdown-button/dropdown-button.component.ts | 3 +++
.../src/app/modules/shared/variables.less | 2 +-
7 files changed, 46 insertions(+), 6 deletions(-)
diff --git
a/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.html
b/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.html
index 28cde2b..cb63d44 100644
---
a/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.html
+++
b/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.html
@@ -22,6 +22,9 @@
<i *ngIf="iconClass" [ngClass]="['icon', iconClass]"></i>
<i *ngIf="hasCaret" [ngClass]="['fa ', caretClass ]"></i>
<span *ngIf="label" class="menu-button-label">{{label}}</span>
+ <span *ngIf="showTotalSelection && totalSelection" class="total-selection
badge">
+ {{totalSelection}}
+ </span>
</a>
<ul data-component="dropdown-list" *ngIf="hasSubItems" [items]="subItems"
(selectedItemChange)="onDropdownItemChange($event)"
[isMultipleChoice]="isMultipleChoice"
diff --git
a/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.less
b/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.less
index f5f2079..b64f62a 100644
---
a/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.less
+++
b/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.less
@@ -24,6 +24,15 @@
&.disabled {
cursor: auto;
}
+ .dropdown {
+ padding: .3em;
+ }
+ .has-selection {
+ background: @blue;
+ * {
+ color: @white;
+ }
+ }
a {
text-align: center;
text-decoration: none;
@@ -40,13 +49,18 @@
}
.badge {
- background: @badge-bg;
- font-size: 1rem;
+ align-items: center;
+ background: @blue;
+ border: 1px solid @white;
+ display: flex;
+ font-size: 1.2rem;
+ font-weight: lighter;
+ justify-content: center;
+ justify-items: center;
min-width: 1em;
- padding: @badge-padding;
position: absolute;
- top: 0;
- right: -1em;
+ left: -1em;
+ top: -.5em;
}
.disabled {
diff --git
a/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.ts
b/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.ts
index 3174991..3d510fc 100644
---
a/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.ts
+++
b/ambari-logsearch-web/src/app/components/menu-button/menu-button.component.ts
@@ -67,6 +67,9 @@ export class MenuButtonComponent {
@Input()
useDropDownLocalFilter = false;
+ @Input()
+ showTotalSelection = true;
+
/**
* The minimum time to handle a mousedown as a longclick. Default is 500 ms
(0.5sec)
* @default 500
diff --git
a/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.html
b/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.html
index f4fdf4f..095585b 100644
---
a/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.html
+++
b/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.html
@@ -24,6 +24,7 @@
[class.label-before-selection]="isSelectionDisplayable">
{{label}}
</span>
+ <span *ngIf="showTotalSelection && totalSelection"
class="total-selection badge">{{totalSelection}}</span>
</span>
<span *ngIf="isSelectionDisplayable">
<span class="selected-item-label" *ngFor="let item of
selectedItems">{{ item.label | translate }}</span>
diff --git
a/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.less
b/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.less
index 82645e5..c6474bd 100644
---
a/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.less
+++
b/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.less
@@ -32,5 +32,21 @@
padding: @input-group-addon-padding;
}
}
+
+ .total-selection {
+ padding-left: .2em;
+ }
+
+ .badge {
+ background: @blue;
+ border: 1px solid @white;
+ font-size: 1.2rem;
+ font-weight: lighter;
+ min-width: 1em;
+ position: absolute;
+ left: -1em;
+ top: -.5em;
+ }
+
}
}
diff --git
a/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.ts
b/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.ts
index 2d04f21..d59b7fe 100644
---
a/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.ts
+++
b/ambari-logsearch-web/src/app/modules/shared/components/dropdown-button/dropdown-button.component.ts
@@ -67,6 +67,9 @@ export class DropdownButtonComponent {
@Input()
useClearToDefaultSelection = false;
+ @Input()
+ showTotalSelection = false;
+
protected selectedItems: ListItem[] = [];
get selection(): ListItem[] {
diff --git a/ambari-logsearch-web/src/app/modules/shared/variables.less
b/ambari-logsearch-web/src/app/modules/shared/variables.less
index 437c556..1f7c9e3 100644
--- a/ambari-logsearch-web/src/app/modules/shared/variables.less
+++ b/ambari-logsearch-web/src/app/modules/shared/variables.less
@@ -76,7 +76,7 @@
// Badge
@badge-bg: rgba(239, 97, 98, 1);
-@badge-padding: 2px 5px;
+@badge-padding: .5rem;
// Icon
@icon-padding: 5px;
