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