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 ad630d65818ac4c3ba81a140448ab735f4456d03 Author: Dmytro_Gnatyshyn <[email protected]> AuthorDate: Tue Jul 28 16:21:35 2020 +0300 [DLAB-1943]: Fixed detail billing list, project-list and environment menegment --- .../audit/audit-grid/audit-grid.component.scss | 5 +- .../reporting-grid/reporting-grid.component.scss | 3 +- .../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.scss | 164 ++++++++++----------- .../webapp/src/assets/styles/_dialogs.scss | 5 + .../webapp/src/assets/styles/_general.scss | 3 + 9 files changed, 197 insertions(+), 139 deletions(-) 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 740f2cf..0ec3d4c 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 @@ -49,6 +49,7 @@ .th_date { width: 14%; z-index: 10 !important; + padding-left: 0; .label { padding-bottom: 10px; @@ -199,7 +200,7 @@ vertical-align: super !important; .text { - padding-left: 15px; + padding-left: 20px; } } @@ -301,7 +302,7 @@ } .audit-user { - padding-left: 15px; + padding-left: 20px; } .table-footer { 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 5534444..c2d23d1 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 @@ -135,6 +135,7 @@ width: 16%; min-width: 200px; z-index: 15 !important; + padding-left: 0; } .th_user{ @@ -211,7 +212,7 @@ vertical-align: super !important; .text{ - padding-left: 15px; + padding-left: 20px; } } 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 54f1d86..12319b3 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.scss b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss index 4d604c0..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 @@ -305,88 +305,6 @@ table.resources { text-transform: capitalize; } - &.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; - } - - .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; - } - - .disabled { - opacity: 0.4; - cursor: not-allowed; - pointer-events: none; - } - } - - - &.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; - } - } - - &.data-grid .list-menu a.navigate { - text-decoration: none; - color: #577289; - transition: all 0.45s ease-in-out; - } - - &.data-grid .list-menu li i { - font-size: 18px; - padding-right: 5px; - vertical-align: bottom; - } - - &.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:last-child { - border-bottom: 0; - } - - &.data-grid .list-menu ul { - margin-bottom: 0; - } - - &.data-grid .list-menu .active-items li { - border-bottom: 1px solid #edf1f5; - } - - &.data-grid .message_block { - background: #edf6f9; - } - .message_block td { text-align: left !important; } @@ -430,6 +348,88 @@ table.resources { .not-allow{ cursor: not-allowed !important; } +} + +.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; +} + +.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; + } + + .disabled { + opacity: 0.4; + cursor: not-allowed; + pointer-events: none; + } +} + +.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; + } } +.data-grid .list-menu a.navigate { + text-decoration: none; + color: #577289; + transition: all 0.45s ease-in-out; +} + +.data-grid .list-menu li i { + font-size: 18px; + padding-right: 5px; + vertical-align: bottom; +} + +.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:last-child { + border-bottom: 0; +} + +.data-grid .list-menu ul { + margin-bottom: 0; +} + +.data-grid .list-menu .active-items li { + border-bottom: 1px solid #edf1f5; +} + +.data-grid .message_block { + background: #edf6f9; +} + + 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 c278ea0..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 @@ -35,6 +35,9 @@ body.modal-open { .mt-5 {margin-top: 5px} + +.pr-3{padding-right: 3pxr7} + .pb-50 {padding-bottom: 50px;} .txt-r {text-align: right } --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
