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 6c0c705907670d5763e806bd6454db5fde2eac99 Author: Dmytro_Gnatyshyn <[email protected]> AuthorDate: Fri Jul 24 16:20:29 2020 +0300 [DLAB-1943]: Set of UI fixes --- .../management/management.component.html | 2 +- .../administration/project/project.component.html | 2 +- .../audit/audit-grid/audit-grid.component.html | 4 +- .../audit/audit-grid/audit-grid.component.scss | 58 ++++++++++++++------- .../audit-toolbar/audit-toolbar.component.html | 4 +- .../audit-toolbar/audit-toolbar.component.scss | 4 +- .../reporting-grid/reporting-grid.component.html | 10 ++-- .../reporting-grid/reporting-grid.component.scss | 59 +++++++++++++--------- .../reporting/toolbar/toolbar.component.html | 2 +- .../reports/reporting/toolbar/toolbar.component.ts | 12 +---- .../webapp/src/assets/styles/_general.scss | 4 ++ .../resources/webapp/src/assets/styles/_theme.scss | 17 +++++-- 12 files changed, 111 insertions(+), 67 deletions(-) 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.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 7600a2d..28b7607 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 @@ -59,9 +59,9 @@ </i> </button> </th> - <td mat-cell *matCellDef=" let element"> + <td mat-cell *matCellDef=" let element" class="th_action"> <div class="action-wrapper"> - <span>{{element.action | convertaction }}</span> + <span class="ellipsis">{{element.action | convertaction }}</span> <div class="audit-info" (click)="openActionInfo(element)" *ngIf="element.info"> <i class="material-icons">info</i> </div> 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 4932188..740f2cf 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 @@ -39,7 +39,9 @@ .th_action { width: 11%; z-index: 8 !important; - .label{ + max-width: 250px; + + .label { padding-bottom: 10px; } } @@ -47,27 +49,28 @@ .th_date { width: 14%; z-index: 10 !important; - .label{ + + .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; } @@ -83,7 +86,7 @@ td { font-size: 13px; - padding-left: 15px; + padding-left: 20px; &.info { z-index: 1 !important; @@ -229,10 +232,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; @@ -254,37 +263,48 @@ } } -.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{ +.audit-user { padding-left: 15px; } -.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-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 a3fdc65..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,3 +62,5 @@ section.toolbar { } } + + 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 9ca9f57..98b46d8 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 @@ -16,8 +16,7 @@ ~ specific language governing permissions and limitations ~ under the License. --> - -<section class="table-wrapper"> +<section class="table-wrapper" id="scrolling"> <!-- <div class="navigation-btn">--> <!-- <div class="left">--> @@ -179,6 +178,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"> @@ -257,7 +261,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> 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 83852c3..5534444 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,18 +17,40 @@ * 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: relative; + //position: relative; //z-index: 101; + overflow: auto; + transform:rotateX(180deg); } .reporting { - position: relative; + //position: relative; width: 100%; min-width: 1100px; overflow: auto; border-collapse: inherit; + transform:rotateX(180deg); .mat-cell { vertical-align: middle; @@ -68,11 +90,11 @@ &.header-row { th { - font-size: 11px; - text-align: center; + .label{ padding-left: 0; position: relative; + font-size: 13px; } } } @@ -95,7 +117,7 @@ } .service{ - width: 12%; + width: 10%; } .tags { @@ -131,8 +153,8 @@ } .th_type { - width: 10%; - min-width: 150px; + width: 12%; + min-width: 170px; z-index: 12 !important; } @@ -195,7 +217,12 @@ .sort{ position: absolute; - bottom: 3px; + bottom: 2px; + + &-user, + &-project{ + right: -15px; + } &-arrow{ width: 6px; @@ -268,27 +295,13 @@ } } -.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; + position: absolute; right: 0; } - .mat-fab{ - background-color: transparent; - } -} @media screen and (max-width: 1280px) { .dashboard_table.reporting { 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.ts b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/toolbar/toolbar.component.ts index b9e9908..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 @@ -72,11 +72,10 @@ export class ToolbarComponent implements OnInit, AfterViewInit { this.healthStatus = result; })); this.setInitDatapickerConfig(); - // this.clearRangePicker(); } ngAfterViewInit() { - // this.clearRangePicker(); + this.clearRangePicker(); } private setInitDatapickerConfig() { @@ -85,20 +84,13 @@ export class ToolbarComponent implements OnInit, AfterViewInit { 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('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; } 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 032f0cd..c278ea0 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 @@ -174,3 +174,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 a709cdd..c9d31cd 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; @@ -791,7 +794,8 @@ mat-progress-bar { /* daterangepicker themes */ #range-picker { - margin-top: 5px; + display: flex; + justify-content: center; } #range-picker path#Shape { @@ -803,7 +807,7 @@ mat-progress-bar { #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); + box-shadow: none; } #range-picker .ng-daterangepicker .calendar::after { @@ -816,7 +820,7 @@ mat-progress-bar { 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, @@ -872,7 +876,10 @@ mat-progress-bar { #range-picker .ng-daterangepicker { height: 37px; - width: 350px; + width: 360px; + display: flex; + justify-content: space-between; + .d-none{ display: none; @@ -881,6 +888,8 @@ mat-progress-bar { .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); } } --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
