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 24f7781 [DLAB-1943]: Change style on grids (#834)
24f7781 is described below
commit 24f77811f11fe896a8c24ce6ac506a874d8c280c
Author: Dmytro Gnatyshyn <[email protected]>
AuthorDate: Tue Jul 28 17:53:50 2020 +0300
[DLAB-1943]: Change style on grids (#834)
[DLAB-1943]: Change style on grids
---
.../management-grid/management-grid.component.html | 4 +-
.../management-grid/management-grid.component.scss | 62 +++-
.../management/management.component.html | 2 +-
.../project-list/project-list.component.scss | 11 +-
.../administration/project/project.component.html | 2 +-
.../audit/audit-grid/audit-grid.component.html | 66 ++--
.../audit/audit-grid/audit-grid.component.scss | 77 +++--
.../audit/audit-grid/audit-grid.component.ts | 5 +-
.../audit-toolbar/audit-toolbar.component.html | 4 +-
.../audit-toolbar/audit-toolbar.component.scss | 76 +----
.../audit/audit-toolbar/audit-toolbar.component.ts | 34 +-
.../src/app/reports/audit/audit.component.ts | 8 +-
.../reporting-grid/reporting-grid.component.html | 62 +++-
.../reporting-grid/reporting-grid.component.scss | 91 ++++--
.../reporting-grid/reporting-grid.component.ts | 4 +-
.../reporting/toolbar/toolbar.component.html | 2 +-
.../reporting/toolbar/toolbar.component.scss | 76 -----
.../reports/reporting/toolbar/toolbar.component.ts | 33 +-
.../bucket-browser/bucket-browser.component.html | 5 +-
.../bucket-browser/bucket-data.service.ts | 37 ++-
.../computational-resources-list.component.scss | 46 +--
.../cost-details-dialog.component.html | 3 +-
.../cost-details-dialog.component.scss | 3 +-
.../install-libraries.component.html | 37 ++-
.../install-libraries.component.scss | 113 ++++---
.../resources-grid/resources-grid.component.html | 14 +-
.../resources-grid/resources-grid.component.scss | 358 +++++++++++----------
.../shared/form-controls/dropdowns.component.scss | 7 +-
.../multi-level-select-dropdown.component.scss | 5 +-
.../webapp/src/assets/styles/_dialogs.scss | 5 +
.../webapp/src/assets/styles/_general.scss | 9 +-
.../resources/webapp/src/assets/styles/_theme.scss | 153 ++++++++-
.../webapp/src/assets/styles/_variables.scss | 2 +
33 files changed, 873 insertions(+), 543 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..9d9f4b5 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 {
@@ -67,6 +70,7 @@
}
.actions {
margin-top: 0px;
+ padding-right: 10px;
.label{
padding-right: 5px;
}
@@ -76,6 +80,53 @@
}
+ .label-header{
+ padding-left: 15px;
+ height: 56px;
+
+ .ar{
+ left: 21px;
+ top: 2px;
+ }
+ .settings{
+ min-width: 7%;
+ }
+ &.mat-column-checkbox{
+ z-index: 12 !important;
+ padding-left: 10px;
+ .ar{
+ position: absolute;
+ top: 10px;
+ }
+ }
+ &.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 +156,7 @@ table.management {
td:not(.info) {
padding: 5px;
+ padding-left: 20px;
}
.header-row {
@@ -114,7 +166,6 @@ table.management {
padding-top: 14px;
vertical-align: super !important;
padding-left: 5px;
- font-size: 12px;
}
.actions {
text-align: right;
@@ -127,6 +178,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/management/management.component.html
b/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.html
index 02ab5b9..187a3ee 100644
---
a/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.html
+++
b/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.html
@@ -67,7 +67,7 @@
</button> -->
</div>
<button mat-raised-button class="butt" (click)="refreshGrid()">
- <i class="material-icons">autorenew</i>Refresh
+ <i class="material-icons refresh-icon">autorenew</i>Refresh
</button>
</div>
<mat-divider></mat-divider>
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..9050ff6 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,15 @@ table {
.name {
width: 25%;
- padding: 10px 0 10px 24px;
+ padding: 20px 0 10px 24px;
+ }
+
+ th.name{
+ padding-top: 10px;
+ }
+
+ .mat-header-row{
+ padding-top: 12px;
}
.endpoints {
@@ -77,7 +85,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/administration/project/project.component.html
b/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.html
index 3be7a10..98ea6aa 100644
---
a/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.html
+++
b/services/self-service/src/main/resources/webapp/src/app/administration/project/project.component.html
@@ -39,7 +39,7 @@
</span>
</button>
<button mat-raised-button class="butt" (click)="refreshGrid()"
[hidden]="!projectList.length">
- <i class="material-icons">autorenew</i>Refresh
+ <i class="material-icons refresh-icon">autorenew</i>Refresh
</button>
</div>
</div>
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.html
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.html
index a6125f9..dc53ead 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.html
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.html
@@ -17,11 +17,25 @@
~ under the License.
-->
-<section class="audit-table-wrapper">
+<section class="audit-table-wrapper" id="scrolling">
<table mat-table [dataSource]="auditData" class="data-grid audit
mat-elevation-z6">
+ <ng-container matColumnDef="date">
+ <th mat-header-cell *matHeaderCellDef class="th_date label-header">
+ <div class="label"><span class="text">Date</span></div>
+ <button mat-icon-button aria-label="More" class="ar"
(click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span>more_vert</span>
+ </i>
+ </button>
+ </th>
+ <td mat-cell *matCellDef="let element"> {{element.timestamp | date:
'dd/MM/yyyy hh:mm:ss aa'}} </td>
+ <td mat-footer-cell *matFooterCellDef class="table-footer">
+ </td>
+ </ng-container>
+
<ng-container matColumnDef="user">
- <th mat-header-cell *matHeaderCellDef class="th_user label-header">
+ <th mat-header-cell *matHeaderCellDef class="th_user label-header"
[ngStyle]="{'z-index': 99}">
<div class="label"><span class="audit-user"> User</span></div>
<button mat-icon-button aria-label="More" class="ar"
(click)="toggleFilterRow()">
<i class="material-icons">
@@ -34,6 +48,28 @@
<td mat-footer-cell *matFooterCellDef class="table-footer"></td>
</ng-container>
+ <ng-container matColumnDef="action">
+ <th mat-header-cell *matHeaderCellDef class="th_action label-header"
[ngStyle]="{'zIndex': 98, 'display': 'sticky'}">
+ <div class="label">
+ <span class="text"> Action </span>
+ </div>
+ <button mat-icon-button aria-label="More" class="ar"
(click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span>more_vert</span>
+ </i>
+ </button>
+ </th>
+ <td mat-cell *matCellDef=" let element" class="th_action">
+ <div class="action-wrapper">
+ <span class="ellipsis">{{element.action | convertaction }}</span>
+ <div class="audit-info" (click)="openActionInfo(element)"
*ngIf="element.info">
+ <i class="material-icons">info</i>
+ </div>
+ </div>
+ </td>
+ <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
+ </ng-container>
+
<ng-container matColumnDef="project">
<th mat-header-cell *matHeaderCellDef class="th_project label-header">
<div class="label"><span class="text">Project</span></div>
@@ -125,32 +161,6 @@
</td>
</ng-container>
- <ng-container matColumnDef="action">
- <th mat-header-cell *matHeaderCellDef class="th_action label-header">
- <div class="label">
- <span class="text"> Action </span>
- </div>
- </th>
- <td mat-cell *matCellDef=" let element">
- <div class="action-wrapper">
- <span>{{element.action | convertaction }}</span>
- <div class="audit-info" (click)="openActionInfo(element)"
*ngIf="element.info">
- <i class="material-icons">info</i>
- </div>
- </div>
- </td>
- <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
- </ng-container>
-
- <ng-container matColumnDef="date">
- <th mat-header-cell *matHeaderCellDef class="th_date label-header">
- <div class="label"><span class="text">Date</span></div>
- </th>
- <td mat-cell *matCellDef="let element"> {{element.timestamp | date:
'dd/MM/yyyy hh:mm:ss aa'}} </td>
- <td mat-footer-cell *matFooterCellDef class="table-footer">
- </td>
- </ng-container>
-
<ng-container matColumnDef="buttons">
<th mat-header-cell *matHeaderCellDef class="th_buttons
label-header"></th>
<td mat-cell *matCellDef="let element"></td>
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.scss
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.scss
index 29250ea..b731936 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.scss
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.scss
@@ -19,6 +19,8 @@
.audit-table-wrapper {
width: 100%;
+ height: calc(100vh - 130px);
+ overflow: auto;
.audit {
width: 100%;
@@ -33,36 +35,47 @@
tr {
.th_user {
width: 19%;
+ z-index: 9 !important;
}
.th_action {
width: 11%;
- .label{
+ z-index: 8 !important;
+ max-width: 250px;
+
+ .label {
padding-bottom: 10px;
}
}
.th_date {
width: 14%;
- .label{
+ z-index: 10 !important;
+ padding-left: 0;
+
+ .label {
padding-bottom: 10px;
}
}
- .th_project{
+ .th_project {
width: 11%;
+ z-index: 7 !important;
}
- .th_resource{
+ .th_resource {
width: 14%;
+ z-index: 5 !important;
}
- .th_resource-type{
+ .th_resource-type {
width: 14%;
+ z-index: 6 !important;
}
- .th_buttons{
+ .th_buttons {
width: 6%;
+ z-index: 4 !important;
}
th {
@@ -76,7 +89,7 @@
td {
font-size: 13px;
- padding-left: 15px;
+ padding-left: 20px;
&.info {
z-index: 1 !important;
@@ -189,7 +202,7 @@
vertical-align: super !important;
.text {
- padding-left: 15px;
+ padding-left: 20px;
}
}
@@ -222,10 +235,16 @@
}
}
- .action-wrapper{
+ .action-wrapper {
display: flex;
align-items: center;
- .audit-info{
+ justify-content: space-between;
+ padding-right: 10px;
+ span{
+ max-width: 85%;
+ }
+
+ .audit-info {
color: lightgray;
cursor: pointer;
margin-left: 5px;
@@ -239,48 +258,56 @@
.dropdown-multiselect {
button {
- font-size: 14px;
+ font-size: 13px;
height: 34px;
padding: 7px 20px;
}
}
}
- .user-col{
- padding-left: 5px;
- }
}
-.selected-items-wrapper{
+.selected-items-wrapper {
display: flex;
align-items: center;
- .select-wrapper{
+
+ .select-wrapper {
margin-left: 20px;
width: 80px;
}
}
-.pagination-wrapper{
+.pagination-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 30px;
- .navigation-butts{
- cursor: pointer;
- .not-active{
+
+ .not-active {
+ .navigation-butts {
color: lightgray;
}
}
-}
-.audit-actions{
+ .navigation-butts {
+ cursor: pointer;
+ color: #35afd5;
+
+ .not-active {
+ color: lightgray;
+ }
+ }
+ }
+
+
+.audit-actions {
text-align: right;
}
-.audit-user{
- padding-left: 19px;
+.audit-user {
+ padding-left: 20px;
}
-.table-footer{
+.table-footer {
position: sticky;
bottom: 0;
background: inherit;
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.ts
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.ts
index 4dc5aae..44ec26e 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.ts
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-grid/audit-grid.component.ts
@@ -17,7 +17,7 @@
* under the License.
*/
-import {Component, Inject, OnInit} from '@angular/core';
+import {Component, EventEmitter, Inject, OnInit, Output} from '@angular/core';
import {FilterAuditModel} from '../filter-audit.model';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from
'@angular/material/dialog';
import {AuditService} from '../../../core/services/audit.service';
@@ -55,6 +55,8 @@ export class AuditGridComponent implements OnInit {
private copiedFilterAuditData: FilterAuditModel;
public isNavigationDisabled: boolean;
+ @Output() resetDateFilter: EventEmitter<any> = new EventEmitter();
+
constructor(
public dialogRef: MatDialogRef<AuditInfoDialogComponent>,
@@ -157,6 +159,7 @@ export class AuditGridComponent implements OnInit {
public resetFilterConfigurations(): void {
this.filterAuditData = FilterAuditModel.getDefault();
+ this.resetDateFilter.emit();
this.buildAuditGrid(true);
}
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.html
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.html
index 3562b08..468ebb3 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.html
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.html
@@ -16,7 +16,7 @@
~ specific language governing permissions and limitations
~ under the License.
-->
-<section class="toolbar">
+<section class="audit-toolbar">
<div class="info_color">
<div class="general" *ngIf="reportData">
<div><span>Service base name: </span><strong>{{ reportData.sbn
}}</strong></div>
@@ -35,7 +35,7 @@
</div>
<div class="action-butt">
<button mat-raised-button class="butt" (click)="rebuild($event)">
- <i class="material-icons">autorenew</i>Refresh
+ <i class="material-icons refresh-icon">autorenew</i>Refresh
</button>
</div>
</section>
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.scss
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.scss
index 744bfdc..0bf0071 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.scss
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.scss
@@ -17,7 +17,7 @@
* under the License.
*/
-section.toolbar {
+section.audit-toolbar {
display: flex;
justify-content: space-between;
font-weight: 300;
@@ -62,79 +62,5 @@ section.toolbar {
}
}
-/* daterangepicker themes */
-#range-picker {
- margin-top: 5px;
-}
-
-#range-picker path#Shape {
- fill: #36afd5;
-}
-
-#range-picker .ng-daterangepicker,
-#range-picker .ng-daterangepicker.is-active,
-#range-picker .ng-daterangepicker .calendar {
- border: none;
- border-radius: 0;
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0,
.14), 0 1px 5px 0 rgba(0, 0, 0, .12);
-}
-
-#range-picker .ng-daterangepicker .calendar::after {
- border-top: 1px solid rgba(234, 234, 234, 0.64);
- border-left: 1px solid rgba(234, 234, 234, 0.64);
-}
-
-#range-picker .ng-daterangepicker .calendar .side-container .side-button {
- background: #fff;
- color: #718ba6;
- border: none;
- border-radius: 0px;
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0,
.14), 0 1px 5px 0 rgba(0, 0, 0, .12)
-}
-
-#range-picker .ng-daterangepicker .calendar .side-container
.side-button.is-active,
-#range-picker .ng-daterangepicker .input-section .label-txt {
- color: #35afd5;
-}
-
-#range-picker .ng-daterangepicker .calendar .calendar-container
.day-num.is-active,
-#range-picker .ng-daterangepicker .calendar .calendar-container .days
.day-num:hover {
- background: #35afd5;
- background-clip: padding-box;
-
-}
-
-#range-picker .ng-daterangepicker .calendar .calendar-container .day-names,
-#range-picker .ng-daterangepicker .calendar .calendar-container .days {
- width: 310px;
-}
-#range-picker .ng-daterangepicker .calendar
.day.is-within-range.is-first-weekday,
-#range-picker .ng-daterangepicker .calendar
.day.is-within-range.is-last-weekday {
- background-clip: padding-box;
-}
-#range-picker .ng-daterangepicker .calendar .calendar-container
.day.is-within-range {
- background: #e9f8fc
-}
-
-#range-picker .ng-daterangepicker .input-section .cal-icon svg path {
- fill: #35afd5;
-}
-
-#range-picker .ng-daterangepicker .input-section .value-txt {
- color: #718ba6;
-}
-
-#range-picker .ng-daterangepicker .input-section .value-txt.untouched,
-#range-picker .ng-daterangepicker .input-section .label-txt.untouched {
- color: #fff;
-}
-
-#range-picker .ng-daterangepicker .input-section .value-txt.untouched::after {
- content: 'Select date';
- position: absolute;
- top: 22px;
- left: 34px;
- color: #718ba6;
-}
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.ts
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.ts
index cc4933e..f1a889a 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.ts
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.ts
@@ -61,31 +61,37 @@ export class AuditToolbarComponent implements OnInit,
AfterViewInit {
}
ngOnInit() {
- // if (localStorage.getItem('report_period')) {
- // const availableRange =
JSON.parse(localStorage.getItem('report_period'));
- // this.availablePeriodFrom = availableRange.start_date;
- // this.availablePeriodTo = availableRange.end_date; }
- //
this.subscriptions.add(this.healthStatusService.statusData.pipe(skip(1)).subscribe(result
=> {
- // this.healthStatus = result;
- // }));
+ this.setInitDatapickerConfig();
}
ngAfterViewInit() {
this.clearRangePicker();
}
+ private setInitDatapickerConfig() {
+ const labels =
<NodeListOf<Element>>document.querySelectorAll('.label-txt');
+ const rangeLabels =
<NodeListOf<Element>>document.querySelectorAll('.value-txt');
+ labels[0].innerHTML = 'From date';
+ labels[1].innerHTML = 'To date';
+ for (let label = 0; label < rangeLabels.length; ++label) {
+ rangeLabels[label].classList.add('d-none');
+ rangeLabels[label].classList.add('untouched');
+ }
+ }
+
setDateRange() {
const availableRange = JSON.parse(localStorage.getItem('report_period'));
+ const rangeLabels =
<NodeListOf<Element>>document.querySelectorAll('.value-txt');
+ for (let label = 0; label < rangeLabels.length; ++label) {
+ rangeLabels[label].classList.remove('d-none');
+ }
this.availablePeriodFrom = availableRange.start_date;
this.availablePeriodTo = availableRange.end_date;
}
clearRangePicker(): void {
- const rangeLabels =
<NodeListOf<Element>>document.querySelectorAll('.value-txt');
-
- for (let label = 0; label < rangeLabels.length; ++label)
- rangeLabels[label].classList.add('untouched');
+ this.setInitDatapickerConfig();
}
onChange(dateRange: string): void {
@@ -94,8 +100,14 @@ export class AuditToolbarComponent implements OnInit,
AfterViewInit {
for (let label = 0; label < rangeLabels.length; ++label)
if (rangeLabels[label].classList.contains('untouched')) {
rangeLabels[label].classList.remove('untouched');
+ rangeLabels[label].classList.remove('d-none');
}
+
+ const labels =
<NodeListOf<Element>>document.querySelectorAll('.label-txt');
+ labels[0].innerHTML = 'From:';
+ labels[1].innerHTML = 'To:';
+
const reportDateRange = dateRange.split('-');
this.setRangeOption.emit({
start_date: reportDateRange[0].split('/').join('-'),
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit.component.ts
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit.component.ts
index 6f48b71..af3919d 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit.component.ts
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit.component.ts
@@ -42,7 +42,7 @@ import {MAT_DIALOG_DATA, MatDialogRef} from
'@angular/material/dialog';
<audit-toolbar (rebuildAudit)="rebuildAuditGrid()" (setRangeOption) =
setRangeOption($event)>
</audit-toolbar>
<mat-divider></mat-divider>
- <dlab-audit-grid></dlab-audit-grid>
+ <dlab-audit-grid (resetDateFilter)="resetDatepicker()"></dlab-audit-grid>
</div>
`,
@@ -96,6 +96,10 @@ export class AuditComponent implements OnInit, OnDestroy {
}
public setRangeOption(event) {
- this.auditGrid.setAvaliblePeriod(event)
+ this.auditGrid.setAvaliblePeriod(event);
+ }
+
+ public resetDatepicker() {
+ this.auditToolbar.clearRangePicker();
}
}
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 9366725..7685604 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
@@ -17,7 +17,21 @@
~ under the License.
-->
-<section class="table-wrapper">
+<div class="wrapper">
+<section class="table-wrapper" id="scrolling">
+
+<!-- <div class="navigation-btn">-->
+<!-- <div class="left">-->
+<!-- <button mat-fab aria-label="Scroll left">-->
+<!-- <mat-icon>keyboard_arrow_left</mat-icon>-->
+<!-- </button>-->
+<!-- </div>-->
+<!-- <div class="right">-->
+<!-- <button mat-fab aria-label="Scroll right">-->
+<!-- <mat-icon>keyboard_arrow_right</mat-icon>-->
+<!-- </button>-->
+<!-- </div>-->
+<!-- </div>-->
<table mat-table [dataSource]="reportData" class="data-grid reporting
mat-elevation-z6">
<ng-container matColumnDef="name">
@@ -36,13 +50,15 @@
<ng-container matColumnDef="user">
<th mat-header-cell *matHeaderCellDef class="th_user label-header">
- <div class="sort">
- <div class="sort-arrow up" (click)="sortBy('user', 'down')"
[ngClass]="{'active': !!this.active['userdown']}"></div>
- <div class="sort-arrow down" (click)="sortBy('user', 'up')"
[ngClass]="{'active': !!this.active['userup']}"></div>
- </div>
+
<div class="label">
+ <div class="sort sort-user">
+ <div class="sort-arrow up" (click)="sortBy('user', 'down')"
[ngClass]="{'active': !!this.active['userdown']}"></div>
+ <div class="sort-arrow down" (click)="sortBy('user', 'up')"
[ngClass]="{'active': !!this.active['userup']}"></div>
+ </div>
<span class="text"> User </span>
</div>
+
<button mat-icon-button aria-label="More" class="ar"
(click)="toggleFilterRow()">
<i class="material-icons">
<span *ngIf="filteredReportData.users.length > 0; else
user_filtered">filter_list</span>
@@ -56,11 +72,15 @@
<ng-container matColumnDef="project">
<th mat-header-cell *matHeaderCellDef class="th_project label-header">
- <div class="sort">
- <div class="sort-arrow up" (click)="sortBy('project', 'down')"
[ngClass]="{'active': !!this.active['projectdown']}"></div>
- <div class="sort-arrow down" (click)="sortBy('project', 'up')"
[ngClass]="{'active': !!this.active['projectup']}"></div>
+
+ <div class="label">
+ <div class="sort sort-project">
+ <div class="sort-arrow up" (click)="sortBy('project', 'down')"
[ngClass]="{'active': !!this.active['projectdown']}"></div>
+ <div class="sort-arrow down" (click)="sortBy('project', 'up')"
[ngClass]="{'active': !!this.active['projectup']}"></div>
+ </div>
+ <span class="text">Project</span>
</div>
- <div class="label"><span class="text">Project</span></div>
+
<button mat-icon-button aria-label="More" class="ar"
(click)="toggleFilterRow()">
<i class="material-icons">
<span *ngIf="filteredReportData.projects.length > 0; else
project_filtered">filter_list</span>
@@ -141,6 +161,16 @@
<td mat-footer-cell *matFooterCellDef class="table-footer"></td>
</ng-container>
+ <ng-container matColumnDef="empty">
+ <th mat-header-cell *matHeaderCellDef class="th_empty label-header">
+ </th>
+ <td mat-cell *matCellDef="let element">
+ </td>
+ <td mat-footer-cell *matFooterCellDef class="table-footer"></td>
+ </ng-container>
+
+
+
<ng-container matColumnDef="charge" stickyEnd>
<th mat-header-cell *matHeaderCellDef class="th_charges label-header">
<div class="label">
@@ -150,6 +180,11 @@
</div>
<span class="text">Service Charges</span>
</div>
+<!-- <div class="right">-->
+<!-- <button mat-fab aria-label="Scroll right">-->
+<!-- <mat-icon>keyboard_arrow_right</mat-icon>-->
+<!-- </button>-->
+<!-- </div>-->
</th>
<td mat-cell *matCellDef="let element">
@@ -200,6 +235,12 @@
[model]="filteredReportData['shapes']"></multi-select-dropdown>
</th>
</ng-container>
+
+ <ng-container matColumnDef="empty-filter">
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
+ </th>
+ </ng-container>
+
<ng-container matColumnDef="service-filter">
<th mat-header-cell *matHeaderCellDef class="filter-row-item">
<multi-select-dropdown *ngIf="filterConfiguration"
(selectionChange)="onUpdate($event)"
@@ -222,7 +263,7 @@
</th>
</ng-container>
<ng-container matColumnDef="placeholder">
- <td mat-footer-cell *matFooterCellDef colspan="8" class="info">
+ <td mat-footer-cell *matFooterCellDef colspan="9" class="info">
No data available
</td>
</ng-container>
@@ -238,3 +279,4 @@
<tr [hidden]="reportData?.length" mat-footer-row
*matFooterRowDef="['placeholder']"></tr>
</table>
</section>
+</div>
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss
b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss
index 9c4f819..44029ce 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss
@@ -17,16 +17,43 @@
* under the License.
*/
+#scrolling::-webkit-scrollbar,
+.list-selected mat-chip-list .mat-chip-list-wrapper::-webkit-scrollbar {
+ width: 5px;
+ height: 5px;
+}
+
+#scrolling::-webkit-scrollbar-track,
+.list-selected mat-chip-list .mat-chip-list-wrapper::-webkit-scrollbar-track {
+ box-shadow: none;
+ -webkit-box-shadow: none;
+ background-color: rgb(243, 243, 243);
+}
+
+#scrolling::-webkit-scrollbar-thumb,
+.list-selected mat-chip-list .mat-chip-list-wrapper::-webkit-scrollbar-thumb {
+ background-color: #f6fafe;
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
.table-wrapper {
width: 100%;
-
+ //position: sticky;
+ //z-index: 101;
+ //overflow-y: auto;
+ //transform:rotateX(180deg);
+ display: block;
+ height: calc(100vh - 130px);
+ overflow: auto;
}
.reporting {
+ //position: relative;
width: 100%;
min-width: 1100px;
overflow: auto;
border-collapse: inherit;
+ //transform:rotateX(180deg);
.mat-cell {
vertical-align: middle;
@@ -35,15 +62,15 @@
tr {
th {
padding-right: 5px;
- z-index: 2 !important;
+ //z-index: 2 !important;
&.th_charges{
- z-index: 3 !important;
+ z-index: 16 !important;
}
}
td {
font-size: 13px;
- padding-left: 15px;
+ padding-left: 20px;
&.info {
z-index: 1 !important;
@@ -66,9 +93,11 @@
&.header-row {
th {
- font-size: 11px;
+
.label{
padding-left: 0;
+ position: relative;
+ font-size: 13px;
}
}
}
@@ -77,6 +106,7 @@
.th_shape {
width: 10%;
min-width: 150px;
+ z-index: 10 !important;
}
.th_user,
@@ -85,10 +115,14 @@
.tags {
width: 15%;
min-width: 150px;
- overflow: hidden;
+ //overflow: hidden;
word-wrap: break-word;
}
+ .service{
+ width: 10%;
+ }
+
.tags {
.label {
padding-top: 0;
@@ -97,25 +131,41 @@
.service {
min-width: 175px;
+ z-index: 9 !important;
}
.env_name {
width: 16%;
min-width: 200px;
+ z-index: 15 !important;
+ padding-left: 0;
+ }
+
+ .th_user{
+ z-index: 14 !important;
+ }
+
+ .th_empty {
+ width: 1%;
+ z-index: 4 !important;
}
.th_project{
width: 12%;
+ z-index: 13 !important;
+ min-width: 150px;
}
.th_type {
- width: 10%;
- min-width: 150px;
+ width: 12%;
+ min-width: 170px;
+ z-index: 12 !important;
}
.th_status {
width: 8%;
min-width: 150px;
+ z-index: 11 !important;
}
.th_charges {
@@ -128,10 +178,6 @@
}
}
- .th_project {
- min-width: 150px;
- }
-
.tags-col {
padding: 5px;
@@ -169,13 +215,18 @@
vertical-align: super !important;
.text{
- padding-left: 15px;
+ padding-left: 20px;
}
}
.sort{
position: absolute;
- bottom: 20px;
+ bottom: 2px;
+
+ &-user,
+ &-project{
+ right: -15px;
+ }
&-arrow{
width: 6px;
@@ -248,6 +299,14 @@
}
}
+ .left {
+ }
+
+ .right {
+ position: absolute;
+ right: 0;
+ }
+
@media screen and (max-width: 1280px) {
.dashboard_table.reporting {
.env_name,
@@ -261,10 +320,6 @@
width: 12%;
}
- .th_charges {
- width: 6%;
- }
-
.user-field {
word-wrap: break-word;
}
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 9c88f27..2fc18ed 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,8 +42,8 @@ export class ReportingGridComponent implements OnInit {
@Output() filterReport: EventEmitter<{}> = new EventEmitter();
@Output() resetRangePicker: EventEmitter<boolean> = new EventEmitter();
@Input() filteredReportData: ReportingConfigModel;
- displayedColumns: string[] = ['name', 'user', 'project', 'type', 'status',
'shape', 'service', 'charge'];
- displayedFilterColumns: string[] = ['name-filter', 'user-filter',
'project-filter', 'type-filter', 'status-filter', 'shape-filter',
'service-filter', 'actions'];
+ displayedColumns: string[] = ['name', 'user', 'project', 'type', 'status',
'shape', 'service', 'empty', 'charge'];
+ displayedFilterColumns: string[] = ['name-filter', 'user-filter',
'project-filter', 'type-filter', 'status-filter', 'shape-filter',
'service-filter', 'empty-filter', 'actions'];
filtered: any;
ngOnInit() {}
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.html
b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.html
index 7979849..d7da74b 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.html
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.html
@@ -38,7 +38,7 @@
<i class="material-icons">file_download</i>Export
</button>
<button mat-raised-button class="butt" (click)="rebuild($event)">
- <i class="material-icons">autorenew</i>Refresh
+ <i class="material-icons refresh-icon">autorenew</i>Refresh
</button>
</div>
</section>
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.scss
b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.scss
index 4a150bf..f23b8a9 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.scss
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.scss
@@ -62,79 +62,3 @@ section.toolbar {
}
}
-/* daterangepicker themes */
-#range-picker {
- margin-top: 5px;
-}
-
-#range-picker path#Shape {
- fill: #36afd5;
-}
-
-#range-picker .ng-daterangepicker,
-#range-picker .ng-daterangepicker.is-active,
-#range-picker .ng-daterangepicker .calendar {
- border: none;
- border-radius: 0;
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0,
.14), 0 1px 5px 0 rgba(0, 0, 0, .12);
-}
-
-#range-picker .ng-daterangepicker .calendar::after {
- border-top: 1px solid rgba(234, 234, 234, 0.64);
- border-left: 1px solid rgba(234, 234, 234, 0.64);
-}
-
-#range-picker .ng-daterangepicker .calendar .side-container .side-button {
- background: #fff;
- color: #718ba6;
- border: none;
- border-radius: 0px;
- box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0,
.14), 0 1px 5px 0 rgba(0, 0, 0, .12)
-}
-
-#range-picker .ng-daterangepicker .calendar .side-container
.side-button.is-active,
-#range-picker .ng-daterangepicker .input-section .label-txt {
- color: #35afd5;
-}
-
-#range-picker .ng-daterangepicker .calendar .calendar-container
.day-num.is-active,
-#range-picker .ng-daterangepicker .calendar .calendar-container .days
.day-num:hover {
- background: #35afd5;
- background-clip: padding-box;
-
-}
-
-#range-picker .ng-daterangepicker .calendar .calendar-container .day-names,
-#range-picker .ng-daterangepicker .calendar .calendar-container .days {
- width: 310px;
-}
-
-#range-picker .ng-daterangepicker .calendar
.day.is-within-range.is-first-weekday,
-#range-picker .ng-daterangepicker .calendar
.day.is-within-range.is-last-weekday {
- background-clip: padding-box;
-}
-
-#range-picker .ng-daterangepicker .calendar .calendar-container
.day.is-within-range {
- background: #e9f8fc
-}
-
-#range-picker .ng-daterangepicker .input-section .cal-icon svg path {
- fill: #35afd5;
-}
-
-#range-picker .ng-daterangepicker .input-section .value-txt {
- color: #718ba6;
-}
-
-#range-picker .ng-daterangepicker .input-section .value-txt.untouched,
-#range-picker .ng-daterangepicker .input-section .label-txt.untouched {
- color: #fff;
-}
-
-#range-picker .ng-daterangepicker .input-section .value-txt.untouched::after {
- content: 'Select date';
- position: absolute;
- top: 22px;
- left: 34px;
- color: #718ba6;
-}
diff --git
a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.ts
b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.ts
index 503ffaa..aa4a962 100644
---
a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.ts
+++
b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.ts
@@ -61,31 +61,42 @@ export class ToolbarComponent implements OnInit,
AfterViewInit {
}
ngOnInit() {
- if (localStorage.getItem('report_period')) {
- const availableRange = JSON.parse(localStorage.getItem('report_period'));
- this.availablePeriodFrom = availableRange.start_date;
- this.availablePeriodTo = availableRange.end_date; }
+ // if (localStorage.getItem('report_period')) {
+ // const availableRange =
JSON.parse(localStorage.getItem('report_period'));
+ // this.availablePeriodFrom = availableRange.start_date;
+ // this.availablePeriodTo = availableRange.end_date;
+ // } else {
+
+ // }
this.subscriptions.add(this.healthStatusService.statusData.pipe(skip(1)).subscribe(result
=> {
this.healthStatus = result;
}));
+ this.setInitDatapickerConfig();
}
ngAfterViewInit() {
this.clearRangePicker();
}
+ private setInitDatapickerConfig() {
+ const labels =
<NodeListOf<Element>>document.querySelectorAll('.label-txt');
+ const rangeLabels =
<NodeListOf<Element>>document.querySelectorAll('.value-txt');
+ labels[0].innerHTML = 'From date';
+ labels[1].innerHTML = 'To date';
+ for (let label = 0; label < rangeLabels.length; ++label) {
+ rangeLabels[label].classList.add('untouched');
+ rangeLabels[label].classList.add('d-none');
+ }
+ }
+
setDateRange() {
const availableRange = JSON.parse(localStorage.getItem('report_period'));
-
this.availablePeriodFrom = availableRange.start_date;
this.availablePeriodTo = availableRange.end_date;
}
clearRangePicker(): void {
- const rangeLabels =
<NodeListOf<Element>>document.querySelectorAll('.value-txt');
-
- for (let label = 0; label < rangeLabels.length; ++label)
- rangeLabels[label].classList.add('untouched');
+ this.setInitDatapickerConfig();
}
onChange(dateRange: string): void {
@@ -94,7 +105,11 @@ export class ToolbarComponent implements OnInit,
AfterViewInit {
for (let label = 0; label < rangeLabels.length; ++label)
if (rangeLabels[label].classList.contains('untouched')) {
rangeLabels[label].classList.remove('untouched');
+ rangeLabels[label].classList.remove('d-none');
}
+ const labels =
<NodeListOf<Element>>document.querySelectorAll('.label-txt');
+ labels[0].innerHTML = 'From:';
+ labels[1].innerHTML = 'To:';
const reportDateRange = dateRange.split('-');
this.setRangeOption.emit({
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 bb769aa..c1e3be4 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>
@@ -190,7 +190,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/exploratory/cost-details-dialog/cost-details-dialog.component.html
b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.html
index 17fe71a..d916d94 100644
---
a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.html
+++
b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.html
@@ -33,7 +33,7 @@
</table>
<div class="billing-detail content-box">
<mat-list>
- <mat-list-item class="list-header">
+ <mat-list-item class="list-header" [ngClass]="{'pr-3':
notebook.billing.report_lines.length > 6}">
<div class="resource-name ellipsis" [ngClass]="{
'wide-name-field' : provider === 'azure' }">Name</div>
<div class="service">Product</div>
<!-- <div class="resource-type" *ngIf="provider ===
'aws'">Type</div>-->
@@ -55,6 +55,7 @@
<div class="cost-currency">{{ item.cost }} {{ item.currency
}}</div>
</mat-list-item>
</div>
+
</mat-list>
<div class="total">
<strong>Total: </strong>{{ notebook.cost }} {{
notebook.currency_code }}</div>
diff --git
a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.scss
b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.scss
index 18998ea..a9d081a 100644
---
a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.scss
+++
b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/cost-details-dialog/cost-details-dialog.component.scss
@@ -67,14 +67,13 @@
}
}
-
.scrolling-content {
max-height: 285px;
overflow-y: auto;
}
.mat-list-item-content {
- font-size: 15px !important;
+ font-size: 14px !important;
justify-content: space-between;
}
diff --git
a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html
b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html
index 53dbd23..27c98f1 100644
---
a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html
+++
b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.html
@@ -65,6 +65,7 @@
[formControl]="libSearch"
#trigger="matAutocompleteTrigger"
(keyup.enter)="addLibrary(lib)"
+ class="library-input"
>
</div>
<mat-autocomplete #auto="matAutocomplete" class="suggestions" >
@@ -95,7 +96,14 @@
<div class="control-group control-select">
<label class="label">Library version</label>
<div class="control control-relative">
- <input type="text" [placeholder]="'Enter library version
(optional)'" [(ngModel)]="lib.version" [disabled]="!lib.name"
(keyup.enter)="addLibrary(lib)">
+ <input
+ type="text"
+ class="library-input"
+ [placeholder]="'Enter library version (optional)'"
+ [(ngModel)]="lib.version"
+ [disabled]="!lib.name"
+ (keyup.enter)="addLibrary(lib)"
+ >
<span class="plus-icon"
[ngClass]="{'not-allow': !this.selectedLib ||
this.selectedLib?.isInSelectedList}"
matTooltip="Library is in selected list"
matTooltipPosition="above"
[matTooltipDisabled]="!this.selectedLib?.isInSelectedList"
@@ -114,7 +122,7 @@
<span class="other-message" *ngIf="lib.name?.length &&
!this.selectedLib">groupId:artifactId:versionId</span>
<input
type="text" [placeholder]="'Enter library name in
<groupId>:<artifactId>:<versionId> format'"
-
+ class="library-input"
[disabled]="!group"
[matAutocomplete]="auto"
[formControl]="libSearch"
@@ -231,8 +239,6 @@
</div>
</div>
-
-
<div class="libs-info">
<mat-list>
<mat-list-item class="list-header">
@@ -273,11 +279,17 @@
</mat-list-item>
<ng-container *ngIf="filtered" >
- <mat-list-item class="lib-col filter-row">
- <th class="lib-name lib-input">
- <input placeholder="Filter by library name"
[value]="filterModel.name" (input)="filterModel.name = $event.target['value']"
type="text" class="form-control filter-field "/>
+ <mat-list-item class="filter-row">
+ <th class="lib-name filter-col">
+ <input
+ placeholder="Filter by library name"
+ [value]="filterModel.name"
+ (input)="filterModel.name = $event.target['value']"
+ type="text"
+ class="form-control filter-field"
+ />
</th>
- <th class="lib-group lib-col">
+ <th class="lib-group filter-col">
<multi-select-dropdown
(selectionChange)="onFilterUpdate($event)"
[items]="this.filterConfiguration.group"
@@ -286,7 +298,7 @@
>
</multi-select-dropdown>
</th>
- <th class="lib-destination lib-col">
+ <th class="lib-destination filter-col">
<multi-select-dropdown
(selectionChange)="onFilterUpdate($event)"
[items]="this.filterConfiguration.resource"
@@ -295,7 +307,7 @@
>
</multi-select-dropdown>
</th>
- <th class="lib-resource-type lib-col">
+ <th class="lib-resource-type filter-col">
<multi-select-dropdown
(selectionChange)="onFilterUpdate($event)"
[items]="this.filterConfiguration.resourceType"
@@ -304,12 +316,13 @@
>
</multi-select-dropdown>
</th>
- <th class="lib-status lib-col">
+ <th class="lib-status filter-col">
<multi-select-dropdown
(selectionChange)="onFilterUpdate($event)"
[items]="this.filterConfiguration.status"
[type]="'status'"
- [model]="this.filterModel.status">
+ [model]="this.filterModel.status"
+ >
</multi-select-dropdown>
</th>
<ng-container matColumnDef="action-filter" stickyEnd>
diff --git
a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss
b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss
index 48ed412..2b95c0b 100644
---
a/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss
+++
b/services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/install-libraries.component.scss
@@ -90,12 +90,15 @@
.mat-list-item {
height: auto !important;
+ font-family: "Open Sans", sans-serif;
+ font-weight: 400;
.mat-list-item-content {
height: auto !important;
min-height: 54px !important;
border-bottom: 1px solid #edf1f5;
padding-right: 10px;
+ padding-left: 0;
}
}
@@ -111,17 +114,34 @@
.uploading {
margin: 0 auto;
}
+
+ .list-selected {
+ padding: 10px;
+ font-family: 'Open Sans', sans-serif;
+ height: 130px;
+ overflow-y: auto;
+
+ h4 {
+ margin-bottom: 20px;
+ font-size: 14px;
+ text-align: center;
+ font-weight: 400;
+ color: #718ba6;
+ }
+
+ mat-chip-list .mat-chip-list-wrapper {
+ overflow-y: auto;
+ padding: 3px;
+ }
+ }
}
+
.list-item{
display: flex;
width: 100%;
padding-left: 20px;
}
-.mat-list-base {
- //padding: 40px 30px;
-}
-
.object {
width: 70%;
display: flex;
@@ -132,6 +152,7 @@
.size {
width: 30%;
}
+
.scrolling-content.delete-list {
max-height: 200px;
overflow-y: auto;
@@ -142,7 +163,7 @@
width: 100%;
justify-content: center;
color: #35afd5;
- padding: 15px;
+ padding: 14px;
}
ul.resources{
@@ -150,8 +171,6 @@ ul.resources{
}
.dependency-list-header {
- //border-top: 1px solid #edf1f5;
- //border-bottom: 1px solid #edf1f5;
color: #577289;
width: 100%;
padding: 15px 0 5px 0;
@@ -202,7 +221,13 @@ ul.resources{
width: 70%;
input{
+ font-size: 15px;
+ padding-left: 15px;
+ }
+
+ .dropdown-list button {
font-size: 14px;
+ padding-top: 0;
}
}
@@ -298,29 +323,9 @@ ul.resources{
}
}
-.list-selected {
- padding: 10px;
- font-family: 'Open Sans', sans-serif;
- height: 130px;
- overflow-y: auto;
-
- h4 {
- margin-bottom: 20px;
- font-size: 14px;
- text-align: center;
- font-weight: 400;
- color: #718ba6;
- }
-
- mat-chip-list .mat-chip-list-wrapper {
- overflow-y: auto;
- padding: 3px;
- }
-}
-
.mat-list-item {
color: #718ba6 !important;
- font-size: 14px;
+ font-size: 13px !important;
font-weight: 300;
}
@@ -343,7 +348,20 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
padding: 0 20px;
display: flex;
flex: 1 1 auto;
- min-height: 0px;
+ min-height: 0;
+
+ .filter-row {
+ .filter-col{
+ padding-left: 0;
+ &.lib-name{
+ padding-left: 5px;
+ .filter-field{
+ padding-left: 15px;
+ }
+ }
+ }
+ }
+
.mat-list {
width: 100%;
@@ -352,7 +370,7 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
max-height: 300px;
height: 80%;
overflow-y: auto;
- overflow-x: hidden;
+ overflow-x: overlay;
.info {
p {
@@ -362,8 +380,11 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
}
}
}
+
.lib-name {
width: 27%;
+ padding-right: 10px;
+ padding-left: 20px;
&-col{
display: flex;
@@ -383,21 +404,26 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
.lib-group,
.lib-destination {
width: 17%;
- padding-left: 6px;
+ padding-left: 15px;
+ padding-right: 10px;
}
.lib-status {
width: 17%;
- padding-left: 6px;
+ padding-left: 15px;
+ padding-right: 10px;
}
.lib-resource-type {
width: 17%;
- padding-left: 6px;
+ padding-left: 15px;
+ padding-right: 10px;
}
+
.lib-group-col {
width: 17%;
- padding-left: 8px;
+ padding-left: 17px;
+ padding-right: 10px;
}
.st-group {
@@ -411,20 +437,19 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
.lib-destination-col {
width: 33.3%;
- padding-left: 8px;
+ padding-left: 15px;
}
.lib-resource-type-col {
width: 33.3%;
color: #36afd5;
- padding-left: 8px;
+ padding-left: 15px;
}
.lib-status-col {
position: relative;
width: 33.3%;
- padding-left: 8px;
-
+ padding-left: 15px;
.warn-action {
position: absolute;
@@ -467,15 +492,18 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
padding-bottom: 3px;
}
-.mat-dialog-container.mat-dialog-container .install-libraries#dialog-box {
+.mat-dialog-container.mat-dialog-container .install-libraries#dialog-box {
.mat-header-cell{
padding: 0;
border: none;
+ position: absolute;
+ right: 10px;
}
.filter-actions {
display: flex;
margin-left: 6px;
+
.btn {
padding: 6px;
height: auto;
@@ -486,6 +514,7 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
display: flex;
}
}
+
.reset{
&:hover {
border-color: #f1696e;
@@ -493,6 +522,7 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
color: #f1696e;
}
}
+
.apply:hover {
border-color: #49af38;
background: #f9fafb;
@@ -502,8 +532,10 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
}
.install-libraries .dropdown-multiselect .list-menu li {
+
a{
font-size: 13px;
+
&.list-item{
color: #4a5c89 !important;
}
@@ -542,12 +574,14 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
.lib-info{
width: 100%;
+
.delete-item {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 5px 10px;
+
.butt.action{
line-height: 26px;
}
@@ -556,6 +590,7 @@ mat-chip.mat-chip:not(.mat-basic-chip) {
.btn{
line-height: 26px;
+
&.install-btn{
margin-left: 0;
}
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..0549cb7 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,157 +153,201 @@ 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;
+ }
-tr.detail-row {
- height: 0;
-}
+ .element-diagram {
+ min-width: 80px;
+ border: 2px solid black;
+ padding: 8px;
+ font-weight: lighter;
+ margin: 8px 0;
+ height: 104px;
+ }
-.element-diagram {
- min-width: 80px;
- border: 2px solid black;
- padding: 8px;
- font-weight: lighter;
- margin: 8px 0;
- height: 104px;
-}
+ .element-symbol {
+ font-weight: bold;
+ font-size: 40px;
+ line-height: normal;
+ }
-.element-symbol {
- font-weight: bold;
- font-size: 40px;
- line-height: normal;
-}
+ .element-description {
+ padding: 16px;
+ }
-.element-description {
- padding: 16px;
-}
+ .element-description-attribution {
+ opacity: 0.5;
+ }
-.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 {
- vertical-align: top;
-}
+ .dashboard_table tr th span {
+ width: 50px;
+ text-align: center;
+ height: 100%;
+ line-height: 40px;
+ }
-.dashboard_table tr th span {
- width: 50px;
- text-align: center;
- height: 100%;
- line-height: 40px;
-}
+ .dashboard_table tr td {
+ font-size: 13px;
+ padding: 20px 15px 16px;
+ }
-.dashboard_table tr td {
- font-size: 14px;
- padding: 20px 15px 16px;
-}
+ .dashboard_table tr td,
+ .dashboard_table tr th {
+ border: 1px solid #d5dfea;
+ text-align: left;
+ }
-.dashboard_table tr td,
-.dashboard_table tr th {
- border: 1px solid #d5dfea;
- text-align: left;
-}
+ .dashboard_table tr td:last-child {
+ text-align: center;
+ }
-.dashboard_table tr td:last-child {
- text-align: center;
-}
+ .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_body td:first-child {
- background: #f3fbfd;
- color: #455c74;
- font-weight: 600;
- font-size: 16px;
- cursor: pointer;
- overflow: hidden;
- text-overflow: ellipsis;
-}
+ .dashboard_table tr:nth-child(2n + 1) {
+ background: #f9fafb;
+ }
-.dashboard_table tr:nth-child(2n + 1) {
- background: #f9fafb;
-}
+ .dashboard_table tr.filter-row td {
+ padding: 10px;
+ }
-.dashboard_table tr.filter-row td {
- padding: 10px;
-}
+ .dashboard_table tr.filter-row td:first-child {
+ font-weight: 400;
+ }
-.dashboard_table tr.filter-row td:first-child {
- font-weight: 400;
-}
+ .dashboard_table tr.filter-row td:last-child {
+ padding: 10px 0;
+ }
-.dashboard_table tr.filter-row td:last-child {
- padding: 10px 0;
-}
+ .dashboard_table tr:nth-child(2n + 1) td:first-child {
+ background: #edf6f9;
+ }
-.filter-row .actions {
- text-align: right;
- display: flex;
- justify-content: flex-end;
-}
+ .dashboard_table th {
+ background: #a1b7d1;
+ color: #fff;
+ font-weight: 600;
+ line-height: 40px;
+ text-transform: uppercase;
+ padding-left: 12px;
+ font-size: 13px;
+ }
-.filter-row .actions button {
- background: #fff;
- border-color: #35afd5;
- color: #35afd5;
- outline: none;
-}
+ &.data-grid .status {
+ text-transform: capitalize;
+ }
-.filter-row .actions .reset:hover {
- border-color: #f1696e;
- background: #f9fafb;
- color: #f1696e;
-}
+ .message_block td {
+ text-align: left !important;
+ }
-.filter-row .actions .apply:hover {
- border-color: #49af38;
- background: #f9fafb;
- color: #49af38;
-}
+ &.data-grid .total_cost {
+ float: left;
+ display: inline-block;
+ color: #455c74;
+ }
-.dashboard_table tr:nth-child(2n + 1) td:first-child {
- background: #edf6f9;
-}
+ .currency_details {
+ color: #35afd5;
+ cursor: pointer;
+ transition: all 0.45s ease-in-out;
+ padding-left: 10px;
+ }
-.dashboard_table th {
- background: #a1b7d1;
- color: #fff;
- font-weight: 600;
- line-height: 40px;
- text-transform: uppercase;
- padding-left: 12px;
- font-size: 12px;
-}
+ .currency_details:hover {
+ color: #3392b0;
+ }
-.data-grid .status {
- text-transform: capitalize;
+ .currency_details .material-icons {
+ font-size: 18px;
+ }
+
+ .mat-icon-button .mat-icon,
+ .mat-icon-button i {
+ line-height: 42px;
+ font-size: 18px;
+ }
+
+ .info {
+ padding: 40px;
+ text-align: center;
+ }
+
+ .content-row{
+ background-clip: padding-box;
+ }
+
+ .not-allow{
+ cursor: not-allowed !important;
+ }
}
.data-grid .list-menu {
@@ -299,7 +356,7 @@ tr.detail-row {
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);
+ 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;
}
@@ -307,8 +364,9 @@ tr.detail-row {
.settings {
position: relative;
text-align: right;
- min-width: 7%;
+ width: 6%;
padding-right: 15px !important;
+ justify-content: flex-end;
.actions {
background-image: url(../../../assets/svg/settings_icon.svg);
@@ -328,7 +386,7 @@ tr.detail-row {
.data-grid .list-menu li {
- font-size: 14px;
+ font-size: 13px;
border-bottom: 1px solid #edf1f5;
padding-bottom: 5px;
cursor: pointer;
@@ -374,46 +432,4 @@ tr.detail-row {
background: #edf6f9;
}
-.message_block td {
- text-align: left !important;
-}
-
-.data-grid .total_cost {
- display: inline-block;
- width: 70%;
- color: #455c74;
-}
-.currency_details {
- float: right;
- color: #35afd5;
- cursor: pointer;
- transition: all 0.45s ease-in-out;
-}
-
-.currency_details:hover {
- color: #3392b0;
-}
-
-.currency_details .material-icons {
- font-size: 18px;
-}
-
-.mat-icon-button .mat-icon,
-.mat-icon-button i {
- line-height: 42px;
- font-size: 18px;
-}
-
-.info {
- padding: 40px;
- text-align: center;
-}
-
-.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/dropdowns.component.scss
b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdowns.component.scss
index a177f5c..ad90694 100644
---
a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdowns.component.scss
+++
b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdowns.component.scss
@@ -28,8 +28,9 @@
min-width: 100%;
background: #fff;
padding-left: 15px;
- font-size: 14px;
- // height: 34px;
+ font-size: 13px;
+ padding-top: 1px;
+ height: 34px;
text-align: left;
white-space: nowrap;
cursor: pointer;
@@ -68,7 +69,7 @@
span {
color: #999;
font-weight: 300;
- display: inline-block;
+ //display: inline-block;
max-width: 80%;
}
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 a066dd5..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
@@ -29,8 +29,8 @@
width: 100%;
background: #fff;
padding-left: 15px;
- font-size: 14px;
- // height: 34px;
+ font-size: 13px;
+ height: 34px;
text-align: left;
white-space: nowrap;
cursor: pointer;
@@ -76,6 +76,7 @@
.selected-items {
color: #4a5c89;
max-width: 477px;
+ padding-top: 5px;
}
}
}
diff --git
a/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
b/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
index c00dd14..71ca6da 100644
---
a/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
+++
b/services/self-service/src/main/resources/webapp/src/assets/styles/_dialogs.scss
@@ -374,6 +374,11 @@ mat-dialog-container {
height: 30px;
}
+.mat-list-item{
+ font-family: "Open Sans", sans-serif;
+ font-weight: 400;
+}
+
.d-none{
display: none !important;
}
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 121fe6e..50aeed8 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
@@ -30,11 +30,14 @@ body.modal-open {
}
.alignleft, .al {float: left}
-.alignright, .ar {float: right}
+.alignright, .ar {float: right; left: 26px; z-index: 1010}
.aligncenter, .ac {margin-left: auto;margin-right: auto}
.mt-5 {margin-top: 5px}
+
+.pr-3{padding-right: 3pxr7}
+
.pb-50 {padding-bottom: 50px;}
.txt-r {text-align: right }
@@ -174,3 +177,7 @@ input[type=file],
input[type=file]::-webkit-file-upload-button {
cursor: pointer;
}
+
+.refresh-icon{
+ color: #35afd5;
+}
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 92a7349..fe8df93 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
@@ -28,6 +28,9 @@
font-size: 15px;
font-family: 'Open Sans', sans-serif;
color: #577289;
+ &[disabled]{
+ box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14),
0 1px 5px 0 rgba(0,0,0,.12);
+ }
i {
margin: 0 5px 0 0;
@@ -474,7 +477,7 @@ span.mat-slide-toggle-content {
position: relative;
cursor: pointer;
&.header-checkbox{
- margin-top: 13px;
+ margin-top: 7px;
float: left;
}
&.checked {
@@ -742,17 +745,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;
@@ -797,3 +815,130 @@ mat-progress-bar {
border-bottom: none !important;
}
+/* daterangepicker themes */
+#range-picker {
+ display: flex;
+ justify-content: center;
+}
+
+#range-picker path#Shape {
+ fill: #36afd5;
+}
+
+#range-picker .ng-daterangepicker,
+#range-picker .ng-daterangepicker.is-active,
+#range-picker .ng-daterangepicker .calendar {
+ border: none;
+ border-radius: 0;
+ box-shadow: none;
+}
+
+#range-picker .ng-daterangepicker .calendar::after {
+ border-top: 1px solid rgba(234, 234, 234, 0.64);
+ border-left: 1px solid rgba(234, 234, 234, 0.64);
+}
+
+#range-picker .ng-daterangepicker .calendar .side-container .side-button {
+ background: #fff;
+ color: #718ba6;
+ border: none;
+ border-radius: 0px;
+
+}
+
+#range-picker .ng-daterangepicker .calendar .side-container
.side-button.is-active,
+#range-picker .ng-daterangepicker .input-section .label-txt {
+ color: #35afd5;
+ display: unset;
+ font-size: 13px;
+}
+
+#range-picker .ng-daterangepicker .calendar .calendar-container
.day-num.is-active,
+#range-picker .ng-daterangepicker .calendar .calendar-container .days
.day-num:hover {
+ background: #35afd5;
+ background-clip: padding-box;
+
+}
+
+#range-picker .ng-daterangepicker .calendar .calendar-container .day-names,
+#range-picker .ng-daterangepicker .calendar .calendar-container .days {
+ width: 310px;
+}
+
+#range-picker .ng-daterangepicker .calendar
.day.is-within-range.is-first-weekday,
+#range-picker .ng-daterangepicker .calendar
.day.is-within-range.is-last-weekday {
+ background-clip: padding-box;
+}
+
+#range-picker .ng-daterangepicker .calendar .calendar-container
.day.is-within-range {
+ background: #e9f8fc
+}
+
+#range-picker .ng-daterangepicker .input-section .cal-icon svg path {
+ fill: #35afd5;
+}
+
+#range-picker .ng-daterangepicker .input-section .value-txt {
+ color: #718ba6;
+ display: unset;
+ padding-left: 5px;
+}
+
+#range-picker .ng-daterangepicker .input-section .value-txt.untouched,
+#range-picker .ng-daterangepicker .input-section .label-txt.untouched {
+ color: #fff;
+}
+
+//#range-picker .ng-daterangepicker .input-section .value-txt.untouched::after
{
+// content: 'date';
+// position: absolute;
+// top: 9px;
+// left: 61px;
+// 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;
+ display: flex;
+ justify-content: space-between;
+
+
+ .d-none{
+ display: none;
+ }
+
+ .input-section {
+ height: 37px;
+ padding-right: 30px;
+ width: 175px;
+ box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0
1px 5px 0 rgba(0,0,0,.12);
+ }
+}
+
+
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 ed038e7..e0d909d 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: [email protected]
For additional commands, e-mail: [email protected]
