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/23 12:24:45 UTC
[incubator-datalab] branch develop updated: [DATALAB-1949]: Made
all dialog windows consistent (#958)
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
The following commit(s) were added to refs/heads/develop by this push:
new d9a8f9f [DATALAB-1949]: Made all dialog windows consistent (#958)
d9a8f9f is described below
commit d9a8f9f286dd101c8abd3587e48edb9205f24bc7
Author: Dmytro Gnatyshyn <42...@users.noreply.github.com>
AuthorDate: Fri Oct 23 15:24:37 2020 +0300
[DATALAB-1949]: Made all dialog windows consistent (#958)
[DATALAB-1949]: Made all dialog windows consistent
---
.../management-grid/management-grid.component.ts | 2 +-
.../project-list/project-list.component.html | 2 +-
.../project-list/project-list.component.scss | 7 ++
.../resources-grid/resources-grid.component.ts | 5 +-
.../multi-level-select-dropdown.component.scss | 4 +-
.../confirmation-dialog.component.html | 86 ++++++++++++++++------
.../confirmation-dialog.component.scss | 29 +++++++-
.../confirmation-dialog.component.ts | 7 ++
.../edge-action-dialog.component.ts | 36 +++++----
.../notification-dialog.component.ts | 12 +--
.../resources/webapp/src/assets/styles/_theme.scss | 9 +++
.../src/main/resources/webapp/src/styles.scss | 4 +
12 files changed, 155 insertions(+), 48 deletions(-)
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 7a59bd1..d54ca56 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
@@ -367,7 +367,7 @@ export class ReconfirmationDialogComponent {
if (notebook.resources.length) {
this.isClusterLength = true;
}
- return notebook;
+ return notebook;
});
}
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html
index 81d4ddf..100e859 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.html
@@ -69,7 +69,7 @@
<td mat-cell *matCellDef="let element" class="settings">
<span #settings (click)="actions.toggle($event, settings)" class="actions"></span>
<bubble-up #actions class="list-menu" position="bottom-left" alternative="top-left">
- <ul class="list-unstyled">
+ <ul class="list-unstyled actions-list">
<div class="active-items"></div>
<li class="project-seting-item" *ngIf="element.areStoppedNode" (click)="openEdgeDialog('start', element)">
<i class="material-icons">play_circle_outline</i>
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss
index 9050ff6..69190e0 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.scss
@@ -124,6 +124,9 @@ td.settings {
border-bottom: 1px solid #edf1f5;
cursor: pointer;
color: #577289;
+ &:last-child{
+ border-bottom: none;
+ }
&:hover{
color: #36afd5;
transition: all .45s ease-in-out;
@@ -145,6 +148,10 @@ td.settings {
color: #577289;
}
+.actions-list{
+ padding: 10px 15px;
+}
+
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts
index 5530850..ad7e167 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.ts
@@ -41,6 +41,7 @@ import {ComputationModel} from '../computational/computational-resource.model';
import {NotebookModel} from '../exploratory/notebook.model';
import {AuditService} from '../../core/services/audit.service';
import {JAN} from '@angular/material/core';
+import {ReconfirmationDialogComponent} from '../../administration/management/management-grid/management-grid.component';
export interface SharedEndpoint {
edge_node_ip: string;
@@ -233,7 +234,6 @@ export class ResourcesGridComponent implements OnInit {
public exploratoryAction(data, action: string): void {
const resource = this.getResourceByName(data.name, data.project);
-
if (action === 'deploy') {
this.dialog.open(ComputationalResourceCreateDialogComponent, { data: { notebook: resource, full_list: this.environments }, panelClass: 'modal-xxl' })
.afterClosed().subscribe((res) => {
@@ -246,6 +246,9 @@ export class ResourcesGridComponent implements OnInit {
() => this.buildGrid(),
error => this.toastr.error(error.message || 'Exploratory starting failed!', 'Oops!'));
} else if (action === 'stop') {
+ // this.dialog.open(ReconfirmationDialogComponent, {
+ // data: { notebooks: [data], type: 'notebook', action }, width: '550px', panelClass: 'error-modalbox'
+ // })
this.dialog.open(ConfirmationDialogComponent, { data: { notebook: data, type: ConfirmationDialogType.StopExploratory }, panelClass: 'modal-sm' })
.afterClosed().subscribe((res) => {
res && this.buildGrid();
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss
index a6a1148..aab2b07 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.scss
@@ -265,7 +265,7 @@
color: #35afd5;
&.checked-checkbox {
- top: 0px;
+ top: 0;
left: 4px;
width: 5px;
height: 10px;
@@ -276,7 +276,7 @@
}
&.line-checkbox {
- top: 0px;
+ top: 0;
left: 2px;
width: 8px;
height: 7px;
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.html
index 9d41181..a80b08f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.html
@@ -22,7 +22,7 @@
<h4 class="modal-title">
<span *ngIf="data.type !== 5 && model.notebook.name && model.notebook.name !== 'edge node'">
- <span>{{ confirmationType ? 'Terminate' : 'Stop' }} notebook: {{ model.notebook.name }}</span>
+ <span>{{ data.type === 1 ? 'Terminate' : 'Stop' }} resource</span>
</span>
<span *ngIf="model.notebook.type === 'Edge Node' || model.notebook.name === 'edge node' || data.type === 4 && data.notebook.length || data.type === 5 ">
<i class="material-icons">priority_high</i>Warning
@@ -35,35 +35,74 @@
</header>
<div class="dialog-content">
<div class="content-box">
- <p *ngIf="data.type !== 4 && data.type !== 5" class="info text-center">{{ model.title }}</p>
+<!-- <p *ngIf="data.type !== 4 && data.type !== 5" class="info text-center">{{ model.title }}</p>-->
<div *ngIf="data.type === 4" class="text-center m-bot-20">
- <h3 class="strong">Group data will be updated.</h3>
+ <h4 class="strong">Group data will be updated.</h4>
</div>
<p *ngIf="data.type === 4 && data.notebook.length" class="text-center delete-user">User<span *ngIf="data.notebook.length>1">s</span> <span class="strong"> {{data.notebook.join(', ')}} </span>will be removed from this group. Removing may prevent the user<span *ngIf="data.notebook.length>1">s</span> to access {{data.notebook.length>1 ? 'their' : 'his/her'}} resources</p>
<p *ngIf="data.type === 5" class="text-center delete-user">Removing the group<span *ngIf="data.notebook.length>1">s</span> <span class="strong">{{' ' + data.notebook}}</span> from the project may prevent the users from this group<span *ngIf="data.notebook.length>1">s</span> to access their resources</p>
<!-- All <span *ngIf="data.notebook.length===1">his</span><span *ngIf="data.notebook.length>1">their</span> resources authorized within this group will be terminated.-->
- <mat-list class="resources"
- [hidden]="model.notebook.type === 'Edge Node' || model.notebook.name === 'edge node'
- || !model.notebook.resources || model.notebook.resources.length === 0 || (!isAliveResources && !confirmationType) || onlyKilled">
- <mat-list-item class="list-header">
- <div class="cluster">Cluster</div>
- <div class="status">Further status</div>
- <div class="size">Size</div>
- </mat-list-item>
- <div class="scrolling-content" id="scrolling">
- <mat-list-item *ngFor="let resource of model.notebook.resources"
- [hidden]="resource.status === 'failed' || resource.status === 'terminated' || resource.status === 'terminating' || (resource.status === 'stopped' && !confirmationType)">
- <div class="cluster ellipsis">{{ resource.computational_name }}</div>
- <div class="status" [ngClass]="{ 'stopped': !confirmationType && resource.image === 'docker.datalab-dataengine',
- 'terminated': resource.image === 'docker.datalab-dataengine-service' || confirmationType }">
- {{ (!confirmationType && resource.image === 'docker.datalab-dataengine') ? 'Stopped' : 'Terminated' }}
+<!-- <mat-list class="resources"-->
+<!-- [hidden]="model.notebook.type === 'Edge Node' || model.notebook.name === 'edge node'-->
+<!-- || !model.notebook.resources || model.notebook.resources.length === 0 || (!isAliveResources && !confirmationType) || onlyKilled">-->
+<!-- <mat-list-item class="list-header">-->
+<!-- <div class="cluster">Cluster</div>-->
+<!-- <div class="status">Further status</div>-->
+<!-- <div class="size">Size</div>-->
+<!-- </mat-list-item>-->
+<!-- <div class="scrolling-content" id="scrolling">-->
+<!-- <mat-list-item *ngFor="let resource of model.notebook.resources"-->
+<!-- [hidden]="resource.status === 'failed' || resource.status === 'terminated' || resource.status === 'terminating' || (resource.status === 'stopped' && !confirmationType)">-->
+<!-- <div class="cluster ellipsis">{{ resource.computational_name }}</div>-->
+<!-- <div class="status" [ngClass]="{ 'stopped': !confirmationType && resource.image === 'docker.datalab-dataengine',-->
+<!-- 'terminated': resource.image === 'docker.datalab-dataengine-service' || confirmationType }">-->
+<!-- {{ (!confirmationType && resource.image === 'docker.datalab-dataengine') ? 'Stopped' : 'Terminated' }}-->
+<!-- </div>-->
+<!-- <div class="size">{{-->
+<!-- resource[DICTIONARY[notebook.cloud_provider.toLowerCase()][resource.image].master_node_shape] }}-->
+<!-- </div>-->
+<!-- </mat-list-item>-->
+<!-- </div>-->
+<!-- </mat-list>-->
+
+ <div class="resource-list" *ngIf="data.type === 0 || data.type === 1">
+ <div class="resource-list-header">
+ <div class="resource-name">Notebook</div>
+ <div class="clusters-list">
+ <div class="clusters-list-item">
+ <div class="cluster"><span *ngIf="isClusterLength">Cluster</span></div>
+ <div class="status">Further status</div>
+ </div>
+ </div>
+
+ </div>
+ <div class="scrolling-content resource-heigth">
+ <div class="resource-list-row sans node">
+ <div class="resource-name ellipsis">
+ {{notebook.name}}
</div>
- <div class="size">{{
- resource[DICTIONARY[notebook.cloud_provider.toLowerCase()][resource.image].master_node_shape] }}
+
+ <div class="clusters-list">
+ <div class="clusters-list-item">
+ <div class="cluster"></div>
+ <div class="status"
+ [ngClass]="{
+ 'stopped': data.type === 0, 'terminated': data.type === 1
+ }"
+ >
+ {{data.type === 0 ? 'Stopped' : 'Terminated'}}
+ </div>
+ </div>
+ <div class="clusters-list-item" *ngFor="let cluster of notebook?.resources">
+ <div class="cluster">{{cluster.computational_name}}</div>
+ <div class="status" [ngClass]="{
+ 'stopped': (data.type === 0 && cluster.image==='docker.datalab-dataengine'), 'terminated': data.type === 1 || (data.type===0 && cluster.image!=='docker.datalab-dataengine')
+ }">{{data.type === 0 && cluster.image === "docker.datalab-dataengine" ? 'Stopped' : 'Terminated'}}</div>
+ </div>
</div>
- </mat-list-item>
- </div>
- </mat-list>
+ </div>
+ </div>
+
<div class="text-center m-top-20">
<p class="strong">Do you want to proceed?</p>
@@ -74,5 +113,6 @@
<button *ngIf="data.type === 4 || data.type === 5" mat-raised-button type="button" class="butt butt-success action" (click)="dialogRef.close(true)">Yes</button>
</div>
</div>
+ </div>
</div>
</div>
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.scss
index c71e2ed..1764dfb 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.scss
@@ -18,7 +18,10 @@
*/
.confirmation-dialog {
- h3{
+ .content-box{
+ font-family: "Open Sans", sans-serif;
+ }
+ h4{
margin-bottom: 20px;
}
color: #718ba6;
@@ -61,3 +64,27 @@
width: 100%;
}
}
+
+.content { color: #718ba6; padding: 20px 50px; font-size: 14px; font-weight: 400; margin: 0; }
+.info { color: #35afd5; }
+.info .confirm-dialog { color: #607D8B; }
+header { display: flex; justify-content: space-between; color: #607D8B; }
+header h4 i { vertical-align: bottom; }
+header a i { font-size: 20px; }
+header a:hover i { color: #35afd5; cursor: pointer; }
+.plur { font-style: normal; }
+.scrolling-content{overflow-y: auto; max-height: 200px; }
+.cluster { width: 50%; text-align: left;}
+.status { width: 50%;text-align: left;}
+.label { font-size: 15px; font-weight: 500; font-family: "Open Sans",sans-serif;}
+.node { font-weight: 300;}
+.resource-name { width: 40%;text-align: left; padding: 10px 0;line-height: 26px;}
+.clusters-list { width: 60%;text-align: left; padding: 10px 0;line-height: 26px;}
+.clusters-list-item { width: 100%;text-align: left;display: flex}
+.resource-list{max-width: 100%; margin: 0 auto;margin-top: 20px; }
+.resource-list-header{display: flex; font-weight: 600; font-size: 16px;height: 48px; border-top: 1px solid #edf1f5; border-bottom: 1px solid #edf1f5; padding: 0 20px;}
+.resource-list-row{display: flex; border-bottom: 1px solid #edf1f5;padding: 0 20px;}
+.confirm-resource-terminating{text-align: left; padding: 10px 20px;}
+.confirm-message{color: #ef5c4b;font-size: 13px;min-height: 18px; text-align: center; padding-top: 20px}
+.checkbox{margin-right: 5px;vertical-align: middle; margin-bottom: 3px;}
+label{cursor: pointer}
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.ts
index 0a875b5..4843d41 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/confirmation-dialog/confirmation-dialog.component.ts
@@ -47,6 +47,7 @@ export class ConfirmationDialogComponent implements OnInit {
@Input() manageAction: boolean = false;
@Output() buildGrid: EventEmitter<{}> = new EventEmitter();
+ private isClusterLength: boolean;
constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
@@ -79,6 +80,12 @@ export class ConfirmationDialogComponent implements OnInit {
!this.notebook.resources.some(el => el.status !== 'terminated' && el.status !== 'failed')
: false;
}
+
+ if (this.data.type === 0 || this.data.type === 1) {
+ if (this.notebook.resources.length) {
+ this.isClusterLength = true;
+ }
+ }
}
public confirm() {
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/edge-action-dialog/edge-action-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/edge-action-dialog/edge-action-dialog.component.ts
index cf74931..06b7be9 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/edge-action-dialog/edge-action-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/edge-action-dialog/edge-action-dialog.component.ts
@@ -33,17 +33,24 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
<h3 class="strong">Select the edge nodes you want to {{data.type}}</h3>
<ul class="endpoint-list scrolling-content">
<li *ngIf="data.item.length>1" class="endpoint-list-item header-item">
- <label class="strong all">
- <input type="checkbox" [(ngModel)]="isAllChecked" (change)="chooseAll()">
- {{data.type | titlecase}} all
- </label>
+ <span class="strong all item-wrapper" (click)="chooseAll()">
+<!-- <input type="checkbox" [(ngModel)]="isAllChecked" (change)="chooseAll()">-->
+ <div class="empty-checkbox" [ngClass]="{'checked': isAllChecked || isSomeSelected}">
+ <span class="checked-checkbox" *ngIf="isAllChecked"></span>
+ <span class="line-checkbox" *ngIf="isSomeSelected"></span>
+ </div>
+ <span class="pl-5">{{data.type | titlecase}} all</span>
+ </span>
</li>
<div class="scrolling-content" id="scrolling">
<li *ngFor="let endpoint of data.item" class="endpoint-list-item">
- <label class="strong">
- <input type="checkbox" [(ngModel)]="endpoint.checked" (change)="endpointAction()">
- {{endpoint.name}}
- </label>
+ <span class="strong item-wrapper" (click)="endpointAction(endpoint)">
+ <div class="empty-checkbox" [ngClass]="{'checked': endpoint.checked}">
+ <span class="checked-checkbox" *ngIf="endpoint.checked"></span>
+ </div>
+<!-- <input type="checkbox" [(ngModel)]="endpoint.checked" (change)="endpointAction()"> -->
+ <span class="pl-5">{{endpoint.name}}</span>
+ </span>
</li>
</div>
</ul>
@@ -59,8 +66,6 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
`,
styles: [`
.content { color: #718ba6; padding: 20px 50px; font-size: 14px; font-weight: 400; margin: 0; }
- .info { color: #35afd5; }
- .info .confirm-dialog { color: #607D8B; }
header { display: flex; justify-content: space-between; color: #607D8B; }
header h4 i { vertical-align: bottom; }
header a i { font-size: 20px; }
@@ -70,8 +75,8 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
.action{text-transform: capitalize}
.action-text { text-align: center; }
.scrolling-content{overflow-y: auto; max-height: 200px; }
- label { font-size: 15px; font-weight: 300; font-family: "Open Sans",sans-serif; cursor: pointer; display: flex; align-items: center; padding-left: 10px}
- label input {margin-top: 2px; margin-right: 10px;cursor: pointer;}
+ .item-wrapper { font-size: 15px; font-weight: 300; font-family: "Open Sans",sans-serif; cursor: pointer; display: flex; align-items: center; padding-left: 10px}
+ .item-wrapper .empty-checkbox {margin-top: 0}
.all{font-size: 16px; padding-left: 0; font-weight: 500}
.scrolling-content{overflow-y: auto; max-height: 200px;}
`]
@@ -80,18 +85,21 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
export class EdgeActionDialogComponent implements OnDestroy {
public endpointsNewStatus: Array<object> = [];
public isAllChecked: boolean;
+ public isSomeSelected: boolean;
constructor(
public dialogRef: MatDialogRef<EdgeActionDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
}
- public endpointAction() {
+ public endpointAction(target?) {
+ if (target) target.checked = !target.checked;
this.endpointsNewStatus = this.data.item.filter(endpoint => endpoint.checked);
this.isAllChecked = this.endpointsNewStatus.length === this.data.item.length;
+ this.isSomeSelected = this.endpointsNewStatus.length && !this.isAllChecked;
}
public chooseAll() {
- if (this.isAllChecked) {
+ if (!this.isAllChecked) {
this.data.item.forEach(endpoint => endpoint.checked = true);
} else {
this.clearCheckedNodes();
diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/notification-dialog/notification-dialog.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/notification-dialog/notification-dialog.component.ts
index f46360e..35419c2 100644
--- a/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/notification-dialog/notification-dialog.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/shared/modal-dialog/notification-dialog/notification-dialog.component.ts
@@ -42,7 +42,7 @@ import {Endpoint} from '../../../administration/project/project.component';
<span class="strong blue" *ngFor="let notebook of item.notebook; let i = index">{{i === 0 ? '' : ', '}} {{ notebook }}</span> in project <span
class="strong blue">{{ item.project }}</span>
<span *ngIf="data.template.notebook.length > 1">, </span>
- </span> will be stopped and all computational resources will be stopped/terminated
+ </span> will be stopped and all computes will be stopped/terminated
</div>
<div class="quota-message" *ngIf="data.template.cluster?.length > 0">
@@ -96,7 +96,7 @@ import {Endpoint} from '../../../administration/project/project.component';
<!-- </label>-->
<!-- </div>-->
<p class="confirm-message">
- <span *ngIf="!willNotTerminate">All connected computational resources will be terminated as well.</span>
+ <span *ngIf="!willNotTerminate">All connected computes will be terminated as well.</span>
</p>
</div>
<mat-list *ngIf="data.item.endpoints?.length">
@@ -133,7 +133,7 @@ import {Endpoint} from '../../../administration/project/project.component';
</div>
</mat-list>
<div mat-dialog-content class="bottom-message" *ngIf="data.item.resources.length > 0">
- <span class="confirm-message">All connected computational resources will be terminated as well.</span>
+ <span class="confirm-message">All connected computes will be terminated as well.</span>
</div>
<p class="m-top-20"><span class="strong">Do you want to proceed?</span></p>
<div class="text-center m-top-30 m-bott-10">
@@ -155,7 +155,7 @@ import {Endpoint} from '../../../administration/project/project.component';
header a i { font-size: 20px; }
header a:hover i { color: #35afd5; cursor: pointer; }
.plur { font-style: normal; }
- .scrolling-content{overflow-y: auto; max-height: 200px; }
+ .scrolling-content{overflow-y: auto; max-height: 200px; border-bottom: 1px solid #edf1f5; }
.endpoint { width: 70%; text-align: left; color: #577289;}
.status { width: 30%;text-align: left;}
.label { font-size: 15px; font-weight: 500; font-family: "Open Sans",sans-serif;}
@@ -163,8 +163,9 @@ import {Endpoint} from '../../../administration/project/project.component';
.resource-name { width: 280px;text-align: left; padding: 10px 0;line-height: 26px;}
.project { width: 30%;text-align: left; padding: 10px 0;line-height: 26px;}
.resource-list{max-width: 100%; margin: 0 auto;margin-top: 20px; }
- .resource-list-header{display: flex; font-weight: 600; font-size: 16px;height: 48px; border-top: 1px solid #edf1f5; border-bottom: 1px solid #edf1f5; padding: 0 20px;}
+ .resource-list-header{display: flex; font-weight: 600; font-size: 14px;height: 48px; border-top: 1px solid #edf1f5; border-bottom: 1px solid #edf1f5; padding: 0 20px;}
.resource-list-row{display: flex; border-bottom: 1px solid #edf1f5;padding: 0 20px;}
+ .resource-list-row:last-child{border-bottom: none}
.confirm-resource-terminating{text-align: left; padding: 10px 20px;}
.confirm-message{color: #ef5c4b;font-size: 13px;min-height: 18px; text-align: center; padding-top: 20px}
.checkbox{margin-right: 5px;vertical-align: middle; margin-bottom: 3px;}
@@ -173,6 +174,7 @@ import {Endpoint} from '../../../administration/project/project.component';
.table-header{padding-bottom: 10px;}
.alert{text-align: left; line-height: 22px; padding-bottom: 25px;padding-top: 15px;}
.quota-message{padding-top: 10px}
+ .mat-list-base .mat-list-item { font-size: 15px}
`]
})
export class NotificationDialogComponent {
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
index 50d4f30..72ddcc8 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
@@ -494,6 +494,15 @@ span.mat-slide-toggle-content {
position: absolute;
transform: rotate(45deg);
}
+
+ .line-checkbox {
+ top: 0;
+ left: 2px;
+ width: 8px;
+ height: 7px;
+ border-bottom: 2px solid white;
+ position: absolute;
+ }
}
.none-select{
user-select: none;
diff --git a/services/self-service/src/main/resources/webapp/src/styles.scss b/services/self-service/src/main/resources/webapp/src/styles.scss
index bd79768..c09ccd9 100644
--- a/services/self-service/src/main/resources/webapp/src/styles.scss
+++ b/services/self-service/src/main/resources/webapp/src/styles.scss
@@ -307,6 +307,10 @@ input[type='number'] {
text-align: right;
}
+.pl-5{
+ padding-left: 5px;
+}
+
.pl-20{
padding-left: 20px;
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org