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