This is an automated email from the ASF dual-hosted git repository. ytykhun pushed a commit to branch DATALAB-2347 in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit 3e9097233ef04ac01b42595fe4bbefbd864e728b Author: Yurii Tykhun <[email protected]> AuthorDate: Tue Aug 10 10:58:19 2021 +0300 [DATALAB-2347] refactored shared components --- .../resources/webapp/src/app/app.routing.module.ts | 153 ++++++------ .../src/app/shared/bubble/bubble.component.css | 4 +- .../src/app/shared/bubble/bubble.component.ts | 15 +- .../dropdown-list/dropdown-list.component.html | 8 +- .../shared/form-controls/dropdowns.component.scss | 36 ++- .../multi-level-select-dropdown.component.html | 167 +++++++------ .../multi-level-select-dropdown.component.scss | 72 +++--- .../multi-level-select-dropdown.component.ts | 17 +- .../multi-select-dropdown.component.html | 51 ++-- .../inform-message/inform-message.component.css | 10 +- .../inform-message/inform-message.component.ts | 12 +- .../src/app/shared/navbar/navbar.component.html | 129 ++++++---- .../src/app/shared/navbar/navbar.component.scss | 56 ++--- .../src/app/shared/navbar/navbar.component.ts | 17 +- .../src/app/shared/time-picker/ticker.component.ts | 9 +- .../app/shared/time-picker/time-cover.component.ts | 2 +- .../shared/time-picker/time-picker.component.scss | 44 ++-- .../shared/time-picker/time-picker.component.ts | 20 +- .../src/app/webterminal/webterminal.component.ts | 3 +- .../webapp/src/assets/styles/_dialogs.scss | 139 +++++------ .../webapp/src/assets/styles/_general.scss | 161 +++++++----- .../resources/webapp/src/assets/styles/_reset.scss | 12 +- .../resources/webapp/src/assets/styles/_theme.scss | 271 ++++++++++----------- .../src/main/resources/webapp/src/styles.scss | 116 ++++----- 24 files changed, 827 insertions(+), 697 deletions(-) diff --git a/services/self-service/src/main/resources/webapp/src/app/app.routing.module.ts b/services/self-service/src/main/resources/webapp/src/app/app.routing.module.ts index d7990bd..d166b7d 100644 --- a/services/self-service/src/main/resources/webapp/src/app/app.routing.module.ts +++ b/services/self-service/src/main/resources/webapp/src/app/app.routing.module.ts @@ -38,77 +38,90 @@ import {ReportingComponent} from './reports/reporting/reporting.component'; import {OdahuComponent} from './administration/odahu/odahu.component'; import {AuditComponent} from './reports/audit/audit.component'; -const routes: Routes = [{ - path: 'login', - component: LoginComponent -}, { - path: '', - canActivate: [CheckParamsGuard], - component: LayoutComponent, - children: [ - { - path: '', - redirectTo: 'resources_list', - pathMatch: 'full' - }, { - path: 'resources_list', - component: ResourcesComponent, - canActivate: [AuthorizationGuard] - }, { - path: 'billing_report', - component: ReportingComponent, - canActivate: [AuthorizationGuard, CloudProviderGuard] - }, { - path: 'projects', - component: ProjectComponent, - canActivate: [AuthorizationGuard, AdminGuard], - }, - { - // path: 'odahu', - // component: OdahuComponent, - // canActivate: [AuthorizationGuard, AdminGuard], - // }, { - path: 'roles', - component: RolesComponent, - canActivate: [AuthorizationGuard, AdminGuard], - }, { - path: 'environment_management', - component: ManagementComponent, - canActivate: [AuthorizationGuard, AdminGuard] - }, { - path: 'configuration', - component: ConfigurationComponent, - canActivate: [AuthorizationGuard, AdminGuard, ProjectAdminGuard] - }, - { - path: 'swagger', - component: SwaggerComponent, - canActivate: [AuthorizationGuard] - }, { - path: 'help/publickeyguide', - component: PublicKeyGuideComponent, - canActivate: [AuthorizationGuard] - }, { - path: 'help/accessnotebookguide', - component: AccessNotebookGuideComponent, - canActivate: [AuthorizationGuard] - }, - { - path: 'audit', - component: AuditComponent, - canActivate: [AuthorizationGuard, AuditGuard], - }, - ] -}, { - path: 'terminal/:id/:endpoint', - component: WebterminalComponent -}, { - path: '403', - component: AccessDeniedComponent, - canActivate: [AuthorizationGuard] -}, { +const routes: Routes = [ + { + path: 'login', + component: LoginComponent + }, + { + path: '', + canActivate: [CheckParamsGuard], + component: LayoutComponent, + children: [ + { + path: '', + redirectTo: 'resources_list', + pathMatch: 'full' + }, + { + path: 'resources_list', + component: ResourcesComponent, + canActivate: [AuthorizationGuard] + }, + { + path: 'billing_report', + component: ReportingComponent, + canActivate: [AuthorizationGuard, CloudProviderGuard] + }, + { + path: 'projects', + component: ProjectComponent, + canActivate: [AuthorizationGuard, AdminGuard], + }, + { + // path: 'odahu', + // component: OdahuComponent, + // canActivate: [AuthorizationGuard, AdminGuard], + // }, { + path: 'roles', + component: RolesComponent, + canActivate: [AuthorizationGuard, AdminGuard], + }, + { + path: 'environment_management', + component: ManagementComponent, + canActivate: [AuthorizationGuard, AdminGuard] + }, + { + path: 'configuration', + component: ConfigurationComponent, + canActivate: [AuthorizationGuard, AdminGuard, ProjectAdminGuard] + }, + { + path: 'swagger', + component: SwaggerComponent, + canActivate: [AuthorizationGuard] + }, + { + path: 'help/publickeyguide', + component: PublicKeyGuideComponent, + canActivate: [AuthorizationGuard] + }, + { + path: 'help/accessnotebookguide', + component: AccessNotebookGuideComponent, + canActivate: [AuthorizationGuard] + }, + { + path: 'audit', + component: AuditComponent, + canActivate: [AuthorizationGuard, AuditGuard], + }, + ] + }, + { + path: 'terminal/:id/:endpoint', + component: WebterminalComponent + }, + { + path: '403', + component: AccessDeniedComponent, + canActivate: [AuthorizationGuard] + }, + { path: '**', component: NotFoundComponent -}]; + } +]; export const AppRoutingModule: ModuleWithProviders<RouterModule> = RouterModule.forRoot(routes, { useHash: true }); diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.css b/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.css index 331f715..0769b00 100644 --- a/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.css +++ b/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.css @@ -18,12 +18,12 @@ */ .bubble-up { + position: absolute; + display: none; width: 100%; background: #fff; border: none; - display: none; overflow: visible; - position: absolute; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px; diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.ts index 46d6d63..02e8dde 100644 --- a/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/shared/bubble/bubble.component.ts @@ -17,9 +17,18 @@ * under the License. */ -import { Component, Input, Output, EventEmitter, HostBinding, - ChangeDetectorRef, ElementRef, OnInit, OnDestroy, - ViewEncapsulation, HostListener } from '@angular/core'; +import { + Component, + Input, + Output, + EventEmitter, + HostBinding, + ChangeDetectorRef, + ElementRef, + OnDestroy, + ViewEncapsulation, + HostListener +} from '@angular/core'; import { BubblesCollector, BubbleService } from './bubble.service'; @Component({ diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdown-list/dropdown-list.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdown-list/dropdown-list.component.html index 13d6b7d..d483d25 100644 --- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdown-list/dropdown-list.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/dropdown-list/dropdown-list.component.html @@ -18,7 +18,13 @@ --> <div class="dropdown-list" > - <button class="dropdown-toggle" type="button" #list (click)="emitEvent()" (click)="actions.toggle($event, list)"> + <button + class="dropdown-toggle" + type="button" + #list + (click)="emitEvent()" + (click)="actions.toggle($event, list)" + > <span class="title"><span [innerHTML]="label || 'None'"></span></span> <span class="caret-btn"><i class="material-icons">keyboard_arrow_down</i></span> </button> 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 66cf215..b49f8b6 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 @@ -26,18 +26,18 @@ .dropdown-list button, .dropdown-multiselect button { min-width: 100%; - background: #fff; + height: 34px; padding-left: 15px; - font-size: 13px; padding-top: 1px; - height: 34px; + background: #fff; + font-size: 13px; text-align: left; white-space: nowrap; cursor: pointer; border-radius: 0; border: none; outline: none; - 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: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .dropdown-list { @@ -48,9 +48,9 @@ color: #4a5c89; em { + margin-right: 0px; font-size: 13px; color: #35afd5; - margin-right: 0px; font-style: normal; } } @@ -61,7 +61,7 @@ .dropdown-list button:focus, .dropdown-multiselect button:active, .dropdown-multiselect button:focus { - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12); + 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); } .dropdown-multiselect { @@ -91,8 +91,8 @@ right: 0; width: 40px; height: 100%; - text-align: center; padding: 7px; + text-align: center; -webkit-appearance: none; -moz-appearance: none; border-left: 1px solid #ececec; @@ -101,9 +101,9 @@ } .list-menu { + left: 0; width: 100%; max-height: 260px; - left: 0; padding: 0; margin: 0; overflow-y: auto; @@ -113,7 +113,6 @@ padding: 0; margin: 0; } - } &.statuses { @@ -135,10 +134,9 @@ .dropdown-list .list-menu a, .dropdown-multiselect .list-menu li a { - display: block; - padding: 10px; - padding-left: 15px; position: relative; + display: block; + padding: 10px 10px 10px 15px; font-weight: 300; cursor: pointer; color: #4a5c89; @@ -147,7 +145,7 @@ .dropdown-multiselect .list-menu li a { padding-left: 30px; - transition: all .45s ease-in-out; + transition: all 0.45s ease-in-out; } .dropdown-list .list-menu a:hover, @@ -163,16 +161,15 @@ } .dropdown-multiselect .list-menu .filter-actions a { - width: 50%; - color: #35afd5; display: block; + width: 50%; padding: 0; + color: #35afd5; line-height: 40px !important; text-align: center; } .dropdown-list { - .list-menu, .title { span { @@ -206,16 +203,15 @@ } .dropdown-list .list-menu a { - padding: 12px; - padding-left: 15px; position: relative; + padding: 12px 12px 12px 15px; font-weight: 300; cursor: pointer; em { + margin-right: 0px; font-size: 13px; color: #35afd5; - margin-right: 0px; font-style: normal; } } @@ -229,7 +225,7 @@ color: #35afd5; font-size: 18px; line-height: 26px; - transition: all .45s ease-in-out; + transition: all 0.45s ease-in-out; } .dropdown-multiselect .list-menu .select_all:hover, diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html index ef66677..1d6fda6 100644 --- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.html @@ -37,92 +37,91 @@ </a> </li> - <ng-template ngFor let-item [ngForOf]="items" let-i="index"> - <li class="role-label" role="presentation" *ngIf="i === 0 || model && item.type !== items[i - 1].type" (click)="toggleItemsForLable(item.type, $event)" > - <a href="#" class="list-item" role="menuitem"> - <span class="arrow" [ngClass]="{'rotate-arrow': isOpenCategory[item.type], 'arrow-checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}"> - <i class="material-icons">keyboard_arrow_right</i> - </span> -<!-- <span class="empty-checkbox" [ngClass]="{'checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}" (click)="toggleselectedCategory($event, model, item.type);$event.stopPropagation()" >--> -<!-- <span class="checked-checkbox" *ngIf="selectedAllInCattegory(item.type)"></span>--> -<!-- <span class="line-checkbox" *ngIf="selectedSomeInCattegory(item.type)"></span>--> -<!-- </span>--> - <datalab-checkbox - class="header-checkbox" - [checked]="selectedAllInCattegory(item.type)" - [someChecked]="selectedSomeInCattegory(item.type)" - (toggleSelection)="toggleselectedCategory(model, item.type)" - > - </datalab-checkbox> - - {{labels[item.type] || item.type | titlecase}} - </a> - </li> + <ng-template ngFor let-item [ngForOf]="items" let-i="index"> + <li class="role-label" role="presentation" *ngIf="i === 0 || model && item.type !== items[i - 1].type" (click)="toggleItemsForLable(item.type, $event)" > + <a href="#" class="list-item" role="menuitem"> + <span class="arrow" [ngClass]="{'rotate-arrow': isOpenCategory[item.type], 'arrow-checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}"> + <i class="material-icons">keyboard_arrow_right</i> + </span> + <!-- <span class="empty-checkbox" [ngClass]="{'checked': selectedAllInCattegory(item.type) || selectedSomeInCattegory(item.type)}" (click)="toggleselectedCategory($event, model, item.type);$event.stopPropagation()" >--> + <!-- <span class="checked-checkbox" *ngIf="selectedAllInCattegory(item.type)"></span>--> + <!-- <span class="line-checkbox" *ngIf="selectedSomeInCattegory(item.type)"></span>--> + <!-- </span>--> + <datalab-checkbox + class="header-checkbox" + [checked]="selectedAllInCattegory(item.type)" + [someChecked]="selectedSomeInCattegory(item.type)" + (toggleSelection)="toggleselectedCategory(model, item.type)" + ></datalab-checkbox> + {{labels[item.type] || item.type | titlecase}} + </a> + </li> - <li class="role-item" - role="presentation" - *ngIf="model && isOpenCategory[item.type] && item.type !== 'COMPUTATIONAL_SHAPE' && item.type !== 'NOTEBOOK_SHAPE'" - [hidden]="!isAdmin && item.role === 'Allow to execute administration operation'" - > - <a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions(model, item, $event)"> -<!-- <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">--> -<!-- <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>--> -<!-- </span>--> - <datalab-checkbox - class="header-checkbox" - [checked]="checkInModel(item.role)" - (toggleSelection)="toggleSelectedOptions(model, item)" - > - </datalab-checkbox> - {{item.role}} - </a> - </li> - <li class="role-item" role="presentation" (click)="toggleItemsForCloud(item.type + item.cloud, $event)" - *ngIf="model && isOpenCategory[item.type] && item.type === 'COMPUTATIONAL_SHAPE' && item.cloud !== items[i - 1].cloud - || model && isOpenCategory[item.type] && item.type === 'NOTEBOOK_SHAPE' && item.type !== items[i - 1].type - || model && isOpenCategory[item.type] && item.type === 'NOTEBOOK_SHAPE' && item.cloud !== items[i - 1].cloud - || model && isOpenCategory[item.type] && item.type === 'COMPUTATIONAL_SHAPE' && item.type !== items[i - 1].type" - > - <a href="#" class="list-item" role="menuitem"> - <span class="arrow" [ngClass]="{'rotate-arrow': isCloudOpen[item.type + item.cloud], 'arrow-checked': selectedAllInCloud(item.type, item.cloud) || selectedSomeInCloud(item.type, item.cloud)}"> - <i class="material-icons">keyboard_arrow_right</i> - </span> -<!-- <span class="empty-checkbox"--> -<!-- [ngClass]="{--> -<!-- 'checked': selectedAllInCloud(item.type, item.cloud)--> -<!-- || selectedSomeInCloud(item.type, item.cloud)}"--> -<!-- (click)="toggleSelectedCloud($event, model, item.type, item.cloud);--> -<!-- $event.stopPropagation()"--> -<!-- >--> -<!-- <span class="checked-checkbox" *ngIf="selectedAllInCloud(item.type, item.cloud)"></span>--> -<!-- <span class="line-checkbox" *ngIf="selectedSomeInCloud(item.type, item.cloud)"></span>--> -<!-- </span>--> - <datalab-checkbox - class="header-checkbox" - [checked]="selectedAllInCloud(item.type, item.cloud)" - [someChecked]="selectedSomeInCloud(item.type, item.cloud)" - (toggleSelection)="toggleSelectedCloud(model, item.type, item.cloud)" - > - </datalab-checkbox> - {{item.cloud}} - </a> - </li> - <li class="role-cloud-item" role="presentation" *ngIf="model && isCloudOpen[item.type + item.cloud] && isOpenCategory[item.type]" > - <a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions( model, item, $event)"> -<!-- <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">--> -<!-- <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>--> -<!-- </span>--> - <datalab-checkbox - class="header-checkbox" - [checked]="checkInModel(item.role)" - (toggleSelection)="toggleSelectedOptions(model, item)" - > - </datalab-checkbox> - {{item.role}} - </a> - </li> + <li + class="role-item" + role="presentation" + *ngIf="model && isOpenCategory[item.type] && item.type !== 'COMPUTATIONAL_SHAPE' && item.type !== 'NOTEBOOK_SHAPE'" + [hidden]="!isAdmin && item.role === 'Allow to execute administration operation'" + > + <a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions(model, item, $event)"> + <!-- <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">--> + <!-- <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>--> + <!-- </span>--> + <datalab-checkbox + class="header-checkbox" + [checked]="checkInModel(item.role)" + (toggleSelection)="toggleSelectedOptions(model, item)" + ></datalab-checkbox> + {{item.role}} + </a> + </li> + <li + class="role-item" + role="presentation" + (click)="toggleItemsForCloud(item.type + item.cloud, $event)" + *ngIf="model && isOpenCategory[item.type] && item.type === 'COMPUTATIONAL_SHAPE' && item.cloud !== items[i - 1].cloud + || model && isOpenCategory[item.type] && item.type === 'NOTEBOOK_SHAPE' && item.type !== items[i - 1].type + || model && isOpenCategory[item.type] && item.type === 'NOTEBOOK_SHAPE' && item.cloud !== items[i - 1].cloud + || model && isOpenCategory[item.type] && item.type === 'COMPUTATIONAL_SHAPE' && item.type !== items[i - 1].type" + > + <a href="#" class="list-item" role="menuitem"> + <span class="arrow" [ngClass]="{'rotate-arrow': isCloudOpen[item.type + item.cloud], 'arrow-checked': selectedAllInCloud(item.type, item.cloud) || selectedSomeInCloud(item.type, item.cloud)}"> + <i class="material-icons">keyboard_arrow_right</i> + </span> + <!-- <span class="empty-checkbox"--> + <!-- [ngClass]="{--> + <!-- 'checked': selectedAllInCloud(item.type, item.cloud)--> + <!-- || selectedSomeInCloud(item.type, item.cloud)}"--> + <!-- (click)="toggleSelectedCloud($event, model, item.type, item.cloud);--> + <!-- $event.stopPropagation()"--> + <!-- >--> + <!-- <span class="checked-checkbox" *ngIf="selectedAllInCloud(item.type, item.cloud)"></span>--> + <!-- <span class="line-checkbox" *ngIf="selectedSomeInCloud(item.type, item.cloud)"></span>--> + <!-- </span>--> + <datalab-checkbox + class="header-checkbox" + [checked]="selectedAllInCloud(item.type, item.cloud)" + [someChecked]="selectedSomeInCloud(item.type, item.cloud)" + (toggleSelection)="toggleSelectedCloud(model, item.type, item.cloud)" + ></datalab-checkbox> + {{item.cloud}} + </a> + </li> + <li class="role-cloud-item" role="presentation" *ngIf="model && isCloudOpen[item.type + item.cloud] && isOpenCategory[item.type]" > + <a href="#" class="list-item" role="menuitem" (click)="toggleSelectedOptions( model, item, $event)"> + <!-- <span class="empty-checkbox" [ngClass]="{'checked': checkInModel(item.role)}">--> + <!-- <span class="checked-checkbox" *ngIf="checkInModel(item.role)"></span>--> + <!-- </span>--> + <datalab-checkbox + class="header-checkbox" + [checked]="checkInModel(item.role)" + (toggleSelection)="toggleSelectedOptions(model, item)" + ></datalab-checkbox> + {{item.role}} + </a> + </li> - </ng-template> + </ng-template> <li *ngIf="items?.length == 0"> <a role="menuitem" class="list-item"> 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 6231568..62e893a 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 @@ -25,19 +25,18 @@ .dropdown-list button, .dropdown-multiselect button { - width: 100%; - background: #fff; + height: 34px; padding-left: 15px; + background: #fff; font-size: 13px; - height: 34px; text-align: left; white-space: nowrap; cursor: pointer; border-radius: 0; border: none; outline: none; - 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: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .dropdown-list { @@ -48,9 +47,9 @@ color: #4a5c89; em { + margin-right: 0px; font-size: 13px; color: #35afd5; - margin-right: 0px; font-style: normal; } } @@ -61,27 +60,27 @@ .dropdown-list button:focus, .dropdown-multiselect button:active, .dropdown-multiselect button:focus { - box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12); + 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); } .dropdown-multiselect { button { - span{ - color: #999; - font-weight: 300; + span { display: inline-block; max-width: 80%; + color: #999; + font-weight: 300; } - span:not(.caret-btn){ + span:not(.caret-btn) { padding-top: 3px; font-size: 14px; } .selected-items { - color: #4a5c89; max-width: 477px; padding-top: 5px; + color: #4a5c89; } } } @@ -98,8 +97,8 @@ right: 0; width: 40px; height: 100%; - text-align: center; padding: 7px; + text-align: center; -webkit-appearance: none; -moz-appearance: none; border-left: 1px solid #ececec; @@ -108,9 +107,9 @@ } .list-menu { + left: 0; width: 100%; max-height: 450px; - left: 0; padding: 0; margin: 0; overflow-y: auto; @@ -121,14 +120,13 @@ margin: 0; } - .role-item{ + .role-item { padding-left: 30px; } - .role-cloud-item{ + .role-cloud-item { padding-left: 60px; } - } &.statuses { @@ -150,10 +148,10 @@ .dropdown-list .list-menu a, .dropdown-multiselect .list-menu li a { + position: relative; display: flex; padding: 10px; padding-left: 15px; - position: relative; font-weight: 300; cursor: pointer; color: #4a5c89; @@ -162,7 +160,7 @@ .dropdown-multiselect .list-menu li a { padding-left: 25px; - transition: all .45s ease-in-out; + transition: all 0.45s ease-in-out; } .dropdown-list .list-menu a:hover, @@ -178,16 +176,15 @@ } .dropdown-multiselect .list-menu .filter-actions a { - width: 50%; - color: #35afd5; display: block; + width: 50%; padding: 0; + color: #35afd5; line-height: 40px !important; text-align: center; } .dropdown-list { - .list-menu, .title { span { @@ -221,9 +218,9 @@ } .dropdown-list .list-menu a { + position: relative; padding: 12px; padding-left: 15px; - position: relative; font-weight: 300; cursor: pointer; @@ -244,7 +241,7 @@ color: #35afd5; font-size: 18px; line-height: 26px; - transition: all .45s ease-in-out; + transition: all 0.45s ease-in-out; } .dropdown-multiselect .list-menu .select_all:hover, @@ -267,13 +264,13 @@ color: #35afd5; &.checked-checkbox { + position: absolute; top: 0; left: 4px; width: 5px; height: 10px; border-bottom: 2px solid white; border-right: 2px solid white; - position: absolute; transform: rotate(45deg); } @@ -285,28 +282,28 @@ border-bottom: 2px solid white; } - &.arrow{ + &.arrow { left: 2px; top: 9px; - i{ + + i { color: lightgrey; } - &.rotate-arrow{ + + &.rotate-arrow { transform: rotate(90deg); - transition: .1s ease-in-out; + transition: 0.1s ease-in-out; top: 6px; left: 0; } - &.arrow-checked{ - i{ - color: #36afd5 + &.arrow-checked { + i { + color: #36afd5; } } } } - - } .dropdown-multiselect.btn-group.open .dropdown-toggle { @@ -314,22 +311,23 @@ } .empty-checkbox { + position: relative; width: 16px; height: 16px; + margin-top: 2px; border-radius: 2px; border: 2px solid lightgrey; - margin-top: 2px; - position: relative; + &.checked { border-color: #35afd5; background-color: #35afd5; } } -.d-none{ +.d-none { display: none; } -datalab-checkbox{ +datalab-checkbox { margin: 2px 5px 0 0; } diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts index 9b1c918..0a2300f 100644 --- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-level-select-dropdown/multi-level-select-dropdown.component.ts @@ -18,7 +18,7 @@ */ import { Input, Output, Component, EventEmitter } from '@angular/core'; -import {SortUtils} from '../../../core/util'; +import { SortUtils } from '../../../core/util'; @Component({ selector: 'multi-level-select-dropdown', @@ -34,12 +34,8 @@ export class MultiLevelSelectDropdownComponent { @Input() isAdmin: boolean; @Output() selectionChange: EventEmitter<{}> = new EventEmitter(); - public isOpenCategory = { - }; - - public isCloudOpen = { - - }; + public isOpenCategory = {}; + public isCloudOpen = {}; public labels = { COMPUTATIONAL_SHAPE: 'Compute shapes', @@ -49,8 +45,7 @@ export class MultiLevelSelectDropdownComponent { }; public selectedList: any; - constructor() { - } + constructor() {} toggleSelectedOptions( model, value, event?) { if (event) event.preventDefault(); @@ -63,7 +58,9 @@ export class MultiLevelSelectDropdownComponent { if (event) event.preventDefault(); const categoryItems = this.items.filter(role => role.type === value); this.selectedAllInCattegory(value) ? this.model = this.model.filter(role => role.type !== value) : categoryItems.forEach(role => { - if (!model.filter(mod => mod.role === role.role).length) {this.model.push(role); } + if (!model.filter(mod => mod.role === role.role).length) { + this.model.push(role); + } }); this.onUpdate(event); } diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-select-dropdown/multi-select-dropdown.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-select-dropdown/multi-select-dropdown.component.html index 2458d9f..178f9bc 100644 --- a/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-select-dropdown/multi-select-dropdown.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/shared/form-controls/multi-select-dropdown/multi-select-dropdown.component.html @@ -20,9 +20,10 @@ <div class="dropdown-multiselect btn-group" ngClass="{{type || ''}}"> <button type="button" #list (click)="multiactions.toggle($event, list)"> <span class="ellipsis" *ngIf="model.length === 0 && type"> - <ng-container *ngIf="type === 'resource_type' || type === 'resource_types';else noResourceTypeSelect">Select {{ type | convertaction}}</ng-container> - <ng-template #noResourceTypeSelect>Select {{ type }}</ng-template> - + <ng-container *ngIf="type === 'resource_type' || type === 'resource_types';else noResourceTypeSelect"> + Select {{ type | convertaction}} + </ng-container> + <ng-template #noResourceTypeSelect>Select {{ type }}</ng-template> </span> <span class="selected-items ellipsis" *ngIf="model.length !== 0"> Selected {{model.length}} item<strong *ngIf="model.length > 1">s</strong> @@ -40,23 +41,33 @@ <i class="material-icons">clear</i> None </a> </li> - <ng-template let-item ngFor [ngForOf]="items"> - <li role="presentation" *ngIf="model"> - <a href="#" - class="list-item billing-user-name" - [ngClass]="{'uppercase': type === 'resource_type' || type === 'status'}" - role="menuitem" - (click)="toggleSelectedOptions($event, model, item)"> - <span class="material-icons" *ngIf="model.indexOf(item) >= 0">done</span> - <ng-container *ngIf="type !== 'resource_type' && type !== 'resource_types' && item !== 'invalid_name' && item !== 'invalid_version' && item !== 'installation_error'"> - <div [ngClass]="{'uppercase': type === 'status'}">{{item}}</div> - </ng-container> - <ng-container *ngIf="type === 'resource_type' || type === 'resource_types' || item === 'invalid_name' || item === 'invalid_version' || item === 'installation_error'"> - <div [ngClass]="{'uppercase': type === 'status' || type === 'resource_type'}">{{item | convertaction}}</div> - </ng-container> - </a> - </li> - </ng-template> + <ng-template let-item ngFor [ngForOf]="items"> + <li role="presentation" *ngIf="model"> + <a + href="#" + class="list-item billing-user-name" + [ngClass]="{'uppercase': type === 'resource_type' || type === 'status'}" + role="menuitem" + (click)="toggleSelectedOptions($event, model, item)" + > + <span class="material-icons" *ngIf="model.indexOf(item) >= 0">done</span> + <ng-container + *ngIf="type !== 'resource_type' && type !== 'resource_types' + && item !== 'invalid_name' && item !== 'invalid_version' + && item !== 'installation_error'" + > + <div [ngClass]="{'uppercase': type === 'status'}">{{item}}</div> + </ng-container> + <ng-container + *ngIf="type === 'resource_type' || type === 'resource_types' + || item === 'invalid_name' || item === 'invalid_version' + || item === 'installation_error'" + > + <div [ngClass]="{'uppercase': type === 'status' || type === 'resource_type'}">{{item | convertaction}}</div> + </ng-container> + </a> + </li> + </ng-template> <li *ngIf="items?.length == 0"> <a role="menuitem" class="list-item"> <span class="material-icons">visibility_off</span> diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.css b/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.css index 4a36213..96ee4e1 100644 --- a/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.css +++ b/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.css @@ -18,16 +18,16 @@ */ .message-wrapper{ - min-height: 200px; - width: 100%; - box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12); - transition: box-shadow 280ms cubic-bezier(.4,0,.2,1); display: flex; justify-content: center; align-items: center; padding: 16px; - border-radius: 4px; + min-height: 200px; + width: 100%; background: #fff; color: rgba(0,0,0,.87); + border-radius: 4px; + box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12); + transition: box-shadow 280ms cubic-bezier(.4,0,.2,1); } diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.ts index f516928..26491cb 100644 --- a/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/shared/inform-message/inform-message.component.ts @@ -17,10 +17,7 @@ * under the License. */ -import { Component, Input, Output, EventEmitter, HostBinding, - ChangeDetectorRef, ElementRef, OnInit, OnDestroy, - ViewEncapsulation, HostListener } from '@angular/core'; - +import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'inform-message', @@ -32,10 +29,7 @@ import { Component, Input, Output, EventEmitter, HostBinding, export class InformMessageComponent implements OnInit { @Input() message: string; - constructor() {} - - ngOnInit(): void { - } - + constructor() { } + ngOnInit(): void { } } diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html index c539dbb..4c61dc9 100644 --- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.html @@ -18,7 +18,7 @@ --> <div class="nav-bar" [hidden]="!isLoggedIn"> -<!-- <mat-progress-bar *ngIf="showProgressBar" mode="indeterminate"></mat-progress-bar>--> + <!-- <mat-progress-bar *ngIf="showProgressBar" mode="indeterminate"></mat-progress-bar>--> <mat-progress-bar *ngIf="progressBarService.showProgressBar | async" mode="indeterminate"></mat-progress-bar> <div class="menu-area" *ngIf="healthStatus"> @@ -61,88 +61,131 @@ </p> </div> </bubble-up> - <button class="btn btn-logout ani" (click)="logout_btnClick()">Log out <span - class="user-name">{{currentUserName}}</span></button> + <button class="btn btn-logout ani" (click)="logout_btnClick()"> + Log out <span class="user-name">{{currentUserName}}</span> + </button> </div> - </div> + <mat-sidenav-container class="example-container" autosize > - <mat-sidenav #drawer mode="side" opened role="navigation" [style.width]="isExpanded ? '220px' : '60px'" disableClose *ngIf="healthStatus"> + <mat-sidenav + #drawer + mode="side" + opened + role="navigation" + [style.width]="isExpanded ? '220px' : '60px'" + disableClose + *ngIf="healthStatus" + > <mat-nav-list > <nav> <div> - <a class="nav-item" [routerLink]="['/resources_list']" [routerLinkActive]="['active']" - [routerLinkActiveOptions]="{exact:true}"> + <a + class="nav-item" + [routerLink]="['/resources_list']" + [routerLinkActive]="['active']" + [routerLinkActiveOptions]="{exact:true}" + > <span *ngIf="isExpanded; else resources">List of Resources</span> <ng-template #resources><i class="material-icons">dashboard</i></ng-template> </a> <a class="nav-item has-children" *ngIf="healthStatus?.admin || healthStatus?.projectAdmin"> <span *ngIf="isExpanded">Administration</span> - <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" [routerLink]="['/roles']" - [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> + <a + class="sub-nav-item" + [style.margin-left.px]="isExpanded ? '30' : '0'" + [routerLink]="['/roles']" + [routerLinkActive]="['active']" + [routerLinkActiveOptions]="{exact:true}" + > <span *ngIf="isExpanded; else roles">Roles</span> <ng-template #roles><i class="material-icons">account_box</i></ng-template> </a> - <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" [routerLink]="['/projects']" - [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> + <a + class="sub-nav-item" + [style.margin-left.px]="isExpanded ? '30' : '0'" + [routerLink]="['/projects']" + [routerLinkActive]="['active']" + [routerLinkActiveOptions]="{exact:true}" + > <span *ngIf="isExpanded; else projects">Projects</span> <ng-template #projects><i class="material-icons">dns</i></ng-template> </a> -<!-- <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" [routerLink]="['/odahu']"--> -<!-- [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">--> -<!-- <span *ngIf="isExpanded; else odahu">Odahu deployment</span>--> -<!-- <ng-template #odahu><i class="material-icons">get_app</i></ng-template>--> -<!-- </a>--> - <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" - [routerLink]="['/environment_management']" [routerLinkActive]="['active']" - [routerLinkActiveOptions]="{exact:true}"> + <!-- <a class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" [routerLink]="['/odahu']"--> + <!-- [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">--> + <!-- <span *ngIf="isExpanded; else odahu">Odahu deployment</span>--> + <!-- <ng-template #odahu><i class="material-icons">get_app</i></ng-template>--> + <!-- </a>--> + <a + class="sub-nav-item" + [style.margin-left.px]="isExpanded ? '30' : '0'" + [routerLink]="['/environment_management']" + [routerLinkActive]="['active']" + [routerLinkActiveOptions]="{exact:true}" + > <span *ngIf="isExpanded; else env">Environment Management</span> <ng-template #env><i class="material-icons">settings</i></ng-template> </a> - <a *ngIf="healthStatus?.admin" class="sub-nav-item" [style.margin-left.px]="isExpanded ? '30' : '0'" - [routerLink]="['/configuration']" [routerLinkActive]="['active']" - [routerLinkActiveOptions]="{exact:true}" > + <a + *ngIf="healthStatus?.admin" + class="sub-nav-item" + [style.margin-left.px]="isExpanded ? '30' : '0'" + [routerLink]="['/configuration']" + [routerLinkActive]="['active']" + [routerLinkActiveOptions]="{exact:true}" + > <span *ngIf="isExpanded; else env">Configuration</span> <ng-template #env><i class="material-icons">build_circle</i></ng-template> </a> </a> <a class="nav-item has-children" *ngIf="healthStatus?.billingEnabled || healthStatus?.auditEnabled"> <span *ngIf="isExpanded">Reports</span> - <a *ngIf="healthStatus?.auditEnabled" class="sub-nav-item" [routerLink]="['/audit']" [style.margin-left.px]="isExpanded ? '30' : '0'" - [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> + <a + *ngIf="healthStatus?.auditEnabled" + class="sub-nav-item" + [routerLink]="['/audit']" + [style.margin-left.px]="isExpanded ? '30' : '0'" + [routerLinkActive]="['active']" + [routerLinkActiveOptions]="{exact:true}" + > <span *ngIf="isExpanded; else audit">Audit</span> <ng-template #audit><i class="material-icons">library_books</i></ng-template> </a> - <a *ngIf="healthStatus?.billingEnabled" class="sub-nav-item" [routerLink]="['/billing_report']" - [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [style.margin-left.px]="isExpanded ? '30' : '0'"> + <a + *ngIf="healthStatus?.billingEnabled" + class="sub-nav-item" + [routerLink]="['/billing_report']" + [routerLinkActive]="['active']" + [routerLinkActiveOptions]="{exact:true}" + [style.margin-left.px]="isExpanded ? '30' : '0'" + > <span *ngIf="isExpanded; else billing">Billing</span> <ng-template #billing><i class="material-icons">account_balance_wallet</i></ng-template> </a> </a> </div> -<!-- <div>--> -<!-- <a class="nav-item" [routerLink]="['/swagger']" [routerLinkActive]="['active']"--> -<!-- [routerLinkActiveOptions]="{exact:true}">--> -<!-- <span *ngIf="isExpanded; else endpoint">Cloud Endpoint API</span>--> -<!-- <ng-template #endpoint>--> -<!-- <span>--> -<!-- <g>--> -<!-- <path d="M127.059657,255.996921 C58.8506544,255.526472 -0.457073619,198.918442 0.00265506057,126.998303 C0.444649399,57.7958628 57.9516598,-0.468967577 129.11002,0.00284555012 C198.267128,0.462386081 256.613109,57.8667711 255.995136,128.194199 C256.568091,197.883453 197.934268,256.489189 127.059657,255.996921 Z M127.059657,255.996921 C58.8506544,255.526472 -0.457073619,198.918442 0.00265506057,126.998303 C0.444649399,57.7958628 57.9516598,-0.468967577 129.11002,0. [...] -<!-- <path id="swager-bgr" d="M127.184644,238.997327 C68.0323765,238.589271 16.6036091,189.498744 17.0023028,127.131428 C17.3860285,67.1185953 67.2554,16.5917106 128.963117,17.0024872 C188.934544,17.4010221 239.531905,67.1825241 238.995778,128.169251 C239.492444,188.602381 188.64743,239.424426 127.184644,238.997327 Z M127.184644,238.997327 C68.0323765,238.589271 16.6036091,189.498744 17.0023028,127.131428 C17.3860285,67.1185953 67.2554,16.5917106 128.963117,17.0024872 [...] -<!-- <path d="M169.327319,127.956161 C169.042723,133.246373 164.421106,137.639224 159.866213,136.872586 C159.844426,136.872586 159.821277,136.872586 159.798128,136.872586 C154.753021,136.879395 150.658383,132.794288 150.652936,127.749182 C150.824511,122.690458 155.019915,118.703395 160.08,118.789182 C165.125106,118.813692 169.59966,123.077182 169.327319,127.956161 Z M88.2011915,179.220161 C90.1034894,179.27599 92.0071489,179.235139 94.2008511,179.235139 L94.2008511,193 [...] -<!-- </g>--> -<!-- </svg>--> -<!-- </span>--> -<!-- </ng-template>--> -<!-- </a>--> -<!-- </div>--> + <!-- <div>--> + <!-- <a class="nav-item" [routerLink]="['/swagger']" [routerLinkActive]="['active']"--> + <!-- [routerLinkActiveOptions]="{exact:true}">--> + <!-- <span *ngIf="isExpanded; else endpoint">Cloud Endpoint API</span>--> + <!-- <ng-template #endpoint>--> + <!-- <span>--> + <!-- <g>--> + <!-- <path d="M127.059657,255.996921 C58.8506544,255.526472 -0.457073619,198.918442 0.00265506057,126.998303 C0.444649399,57.7958628 57.9516598,-0.468967577 129.11002,0.00284555012 C198.267128,0.462386081 256.613109,57.8667711 255.995136,128.194199 C256.568091,197.883453 197.934268,256.489189 127.059657,255.996921 Z M127.059657,255.996921 C58.8506544,255.526472 -0.457073619,198.918442 0.00265506057,126.998303 C0.444649399,57.7958628 57.9516598,-0.468967577 129. [...] + <!-- <path id="swager-bgr" d="M127.184644,238.997327 C68.0323765,238.589271 16.6036091,189.498744 17.0023028,127.131428 C17.3860285,67.1185953 67.2554,16.5917106 128.963117,17.0024872 C188.934544,17.4010221 239.531905,67.1825241 238.995778,128.169251 C239.492444,188.602381 188.64743,239.424426 127.184644,238.997327 Z M127.184644,238.997327 C68.0323765,238.589271 16.6036091,189.498744 17.0023028,127.131428 C17.3860285,67.1185953 67.2554,16.5917106 128.963117,17. [...] + <!-- <path d="M169.327319,127.956161 C169.042723,133.246373 164.421106,137.639224 159.866213,136.872586 C159.844426,136.872586 159.821277,136.872586 159.798128,136.872586 C154.753021,136.879395 150.658383,132.794288 150.652936,127.749182 C150.824511,122.690458 155.019915,118.703395 160.08,118.789182 C165.125106,118.813692 169.59966,123.077182 169.327319,127.956161 Z M88.2011915,179.220161 C90.1034894,179.27599 92.0071489,179.235139 94.2008511,179.235139 L94.200 [...] + <!-- </g>--> + <!-- </svg>--> + <!-- </span>--> + <!-- </ng-template>--> + <!-- </a>--> + <!-- </div>--> </nav> </mat-nav-list> </mat-sidenav> <mat-sidenav-content id="scrolling" [style.margin-left]="isExpanded ? '220px' : '60px'"> <div [@fadeAnimation]="getRouterOutletState(routerOutlet)" class="fade-animation"> - <router-outlet #routerOutlet="outlet"></router-outlet> </div> </mat-sidenav-content> diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss index 86480bd..3d99f7d 100644 --- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.scss @@ -21,15 +21,15 @@ // } .nav-bar { - min-height: 48px; - height: 48px; - background-color: #222; - border-color: #080808; position: relative; display: flex; justify-content: space-between; margin-bottom: 0; border-radius: 0; + min-height: 48px; + height: 48px; + background-color: #222; + border-color: #080808; .menu-area { display: flex; @@ -52,10 +52,10 @@ .statusbar { display: flex; + justify-content: center; width: 50px; height: 46px; text-decoration: none; - justify-content: center; color: #f9fafb; cursor: pointer; @@ -99,14 +99,14 @@ .btn-logout { height: 46px; + min-width: 280px; padding: 0 28px; background: #383838; + font-size: 14px; color: #cfdae6; border: 0; border-radius: 0; - font-size: 14px; cursor: pointer; - min-width: 280px; text-align: left; .user-name { @@ -129,11 +129,11 @@ p { strong { + display: inline-block; + width: 120px; color: #455c74; font-size: 14px; font-weight: 600; - width: 120px; - display: inline-block; } .helper_instruction { @@ -145,8 +145,8 @@ } span { - width: 180px; display: inline-block; + width: 180px; vertical-align: bottom; } } @@ -157,13 +157,13 @@ } a.nav-item { - display: block; position: relative; + display: block; height: 56px; padding: 5px 10px; line-height: 48px; font-family: "Open Sans", sans-serif; - transition: all .45s ease-in-out; + transition: all 0.45s ease-in-out; text-decoration: none; font-size: 14px; overflow: hidden; @@ -184,18 +184,19 @@ a.nav-item { background: none !important; color: #36afd5 !important; } - &:not(.has-children):hover #swager-bgr{ + + &:not(.has-children):hover #swager-bgr { fill: #36afd5; } &:not(:last-child)::after { - content: ' '; + content: " "; position: absolute; bottom: 0; - left: calc(50% - 200px/2); + left: calc(50% - 200px / 2); + display: block; height: 1px; width: 200px; - display: block; background: #edf1f5; } @@ -212,7 +213,7 @@ a.nav-item { .sub-nav-item { display: block; - transition: all .45s ease-in-out; + transition: all 0.45s ease-in-out; i { vertical-align: middle; @@ -235,30 +236,30 @@ a.nav-item { .error, .user-name, .meta { - transition: all .35s ease-in-out; + transition: all 0.35s ease-in-out; } .hamburger { - border: none; + width: 60px; + height: 46px; padding: 0; + border: none; background: none; outline: none; - width: 60px; - height: 46px; cursor: pointer; border-radius: 0; - transition: all .45s ease-in-out; + transition: all 0.45s ease-in-out; .line { + display: block; width: 22px; height: 2px; - display: block; margin: 4px auto; border-radius: 1px; background-color: #ecf0f1; - -webkit-transition: all .35s ease-in-out; - -o-transition: all .35s ease-in-out; - transition: all .35s ease-in-out; + -webkit-transition: all 0.35s ease-in-out; + -o-transition: all 0.35s ease-in-out; + transition: all 0.35s ease-in-out; &:nth-child(2) { -webkit-transition-delay: 0.3s; @@ -299,7 +300,6 @@ a.nav-item { } mat-sidenav { - mat-nav-list { height: 100%; @@ -329,6 +329,6 @@ mat-sidenav-content { } } -.blue{ +.blue { color: #35afd5; } diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts index bdb2b86..95907e7 100644 --- a/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/shared/navbar/navbar.component.ts @@ -17,13 +17,19 @@ * under the License. */ -import {Component, ViewEncapsulation, OnInit, OnDestroy, ViewChild, ChangeDetectorRef, ApplicationRef} from '@angular/core'; +import { Component, ViewEncapsulation, OnInit, OnDestroy } from '@angular/core'; import { MatDialog, MatDialogRef } from '@angular/material/dialog'; -import {Subscription, timer, interval, Subject} from 'rxjs'; +import { Subscription, timer } from 'rxjs'; import { ToastrService } from 'ngx-toastr'; import { RouterOutlet } from '@angular/router'; -import { ApplicationSecurityService, HealthStatusService, AppRoutingService, SchedulerService, StorageService } from '../../core/services'; +import { + ApplicationSecurityService, + HealthStatusService, + AppRoutingService, + SchedulerService, + StorageService +} from '../../core/services'; import { GeneralEnvironmentStatus } from '../../administration/management/management.model'; import { NotificationDialogComponent } from '../modal-dialog/notification-dialog'; import { @@ -31,13 +37,12 @@ import { animate, transition, style, - query, group, - + query, + group, } from '@angular/animations'; import {skip, take} from 'rxjs/operators'; import {ProgressBarService} from '../../core/services/progress-bar.service'; - interface Quota { projectQuotas: {}; totalQuotaUsed: number; diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/ticker.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/ticker.component.ts index 6600838..45931f1 100644 --- a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/ticker.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/ticker.component.ts @@ -38,8 +38,13 @@ export interface TimeFormat { <button mat-mini-fab class="ticker-selected"></button> </mat-toolbar> <div *ngFor="let step of steps; let i = index" [class]="getTimeValueClass(step, i)" > - <button mat-mini-fab [color]="selectedTimePart === step ? color : ''" - (click)="changeTimeValue(step)"> {{ step }} </button> + <button + mat-mini-fab + [color]="selectedTimePart === step ? color : ''" + (click)="changeTimeValue(step)" + > + {{ step }} + </button> </div> </div> </div> diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-cover.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-cover.component.ts index 96aa5ef..79f3434 100755 --- a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-cover.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-cover.component.ts @@ -17,7 +17,7 @@ * under the License. */ -import { Component, Input, Output, OnInit, Inject, EventEmitter } from '@angular/core'; +import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core'; import { CLOCK_TYPE, TimeFormat } from './ticker.component'; type TimeFormatAlias = TimeFormat; diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.scss b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.scss index 55909ef..43281d1 100755 --- a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.scss @@ -17,7 +17,7 @@ * under the License. */ -@import '_variables.scss'; +@import "_variables.scss"; @-webkit-keyframes bounce { from { @@ -88,15 +88,15 @@ } .time-cover { - max-height: 100%; - width: 300px; display: flex; flex-direction: column; + max-height: 100%; + width: 300px; .container { - padding: 15px; min-width: 160px; width: 160px; + padding: 15px; &.mat-toolbar-single-row { background: $modal-header-color; @@ -105,9 +105,9 @@ } .selected-time { + display: flex; font-size: 3.5rem; font-weight: 400; - display: flex; .active { color: #36afd5; @@ -115,9 +115,9 @@ } .selected-meridiem { + padding-top: 2rem; font-size: 1rem; line-height: 1.3rem; - padding-top: 2rem; .active { color: #36afd5; @@ -135,19 +135,19 @@ } } -.selected-time>span, -.selected-meridiem>span { +.selected-time > span, +.selected-meridiem > span { outline: 0; opacity: 0.5; } -.selected-time>span:not(.active), -.selected-meridiem>span:not(.active) { +.selected-time > span:not(.active), +.selected-meridiem > span:not(.active) { cursor: pointer; } -.selected-time>span.active, -.selected-meridiem>span.active { +.selected-time > span.active, +.selected-meridiem > span.active { opacity: 1; } @@ -164,50 +164,50 @@ .ticker { width: 200px; height: 200px; + padding: 24px; + margin: 30px auto; border-radius: 50%; cursor: pointer; - padding: 24px; background: #ededed; - margin: 30px auto; .ticker-container { - width: 100%; - height: 100%; position: relative; display: block; + width: 100%; + height: 100%; } .ticker-center { - height: 6px; - width: 6px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; + height: 6px; + width: 6px; margin: auto; border-radius: 50%; } .pointer { box-shadow: none; - width: 1px; - height: 50%; position: absolute; left: 0; right: 0; bottom: 0; + z-index: 0; + width: 1px; + height: 50%; margin: 0 auto; padding: 0; transform-origin: top center; transition: transform 200ms; - z-index: 0; pointer-events: none; } .ticker-step { - display: block; position: absolute; + display: block; transform: translate(-50%, -50%); transition: transform 200ms; diff --git a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.ts b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.ts index 7b1f38d..6fba205 100644 --- a/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/shared/time-picker/time-picker.component.ts @@ -29,13 +29,21 @@ type TimeFormatAlias = TimeFormat; template: ` <div class="time-picker"> <mat-form-field class="time-select"> - <input matInput - placeholder="{{ label }}" - [value]="(selectedTime | localDate : 'shortTime') || null" - (input)="checkEmpty($event.target['value'])" - [disabled]="disable" + <input + matInput + placeholder="{{ label }}" + [value]="(selectedTime | localDate : 'shortTime') || null" + (input)="checkEmpty($event.target['value'])" + [disabled]="disable" /> - <mat-icon matSuffix [ngClass]="{'not-allowed': disable}" (click)="openDatePickerDialog($event)" disabled="disable">access_time</mat-icon> + <mat-icon + matSuffix + [ngClass]="{'not-allowed': disable}" + (click)="openDatePickerDialog($event)" + disabled="disable" + > + access_time + </mat-icon> </mat-form-field> </div>`, styleUrls: ['./time-picker.component.scss'] diff --git a/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.ts b/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.ts index 0b54e47..9d4adf1 100644 --- a/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/webterminal/webterminal.component.ts @@ -17,7 +17,7 @@ * under the License. */ -import { Component, OnInit, ElementRef, ViewEncapsulation, ViewContainerRef, ViewChild, Inject } from '@angular/core'; +import { Component, OnInit, ElementRef, ViewEncapsulation, ViewChild, Inject } from '@angular/core'; import { DOCUMENT } from '@angular/common'; import { ActivatedRoute } from '@angular/router'; import Guacamole from 'guacamole-common-js'; @@ -28,7 +28,6 @@ import { environment } from '../../environments/environment'; const API_URL = environment.apiUrl; import { StorageService } from '../core/services'; -import { FileUtils } from '../core/util'; @Component({ selector: 'datalab-webterminal', 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 e10cc90..2802945 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 @@ -17,7 +17,7 @@ * under the License. */ -@import '_variables.scss'; +@import "_variables.scss"; .modal-xs { width: 375px; @@ -61,22 +61,22 @@ mat-dialog-container { overflow-x: hidden; &.mat-dialog-container { + position: relative; padding: 0; border-radius: 0; overflow-x: hidden; - position: relative; #dialog-box { - color: $modal-text-color; min-height: 150px; + color: $modal-text-color; font-family: "Open Sans", sans-serif; .dialog-header { + position: relative; padding-left: 30px; - background: $modal-header-color; height: 50px; + background: $modal-header-color; line-height: 50px; - position: relative; .modal-title { width: 90%; @@ -89,8 +89,8 @@ mat-dialog-container { font-size: 18px; background: $modal-header-color; - &::after{ - content: ''; + &::after { + content: ""; display: block; } @@ -112,7 +112,7 @@ mat-dialog-container { color: #577289; outline: none; cursor: pointer; - transition: all .45s ease-in-out; + transition: all 0.45s ease-in-out; &:hover { color: #36afd5; @@ -126,7 +126,7 @@ mat-dialog-container { .dialog-content { .mat-select { - font-family: 'Opens Sans', sans-serif; + font-family: "Opens Sans", sans-serif; } } @@ -137,7 +137,7 @@ mat-dialog-container { .upload-key { margin-bottom: 20px; - &>div>div { + & > div > div { margin-top: 5px; } } @@ -156,9 +156,10 @@ mat-dialog-container { a { color: #35afd5; text-decoration: none; - transition: all .45s ease-in-out; + transition: all 0.45s ease-in-out; line-height: 19px; - &.spark-url{ + + &.spark-url { line-height: 16px; } @@ -168,21 +169,21 @@ mat-dialog-container { } .info-label { - font-size: 15px; margin-top: 20px; + font-size: 15px; } .control-label { - font-weight: 600; margin-top: 6px; + font-weight: 600; } .form-group { small { - font-size: 12px; - color: #9cadbe; display: inline-block; margin-top: 6px; + font-size: 12px; + color: #9cadbe; } } } @@ -195,40 +196,39 @@ mat-dialog-container { .butt-file { position: relative; - overflow: hidden; - margin-bottom: 10px; display: inline-block; - color: #35afd5; - padding: 6px 29px 6px 23px; width: 170px; + margin-bottom: 10px; + padding: 6px 29px 6px 23px; + overflow: hidden; + color: #35afd5; // font: 600 16px/1.45 'Open Sans'; font-style: normal; font-weight: 600; font-size: 16px; line-height: 1.45; - font-family: 'Open Sans', sans-serif; - + font-family: "Open Sans", sans-serif; text-align: center; - 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: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); .upload-icon { - background: url(/../../assets/img/upload-icon.png) no-repeat; - background-size: 100%; + position: relative; + top: 2px; display: inline-block; width: 17px; height: 17px; margin-right: 8px; - position: relative; - top: 2px; + background: url(/../../assets/img/upload-icon.png) no-repeat; + background-size: 100%; } - input[type=file] { + input[type="file"] { + display: block; font-size: 100px; text-align: right; outline: none; background: #fff; cursor: inherit; - display: block; } &:active { @@ -237,15 +237,15 @@ mat-dialog-container { } .detail-header { - border-bottom: 0; width: 100%; + border-bottom: 0; border-collapse: collapse; table-layout: fixed; td { + padding: 20px; border: 1px solid #edf1f5; text-align: center; - padding: 20px; text-align: center !important; background: #fff; @@ -257,8 +257,8 @@ mat-dialog-container { text-overflow: ellipsis; overflow: hidden; cursor: default; - &::after{ - content: ''; + &::after { + content: ""; display: block; } } @@ -276,9 +276,9 @@ mat-dialog-container { .detail-info { p { - font-weight: 400; - margin-bottom: 10px; display: flex; + margin-bottom: 10px; + font-weight: 400; small { font-size: 12px; @@ -286,21 +286,23 @@ mat-dialog-container { } } - span:not(.description),{ + span:not(.description) { + display: block; + max-width: 450px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; - display: block; - max-width: 450px; white-space: nowrap; - &::after{ - content: ''; + + &::after { + content: ""; display: block; } - &.link-icon{ + + &.link-icon { //margin-left: 10px; - cursor: pointer; padding-top: 2px; + cursor: pointer; } } @@ -326,7 +328,8 @@ mat-dialog-container { } } - .create-resources-dialog, .top-select { + .create-resources-dialog, + .top-select { margin-left: 6px; min-width: calc(100% + 10px) !important; } @@ -356,103 +359,103 @@ mat-dialog-container { display: flex; } -.endpoints-table{ +.endpoints-table { border-collapse: separate; } -.mat-step-icon-state-number .mat-step-icon-content{ +.mat-step-icon-state-number .mat-step-icon-content { top: 49%; } -.confirmation-dialog p.delete-user{ - font-weight: 500; +.confirmation-dialog p.delete-user { max-height: 200px; padding: 5px; + font-weight: 500; overflow: hidden auto; text-overflow: ellipsis; } -.bucket-browser{ +.bucket-browser { .mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper { width: calc(100% + 85px); } } -.full-size-tooltip{ - max-width: 1100px !important; +.full-size-tooltip { + max-width: 1100px !important; white-space: pre-line; } -.mat-list-base .mat-list-item.delete-item{ +.mat-list-base .mat-list-item.delete-item { height: 30px; } -.mat-list-item{ +.mat-list-item { font-family: "Open Sans", sans-serif; font-weight: 400; } -.d-none{ +.d-none { display: none !important; } -.d-flex{ +.d-flex { display: flex !important; } -.progres{ - border: 1px solid rgba(0,0,0,.12); - height: 17px; +.progres { position: relative; + height: 17px; width: 155px; + border: 1px solid rgba(0, 0, 0, 0.12); - .bar{ + .bar { position: absolute; top: 0; bottom: 0; left: 0; width: 0; - background-color: #00bcd4; + background-color: #00bcd4; } - .progress-bar-text{ + .progress-bar-text { position: absolute; left: 5px; top: 0; bottom: 0; + z-index: 10; font-size: 11px; line-height: 13px; color: rgba(0, 0, 0, 0.87); - z-index: 10; } } -.not-allow{ +.not-allow { cursor: not-allowed !important; - &.open-bucket{ + + &.open-bucket { color: $blue-grey-color !important; } } -.audit-info-content{ +.audit-info-content { .mat-list { height: unset; .list-header { line-height: unset; - - .mat-list-item-content{ + + .mat-list-item-content { align-items: start !important; } } } } -.add-folder-form .mat-hint{ +.add-folder-form .mat-hint { color: #00bcd4; } - @media screen and (max-width: 1280px) { .modal-fullscreen { max-width: 100vw !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 16ffc1e..74dc5b4 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 @@ -17,9 +17,12 @@ * under the License. */ -html, body { height: 100%; } +html, body { + height: 100%; +} + body { - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; font-size: 15px; overflow-x: hidden; font-weight: 300; @@ -29,28 +32,54 @@ body.modal-open { overflow: hidden; } -.alignleft, .al {float: left} -.alignright, .ar {float: right; left: 26px; z-index: 1010} -.aligncenter, .ac {margin-left: auto;margin-right: auto} +.alignleft, .al { + float: left; +} + +.alignright, .ar { + float: right; + left: 26px; + z-index: 1010; +} -.mt-5 {margin-top: 5px} +.aligncenter, .ac { + margin-left: auto; + margin-right: auto; +} +.mt-5 { + margin-top: 5px; +} -.pr-3{padding-right: 3px} +.pr-3 { + padding-right: 3px; +} -.pb-50 {padding-bottom: 50px;} -.pb-25 {padding-bottom: 25px;} -.pb-10 {padding-bottom: 10px;} +.pb-50 { + padding-bottom: 50px; +} +.pb-25 { + padding-bottom: 25px; +} +.pb-10 { + padding-bottom: 10px; +} -.full-width{width: 100%;} +.full-width { + width: 100%; +} -.txt-r {text-align: right } -.txt-l {text-align: left } +.txt-r { + text-align: right; +} +.txt-l { + text-align: left; +} -input[type='text']:not(.mat-input-element), -input[type='number']:not(.mat-input-element), -input[type='email']:not(.mat-input-element), -input[type='password']:not(.mat-input-element), +input[type="text"]:not(.mat-input-element), +input[type="number"]:not(.mat-input-element), +input[type="email"]:not(.mat-input-element), +input[type="password"]:not(.mat-input-element), textarea { width: 100%; height: 36px; @@ -60,39 +89,41 @@ textarea { background: rgba(247, 247, 247, 0.87); transition: border 0.1s ease-out; outline: none; - font: 300 16px/26px 'Open Sans', sans-serif; + font: 300 16px/26px "Open Sans", sans-serif; } -input[type='text']:not(.mat-input-element):focus, -input[type='number']:not(.mat-input-element):focus, -input[type='email']:not(.mat-input-element):focus, -input[type='password']:not(.mat-input-element):focus, +input[type="text"]:not(.mat-input-element):focus, +input[type="number"]:not(.mat-input-element):focus, +input[type="email"]:not(.mat-input-element):focus, +input[type="password"]:not(.mat-input-element):focus, textarea:focus { border: none; background: #fff; transition: border 0.2s ease-in; - 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: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } -input[type='text']:not(.mat-input-element):disabled { - opacity: .4; + +input[type="text"]:not(.mat-input-element):disabled { + opacity: 0.4; cursor: not-allowed; - color: rgba(0,0,0,.38); - background-color: rgba(0,0,0,.12); + color: rgba(0, 0, 0, 0.38); + background-color: rgba(0, 0, 0, 0.12); } -input[type='text']:not(.mat-input-element)::placeholder, -input[type='number']:not(.mat-input-element)::placeholder, -input[type='email']:not(.mat-input-element)::placeholder, -input[type='password']:not(.mat-input-element)::placeholder, +input[type="text"]:not(.mat-input-element)::placeholder, +input[type="number"]:not(.mat-input-element)::placeholder, +input[type="email"]:not(.mat-input-element)::placeholder, +input[type="password"]:not(.mat-input-element)::placeholder, textarea::placeholder { color: #718ba6; } -.control-group, .row-wrap { +.control-group, +.row-wrap { + position: relative; display: flex; flex-flow: row wrap; padding-bottom: 20px; - position: relative; } .row-wrap { @@ -104,13 +135,13 @@ textarea::placeholder { } .control-group .label { + align-self: center; width: 35%; color: #718ba6; font-size: 15px; font-weight: 600; - align-self: center; text-align: left; - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; } .control-group .control { @@ -118,14 +149,28 @@ textarea::placeholder { } button { - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; } -.info_color {color: #5bc0de} -.primary_color {color: #337ab7} -.success_color {color: #5cb85c} -.warning_color {color: #f0ad4e} -.danger_color {color: #d9534f} +.info_color { + color: #5bc0de; +} + +.primary_color { + color: #337ab7; +} + +.success_color { + color: #5cb85c; +} + +.warning_color { + color: #f0ad4e; +} + +.danger_color { + color: #d9534f; +} .list-header { width: 100%; @@ -144,10 +189,11 @@ button { } } } + .capt { + margin-right: 0px; font-size: 13px; color: #35afd5; - margin-right: 0px; font-style: normal; } } @@ -156,14 +202,16 @@ button { color: #35afd5; overflow: hidden; cursor: pointer; - transition: all .45s ease-in-out; + transition: all 0.45s ease-in-out; + &:hover { color: #3392b0; } + .material-icons { + padding-right: 5px; font-size: 20px; vertical-align: top; - padding-right: 5px; overflow: hidden; } } @@ -177,21 +225,21 @@ button { line-height: 26px; } -input[type=file], -input[type=file]::-webkit-file-upload-button { - cursor: pointer; +input[type="file"], +input[type="file"]::-webkit-file-upload-button { + cursor: pointer; } -.refresh-icon{ +.refresh-icon { color: #35afd5; } .buttons { position: absolute; + bottom: 9px; + z-index: 102; display: flex; justify-content: space-around; - z-index: 102; - bottom: 9px; width: 100%; .mat-mini-fab { @@ -199,26 +247,23 @@ input[type=file]::-webkit-file-upload-button { width: 25px; .mat-button-wrapper { - padding: 0; - line-height: unset; display: flex; align-items: center; justify-content: center; - padding-top: 2px; + padding: 2px 0 0; + line-height: unset; } } } -.shadow-none{ +.shadow-none { box-shadow: none !important; } -.right-sticky{ +.right-sticky { right: -15px !important; } -.cursor-pointer{ +.cursor-pointer { cursor: pointer; } - - diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_reset.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_reset.scss index 6e90bae..3386a8d 100644 --- a/services/self-service/src/main/resources/webapp/src/assets/styles/_reset.scss +++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_reset.scss @@ -48,7 +48,7 @@ ul { } a { - text-decoration: none + text-decoration: none; } table { @@ -56,23 +56,22 @@ table { border-spacing: 0; } -[hidden], -.hidden { +[hidden], .hidden { display: none !important; } ::-moz-selection, ::selection { color: #fff; - background: #3399ff + background: #3399ff; } :focus { - outline: none + outline: none; } ::-moz-focus-inner { - border: 0 + border: 0; } ::-webkit-file-upload-button { @@ -98,7 +97,6 @@ table { } input { - &::-ms-clear, &::-ms-reveal { display: none; 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 4a37d89..becd4a2 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 @@ -26,10 +26,11 @@ font-style: normal; font-weight: 600; font-size: 15px; - font-family: 'Open Sans', sans-serif; + 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); + + &[disabled] { + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } i { @@ -43,8 +44,9 @@ margin: 0 5px 0 0; font-size: 20px; vertical-align: middle; - &.arrow-icon{ - vertical-align: -5px + + &.arrow-icon { + vertical-align: -5px; } } } @@ -56,23 +58,23 @@ &.action { width: 140px; - &.install-btn{ + &.install-btn { margin-left: 0; } - &.close-btn{ + &.close-btn { margin-right: 25px; } } &.butt-success { - background-color: #49af38; margin-left: 25px; + background-color: #49af38; color: #fff; &.mini { - margin-left: 5px; width: 80px; + margin-left: 5px; } } @@ -90,8 +92,8 @@ } &.butt-generate { - color: #35afd5; width: 170px; + color: #35afd5; &:active { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); @@ -100,15 +102,13 @@ } } - - .selector-wrapper { display: flex; align-self: center; width: 100%; height: 36px; padding-left: 10px; - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; font-size: 15px; font-weight: 300; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); @@ -125,50 +125,49 @@ } .caret { + position: absolute; + right: 0; + top: 0px; width: 40px; height: 40px; color: #4ab8dc; border: none; border-left: 1px solid #ececec; background-color: #fff; - position: absolute; - right: 0; - top: 0px; cursor: pointer; &.not-allowed { background-color: #dcdcdc; .mat-select-placeholder { - cursor: not-allowed; + cursor: not-allowed; } } } } } - -.audit{ +.audit { .select-wrapper { - .mat-reset{ - .selector-wrapper{ + .mat-reset { + .selector-wrapper { height: 25px; - .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{ - padding-top: 6px; - font-size: 13px; - } + .mat-form-field .mat-form-field-wrapper .mat-form-field-infix { + padding-top: 6px; + font-size: 13px; + } .caret { width: 25px; height: 31px; - } } } } } + .multiple-select { - border-bottom: 1px solid #dedbdb; padding: 0; + border-bottom: 1px solid #dedbdb; a { display: inline-block; @@ -210,10 +209,10 @@ } .mat-option { - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; .mat-option-text { - color: #607D8B; + color: #607d8b; font-size: 15px; } @@ -250,17 +249,17 @@ font-size: 14px; } -.mat-select-disabled{ +.mat-select-disabled { .mat-select-placeholder { cursor: not-allowed; } - .mat-select-value{ + .mat-select-value { cursor: not-allowed; } } .mat-select-disabled + .caret, -.mat-tab-disabled{ +.mat-tab-disabled { cursor: not-allowed !important; } @@ -274,7 +273,7 @@ /* grid filtering */ .filter-row .dropdown-multiselect button, -.filter-row input[type='text'] { +.filter-row input[type="text"] { font-size: 14px; height: 34px; } @@ -294,7 +293,7 @@ span.mat-slide-toggle-content { font-weight: 100; font-size: 16px; line-height: 24px; - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; } .backup-dialog .mat-slide-toggle, @@ -351,32 +350,33 @@ span.mat-slide-toggle-content { .project-form, .create-environment, .selection, -.manage-roles{ - .mat-select-value{ - overflow: visible; - } - .mat-form-field-label { - line-height: 21px !important; - font-size: 15px !important; +.manage-roles { + .mat-select-value { + overflow: visible; + } + .mat-form-field-label { + line-height: 21px !important; + font-size: 15px !important; - &:not(.mat-form-field-empty) { - color: transparent !important; - } + &:not(.mat-form-field-empty) { + color: transparent !important; } + } } .mat-chip-list { pointer-events: none; - .mat-chip{ + .mat-chip { overflow: hidden; pointer-events: all; - &.mat-standard-chip.mat-chip-disabled{ + &.mat-standard-chip.mat-chip-disabled { opacity: 1; } } } -.selection, .project-form { +.selection, +.project-form { .mat-reset .mat-form-field .mat-form-field-wrapper .mat-form-field-label { transform: none; } @@ -385,7 +385,7 @@ span.mat-slide-toggle-content { .manage-roles, .project-form, .selection, -.audit{ +.audit { .mat-form-field { width: 100%; } @@ -410,14 +410,13 @@ span.mat-slide-toggle-content { overflow: hidden; .mat-form-field-wrapper { - .mat-form-field-infix { width: 275px; + padding-top: 10px; border: 0; - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; font-size: 15px; font-weight: 300; - padding-top: 10px; .mat-select-value { max-width: inherit; @@ -481,18 +480,17 @@ span.mat-slide-toggle-content { } .mat-chip { + max-width: 385px !important; background-color: rgba(47, 174, 215, 0.2) !important; color: #687e96; - max-width: 385px !important; } .roles { - .selector-wrapper, .selector-wrapper-edit { .mat-select-trigger { - width: 100%; display: flex; + width: 100%; max-width: 500px; } } @@ -501,7 +499,7 @@ span.mat-slide-toggle-content { .audit { .mat-select { - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; .mat-select-value-text span { color: unset !important; @@ -510,100 +508,102 @@ span.mat-slide-toggle-content { } .empty-checkbox { + position: relative; min-width: 16px; width: 16px; height: 16px; + margin-top: 2px; border-radius: 2px; border: 2px solid lightgrey; - margin-top: 2px; - position: relative; cursor: pointer; &.checked { border-color: #35afd5; background-color: #35afd5; } + .checked-checkbox { + position: absolute; top: 0; left: 4px; width: 5px; height: 10px; border-bottom: 2px solid white; border-right: 2px solid white; - position: absolute; transform: rotate(45deg); } .line-checkbox { + position: absolute; top: 0; left: 2px; width: 8px; height: 7px; border-bottom: 2px solid white; - position: absolute; } } -.none-select{ +.none-select { user-select: none; } -.action-select-wrapper{ +.action-select-wrapper { position: relative; display: block !important; - .action-button-wrapper{ + .action-button-wrapper { position: relative; width: 160px; } - .mat-raised-button.butt{ + .mat-raised-button.butt { margin-bottom: 0; padding-left: 45px; text-align: left; - - &.actions-btn{ + &.actions-btn { padding-right: 38px; margin: 0; - .material-icons{ - transition: ease-in-out 1s; - font-size: 25px; + .material-icons { position: absolute; top: 7px; right: 30px; + transition: ease-in-out 1s; + font-size: 25px; } } } - .action-menu{ + .action-menu { position: absolute; - text-align: center; display: block; + text-align: center; background-color: #fff; - &-item.mat-raised-button.butt{ + &-item.mat-raised-button.butt { + position: relative; z-index: 101; - margin: 0; - box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 0px 0px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); width: 160px; padding: 0 20px; + margin: 0; + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 0px 0px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); border-radius: 0; font-style: normal; font-weight: 600; font-size: 15px; - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; color: #577289; - position: relative; overflow: hidden; line-height: 36px; - &.action-menu-item{ - &:hover{ - color: #00bcd4; + + &.action-menu-item { + &:hover { + color: #00bcd4; background-color: #fafafa; } - &.disabled{ - &:hover{ + + &.disabled { + &:hover { color: #577289; } } @@ -619,7 +619,7 @@ mat-horizontal-stepper { } .mat-step-label { - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; font-size: 15px; font-weight: 300; } @@ -655,8 +655,8 @@ mat-horizontal-stepper { } &.roles { - height: 190px; flex-direction: column; + height: 190px; text-align: center; .inner-step { @@ -671,8 +671,8 @@ mat-horizontal-stepper { } .multiple-select { - border-bottom: 1px solid #dedbdb; padding: 0 !important; + border-bottom: 1px solid #dedbdb; a { display: inline-block; @@ -712,8 +712,8 @@ mat-horizontal-stepper { &.reporting { .dropdown-multiselect { button { - font-size: 13px; padding-left: 10px; + font-size: 13px; } } } @@ -739,20 +739,20 @@ mat-horizontal-stepper { padding: 0; .content { - color: #718ba6; padding: 20px 40px; + margin: 0; + color: #718ba6; font-size: 14px; font-weight: 400; text-align: center; - margin: 0; } .dialog-header { position: relative; top: 0; + height: 54px; padding-left: 30px; background: #f6fafe; - height: 54px; line-height: 54px; } @@ -795,17 +795,17 @@ table.mat-table { font-family: "Open Sans", sans-serif; font-weight: 400; - .mat-cell{ + .mat-cell { font-size: 13px; } .header-row, - .mat-header-row{ + .mat-header-row { .mat-header-cell { - font-family: 'Open Sans', sans-serif; + font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 13px; - .label{ - font-family: 'Open Sans', sans-serif; + .label { + font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 13px; } @@ -814,7 +814,7 @@ table.mat-table { .mat-cell { word-break: break-all; vertical-align: top; - padding: 15px 5px 10px 5px; + padding: 15px 5px 10px; font-size: 13px; font-family: "Open Sans", sans-serif; @@ -843,30 +843,33 @@ mat-divider.mat-divider { mat-progress-bar { .mat-progress-bar-fill::after { - background-color: #00BCD4; + background-color: #00bcd4; } .mat-progress-bar-buffer { background-color: #baf0f7; } } -.manage-roles{ - .mat-horizontal-content-container{ +.manage-roles { + .mat-horizontal-content-container { overflow: visible !important; } } -.filter-row-item, .label-header{ +.filter-row-item, +.label-header { box-shadow: inset 0 -1px 0 lightgrey; border-bottom: none !important; - multi-select-dropdown, .input-wrapper{ + + multi-select-dropdown, + .input-wrapper { position: absolute; top: 10px; left: 5px; right: 5px; } - .input-wrapper{ + .input-wrapper { left: 10px; right: 4px; } @@ -883,27 +886,24 @@ mat-progress-bar { fill: #36afd5; } -#range-picker .ng-daterangepicker, - { +#range-picker .ng-daterangepicker { border: none; border-radius: 0; box-shadow: none; } #range-picker .ng-daterangepicker .calendar { + top: 58px; z-index: 102; border: 1px solid rgba(234, 234, 234, 0.64); border-radius: 0; - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), - 0 2px 2px 0 rgba(0, 0, 0, 0.14), - 0 1px 5px 0 rgba(0, 0, 0, 0.12); - top: 58px; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); &.is-to:after { left: 250px; } - &.is-opened{ + &.is-opened { display: flex; } } @@ -922,8 +922,8 @@ mat-progress-bar { #range-picker .ng-daterangepicker .calendar .side-container .side-button.is-active, #range-picker .ng-daterangepicker .input-section .label-txt { - color: #35afd5; display: unset; + color: #35afd5; font-size: 13px; } @@ -937,7 +937,6 @@ mat-progress-bar { #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, @@ -951,7 +950,7 @@ mat-progress-bar { } #range-picker .ng-daterangepicker .calendar .calendar-container .day.is-within-range { - background: #e9f8fc + background: #e9f8fc; } #range-picker .ng-daterangepicker .input-section .cal-icon svg path { @@ -959,9 +958,9 @@ mat-progress-bar { } #range-picker .ng-daterangepicker .input-section .value-txt { - color: #718ba6; display: unset; padding-left: 5px; + color: #718ba6; } #range-picker .ng-daterangepicker .input-section .value-txt.untouched, @@ -978,9 +977,9 @@ mat-progress-bar { //} .filter-row .actions { - text-align: right; display: flex; justify-content: flex-end; + text-align: right; } .filter-row .actions button { @@ -1003,49 +1002,50 @@ mat-progress-bar { } #range-picker .ng-daterangepicker { - height: 37px; - width: 360px; display: flex; justify-content: space-between; + height: 37px; + width: 360px; - - .d-none{ + .d-none { display: none; } .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); + padding-right: 30px; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } } -.show-all-btn.mat-raised-button .mat-button-wrapper > *{ +.show-all-btn.mat-raised-button .mat-button-wrapper > * { vertical-align: baseline; } .resource-btns { - .mat-raised-button{ + .mat-raised-button { line-height: 38px; } - .mat-select-value{ + .mat-select-value { margin-top: 1px; } } -.alert .highlight .strong{ color: #35afd5} +.alert .highlight .strong { + color: #35afd5; +} .audit-table-wrapper, -.billing-page-wrapper{ - tfoot{ +.billing-page-wrapper { + tfoot { position: sticky; z-index: 102; bottom: 0; } - .dropdown-multiselect{ + .dropdown-multiselect { &.resources { .list-menu { .list-item { @@ -1055,20 +1055,23 @@ mat-progress-bar { } } } -.configuration-wrapper{ - box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); - .mat-tab-header{ +.configuration-wrapper { + box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), + 0px 6px 10px 0px rgba(0, 0, 0, 0.14), + 0px 1px 18px 0px rgba(0, 0, 0, 0.12); + + .mat-tab-header { margin: 0 30px; } - .mat-tab-label{ - .mat-tab-label-content{ + .mat-tab-label { + .mat-tab-label-content { font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 13px; } } - .ace-monokai{ + .ace-monokai { height: calc(100%); } @@ -1076,13 +1079,7 @@ mat-progress-bar { width: unset !important; } - .ace_scrollbar{ + .ace_scrollbar { scrollbar-width: thin; } } - - - - - - diff --git a/services/self-service/src/main/resources/webapp/src/styles.scss b/services/self-service/src/main/resources/webapp/src/styles.scss index efc6b3a..00a27bb 100644 --- a/services/self-service/src/main/resources/webapp/src/styles.scss +++ b/services/self-service/src/main/resources/webapp/src/styles.scss @@ -19,20 +19,20 @@ // @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; -@import './assets/fonts/Material_Icons/material-icons.css'; -@import './assets/fonts/Open_Sans/open-sans.css'; +@import "./assets/fonts/Material_Icons/material-icons.css"; +@import "./assets/fonts/Open_Sans/open-sans.css"; -@import '_reset.scss'; -@import '_general.scss'; -@import '_theme.scss'; -@import '_dialogs.scss'; +@import "_reset.scss"; +@import "_general.scss"; +@import "_theme.scss"; +@import "_dialogs.scss"; .sans { - font-family: 'Open Sans', sans-serif !important; + font-family: "Open Sans", sans-serif !important; } .mat-tab-label { - font-family: 'Open Sans', sans-serif !important; + font-family: "Open Sans", sans-serif !important; color: #455c74; } @@ -61,13 +61,14 @@ height: calc(100% - 48px); } - .mat-chip-list-wrap { max-height: 120px; - overflow: auto; margin-right: 5px; - .mat-chip-list-wrapper{ + overflow: auto; + + .mat-chip-list-wrapper { margin: 0; + .mat-chip { font-size: 13px; } @@ -75,10 +76,10 @@ } mat-chip.mat-chip { + padding: 8px 18px; outline: none; color: #758ea8; font-size: 14px; - padding: 8px 18px; } mat-chip.mat-chip a { @@ -97,17 +98,17 @@ mat-chip.mat-chip strong { } .loader { + position: relative; + top: 28px; + width: 18px; + height: 18px; + margin-right: 15px; + float: right; border: 3px solid #f3f3f3; border-radius: 50%; border-top: 3px solid #35afd5; - width: 18px; - height: 18px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; - position: relative; - top: 28px; - margin-right: 15px; - float: right; } .rotate { @@ -156,7 +157,7 @@ mat-chip.mat-chip strong { .deleted, .invalid_version, .invalid_name, -.installation_error{ +.installation_error { color: #f1696e; } @@ -172,13 +173,13 @@ mat-chip.mat-chip strong { pointer-events: none; } -.cursor-not-allow{ +.cursor-not-allow { cursor: not-allowed !important; } .not-active { cursor: not-allowed !important; - opacity: .6; + opacity: 0.6; } .message { @@ -187,22 +188,23 @@ mat-chip.mat-chip strong { } .info { + position: relative; font-size: 15px; font-weight: 300; color: #35afd5; - position: relative; - .buttons{ + + .buttons { position: absolute; } } .base-retreat { + display: inline-block; height: 100%; max-height: 100%; width: 100%; - box-sizing: border-box; padding: 12px 15px; - display: inline-block; + box-sizing: border-box; } .sub-nav { @@ -246,21 +248,21 @@ mat-chip.mat-chip strong { } .tooltip-wrap .tooltip { - background: rgba(97, 97, 97, 0.9); + position: absolute; + left: -25px; bottom: 100%; - color: #f3f3f3; display: block; - left: -25px; + width: 100%; margin-bottom: 5px; - opacity: 0; padding: 5px; + background: rgba(97, 97, 97, 0.9); + color: #f3f3f3; + opacity: 0; white-space: pre-wrap; word-wrap: break-word; border-radius: 2px; font-size: 10px; pointer-events: none; - position: absolute; - width: 100%; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); @@ -289,8 +291,7 @@ mat-chip.mat-chip strong { } /* IE can just show/hide with no transition */ -@media all and (-ms-high-contrast: none), -(-ms-high-contrast: active) { +@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .tooltip-wrap .tooltip { display: none; } @@ -301,13 +302,13 @@ mat-chip.mat-chip strong { } /* Turn off number input spinners */ -input[type='number']::-webkit-inner-spin-button, -input[type='number']::-webkit-outer-spin-button { +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } -input[type='number'] { +input[type="number"] { -moz-appearance: textfield; } @@ -320,19 +321,19 @@ input[type='number'] { text-align: right; } -.pl-5{ +.pl-5 { padding-left: 5px; } -.pl-10{ +.pl-10 { padding-left: 10px !important; } -.pl-20{ +.pl-20 { padding-left: 20px; } -.pr-20{ +.pr-20 { padding-right: 20px; } @@ -385,7 +386,7 @@ input[type='number'] { } .ani { - transition: all .35s ease-in-out; + transition: all 0.35s ease-in-out; } .empty-box { @@ -399,7 +400,9 @@ input[type='number'] { text-align: center; } } -#scrolling, .scrolling, ace_scrollbar{ +#scrolling, +.scrolling, +ace_scrollbar { scrollbar-width: thin; } @@ -456,8 +459,8 @@ input[type='number'] { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; - &::after{ - content: ''; + &::after { + content: ""; display: block; } } @@ -474,27 +477,27 @@ input[type='number'] { .overlay-container { #toast-container { - >div { - 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); + > div { + margin: 5px 0 15px; + padding: 12px 20px; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); border-radius: 2px; background-color: #fff; - padding: 12px 20px; overflow: inherit; - margin: 5px 0 15px; font-size: 14px; &::before { position: absolute; left: -15px; top: -15px; - font-family: "Material Icons"; - background-color: #fff; width: 30px; height: 30px; padding: 7px; + font-family: "Material Icons"; + background-color: #fff; box-sizing: border-box; border-radius: 50%; - 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: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } &.toast-success { @@ -537,22 +540,23 @@ input[type='number'] { } .dialog-max-width { - margin: 0 auto; max-width: 350px; + margin: 0 auto; overflow: hidden; text-overflow: ellipsis; - &::after{ - content: ''; + &::after { + content: ""; display: block; } } .group-updated-tooltip { - white-space: pre-line; max-width: fit-content !important; + white-space: pre-line; } -.mat-tooltip-for-users, .mat-tooltip-description { +.mat-tooltip-for-users, +.mat-tooltip-description { overflow-wrap: break-word; } --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
