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 6d307dac7dd5f749a8bcb9f3e3145181271a4958 Author: Dmytro_Gnatyshyn <[email protected]> AuthorDate: Mon Jul 20 10:23:25 2020 +0300 [DLAB-1943]: Changed style on billing page --- .../audit/audit-grid/audit-grid.component.html | 64 +++++++++------ .../audit/audit-grid/audit-grid.component.scss | 14 ++-- .../audit/audit-grid/audit-grid.component.ts | 5 +- .../audit-toolbar/audit-toolbar.component.scss | 95 --------------------- .../audit/audit-toolbar/audit-toolbar.component.ts | 32 +++----- .../src/app/reports/audit/audit.component.ts | 8 +- .../reporting-grid/reporting-grid.component.html | 51 ++++++++++-- .../reporting-grid/reporting-grid.component.scss | 66 +++++++++++---- .../reporting-grid/reporting-grid.component.ts | 4 +- .../reporting/toolbar/toolbar.component.scss | 77 ----------------- .../reports/reporting/toolbar/toolbar.component.ts | 41 +++++++-- .../shared/form-controls/dropdowns.component.scss | 7 +- .../multi-level-select-dropdown.component.scss | 6 +- .../webapp/src/assets/styles/_general.scss | 2 +- .../resources/webapp/src/assets/styles/_theme.scss | 96 ++++++++++++++++++++++ 15 files changed, 301 insertions(+), 267 deletions(-) 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..7600a2d 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 @@ -20,8 +20,22 @@ <section class="audit-table-wrapper"> <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"> + <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="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..4932188 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 @@ -33,10 +33,12 @@ tr { .th_user { width: 19%; + z-index: 9 !important; } .th_action { width: 11%; + z-index: 8 !important; .label{ padding-bottom: 10px; } @@ -44,6 +46,7 @@ .th_date { width: 14%; + z-index: 10 !important; .label{ padding-bottom: 10px; } @@ -51,18 +54,22 @@ .th_project{ width: 11%; + z-index: 7 !important; } .th_resource{ width: 14%; + z-index: 5 !important; } .th_resource-type{ width: 14%; + z-index: 6 !important; } .th_buttons{ width: 6%; + z-index: 4 !important; } th { @@ -239,15 +246,12 @@ .dropdown-multiselect { button { - font-size: 14px; + font-size: 13px; height: 34px; padding: 7px 20px; } } } - .user-col{ - padding-left: 5px; - } } .selected-items-wrapper{ @@ -277,7 +281,7 @@ } .audit-user{ - padding-left: 19px; + padding-left: 15px; } .table-footer{ 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.scss b/services/self-service/src/main/resources/webapp/src/app/reports/audit/audit-toolbar/audit-toolbar.component.scss index 50fdda3..a3fdc65 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 @@ -62,98 +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; - 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; -} - -#range-picker .ng-daterangepicker { - height: 37px; - width: 350px; - - .d-none{ - display: none; - } - - .input-section { - height: 37px; - padding-right: 30px; - } - -} 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 3e14abe..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,45 +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; - // })); - const rangeLabels = <NodeListOf<Element>>document.querySelectorAll('.value-txt'); + this.setInitDatapickerConfig(); + } + + ngAfterViewInit() { + this.clearRangePicker(); + } + + private setInitDatapickerConfig() { const labels = <NodeListOf<Element>>document.querySelectorAll('.label-txt'); - const addedText = document.createTextNode('From date'); + 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'); } } - ngAfterViewInit() { - this.clearRangePicker(); - } - 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'); - console.log('remove'); + } 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('d-none'); - } - for (let label = 0; label < rangeLabels.length; ++label) - rangeLabels[label].classList.add('untouched'); + this.setInitDatapickerConfig(); } onChange(dateRange: string): void { 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..9ca9f57 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 @@ -18,6 +18,19 @@ --> <section class="table-wrapper"> + +<!-- <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 +49,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 +71,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 +160,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"> @@ -200,6 +229,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)" 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..83852c3 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 @@ -19,10 +19,12 @@ .table-wrapper { width: 100%; - + position: relative; + //z-index: 101; } .reporting { + position: relative; width: 100%; min-width: 1100px; overflow: auto; @@ -35,15 +37,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; @@ -67,8 +69,10 @@ &.header-row { th { font-size: 11px; + text-align: center; .label{ padding-left: 0; + position: relative; } } } @@ -77,6 +81,7 @@ .th_shape { width: 10%; min-width: 150px; + z-index: 10 !important; } .th_user, @@ -85,10 +90,14 @@ .tags { width: 15%; min-width: 150px; - overflow: hidden; + //overflow: hidden; word-wrap: break-word; } + .service{ + width: 12%; + } + .tags { .label { padding-top: 0; @@ -97,25 +106,40 @@ .service { min-width: 175px; + z-index: 9 !important; } .env_name { width: 16%; min-width: 200px; + z-index: 15 !important; + } + + .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; + z-index: 12 !important; } .th_status { width: 8%; min-width: 150px; + z-index: 11 !important; } .th_charges { @@ -128,10 +152,6 @@ } } - .th_project { - min-width: 150px; - } - .tags-col { padding: 5px; @@ -175,7 +195,7 @@ .sort{ position: absolute; - bottom: 20px; + bottom: 3px; &-arrow{ width: 6px; @@ -248,6 +268,28 @@ } } +.navigation-btn{ + top: 50%; + display: flex; + justify-content: space-between; + align-items: center; + z-index: 2000; + position: absolute; + left: 0; + right: 0; + width: inherit; + .left { + } + + .right { + position: sticky; + right: 0; + } + .mat-fab{ + background-color: transparent; + } +} + @media screen and (max-width: 1280px) { .dashboard_table.reporting { .env_name, @@ -261,10 +303,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.scss b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.scss index 0eabe23..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,80 +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 { - display: unset; - 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: '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..b9e9908 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,50 @@ 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(); + // this.clearRangePicker(); } ngAfterViewInit() { - this.clearRangePicker(); + // 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')); + 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,7 +113,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/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..13306bb 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; @@ -69,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/assets/styles/_general.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_general.scss index 121fe6e..032f0cd 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,7 +30,7 @@ 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} 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 2500caf..a709cdd 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 @@ -789,3 +789,99 @@ mat-progress-bar { border-bottom: none !important; } +/* 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; + 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; +//} + +#range-picker .ng-daterangepicker { + height: 37px; + width: 350px; + + .d-none{ + display: none; + } + + .input-section { + height: 37px; + padding-right: 30px; + } +} + + --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
