You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by dg...@apache.org on 2020/01/16 10:16:01 UTC
[incubator-dlab] branch develop updated: [DLAB-1433,
DLAB-1450] Fixed UI style should be consistent and report header
should be sticky (#528)
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-dlab.git
The following commit(s) were added to refs/heads/develop by this push:
new c4a146b [DLAB-1433, DLAB-1450] Fixed UI style should be consistent and report header should be sticky (#528)
c4a146b is described below
commit c4a146b49d5a41e3e06ef5b252b33c8922c9bb20
Author: Dmytro Gnatyshyn <42...@users.noreply.github.com>
AuthorDate: Thu Jan 16 12:15:53 2020 +0200
[DLAB-1433, DLAB-1450] Fixed UI style should be consistent and report header should be sticky (#528)
[DLAB-1433, DLAB-1450] Fixed UI style should be consistent and report header should be sticky
---
.../management-grid/management-grid.component.html | 2 +-
.../management-grid/management-grid.component.scss | 3 +--
.../project/project-form/project-form.component.ts | 2 +-
.../app/administration/roles/roles.component.html | 6 +++---
...utational-resource-create-dialog.component.html | 13 +++++-------
.../create-environment.component.html | 15 +++++---------
.../resources-grid/resources-grid.component.html | 7 +++----
.../resources-grid/resources-grid.component.scss | 4 ++--
.../webapp/src/assets/styles/_general.scss | 5 +++--
.../resources/webapp/src/assets/styles/_reset.scss | 2 +-
.../resources/webapp/src/assets/styles/_theme.scss | 23 +++++++++++++++++++++-
11 files changed, 47 insertions(+), 35 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 3e04b97..c5666da 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
@@ -224,7 +224,7 @@
</td>
</ng-container>
- <tr mat-header-row *matHeaderRowDef="displayedColumns" class="header-row"></tr>
+ <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>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></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 32cc639..480f652 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
@@ -83,7 +83,6 @@ table.management {
}
.header-row {
- background: transparent;
height: auto;
.label {
display: inline-block;
@@ -98,7 +97,7 @@ table.management {
}
}
.filter-row {
- background: transparent;
+ background: inherit;
}
.actions {
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.ts
index 5eb522a..7ae4aa6 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-form/project-form.component.ts
@@ -155,7 +155,7 @@ export class ProjectFormComponent implements OnInit {
}
public editSpecificProject(item) {
- let endpoints = item.endpoints.map((item: any) => item.name);
+ const endpoints = item.endpoints.map((endpoint: any) => endpoint.name);
this.projectForm = this._fb.group({
'key': [''],
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html
index 68fea15..af111c2 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/roles/roles.component.html
@@ -29,7 +29,7 @@
<mat-card *ngIf="stepperView" class="m-top-10">
<mat-horizontal-stepper #stepper class="stepper ani">
- <mat-step>
+ <mat-step [completed]='false'>
<ng-template matStepLabel>Groups</ng-template>
<div class="inner-step mat-reset">
<input [validator]="groupValidarion()" type="text" placeholder="Enter group name" [(ngModel)]="setupGroup"
@@ -45,7 +45,7 @@
class="material-icons">keyboard_arrow_right</i></button>
</div>
</mat-step>
- <mat-step>
+ <mat-step [completed]='false'>
<ng-template matStepLabel>Users</ng-template>
<div class="inner-step mat-reset">
<input type="text" placeholder="Enter user login" [(ngModel)]="setupUser">
@@ -58,7 +58,7 @@
class="material-icons">keyboard_arrow_right</i></button>
</div>
</mat-step>
- <mat-step>
+ <mat-step [completed]='false'>
<ng-template matStepLabel>Roles</ng-template>
<div class="inner-step mat-reset roles">
<div class="selector-wrapper">
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.html
index 457b4ed..c40a5d9 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resource-create-dialog/computational-resource-create-dialog.component.html
@@ -33,8 +33,8 @@
<label class="label">Select cluster type</label>
<div class="control selector-wrapper">
<mat-form-field>
- <mat-label>Select cluster type</mat-label>
- <mat-select formControlName="template_name" disableOptionCentering>
+<!-- <mat-label>Select cluster type</mat-label>-->
+ <mat-select formControlName="template_name" disableOptionCentering placeholder="Select cluster type">
<mat-option *ngFor="let type of clusterTypes" [value]="type.template_name"
(click)="selectImage(type)">{{ type.template_name }}</mat-option>
<mat-option *ngIf="!clusterTypes.length" class="multiple-select ml-10" disabled>Clusters types list
@@ -51,8 +51,7 @@
<label class="label">Select template</label>
<div class="control selector-wrapper">
<mat-form-field>
- <mat-label>Select template</mat-label>
- <mat-select formControlName="version" disableOptionCentering>
+ <mat-select formControlName="version" disableOptionCentering placeholder="Select template">
<mat-option *ngFor="let template of selectedImage.templates" [value]="template.version">
{{ template.version }}</mat-option>
<mat-option *ngIf="!selectedImage.templates" class="multiple-select ml-10" disabled>Templates list
@@ -103,8 +102,7 @@
<label class="label">{{ DICTIONARY[selectedImage.image].data_engine_master_instance_size }}</label>
<div class="control selector-wrapper">
<mat-form-field>
- <mat-label>Select {{ DICTIONARY.notebook_instance_size }}</mat-label>
- <mat-select formControlName="shape_master" disableOptionCentering>
+ <mat-select formControlName="shape_master" disableOptionCentering placeholder="Select {{ DICTIONARY.notebook_instance_size }}">
<mat-optgroup *ngFor="let item of (selectedImage.computation_resources_shapes | keys)"
[label]="item.key | underscoreless">
<mat-option *ngFor="let list_item of item.value" [value]="list_item.Type">
@@ -124,8 +122,7 @@
<label class="label">{{ DICTIONARY[selectedImage.image].data_engine_slave_instance_size }}</label>
<div class="control selector-wrapper">
<mat-form-field>
- <mat-label>Select {{ DICTIONARY.notebook_instance_size }}</mat-label>
- <mat-select formControlName="shape_slave" disableOptionCentering>
+ <mat-select formControlName="shape_slave" disableOptionCentering placeholder="Select {{ DICTIONARY.notebook_instance_size }}">
<mat-optgroup *ngFor="let item of (selectedImage.computation_resources_shapes | keys)"
[label]="item.key | underscoreless">
<mat-option *ngFor="let list_item of item.value" [value]="list_item.Type">
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.html
index 0606e54..45bc68d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/create-environment/create-environment.component.html
@@ -29,8 +29,7 @@
<label class="label">Select project</label>
<div class="control selector-wrapper">
<mat-form-field>
- <mat-label>Select project</mat-label>
- <mat-select formControlName="project" panelClass="create-resources-dialog">
+ <mat-select formControlName="project" panelClass="create-resources-dialog" placeholder="Select project">
<mat-option *ngFor="let project of projects" [value]="project.name" (click)="setEndpoints(project)">
{{ project.name }}</mat-option>
<mat-option *ngIf="!projects.length" class="multiple-select ml-10" disabled>Projects list is empty
@@ -47,9 +46,8 @@
<label class="label">Select endpoint</label>
<div class="control selector-wrapper" [ngClass]="{ 'not-active' : !endpoints.length }">
<mat-form-field>
- <mat-label>Select endpoint</mat-label>
<mat-select formControlName="endpoint" disableOptionCentering [disabled]="!endpoints.length"
- panelClass="create-resources-dialog">
+ panelClass="create-resources-dialog" placeholder="Select endpoint">
<mat-option *ngFor="let endpoint of endpoints" [value]="endpoint"
(click)="getTemplates(createExploratoryForm?.controls['project'].value, endpoint)">{{ endpoint }}
</mat-option>
@@ -67,9 +65,8 @@
<label class="label">Select template</label>
<div class="control selector-wrapper" [ngClass]="{ 'not-active' : !templates.length }">
<mat-form-field>
- <mat-label>Select template</mat-label>
<mat-select formControlName="version" disableOptionCentering [disabled]="!templates.length"
- panelClass="create-resources-dialog">
+ panelClass="create-resources-dialog" placeholder="Select endpoint">
<mat-option *ngFor="let template of templates"
[value]="template.exploratory_environment_versions[0].version" (click)="getShapes(template)">
{{ template.exploratory_environment_versions[0].template_name }}
@@ -88,8 +85,7 @@
<label class="label">Select {{ DICTIONARY.image }}</label>
<div class="control selector-wrapper">
<mat-form-field>
- <mat-label>Select {{ DICTIONARY.image }}</mat-label>
- <mat-select formControlName="notebook_image_name" disableOptionCentering>
+ <mat-select formControlName="notebook_image_name" disableOptionCentering placeholder="Select image">
<mat-option [value]="null">None</mat-option>
<mat-option *ngFor="let image of images" [value]="image.name">{{ image.name }}</mat-option>
<mat-option *ngIf="!images.length" class="multiple-select ml-10" disabled>Images list is empty
@@ -124,9 +120,8 @@
<label class="label">{{ DICTIONARY.notebook_instance_size }}</label>
<div class="control selector-wrapper" [ngClass]="{ 'not-active': !currentTemplate }">
<mat-form-field>
- <mat-label>Select {{ DICTIONARY.notebook_instance_size }}</mat-label>
<mat-select formControlName="shape" disableOptionCentering [disabled]="!currentTemplate"
- panelClass="create-resources-shapes">
+ panelClass="create-resources-shapes" placeholder="Instance size">
<mat-optgroup *ngFor="let item of (shapes | keys)" [label]="item.key | underscoreless">
<mat-option *ngFor="let list_item of item.value" [value]="list_item.Type">
<strong class="highlight icon-label">{{ list_item.Size }}</strong> {{ list_item.Type }}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
index 78e3977..7040b6b 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
@@ -258,14 +258,13 @@
<ng-container matColumnDef="action-filter" stickyEnd>
<th mat-header-cell *matHeaderCellDef>
<div class="actions">
- <button mat-icon-button class="btn reset" (click)="resetFilterConfigurations()">
+ <button mat-icon-button class="btn reset" (click)="resetFilterConfigurations()" [disabled]="filteredEnvironments.length == 0 && !filtering">
<i class="material-icons">close</i>
</button>
<button mat-icon-button class="btn apply" (click)="applyFilter_btnClick(filterForm)"
[disabled]="filteredEnvironments.length == 0 && !filtering">
- <i class="material-icons"
- [ngClass]="{'not-allowed': filteredEnvironments.length == 0 && !filtering}">done</i>
+ <i class="material-icons">done</i>
</button>
</div>
</th>
@@ -282,7 +281,7 @@
<!-- FILTER END -->
- <tr mat-header-row *matHeaderRowDef="displayedColumns" class="header-row"></tr>
+ <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="header-row"></tr>
<tr [hidden]="!collapseFilterRow" mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true"
class="filter-row"></tr>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
index 682fb7b..88adca3 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
@@ -91,7 +91,7 @@ table {
width: 18%;
padding-right: 5px;
padding-left: 24px;
- background-color: transparent;
+ background-color: inherit;
}
.status-col,
@@ -128,7 +128,7 @@ table {
width: 10%;
padding-right: 24px;
text-align: right;
- background-color: transparent;
+ background-color: inherit;
}
}
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 8a3250e..fd2dbe5 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
@@ -46,7 +46,6 @@ textarea {
width: 100%;
height: 36px;
padding: 0 10px;
- color: #455c74;
color: #6e7ca0;
border: 1px solid transparent;
background: rgba(247, 247, 247, 0.87);
@@ -86,6 +85,7 @@ textarea::placeholder {
padding-bottom: 20px;
position: relative;
}
+
.row-wrap {
padding-bottom: 0;
}
@@ -103,6 +103,7 @@ textarea::placeholder {
text-align: left;
font-family: 'Open Sans', sans-serif;
}
+
.control-group .control {
width: 65%;
}
@@ -165,4 +166,4 @@ button {
vertical-align: middle;
color: #35afd5;
line-height: 26px;
-}
\ No newline at end of file
+}
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_reset.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_reset.scss
index 8875e14..6e90bae 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_reset.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_reset.scss
@@ -52,7 +52,7 @@ a {
}
table {
- border-collapse: collapse;
+ //border-collapse: collapse;
border-spacing: 0;
}
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 cb8f4ed..bb8ad38 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
@@ -122,6 +122,9 @@
&.not-allowed {
background-color: #dcdcdc;
+ .mat-select-placeholder {
+ cursor: not-allowed;
+ }
}
}
}
@@ -211,6 +214,17 @@
font-size: 14px;
}
+.mat-select-disabled{
+ .mat-select-placeholder {
+ cursor: not-allowed;
+ }
+
+}
+
+.mat-select-disabled + .caret {
+ cursor: not-allowed !important;
+}
+
.mat-input-placeholder {
font-weight: 400;
}
@@ -285,16 +299,23 @@ span.mat-slide-toggle-content {
word-break: break-all;
}
-.project-form {
+.project-form,
+.create-environment,
+.create-cluster{
.ng-invalid{
.mat-form-field-label {
line-height: 22px !important;
+ font-size: 15px !important;
}
}
.ng-valid .mat-form-field-label {
color: transparent !important;
}
+
+ .mat-select-value{
+ overflow: visible;
+ }
}
.manage-roles,
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org