tobias-istvan closed pull request #43: [AMBARI-24900] [Log Search UI] Display
the number of selection for the multiple selection dropdowns
URL: https://github.com/apache/ambari-logsearch/pull/43
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
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 28cde2be3f..cb63d440a1 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 f5f2079407..b64f62ad96 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 317499146f..3d510fc9a1 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 f4fdf4f1b6..095585b79a 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 82645e5c59..c6474bdfb1 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 2d04f210e5..d59b7fe6cd 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 437c5561ee..1f7c9e3cb1 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;
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
With regards,
Apache Git Services
