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/07/28 14:49:33 UTC
[incubator-dlab] 05/10: [DLAB-1943]: Fixed grid on list of
resources and environment management
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DLAB-1943
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit ae6b424cbfefb295c1d9274525399721c808271f
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Mon Jul 27 17:22:08 2020 +0300
[DLAB-1943]: Fixed grid on list of resources and environment management
---
.../management-grid/management-grid.component.html | 4 +-
.../management-grid/management-grid.component.scss | 58 ++-
.../project-list/project-list.component.scss | 3 +-
.../bucket-browser/bucket-browser.component.html | 5 +-
.../bucket-browser/bucket-data.service.ts | 37 +-
.../computational-resources-list.component.scss | 46 +-
.../resources-grid/resources-grid.component.html | 14 +-
.../resources-grid/resources-grid.component.scss | 474 +++++++++++----------
.../multi-level-select-dropdown.component.scss | 3 +-
.../resources/webapp/src/assets/styles/_theme.scss | 48 ++-
.../webapp/src/assets/styles/_variables.scss | 2 +
11 files changed, 414 insertions(+), 280 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 bf3ef16..8d2df70 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
@@ -122,7 +122,7 @@
<span [hidden]="filtering && filterForm.statuses.length > 0 && !collapsedFilterRow">more_vert</span>
</i>
</button> </th>
- <td mat-cell *matCellDef="let element" class="ani status label-header" >
+ <td mat-cell *matCellDef="let element" class="ani status" >
<span ngClass="{{element.status || ''}}">{{ element.status }}</span>
</td>
</ng-container>
@@ -231,7 +231,7 @@
</ng-container>
<ng-container matColumnDef="type-filter" sticky>
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <input placeholder="Filter by environment type" type="text" class="form-control filter-field"
+ <input placeholder="Filter by environment name" type="text" class="form-control filter-field"
[value]="filterForm.type" (input)="filterForm.type = $event.target['value']"/>
</th>
</ng-container>
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 00f13e0..57e6c99 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
@@ -19,13 +19,17 @@
.data-grid {
&.management {
+ .filter-row-item{
+ padding: 5px;
+ }
+
.settings{
min-width: 7%;
}
.mat-column-checkbox{
padding-left: 10px;
padding-right: 0px;
- min-width: 68px;
+ min-width: 38px;
&.label-header{
}
@@ -57,7 +61,6 @@
.resources {
width: 24%;
- padding: 5px;
}
.settings {
@@ -76,6 +79,50 @@
}
+ .label-header{
+ padding-left: 15px;
+ .ar{
+ left: 21px;
+ top: 2px;
+ }
+ .settings{
+ min-width: 7%;
+ }
+ &.mat-column-checkbox{
+ z-index: 12 !important;
+ padding-left: 10px;
+ .ar{
+ position: absolute;
+ }
+ }
+ &.user{
+ z-index: 11 !important;
+ }
+ &.type{
+ z-index: 10 !important;
+ }
+
+ &.project {
+ z-index: 9 !important;
+ }
+
+ &.shape {
+ z-index: 8 !important;
+ }
+
+ &.status {
+ z-index: 7 !important;
+ }
+
+ &.resources {
+ z-index: 6 !important;
+ }
+
+ &.actions {
+ z-index: 5 !important;
+ }
+ }
+
.dashboard_table_body {
td:first-child {
cursor: default;
@@ -105,6 +152,7 @@ table.management {
td:not(.info) {
padding: 5px;
+ padding-left: 20px;
}
.header-row {
@@ -114,7 +162,6 @@ table.management {
padding-top: 14px;
vertical-align: super !important;
padding-left: 5px;
- font-size: 12px;
}
.actions {
text-align: right;
@@ -127,6 +174,11 @@ table.management {
.filter-row {
background: inherit;
+
+ .filter-field{
+ font-size: 13px;
+ padding-left: 15px;
+ }
}
}
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 b985d94..e2f2da2 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
@@ -26,7 +26,7 @@ table {
.name {
width: 25%;
- padding: 10px 0 10px 24px;
+ padding: 20px 0 10px 24px;
}
.endpoints {
@@ -77,7 +77,6 @@ table {
&.mat-header-cell{
padding-top: 19px;
- padding-right: 13px;
color: rgba(0,0,0,.54);
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
index 449445f..f963d83 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-browser.component.html
@@ -95,7 +95,7 @@
(click)="refreshBucket()"
[disabled]="allDisable"
>
- <i class="material-icons">autorenew</i>Refresh
+ <i class="material-icons refresh-icon">autorenew</i>Refresh
</button>
</div>
<p class="path"><span>Bucket path:</span>
@@ -189,7 +189,8 @@
</span>
</div>
<div class="size">{{file.object?.size | convertFileSize}}</div>
- <div class="date" *ngIf="!file.isDownloading">{{convertDate(file.object?.lastModifiedDate) | date: 'dd/MM/yyyy hh:mm:ss aa' }}</div>
+<!-- <div class="date" *ngIf="!file.isDownloading">{{convertDate(file.object?.lastModifiedDate) | date: 'dd/MM/yyyy hh:mm:ss aa' }}</div>-->
+ <div class="date" *ngIf="!file.isDownloading">{{file.object?.lastModifiedDate}}</div>
<div class="progress-wrapper" *ngIf="file.isDownloading">
<div class="progres">
<span class="progress-bar-text">{{file.progress || 0}}% Downloading...</span>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts
index 5dae6b4..700005f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/bucket-browser/bucket-data.service.ts
@@ -30,8 +30,13 @@ const array = [{'bucket': 'ofuks-1304-prj1-local-bucket', 'object': 'folder11/',
export class BucketDataService {
public _bucketData = new BehaviorSubject<any>(null);
public serverData: any = [];
- get data(): TodoItemNode[] { return this._bucketData.value; }
+
+ get data(): TodoItemNode[] {
+ return this._bucketData.value;
+ }
+
emptyFolder = null;
+
constructor(
private bucketBrowserService: BucketBrowserService,
) {
@@ -39,21 +44,25 @@ export class BucketDataService {
public refreshBucketdata(bucket, endpoint) {
let backetData = [];
- this.bucketBrowserService.getBucketData(bucket, endpoint).subscribe(v => {
- const copiedData = JSON.parse(JSON.stringify(v));
- this.serverData = v;
- if (this.emptyFolder) {
- copiedData.unshift(this.emptyFolder);
- }
- backetData = this.convertToFolderTree(copiedData);
- const data = this.buildFileTree({[bucket]: backetData}, 0);
- this._bucketData.next(data);
- });
- // this.serverData = array;
- // backetData = this.convertToFolderTree(array);
+ // this.bucketBrowserService.getBucketData(bucket, endpoint).subscribe(v => {
+ // const copiedData = JSON.parse(JSON.stringify(v));
+ // this.serverData = v;
+ // if (this.emptyFolder) {
+ // copiedData.unshift(this.emptyFolder);
+ // }
+ //
+ // backetData = this.convertToFolderTree(copiedData);
// const data = this.buildFileTree({[bucket]: backetData}, 0);
// this._bucketData.next(data);
+ // });
+ if (this.emptyFolder) {
+ array.unshift(this.emptyFolder);
+ }
+ this.serverData = array;
+ backetData = this.convertToFolderTree(array);
+ const data = this.buildFileTree({[bucket]: backetData}, 0);
+ this._bucketData.next(data);
}
public buildFileTree(obj: {[key: string]: any}, level: number): TodoItemNode[] {
@@ -121,6 +130,7 @@ export class BucketDataService {
if (!pointer.obj) {
pointer.obj = object;
}
+
});
};
@@ -138,4 +148,5 @@ export class BucketDataService {
}
return finalData;
}
+
}
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resources-list/computational-resources-list.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resources-list/computational-resources-list.component.scss
index 2df7536..582f51f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resources-list/computational-resources-list.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/computational/computational-resources-list/computational-resources-list.component.scss
@@ -17,10 +17,13 @@
* under the License.
*/
+ :host{
+ width:100%;
+ }
+
.source {
.no-details {
color: #bdc9d5;
- padding-left: 10px;
}
.resource-wrap {
@@ -34,7 +37,6 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- padding-left: 10px;
.detailed-link {
color: #35afd5;
@@ -109,23 +111,23 @@
}
}
}
- @media screen and (max-width: 1520px) {
- .resources,
- managment {
- .source {
- .resource-wrap {
- .resource-name {
- width: 42%;
- }
-
- .resource-status {
- width: 43%;
- }
-
- .resource-actions {
- width: 15%;
- }
- }
- }
- }
- }
+ //@media screen and (max-width: 1520px) {
+ // .resources,
+ // managment {
+ // .source {
+ // .resource-wrap {
+ // .resource-name {
+ // width: 42%;
+ // }
+ //
+ // .resource-status {
+ // width: 43%;
+ // }
+ //
+ // .resource-actions {
+ // width: 15%;
+ // }
+ // }
+ // }
+ // }
+ //}
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 d45e10b..b475516 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
@@ -74,11 +74,16 @@
<ng-container matColumnDef="tag">
<th mat-header-cell *matHeaderCellDef class="tag-col label-header">
<span class="label"> Tags </span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span>more_vert</span>
+ </i>
+ </button>
</th>
</ng-container>
<ng-container matColumnDef="resources">
<th mat-header-cell *matHeaderCellDef class="resources-col label-header">
- <span class="label"> Computational resources </span>
+ <span class="label"> Compute </span>
<button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
<i class="material-icons">
<span *ngIf="filtering && filterForm.resources.length > 0 && !collapseFilterRow">filter_list</span>
@@ -90,10 +95,15 @@
<ng-container matColumnDef="cost">
<th mat-header-cell *matHeaderCellDef class="cost-col label-header">
<span class="label"> Cost </span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span>more_vert</span>
+ </i>
+ </button>
</th>
</ng-container>
<ng-container matColumnDef="actions" stickyEnd>
- <th mat-header-cell *matHeaderCellDef class="actions-col label-header">
+ <th mat-header-cell *matHeaderCellDef class="settings label-header">
<span class="label"> Actions </span>
</th>
</ng-container>
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 9f8d9f9..4d604c0 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
@@ -17,11 +17,13 @@
* under the License.
*/
+@import "variables";
+
.data-table {
width: 100%;
}
-table {
+table.resources {
width: 100%;
.header-row {
@@ -29,17 +31,26 @@ table {
background-clip:padding-box;
th {
padding: 5px;
+ padding-left: 20px;
+
+ .mat-icon-button{
+ line-height: 45px;
+ }
}
.label {
display: inline-block;
- padding-top: 10px;
+ padding-top: 14px;
vertical-align: super !important;
- padding-left: 5px;
- font-size: 12px;
+ font-size: 13px;
}
}
+ .filter-field{
+ font-size: 13px;
+ padding-left: 15px;
+ }
+
.exploratory {
padding: 0;
@@ -50,13 +61,17 @@ table {
td {
padding: 5px;
+ padding-left: 20px;
+ display: flex;
+ align-items: center;
&.name-col {
padding-right: 5px;
- padding-left: 24px;
+ padding-left: 21px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
+ min-width: 187px;
}
&.resources-col {
@@ -84,6 +99,8 @@ table {
th {
padding: 5px;
background-clip: padding-box;
+
+
&:last-child {
padding-right: 6px;
}
@@ -91,39 +108,35 @@ table {
}
.name-col {
- width: 15%;
+ width: 17%;
padding-right: 5px;
padding-left: 24px;
background-color: inherit;
- &.notebook-name{
-
- }
- .label{
- padding-top: 14px;
- }
+ min-width: 187px;
}
.project-name{
font-weight: 600;
color: #577289;
+ padding-left: 21px;
}
+
.status-col,
.shape-col {
- width: 12%;
- .label{
- padding-top: 14px;
- }
+ width: 11%;
+ min-width: 105px;
}
.shape-col{
color: #577289;
.label{
- color: rgba(0,0,0,.54);
+ color: $table-header-color;
}
}
.tag-col {
width: 13%;
+ min-width: 95px;
mat-chip {
min-height: 20px;
@@ -140,280 +153,283 @@ table {
.resources-col {
width: 32%;
- .label{
- padding-top: 14px;
- }
+ min-width: 420px;
}
.cost-col {
width: 10%;
- text-align: center;
+ min-width: 95px;
+ justify-content: space-between;
+ }
+
+ .label-header{
+ &.cost-col{
+ z-index: 6 !important;
+ }
+
+ &.status-col{
+ z-index: 10 !important;
+ }
+
+ &.resources-col {
+ z-index: 7 !important;
+ }
+
+ &.tag-col {
+ z-index: 8 !important;
+ }
+
+ &.shape-col {
+ z-index: 9 !important;
+ }
+
+ &.settings {
+ z-index: 5 !important;
+ }
}
.actions-col {
- width: 10%;
+ //width: 10%;
padding-right: 24px;
text-align: right;
background-color: inherit;
+ z-index: 5 !important;
.label{
padding-right: 5px;
}
}
-}
-
-tr.detail-row {
- height: 0;
-}
-
-
-.element-diagram {
- min-width: 80px;
- border: 2px solid black;
- padding: 8px;
- font-weight: lighter;
- margin: 8px 0;
- height: 104px;
-}
+ tr.detail-row {
+ height: 0;
+ }
-.element-symbol {
- font-weight: bold;
- font-size: 40px;
- line-height: normal;
-}
-.element-description {
- padding: 16px;
-}
+ .element-diagram {
+ min-width: 80px;
+ border: 2px solid black;
+ padding: 8px;
+ font-weight: lighter;
+ margin: 8px 0;
+ height: 104px;
+ }
-.element-description-attribution {
- opacity: 0.5;
-}
+ .element-symbol {
+ font-weight: bold;
+ font-size: 40px;
+ line-height: normal;
+ }
+ .element-description {
+ padding: 16px;
+ }
+ .element-description-attribution {
+ opacity: 0.5;
+ }
-.dashboard_table {
- width: 100%;
- table-layout: fixed;
-}
+ .dashboard_table {
+ width: 100%;
+ table-layout: fixed;
+ }
-.dashboard_table tr {
- vertical-align: top;
-}
-.dashboard_table tr th span {
- width: 50px;
- text-align: center;
- height: 100%;
- line-height: 40px;
-}
-.dashboard_table tr td {
- font-size: 14px;
- padding: 20px 15px 16px;
-}
+ .dashboard_table tr {
+ vertical-align: top;
+ }
-.dashboard_table tr td,
-.dashboard_table tr th {
- border: 1px solid #d5dfea;
- text-align: left;
-}
+ .dashboard_table tr th span {
+ width: 50px;
+ text-align: center;
+ height: 100%;
+ line-height: 40px;
+ }
-.dashboard_table tr td:last-child {
- text-align: center;
-}
+ .dashboard_table tr td {
+ font-size: 13px;
+ padding: 20px 15px 16px;
+ }
-.dashboard_table_body td:first-child {
- background: #f3fbfd;
- color: #455c74;
- font-weight: 600;
- font-size: 16px;
- cursor: pointer;
- overflow: hidden;
- text-overflow: ellipsis;
-}
+ .dashboard_table tr td,
+ .dashboard_table tr th {
+ border: 1px solid #d5dfea;
+ text-align: left;
+ }
-.dashboard_table tr:nth-child(2n + 1) {
- background: #f9fafb;
-}
+ .dashboard_table tr td:last-child {
+ text-align: center;
+ }
-.dashboard_table tr.filter-row td {
- padding: 10px;
-}
+ .dashboard_table_body td:first-child {
+ background: #f3fbfd;
+ color: #455c74;
+ font-weight: 600;
+ font-size: 16px;
+ cursor: pointer;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
-.dashboard_table tr.filter-row td:first-child {
- font-weight: 400;
-}
+ .dashboard_table tr:nth-child(2n + 1) {
+ background: #f9fafb;
+ }
-.dashboard_table tr.filter-row td:last-child {
- padding: 10px 0;
-}
+ .dashboard_table tr.filter-row td {
+ padding: 10px;
+ }
-.filter-row .actions {
- text-align: right;
- display: flex;
- justify-content: flex-end;
-}
+ .dashboard_table tr.filter-row td:first-child {
+ font-weight: 400;
+ }
-.filter-row .actions button {
- background: #fff;
- border-color: #35afd5;
- color: #35afd5;
- outline: none;
-}
+ .dashboard_table tr.filter-row td:last-child {
+ padding: 10px 0;
+ }
-.filter-row .actions .reset:hover {
- border-color: #f1696e;
- background: #f9fafb;
- color: #f1696e;
-}
+ .dashboard_table tr:nth-child(2n + 1) td:first-child {
+ background: #edf6f9;
+ }
-.filter-row .actions .apply:hover {
- border-color: #49af38;
- background: #f9fafb;
- color: #49af38;
-}
+ .dashboard_table th {
+ background: #a1b7d1;
+ color: #fff;
+ font-weight: 600;
+ line-height: 40px;
+ text-transform: uppercase;
+ padding-left: 12px;
+ font-size: 13px;
+ }
-.dashboard_table tr:nth-child(2n + 1) td:first-child {
- background: #edf6f9;
-}
+ &.data-grid .status {
+ text-transform: capitalize;
+ }
-.dashboard_table th {
- background: #a1b7d1;
- color: #fff;
- font-weight: 600;
- line-height: 40px;
- text-transform: uppercase;
- padding-left: 12px;
- font-size: 12px;
-}
+ &.data-grid .list-menu {
+ left: auto;
+ margin-left: 0;
+ right: 15px;
+ padding: 10px 15px;
+ box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+ 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+ border: none;
+ min-width: 190px;
+ }
-.data-grid .status {
- text-transform: capitalize;
-}
+ .settings {
+ position: relative;
+ text-align: right;
+ width: 6%;
+ padding-right: 15px !important;
+ justify-content: flex-end;
+
+ .actions {
+ background-image: url(../../../assets/svg/settings_icon.svg);
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+ text-align: center;
+ cursor: pointer;
+ }
-.data-grid .list-menu {
- left: auto;
- margin-left: 0;
- right: 15px;
- padding: 10px 15px;
- box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
- 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
- border: none;
- min-width: 190px;
-}
+ .disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+ pointer-events: none;
+ }
+ }
-.settings {
- position: relative;
- text-align: right;
- min-width: 7%;
- padding-right: 15px !important;
- .actions {
- background-image: url(../../../assets/svg/settings_icon.svg);
- width: 16px;
- height: 16px;
- display: inline-block;
- text-align: center;
+ &.data-grid .list-menu li {
+ font-size: 13px;
+ border-bottom: 1px solid #edf1f5;
+ padding-bottom: 5px;
cursor: pointer;
+ margin: 5px -5px;
+ color: #577289;
+ transition: all 0.45s ease-in-out;
+ div{
+ padding: 8px 15px;
+ }
}
- .disabled {
- opacity: 0.4;
- cursor: not-allowed;
- pointer-events: none;
+ &.data-grid .list-menu a.navigate {
+ text-decoration: none;
+ color: #577289;
+ transition: all 0.45s ease-in-out;
}
-}
-
-.data-grid .list-menu li {
- font-size: 14px;
- border-bottom: 1px solid #edf1f5;
- padding-bottom: 5px;
- cursor: pointer;
- margin: 5px -5px;
- color: #577289;
- transition: all 0.45s ease-in-out;
- div{
- padding: 8px 15px;
+ &.data-grid .list-menu li i {
+ font-size: 18px;
+ padding-right: 5px;
+ vertical-align: bottom;
}
-}
-.data-grid .list-menu a.navigate {
- text-decoration: none;
- color: #577289;
- transition: all 0.45s ease-in-out;
-}
+ &.data-grid .list-menu li:not(.not-allow):hover,
+ &.data-grid .list-menu li:not(.not-allow):hover a {
+ background: none !important;
+ color: #36afd5;
+ }
-.data-grid .list-menu li i {
- font-size: 18px;
- padding-right: 5px;
- vertical-align: bottom;
-}
+ &.data-grid .list-menu li:last-child {
+ border-bottom: 0;
+ }
-.data-grid .list-menu li:not(.not-allow):hover,
-.data-grid .list-menu li:not(.not-allow):hover a {
- background: none !important;
- color: #36afd5;
-}
+ &.data-grid .list-menu ul {
+ margin-bottom: 0;
+ }
-.data-grid .list-menu li:last-child {
- border-bottom: 0;
-}
+ &.data-grid .list-menu .active-items li {
+ border-bottom: 1px solid #edf1f5;
+ }
-.data-grid .list-menu ul {
- margin-bottom: 0;
-}
+ &.data-grid .message_block {
+ background: #edf6f9;
+ }
-.data-grid .list-menu .active-items li {
- border-bottom: 1px solid #edf1f5;
-}
+ .message_block td {
+ text-align: left !important;
+ }
-.data-grid .message_block {
- background: #edf6f9;
-}
+ &.data-grid .total_cost {
+ float: left;
+ display: inline-block;
+ color: #455c74;
+ }
-.message_block td {
- text-align: left !important;
-}
+ .currency_details {
+ color: #35afd5;
+ cursor: pointer;
+ transition: all 0.45s ease-in-out;
+ padding-left: 10px;
+ }
-.data-grid .total_cost {
- display: inline-block;
- width: 70%;
- color: #455c74;
-}
+ .currency_details:hover {
+ color: #3392b0;
+ }
-.currency_details {
- float: right;
- color: #35afd5;
- cursor: pointer;
- transition: all 0.45s ease-in-out;
-}
+ .currency_details .material-icons {
+ font-size: 18px;
+ }
-.currency_details:hover {
- color: #3392b0;
-}
+ .mat-icon-button .mat-icon,
+ .mat-icon-button i {
+ line-height: 42px;
+ font-size: 18px;
+ }
-.currency_details .material-icons {
- font-size: 18px;
-}
+ .info {
+ padding: 40px;
+ text-align: center;
+ }
-.mat-icon-button .mat-icon,
-.mat-icon-button i {
- line-height: 42px;
- font-size: 18px;
-}
+ .content-row{
+ background-clip: padding-box;
+ }
-.info {
- padding: 40px;
- text-align: center;
-}
+ .not-allow{
+ cursor: not-allowed !important;
+ }
-.content-row{
- background-clip: padding-box;
}
-.not-allow{
- cursor: not-allowed !important;
-}
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 13306bb..038b54c 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
@@ -69,13 +69,14 @@
span {
color: #999;
font-weight: 300;
- //display: inline-block;
+ display: inline-block;
max-width: 80%;
}
.selected-items {
color: #4a5c89;
max-width: 477px;
+ padding-top: 5px;
}
}
}
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 c9d31cd..fac3332 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
@@ -469,7 +469,7 @@ span.mat-slide-toggle-content {
position: relative;
cursor: pointer;
&.header-checkbox{
- margin-top: 13px;
+ margin-top: 7px;
float: left;
}
&.checked {
@@ -737,17 +737,32 @@ mat-horizontal-stepper {
}
}
-.mat-table {
- .header-row {
- th.mat-header-cell {
+table.mat-table {
+ font-family: "Open Sans", sans-serif;
+ font-weight: 400;
+
+ .mat-cell{
+ font-size: 13px;
+ }
+ .header-row,
+ .mat-header-row{
+ .mat-header-cell {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
+ font-size: 13px;
+ .label{
+ font-family: 'Open Sans', sans-serif;
+ font-weight: 600;
+ font-size: 13px;
+ }
}
.mat-cell {
word-break: break-all;
vertical-align: top;
padding: 15px 5px 10px 5px;
+ font-size: 13px;
+ font-family: "Open Sans", sans-serif;
td {
vertical-align: baseline;
@@ -874,6 +889,31 @@ mat-progress-bar {
// color: #718ba6;
//}
+.filter-row .actions {
+ text-align: right;
+ display: flex;
+ justify-content: flex-end;
+}
+
+.filter-row .actions button {
+ background: #fff;
+ border-color: #35afd5;
+ color: #35afd5;
+ outline: none;
+}
+
+.filter-row .actions .reset:hover {
+ border-color: #f1696e;
+ background: #f9fafb;
+ color: #f1696e;
+}
+
+.filter-row .actions .apply:hover {
+ border-color: #49af38;
+ background: #f9fafb;
+ color: #49af38;
+}
+
#range-picker .ng-daterangepicker {
height: 37px;
width: 360px;
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_variables.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_variables.scss
index 63d8202..001d0fb 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_variables.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_variables.scss
@@ -20,6 +20,8 @@
$modal-text-color: #718aa5;
$modal-header-color: #f6fafe;
+$table-header-color: rgba(0,0,0,.54);
+
$brand-color: #4ab8dc;
$blue-grey-color: #718ba6;
$dark-grey-color: #455c74;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org