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 <[email protected]> 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: [email protected] For additional commands, e-mail: [email protected]
