This is an automated email from the ASF dual-hosted git repository. ytykhun pushed a commit to branch DATALAB-2477 in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit 23e5a3e55b7e1208ce64dd9efb2c05a9f41fc7df Author: Yurii Tykhun <[email protected]> AuthorDate: Tue Aug 31 12:08:55 2021 +0300 [DATALAB-2477] fixed bug with dropdown values on billing and management pages --- .../management-grid/management-grid.component.html | 57 +++++++++++----------- .../management-grid/management-grid.component.scss | 51 +++++++++++++++++-- .../management-grid/management-grid.component.ts | 4 +- .../reporting-grid/reporting-grid.component.html | 11 +++-- .../reporting-grid/reporting-grid.component.scss | 11 +++++ 5 files changed, 97 insertions(+), 37 deletions(-) diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html index 54d9b2c..9eefde9 100644 --- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html @@ -18,8 +18,33 @@ --> <div class="managment-wrapper scrolling" #pageWrapper (scroll)="scrollTable($event)" (resize)="onResize($event)"> <div class="ani scrolling scroll-wrapper" #wrapper (scroll)="scrollTable($event)"> + <div + class="nav-buttons" + [ngStyle]="{'width.px': userAgentIndex === -1 ? tableWrapperWidth - 3 : tableWrapperWidth - 7 }" + [ngClass]="{'border': tableEl['offsetHeight'] < tableWrapper.offsetHeight - 48}" + [hidden]="!(tableWrapper.offsetWidth - tableEl['offsetWidth'] < 0)" + > + <div class="button-container"> + <button + mat-mini-fab aria-label="Scroll left" + (click)="sctollTo('left')" + [ngClass]="{'not-allowed': wrapper.scrollLeft === 0 }" + > + <mat-icon [ngClass]="{'highlight': wrapper.scrollLeft !== 0 }">keyboard_arrow_left</mat-icon> + </button> + </div> + <div class="button-container" [ngClass]="{'not-allowed': checkMaxRight()}"> + <button + mat-mini-fab aria-label="Scroll right" + (click)="sctollTo('right')" + [ngClass]="{'not-allowed': !(isMaxRight | async)}" + > + <mat-icon [ngClass]="{'highlight': (isMaxRight | async) || false}">keyboard_arrow_right</mat-icon> + </button> + </div> + </div> <div class="wrapper" #tableWrapper > - <table mat-table [dataSource]="allFilteredEnvironmentData" class="data-grid management mat-elevation-z6" #table > + <table mat-table [dataSource]="allFilteredEnvironmentData" class="data-grid management" #table > <ng-container matColumnDef="checkbox"> <th mat-header-cell *matHeaderCellDef class="checkbox label-header"> <datalab-checkbox @@ -43,6 +68,7 @@ && !clustersInProgress(element.resources)" > <datalab-checkbox + class="body-checkbox" [checked]="element.isSelected" (toggleSelection)="toggleActionForAll(element)" ></datalab-checkbox> @@ -413,7 +439,7 @@ </ng-container> <ng-container matColumnDef="placeholder"> - <td mat-footer-cell *matFooterCellDef colspan="8"> + <td mat-footer-cell *matFooterCellDef colspan="8" class="no-border"> <div class="info" *ngIf="(!allFilteredEnvironmentData) && !filtering || (allFilteredEnvironmentData?.length == 0) && !filtering" @@ -430,32 +456,7 @@ *matFooterCellDef colspan="9" class="buttons-wrap" - > - <div - class="buttons" - [ngStyle]="{'width.px': tableWrapperWidth }" - [hidden]="!tableWrapperWidth" - > - <div class="button-container"> - <button - mat-mini-fab aria-label="Scroll left" - (click)="sctollTo('left')" - [ngClass]="{'not-allowed': wrapper.scrollLeft === 0 }" - > - <mat-icon [ngClass]="{'highlight': wrapper.scrollLeft !== 0 }">keyboard_arrow_left</mat-icon> - </button> - </div> - <div class="button-container" [ngClass]="{'not-allowed': checkMaxRight()}"> - <button - mat-mini-fab aria-label="Scroll right" - (click)="sctollTo('right')" - [ngClass]="{'not-allowed': !(isMaxRight | async)}" - > - <mat-icon [ngClass]="{'highlight': (isMaxRight | async) || false}">keyboard_arrow_right</mat-icon> - </button> - </div> - </div> - </td> + ></td> </ng-container> <tr diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss index 888cfbb..781e80c 100644 --- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss @@ -25,26 +25,66 @@ padding-left: 15px; padding-right: 15px; scroll-behavior: smooth; - overflow: auto; .scroll-wrapper { + height: inherit; overflow: auto; scroll-behavior: smooth; box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); + + .nav-buttons { + position: absolute; + bottom: 0; + z-index: 1013; + display: flex; + justify-content: space-around; + align-items: center; + height: 51px; + background-color: #ffffff; + + &.border { + border-top: 1px solid #e3e5e8; + } + + & button { + display: flex; + align-items: center; + justify-content: center; + height: 25px; + width: 25px; + background-color: #fff; + box-shadow: none; + + mat-icon { + color: lightgrey; + + &.highlight { + color: #35afd5; + } + } + } + + &.border { + border-top: 1px solid #e3e5e8; + } + } } .ani { max-height: calc(100vh - 130px); - position: relative; + background-color: #ffffff; + .wrapper { position: relative; display: block; width: 100%; + height: inherit; max-height: calc(100vh - 130px); overflow: unset; scroll-behavior: smooth; + background-color: #ffffff; } } } @@ -148,7 +188,7 @@ } &.mat-column-checkbox { - z-index: 12 !important; + z-index: 1012 !important; padding-left: 10px; .ar { @@ -216,6 +256,7 @@ .buttons-wrap { padding: 0; border-top: 1px solid rgba(0, 0, 0, 0.12); + border-bottom: none; transform: translateY(-1px); } @@ -287,6 +328,10 @@ table.management { text-align: center; } + .no-border { + border-bottom: none; + } + .source .resource-wrap { .resource-actions { padding-right: 0; diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts index 78ecf28..d762610 100644 --- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts @@ -66,8 +66,9 @@ export class ManagementGridComponent implements OnInit, AfterViewInit, AfterView filtering: boolean = false; collapsedFilterRow: boolean = false; isMaxRight: Subject<boolean> = new BehaviorSubject(false); - private tableWrapperWidth: number; + tableWrapperWidth: number; tableEl = {}; + userAgentIndex: number; @Input() environmentsHealthStatuses: Array<any>; @Input() resources: Array<any>; @@ -110,6 +111,7 @@ export class ManagementGridComponent implements OnInit, AfterViewInit, AfterView ) { } ngOnInit() { + this.userAgentIndex = window.navigator.userAgent.indexOf('Firefox'); this.getEnvironmentData(); } diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.html index 976b189..b522b07 100644 --- a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.html @@ -18,16 +18,16 @@ --> <div class="billing-page-wrapper scrolling" - #pageWrapper - [ngClass]="{'scroll': reportData?.length < 5}" + #pageWrapper (scroll)="scrollTable($event)" > <div class="wrapper" #wrapper> <div class="nav-buttons" + [ngClass]="{'border': tableEl['offsetHeight'] < tableWrapper.offsetHeight - 48}" [ngStyle]="tableWrapper.scrollHeight === tableWrapper.clientHeight ? {'width': '100%'} : {'width': userAgentIndex === -1 ? 'calc(100% - 3px)' : 'calc(100% - 8px)'}" - *ngIf="tableWrapper.offsetWidth - tableEl['offsetWidth'] < 0 && reportData?.length" + *ngIf="tableWrapper.offsetWidth - tableEl['offsetWidth'] < 0" > <div class="button-container" > <button @@ -56,6 +56,7 @@ <div class="nav-buttons" + [ngClass]="{'border': tableEl['offsetHeight'] < tableWrapper.offsetHeight - 48}" [ngStyle]="tableWrapper.scrollHeight === tableWrapper.clientHeight ? {'width': '100%'} : {'width': userAgentIndex === -1 ? 'calc(100% - 3px)' : 'calc(100% - 8px)'}" @@ -382,7 +383,7 @@ mat-header-cell *matHeaderCellDef class="filter-row-item index-105" - [ngClass]="{'right-sticky': reportData?.length < 5}" + [ngClass]="{'right-sticky': reportData?.length < 5, 'charges-th': reportData?.length}" [ngStyle]="{'zIndex': '101 !important'}" > <div class="actions"> @@ -408,7 +409,7 @@ </ng-container> <ng-container matColumnDef="placeholder"> - <td mat-footer-cell *matFooterCellDef colspan="9" class="info"> + <td mat-footer-cell *matFooterCellDef colspan="8" class="info no-border"> <span *ngIf="!isFilterSelected; else notFound">No data available</span> <ng-template #notFound> <span>No matches found</span> diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss index e209705..a629196 100644 --- a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss @@ -33,9 +33,11 @@ position: relative; display: block; width: 100%; + height: inherit; max-height: calc(100vh - 130px); overflow: unset; scroll-behavior: smooth; + background-color: #ffffff; box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12); &.scroll { @@ -49,6 +51,7 @@ .wrapper { position: relative; + height: inherit; .nav-buttons { position: absolute; @@ -59,6 +62,10 @@ align-items: center; height: 48px; background-color: #ffffff; + + &.border { + border-top: 1px solid #e3e5e8; + } .mat-mini-fab { height: 25px; @@ -123,6 +130,10 @@ text-align: center; padding: 40px; } + + &.no-border { + border-bottom: none; + } } &.filter-row { --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
