You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@datalab.apache.org by dg...@apache.org on 2020/10/28 14:12:19 UTC
[incubator-datalab] 01/01: [DATALAB-2121]: Added horizontal
scrollbar on 'Environment management' page
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DATALAB-2121
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit 2fde4c32d88749a723bf59f72704b3075d949ccc
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Wed Oct 28 16:12:01 2020 +0200
[DATALAB-2121]: Added horizontal scrollbar on 'Environment management' page
---
.../management-grid/management-grid.component.html | 34 ++++++++++++--
.../management-grid/management-grid.component.scss | 53 ++++++++++++++++++++--
.../management-grid/management-grid.component.ts | 47 ++++++++++++++++++-
.../reporting-grid/reporting-grid.component.html | 8 ++--
.../reporting-grid/reporting-grid.component.ts | 6 +--
.../webapp/src/assets/styles/_general.scss | 3 +-
6 files changed, 132 insertions(+), 19 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 43fcfd7..46d6601 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
@@ -16,9 +16,10 @@
~ specific language governing permissions and limitations
~ under the License.
-->
-<div class="managment-wrapper scrolling">
- <div class="ani">
- <table mat-table [dataSource]="allFilteredEnvironmentData" class="data-grid management mat-elevation-z6">
+<div class="managment-wrapper scrolling" #pageWrapper (scroll)="scrollTable($event)" (resize)="onResize($event)">
+ <div class="ani scrolling" #wrapper>
+ <div class="wrapper" #tableWrapper (scroll)="scrollTable($event)">
+ <table mat-table [dataSource]="allFilteredEnvironmentData" class="data-grid management mat-elevation-z6" #table >
<ng-container matColumnDef="checkbox">
<th mat-header-cell *matHeaderCellDef class="checkbox label-header">
<div class="empty-checkbox header-checkbox"
@@ -303,6 +304,30 @@
</td>
</ng-container>
+ <ng-container matColumnDef="scrollButtons">
+ <td mat-footer-cell *matFooterCellDef colspan="9" class="buttons-wrap">
+ <div class="buttons" [ngStyle]="{'width.px': wrapper.offsetWidth}" [hidden]="!tableEl['offsetWidth']">
+ <div class="button-container">
+ <button mat-mini-fab aria-label="Scroll left"
+ (click)="sctollTo('left')"
+ [ngClass]="{'not-allowed': pageWrapper.scrollLeft === 0 }"
+ >
+ <mat-icon [ngClass]="{'highlight': tableWrapper.scrollLeft !== 0 || pageWrapper.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 }">keyboard_arrow_right</mat-icon>
+ </button>
+ </div>
+ </div>
+ </td>
+ </ng-container>
+
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="header-row"></tr>
<tr [hidden]="!collapsedFilterRow" mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true"
class="filter-row"></tr>
@@ -310,6 +335,9 @@
<tr [hidden]="allFilteredEnvironmentData?.length" mat-footer-row *matFooterRowDef="['placeholder']" class="info"></tr>
+ <tr [hidden]="tableWrapper.offsetWidth - tableEl['offsetWidth'] > -1 || !allFilteredEnvironmentData?.length" mat-footer-row *matFooterRowDef="['scrollButtons']; sticky: true" class="info"></tr>
</table>
+
+ </div>
</div>
</div>
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 8bb9883..d841c9b 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
@@ -26,8 +26,19 @@
padding-left: 15px;
padding-right: 15px;
overflow: auto;
+
.ani{
max-height: calc(100vh - 130px);
+ position: relative;
+
+ .wrapper{
+ width: 100%;
+ display: block;
+ max-height: calc(100vh - 130px);
+ overflow: unset;
+ position: relative;
+ scroll-behavior: smooth;
+ }
}
}
@@ -41,19 +52,24 @@
.settings{
min-width: 7%;
}
+
.mat-column-checkbox{
padding-left: 10px;
padding-right: 0px;
min-width: 38px;
- &.label-header{
+ &.label-header{
+ .empty-checkbox{
+ z-index: 1011
+ }
}
-
}
+
.user{
width: 15%;
min-width: 180px;
}
+
.name,
.project {
width: 10%;
@@ -65,6 +81,7 @@
.shape {
width: 15% !important;
+
.label{
position: absolute;
}
@@ -96,6 +113,7 @@
}
+
.actions {
margin-top: 0px;
padding-right: 10px;
@@ -104,9 +122,9 @@
padding-right: 5px;
}
}
+
.actions-col {
width: 6%;
-
}
.label-header{
@@ -116,6 +134,10 @@
.ar{
left: 21px;
top: 2px;
+ &.checkbox-border
+ {
+ left: 19px;
+ }
}
.settings{
@@ -181,6 +203,7 @@
cursor: default;
}
}
+
.user-name{
padding-right: 22px;
overflow: hidden;
@@ -189,6 +212,26 @@
white-space: nowrap;
max-width: 250px;
}
+
+ .buttons-wrap{
+ padding: 0;
+ }
+
+ .buttons{
+ position: sticky;
+ left: 0;
+ }
+
+ button{
+ background-color: #fff;
+ box-shadow: none;
+ mat-icon{
+ color: lightgrey;
+ &.highlight{
+ color: #35afd5;
+ }
+ }
+ }
}
}
@@ -256,3 +299,7 @@ table.management {
cursor: pointer;
color: #35afd5;
}
+
+.table-footer{
+ height: 48px;
+}
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 d54ca56..3ba78a9 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
@@ -17,7 +17,7 @@
* under the License.
*/
-import { Component, OnInit, ViewChild, Input, Output, EventEmitter, Inject } from '@angular/core';
+import {Component, OnInit, ViewChild, Input, Output, EventEmitter, Inject, HostListener} from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
@@ -29,6 +29,7 @@ import { EnvironmentsDataService } from '../management-data.service';
import { EnvironmentModel, ManagementConfigModel } from '../management.model';
import {ProgressBarService} from '../../../core/services/progress-bar.service';
import {DetailDialogComponent} from '../../../resources/exploratory/detail-dialog';
+import {BehaviorSubject, Subject, timer} from 'rxjs';
export interface ManageAction {
action: string;
@@ -53,6 +54,8 @@ export class ManagementGridComponent implements OnInit {
filterForm: ManagementConfigModel = new ManagementConfigModel([], '', [], [], [], [], []);
filtering: boolean = false;
collapsedFilterRow: boolean = false;
+ isMaxRight: Subject<boolean> = new BehaviorSubject(false);
+ tableEl = {};
@Input() environmentsHealthStatuses: Array<any>;
@Input() resources: Array<any>;
@@ -62,6 +65,22 @@ export class ManagementGridComponent implements OnInit {
@Output() actionToggle: EventEmitter<ManageAction> = new EventEmitter();
@Output() emitSelectedList: EventEmitter<ManageAction> = new EventEmitter();
+ @ViewChild('tableWrapper', { static: false }) tableWrapper;
+ @ViewChild('wrapper', { static: false }) wrapper;
+ @ViewChild('pageWrapper', { static: false }) pageWrapper;
+ @ViewChild('table', { static: false }) table;
+
+ @HostListener('window:resize', ['$event'])
+ onResize(event) {
+ this.isScrollButtonsVisible = this.tableWrapper.nativeElement.offsetWidth - this.table._elementRef.nativeElement.offsetWidth < 0;
+ this.checkMaxRight();
+ }
+
+ @HostListener('scroll', ['$event'])
+ scrollTable($event: Event) {
+ this.checkMaxRight();
+ }
+
displayedColumns: string[] = [ 'checkbox', 'user', 'type', 'project', 'endpoint', 'shape', 'status', 'resources', 'actions'];
displayedFilterColumns: string[] = ['checkbox-filter', 'user-filter', 'type-filter', 'project-filter', 'endpoint-filter', 'shape-filter', 'status-filter', 'resource-filter', 'actions-filter'];
private selected;
@@ -69,6 +88,7 @@ export class ManagementGridComponent implements OnInit {
private cashedFilterForm: ManagementConfigModel = new ManagementConfigModel([], '', [], [], [], [], []);
private isFilterSelected: boolean;
private isFilterChanged: boolean;
+ private isScrollButtonsVisible: boolean;
constructor(
private healthStatusService: HealthStatusService,
@@ -80,6 +100,12 @@ export class ManagementGridComponent implements OnInit {
ngOnInit() {
this.getEnvironmentData();
+ timer(1000)
+ .subscribe(() => {
+ this.isScrollButtonsVisible = this.tableWrapper.nativeElement.offsetWidth - this.table._elementRef.nativeElement.offsetWidth < 0;
+ this.checkMaxRight();
+ this.tableEl = this.table._elementRef.nativeElement;
+ });
}
getEnvironmentData() {
@@ -259,6 +285,25 @@ export class ManagementGridComponent implements OnInit {
this.filterForm.type = targetElement;
this.checkFilters();
}
+
+ public sctollTo(direction: string) {
+ if (direction === 'left') {
+ this.tableWrapper.nativeElement.scrollLeft = 0;
+ this.pageWrapper.nativeElement.scrollLeft = 0;
+ } else {
+ this.tableWrapper.nativeElement.scrollLeft = this.tableWrapper.nativeElement.offsetWidth;
+ this.pageWrapper.nativeElement.scrollLeft = this.pageWrapper.nativeElement.offsetWidth;
+ }
+ }
+
+ public checkMaxRight() {
+ let arg;
+ if (this.pageWrapper && this.table) {
+ arg = this.pageWrapper.nativeElement.offsetWidth - 15 +
+ this.pageWrapper.nativeElement.scrollLeft + 2 <= this.table._elementRef.nativeElement.offsetWidth;
+ }
+ return this.isMaxRight.next(arg);
+ }
}
@Component({
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 a84fc57..c5f5449 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
@@ -154,9 +154,9 @@
<td mat-cell *matCellDef="let element">
</td>
<td mat-footer-cell *matFooterCellDef class="table-footer total-cost" [colSpan]="2" [ngClass]="{'right-sticky': reportData?.length < 5}">
- <span class="strong">
- Total <span *ngIf="reportData?.length">{{fullReport['total_cost'] | localcurrency}}</span>
- </span>
+ <span class="strong">
+ Total <span *ngIf="reportData?.length">{{fullReport['total_cost'] | localcurrency}}</span>
+ </span>
</td>
</ng-container>
@@ -286,6 +286,4 @@
</div>
</div>
</div>
-
-
</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.ts b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.ts
index 4782f71..071f2d1 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.ts
@@ -42,7 +42,7 @@ import {take} from 'rxjs/operators';
// changeDetection: ChangeDetectionStrategy.OnPush
})
-export class ReportingGridComponent implements OnInit, AfterViewInit {
+export class ReportingGridComponent implements OnInit {
tableEl = {};
filterConfiguration: ReportingConfigModel;
// filteredReportData: ReportingConfigModel = new ReportingConfigModel([], [], [], [], [], '', '', '', []);
@@ -95,10 +95,6 @@ export class ReportingGridComponent implements OnInit, AfterViewInit {
this.checkFilters();
}
- ngAfterViewInit() {
-
- }
-
onUpdate($event): void {
this.filteredReportData[$event.type] = $event.model;
this.checkFilters();
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss
index fd9293a..9234c6a 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss
@@ -189,8 +189,7 @@ input[type=file]::-webkit-file-upload-button {
justify-content: space-around;
z-index: 102;
bottom: 9px;
- left: 0;
- right: 0;
+ width: 100%;
.mat-mini-fab {
height: 25px;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org