You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by an...@apache.org on 2019/05/29 09:05:10 UTC
[incubator-dlab] 19/29: [DLAB-642]: collapse navigation bar fixes
This is an automated email from the ASF dual-hosted git repository.
ankovalyshyn pushed a commit to branch feature/projects
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit 63dd3b44329aede439e847f93c545aff4b4dd2f3
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Tue May 28 12:50:43 2019 +0300
[DLAB-642]: collapse navigation bar fixes
---
.../src/app/shared/navbar/navbar.component.html | 32 ++++++++++++++++------
.../src/app/shared/navbar/navbar.component.scss | 15 ++++++++--
.../src/app/shared/navbar/navbar.component.ts | 2 +-
3 files changed, 36 insertions(+), 13 deletions(-)
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 eb341c5..b5fafec 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
@@ -73,31 +73,45 @@
</div>
<mat-sidenav-container class="example-container" autosize>
- <mat-sidenav #drawer mode="side" opened role="navigation" [style.width]="isExpanded ? '220px' : '80px'">
+ <mat-sidenav #drawer mode="side" opened role="navigation" [style.width]="isExpanded ? '220px' : '60px'">
<mat-nav-list>
<nav>
<a class="nav-item"
[routerLink]="['/resources_list']"
[routerLinkActive]="['active']"
- [routerLinkActiveOptions]="{exact:true}">List of Resources</a>
- <a class="nav-item has-children">Administration
+ [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">
+ <span *ngIf="isExpanded">Administration</span>
+
<a class="sub-nav-item"
- [routerLink]="['/projects']"
+ [routerLink]="['/environment_management']"
[routerLinkActive]="['active']"
- [routerLinkActiveOptions]="{exact:true}">Projects</a>
+ [routerLinkActiveOptions]="{exact:true}">
+ <span *ngIf="isExpanded; else env">Environment Management</span>
+ <ng-template #env><i class="material-icons">account_box</i></ng-template>
+ </a>
<a class="sub-nav-item"
- [routerLink]="['/environment_management']"
+ [routerLink]="['/projects']"
[routerLinkActive]="['active']"
- [routerLinkActiveOptions]="{exact:true}">Environment Management</a>
+ [routerLinkActiveOptions]="{exact:true}">
+ <span *ngIf="isExpanded; else projects">Projects</span>
+ <ng-template #projects><i class="material-icons">dns</i></ng-template>
+ </a>
</a>
<a *ngIf="healthStatus?.billingEnabled" class="nav-item"
[routerLink]="['/billing_report']"
[routerLinkActive]="['active']"
- [routerLinkActiveOptions]="{exact:true}">Billing Report</a>
+ [routerLinkActiveOptions]="{exact:true}">
+ <span *ngIf="isExpanded; else billing">Billing Report</span>
+ <ng-template #billing><i class="material-icons">account_balance_wallet</i></ng-template>
+ </a>
</nav>
</mat-nav-list>
</mat-sidenav>
- <mat-sidenav-content [style.margin-left]="isExpanded ? '220px' : '80px'">
+ <mat-sidenav-content [style.margin-left]="isExpanded ? '220px' : '60px'">
<router-outlet></router-outlet>
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 b7b57a1..2c17bd1 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
@@ -123,15 +123,19 @@ a.nav-item {
display: block;
position: relative;
height: 56px;
- padding: 5px;
+ padding: 5px 10px;
line-height: 48px;
font-family: "Open Sans", sans-serif;
transition: all .45s ease-in-out;
text-decoration: none;
font-size: 14px;
overflow: hidden;
- color: #577289;
+ color: #577289 !important;
outline: none;
+ i {
+ vertical-align: middle;
+ padding-left: 12px;
+ }
&:not(.has-children):hover {
background: none !important;
color: #36afd5;
@@ -155,6 +159,11 @@ a.nav-item {
.sub-nav-item {
display: block;
transition: all .45s ease-in-out;
+ margin-left: 30px;
+ i {
+ vertical-align: middle;
+ padding-left: 12px;
+ }
&:hover {
background: none !important;
color: #36afd5;
@@ -171,7 +180,7 @@ a.nav-item {
padding: 0px;
background: none;
outline: none;
- width: 56px;
+ width: 60px;
height: 46px;
cursor: pointer;
border-radius: 0;
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 72d4c33..8efc7a7 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
@@ -53,7 +53,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
quotesLimit: number = 70;
isLoggedIn: boolean = false;
metadata: any;
- isExpanded: boolean = false;
+ isExpanded: boolean = true;
healthStatus: GeneralEnvironmentStatus;
subscriptions: Subscription = new Subscription();
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org