[DATALAB-2347] refactored shared components
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 {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;
- padding-left: 15px;
- font-size: 13px;
- padding-top: 1px;
height: 34px;
+ padding-left: 15px;
+ padding-top: 1px;
+ 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)}">
+ <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': 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>
+ </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>
- {{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>
-
- </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;
- padding-left: 15px;
- font-size: 13px;
height: 34px;
+ padding-left: 15px;
+ 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 +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 @@
@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 @@
};
public selectedList: any;
- constructor() {
- }
+ constructor() {}
toggleSelectedOptions( model, value, event?) {
if (event) event.preventDefault();
@@ -63,7 +58,9 @@
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 @@
export class InformMessageComponent implements OnInit {
@Input() message: string;
- constructor() {}
+ constructor() { }
- ngOnInit(): void {
- }
-
-
+ 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.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" fill="#FFFFFF"></path>-->
-<!-- <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 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" fill="#577289"></path>-->
-<!-- <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.021012 C80.5661277,195.326373 69.3348085,191.455054 66.5787234,179.929607 C65.6350638,175.69199 65.0549787,171.380841 64.8425532,167.04382 C64.5497872,162.452161 65.0563404,157.808756 64.706383,153.225267 C63.7368511,140.613182 62.1028085,136.30748 50,135.711054 L50,120.014714 C50.8674043,119.81182 51.7470638,119.662033 52.6321702,119.562629 C59.2677447,119.23582 62.0646809,117.201437 63.5489362,110.665267 C64.2243404,106.992756 64.6246809,103.275309 64.7431489,99.5428839 C65.268766,92.3258627 65.0822128,84.991735 66.2845957,77.8918201 C68.0221277,67.6245861 74.3962553,62.6366712 84.9249362,62.0783733 C87.9206809,61.9176925 90.9259574,62.0538627 94.3206809,62.0538627 L94.3206809,76.1447563 C92.9235745,76.2441605 91.6435745,76.4470542 90.3717447,76.4089265 C81.7916596,76.146118 81.3477447,79.0683308 80.7213617,86.1709691 C80.3305532,90.6250967 80.8697872,95.1554797 80.5661277,99.6245861 C80.2488511,104.071905 79.6537872,108.496075 78.7850213,112.869863 C77.547234,119.208586 73.6500426,123.922799 68.2495319,127.92348 C78.7332766,134.745607 79.9261277,145.346458 80.6069787,156.110714 C80.9732766,161.895224 80.8057872,167.720586 81.3926809,173.476501 C81.8502128,177.944246 83.5877447,179.08399 88.2011915,179.220161 Z M97.0372766,118.789182 C97.0917447,118.789182 97.1448511,118.789182 97.1993191,118.789182 C102.211745,118.872246 106.209702,123.002288 106.126638,128.016075 C106.126638,128.180841 106.121191,128.344246 106.11166,128.50765 C105.829787,133.407054 101.630298,137.149012 96.7308936,136.867139 C96.5334468,136.871224 96.3373617,136.867139 96.1399149,136.857607 C91.1506383,136.609778 87.3065532,132.36399 87.554383,127.374714 C87.8022128,122.385437 92.048,118.541352 97.0372766,118.789182 Z M128.273362,118.789182 C133.755574,118.746969 137.396766,122.29965 137.425362,127.719224 C137.455319,133.284501 134.003404,136.845352 128.556596,136.868501 C123.017191,136.893012 119.370553,133.389352 119.340596,128.002458 C119.324255,127.727395 119.32017,127.452331 119.32834,127.177267 C119.482213,122.390884 123.486979,118.635309 128.273362,118.789182 Z M193.673191,111.92348 C195.131574,117.370288 197.970723,119.284841 203.704851,119.546288 C204.644426,119.589863 205.579915,119.749182 206.868085,119.892161 L206.868085,135.584416 C206.170894,135.813182 205.456,135.984756 204.730213,136.096416 C197.046128,136.574373 193.54383,139.726714 192.76766,147.431224 C192.272,152.349692 192.312851,157.322629 191.972426,162.258799 C191.829447,167.678373 191.336511,173.082969 190.49634,178.438544 C188.535489,188.142033 182.477277,192.982884 172.467404,193.573863 C169.245617,193.764501 166.000681,193.60382 162.526979,193.60382 L162.526979,179.578288 C164.396596,179.462544 166.046979,179.303224 167.701447,179.263735 C173.682043,179.120756 175.796766,177.192586 176.089532,171.252841 C176.413617,164.727565 176.555234,158.194118 176.846638,151.66748 C177.270128,142.233607 179.853277,133.806033 188.641702,127.922118 C183.612936,124.336756 179.575489,119.994288 178.529702,114.138969 C177.264681,107.041778 176.85617,99.7879903 176.175319,92.5913946 C175.838979,88.9937776 175.855319,85.3648414 175.504,81.7699478 C175.125447,77.8890967 172.459234,76.5464584 168.926979,76.4593095 C166.903489,76.4102882 164.87183,76.4497776 162.284596,76.4497776 L162.284596,62.7537776 C178.793872,60.0126712 190.198128,65.5057776 191.257532,81.3015222 C191.701447,87.9343733 191.636085,94.5985435 192.060936,101.231395 C192.247489,104.839905 192.786723,108.421182 193.673191,111.92348 Z" fill="#ffffff"></path>-->
-<!-- </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.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" fill="#FFFFFF"></path>-->
+ <!-- <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 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" fill="#577289"></path>-->
+ <!-- <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.021012 C80.5661277,195.326373 69.3348085,191.455054 66.5787234,179.929607 C65.6350638,175.69199 65.0549787,171.380841 64.8425532,167.04382 C64.5497872,162.452161 65.0563404,157.808756 64.706383,153.225267 C63.7368511,140.613182 62.1028085,136.30748 50,135.711054 L50,120.014714 C50.8674043,119.81182 51.7470638,119.662033 52.6321702,119.562629 C59.2677447,119.23582 62.0646809,117.201437 63.5489362,110.665267 C64.2243404,106.992756 64.6246809,103.275309 64.7431489,99.5428839 C65.268766,92.3258627 65.0822128,84.991735 66.2845957,77.8918201 C68.0221277,67.6245861 74.3962553,62.6366712 84.9249362,62.0783733 C87.9206809,61.9176925 90.9259574,62.0538627 94.3206809,62.0538627 L94.3206809,76.1447563 C92.9235745,76.2441605 91.6435745,76.4470542 90.3717447,76.4089265 C81.7916596,76.146118 81.3477447,79.0683308 80.7213617,86.1709691 C80.3305532,90.6250967 80.8697872,95.1554797 80.5661277,99.6245861 C80.2488511,104.071905 79.6537872,108.496075 78.7850213,112.869863 C77.547234,119.208586 73.6500426,123.922799 68.2495319,127.92348 C78.7332766,134.745607 79.9261277,145.346458 80.6069787,156.110714 C80.9732766,161.895224 80.8057872,167.720586 81.3926809,173.476501 C81.8502128,177.944246 83.5877447,179.08399 88.2011915,179.220161 Z M97.0372766,118.789182 C97.0917447,118.789182 97.1448511,118.789182 97.1993191,118.789182 C102.211745,118.872246 106.209702,123.002288 106.126638,128.016075 C106.126638,128.180841 106.121191,128.344246 106.11166,128.50765 C105.829787,133.407054 101.630298,137.149012 96.7308936,136.867139 C96.5334468,136.871224 96.3373617,136.867139 96.1399149,136.857607 C91.1506383,136.609778 87.3065532,132.36399 87.554383,127.374714 C87.8022128,122.385437 92.048,118.541352 97.0372766,118.789182 Z M128.273362,118.789182 C133.755574,118.746969 137.396766,122.29965 137.425362,127.719224 C137.455319,133.284501 134.003404,136.845352 128.556596,136.868501 C123.017191,136.893012 119.370553,133.389352 119.340596,128.002458 C119.324255,127.727395 119.32017,127.452331 119.32834,127.177267 C119.482213,122.390884 123.486979,118.635309 128.273362,118.789182 Z M193.673191,111.92348 C195.131574,117.370288 197.970723,119.284841 203.704851,119.546288 C204.644426,119.589863 205.579915,119.749182 206.868085,119.892161 L206.868085,135.584416 C206.170894,135.813182 205.456,135.984756 204.730213,136.096416 C197.046128,136.574373 193.54383,139.726714 192.76766,147.431224 C192.272,152.349692 192.312851,157.322629 191.972426,162.258799 C191.829447,167.678373 191.336511,173.082969 190.49634,178.438544 C188.535489,188.142033 182.477277,192.982884 172.467404,193.573863 C169.245617,193.764501 166.000681,193.60382 162.526979,193.60382 L162.526979,179.578288 C164.396596,179.462544 166.046979,179.303224 167.701447,179.263735 C173.682043,179.120756 175.796766,177.192586 176.089532,171.252841 C176.413617,164.727565 176.555234,158.194118 176.846638,151.66748 C177.270128,142.233607 179.853277,133.806033 188.641702,127.922118 C183.612936,124.336756 179.575489,119.994288 178.529702,114.138969 C177.264681,107.041778 176.85617,99.7879903 176.175319,92.5913946 C175.838979,88.9937776 175.855319,85.3648414 175.504,81.7699478 C175.125447,77.8890967 172.459234,76.5464584 168.926979,76.4593095 C166.903489,76.4102882 164.87183,76.4497776 162.284596,76.4497776 L162.284596,62.7537776 C178.793872,60.0126712 190.198128,65.5057776 191.257532,81.3015222 C191.701447,87.9343733 191.636085,94.5985435 192.060936,101.231395 C192.247489,104.839905 192.786723,108.421182 193.673191,111.92348 Z" fill="#ffffff"></path>-->
+ <!-- </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 @@
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 @@
.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 @@
.error,
.user-name,
.meta {
- transition: all .35s ease-in-out;
+ transition: all 0.35s ease-in-out;
}
.hamburger {
- border: none;
- padding: 0;
- background: none;
- outline: none;
width: 60px;
height: 46px;
+ padding: 0;
+ border: none;
+ background: none;
+ outline: none;
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 @@
}
mat-sidenav {
-
mat-nav-list {
height: 100%;
@@ -329,6 +329,6 @@
}
}
-.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 @@
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 @@
<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 @@
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 @@
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 @@
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 {
- padding-left: 30px;
- background: $modal-header-color;
- height: 50px;
- line-height: 50px;
position: relative;
+ padding-left: 30px;
+ height: 50px;
+ background: $modal-header-color;
+ line-height: 50px;
.modal-title {
width: 90%;
@@ -89,8 +89,8 @@
font-size: 18px;
background: $modal-header-color;
- &::after{
- content: '';
+ &::after {
+ content: "";
display: block;
}
@@ -112,7 +112,7 @@
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 @@
.dialog-content {
.mat-select {
- font-family: 'Opens Sans', sans-serif;
+ font-family: "Opens Sans", sans-serif;
}
}
@@ -137,7 +137,7 @@
.upload-key {
margin-bottom: 20px;
- &>div>div {
+ & > div > div {
margin-top: 5px;
}
}
@@ -156,9 +156,10 @@
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 @@
}
.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 @@
.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 @@
}
.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 @@
text-overflow: ellipsis;
overflow: hidden;
cursor: default;
- &::after{
- content: '';
+ &::after {
+ content: "";
display: block;
}
}
@@ -276,9 +276,9 @@
.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 @@
}
}
- 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 @@
}
}
- .create-resources-dialog, .top-select {
+ .create-resources-dialog,
+ .top-select {
margin-left: 6px;
min-width: calc(100% + 10px) !important;
}
@@ -356,103 +359,103 @@
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 @@
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;
+}
-.mt-5 {margin-top: 5px}
+.alignright, .ar {
+ float: right;
+ left: 26px;
+ z-index: 1010;
+}
+.aligncenter, .ac {
+ margin-left: auto;
+ margin-right: auto;
+}
-.pr-3{padding-right: 3px}
+.mt-5 {
+ margin-top: 5px;
+}
-.pb-50 {padding-bottom: 50px;}
-.pb-25 {padding-bottom: 25px;}
-.pb-10 {padding-bottom: 10px;}
+.pr-3 {
+ padding-right: 3px;
+}
-.full-width{width: 100%;}
+.pb-50 {
+ padding-bottom: 50px;
+}
+.pb-25 {
+ padding-bottom: 25px;
+}
+.pb-10 {
+ padding-bottom: 10px;
+}
-.txt-r {text-align: right }
-.txt-l {text-align: left }
+.full-width {
+ width: 100%;
+}
-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),
+.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),
textarea {
width: 100%;
height: 36px;
@@ -60,39 +89,41 @@
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);
-}
-input[type='text']:not(.mat-input-element):disabled {
- opacity: .4;
- cursor: not-allowed;
- color: rgba(0,0,0,.38);
- background-color: 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)::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):disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+ 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,
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 @@
}
.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 @@
}
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 @@
}
}
}
+
.capt {
+ margin-right: 0px;
font-size: 13px;
color: #35afd5;
- margin-right: 0px;
font-style: normal;
}
}
@@ -156,14 +202,16 @@
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 @@
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 @@
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 @@
}
a {
- text-decoration: none
+ text-decoration: none;
}
table {
@@ -56,23 +56,22 @@
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 @@
}
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 @@
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 @@
.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 @@
.manage-roles,
.project-form,
.selection,
-.audit{
+.audit {
.mat-form-field {
width: 100%;
}
@@ -410,14 +410,13 @@
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 @@
}
.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 @@
.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 @@
}
.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-step-label {
- font-family: 'Open Sans', sans-serif;
+ font-family: "Open Sans", sans-serif;
font-size: 15px;
font-weight: 300;
}
@@ -655,8 +655,8 @@
}
&.roles {
- height: 190px;
flex-direction: column;
+ height: 190px;
text-align: center;
.inner-step {
@@ -671,8 +671,8 @@
}
.multiple-select {
- border-bottom: 1px solid #dedbdb;
padding: 0 !important;
+ border-bottom: 1px solid #dedbdb;
a {
display: inline-block;
@@ -712,8 +712,8 @@
&.reporting {
.dropdown-multiselect {
button {
- font-size: 13px;
padding-left: 10px;
+ font-size: 13px;
}
}
}
@@ -739,20 +739,20 @@
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 @@
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 @@
.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-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 @@
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 @@
#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 @@
#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 @@
}
#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 @@
}
#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 @@
//}
.filter-row .actions {
- text-align: right;
display: flex;
justify-content: flex-end;
+ text-align: right;
}
.filter-row .actions button {
@@ -1003,49 +1002,50 @@
}
#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 @@
}
}
}
-.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 @@
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 @@
}
.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 @@
.deleted,
.invalid_version,
.invalid_name,
-.installation_error{
+.installation_error {
color: #f1696e;
}
@@ -172,13 +173,13 @@
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 @@
}
.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 @@
}
.tooltip-wrap .tooltip {
- background: rgba(97, 97, 97, 0.9);
- bottom: 100%;
- color: #f3f3f3;
- display: block;
+ position: absolute;
left: -25px;
+ bottom: 100%;
+ display: block;
+ 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 @@
}
/* 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 @@
}
/* 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 @@
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 @@
}
.ani {
- transition: all .35s ease-in-out;
+ transition: all 0.35s ease-in-out;
}
.empty-box {
@@ -399,7 +400,9 @@
text-align: center;
}
}
-#scrolling, .scrolling, ace_scrollbar{
+#scrolling,
+.scrolling,
+ace_scrollbar {
scrollbar-width: thin;
}
@@ -456,8 +459,8 @@
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
- &::after{
- content: '';
+ &::after {
+ content: "";
display: block;
}
}
@@ -474,27 +477,27 @@
.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 @@
}
.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;
}
