You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by dg...@apache.org on 2020/07/28 14:49:32 UTC
[incubator-dlab] 04/10: [DLAB-1943]: Set of UI fixes
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 <di...@ukr.net>
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: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org