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:18 UTC
[incubator-datalab] branch DATALAB-2121 created (now 2fde4c3)
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a change to branch DATALAB-2121
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git.
at 2fde4c3 [DATALAB-2121]: Added horizontal scrollbar on 'Environment management' page
This branch includes the following new commits:
new 2fde4c3 [DATALAB-2121]: Added horizontal scrollbar on 'Environment management' page
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org
[incubator-datalab] 01/01: [DATALAB-2121]: Added horizontal
scrollbar on 'Environment management' page
Posted by dg...@apache.org.
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