From 79b767c858d8f3a0779d35ec66e86a4b92bd4bb9 Mon Sep 17 00:00:00 2001 From: Martin Rojas Miguel Angel Date: Fri, 13 Apr 2018 13:25:53 +0200 Subject: [PATCH] TSK-236 Change application header styling --- web/src/app/app.component.html | 46 +------- web/src/app/app.component.scss | 63 ---------- web/src/app/app.component.spec.ts | 6 +- web/src/app/app.component.ts | 5 - web/src/app/app.module.ts | 2 + .../import-export.component.html | 6 +- .../app/shared/nav-bar/nav-bar.component.html | 51 ++++++++ .../app/shared/nav-bar/nav-bar.component.scss | 111 ++++++++++++++++++ .../shared/nav-bar/nav-bar.component.spec.ts | 46 ++++++++ .../app/shared/nav-bar/nav-bar.component.ts | 53 +++++++++ 10 files changed, 271 insertions(+), 118 deletions(-) create mode 100644 web/src/app/shared/nav-bar/nav-bar.component.html create mode 100644 web/src/app/shared/nav-bar/nav-bar.component.scss create mode 100644 web/src/app/shared/nav-bar/nav-bar.component.spec.ts create mode 100644 web/src/app/shared/nav-bar/nav-bar.component.ts diff --git a/web/src/app/app.component.html b/web/src/app/app.component.html index f43517e59..57c672464 100644 --- a/web/src/app/app.component.html +++ b/web/src/app/app.component.html @@ -1,47 +1,5 @@ - - -
+ +
diff --git a/web/src/app/app.component.scss b/web/src/app/app.component.scss index 03da8ab15..e69de29bb 100644 --- a/web/src/app/app.component.scss +++ b/web/src/app/app.component.scss @@ -1,63 +0,0 @@ -svg-icon.logo { - float: left; - width: 55px; - height: 55px; - margin: 0px 15px; - fill:white -} - -.logo-container { - padding-left: 0px; -} - -p.navbar-brand >a{ - text-decoration: none; - color: #9d9d9d; - &:hover { - color: white; - } -} - -/* - * All side bar links styling. -*/ -.nav-sidebar > li > a { - padding-right: 20px; - padding-left: 20px; -} - -.nav-sidebar > .active > a, -.nav-sidebar > .active > a:hover, -.nav-sidebar > .active > a:focus { - color: #fff; - background-color: #428bca; -} - - -.nav.nav-tabs { - & > li { - & > a{ - min-height: 56px; - padding-top: 17px; - } - - &:first-child > a{ - border-left: none; - } - } - & > p{ - margin: 0px; - } -} - -.navbar-brand { - float: none; -} - -.navbar-inverse { - border: none; -} - -.navbar { - margin-bottom: 0px; -} diff --git a/web/src/app/app.component.spec.ts b/web/src/app/app.component.spec.ts index 52532b714..adb2be4c3 100644 --- a/web/src/app/app.component.spec.ts +++ b/web/src/app/app.component.spec.ts @@ -14,6 +14,7 @@ import { SelectedRouteService } from './services/selected-route/selected-route'; import { GeneralMessageModalComponent } from './shared/general-message-modal/general-message-modal.component' import { SpinnerComponent } from './shared/spinner/spinner.component' import { AlertComponent } from './shared/alert/alert.component'; +import { NavBarComponent } from './shared/nav-bar/nav-bar.component'; describe('AppComponent', () => { @@ -27,7 +28,7 @@ describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ - AppComponent, GeneralMessageModalComponent, SpinnerComponent, AlertComponent + AppComponent, GeneralMessageModalComponent, SpinnerComponent, AlertComponent, NavBarComponent ], imports: [ AngularSvgIconModule, @@ -51,9 +52,6 @@ describe('AppComponent', () => { expect(app).toBeTruthy(); })); - it(`should have as title 'Taskana administration'`, (() => { - expect(app.title).toEqual('Taskana administration'); - })); it('should render title in a tag', (() => { fixture.detectChanges(); diff --git a/web/src/app/app.component.ts b/web/src/app/app.component.ts index c7eba7cfd..55ec5f4d5 100644 --- a/web/src/app/app.component.ts +++ b/web/src/app/app.component.ts @@ -1,5 +1,4 @@ import { Component, OnInit, HostListener, OnDestroy } from '@angular/core'; -import { environment } from '../environments/environment'; import { Router, NavigationStart } from '@angular/router'; import { Subscription } from 'rxjs/Subscription'; @@ -16,11 +15,7 @@ import { SelectedRouteService } from './services/selected-route/selected-route'; styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit, OnDestroy { - title = 'Taskana administration'; - adminUrl: string = environment.taskanaAdminUrl; - monitorUrl: string = environment.taskanaMonitorUrl; - workplaceUrl: string = environment.taskanaWorkplaceUrl; workbasketsRoute = true; modalErrorMessage = ''; diff --git a/web/src/app/app.module.ts b/web/src/app/app.module.ts index 8de914b1b..492890c0b 100644 --- a/web/src/app/app.module.ts +++ b/web/src/app/app.module.ts @@ -37,6 +37,7 @@ import { ImportExportComponent } from './shared/import-export/import-export.comp import { MasterAndDetailComponent } from './shared/master-and-detail/master-and-detail.component'; import { ClassificationTypesSelectorComponent } from './shared/classification-types-selector/classification-types-selector.component'; import { TaskanaTreeComponent } from './shared/tree/tree.component'; +import { NavBarComponent } from './shared/nav-bar/nav-bar.component'; /** * Services @@ -100,6 +101,7 @@ const DECLARATIONS = [ TaskanaTreeComponent, ClassificationTypesSelectorComponent, ClassificationDetailsComponent, + NavBarComponent, MapValuesPipe, RemoveNoneTypePipe, SelectWorkBasketPipe, diff --git a/web/src/app/shared/import-export/import-export.component.html b/web/src/app/shared/import-export/import-export.component.html index aad06e0e5..edceeaff4 100644 --- a/web/src/app/shared/import-export/import-export.component.html +++ b/web/src/app/shared/import-export/import-export.component.html @@ -1,10 +1,12 @@ - +
    diff --git a/web/src/app/shared/nav-bar/nav-bar.component.html b/web/src/app/shared/nav-bar/nav-bar.component.html new file mode 100644 index 000000000..b3bc49ea9 --- /dev/null +++ b/web/src/app/shared/nav-bar/nav-bar.component.html @@ -0,0 +1,51 @@ + \ No newline at end of file diff --git a/web/src/app/shared/nav-bar/nav-bar.component.scss b/web/src/app/shared/nav-bar/nav-bar.component.scss new file mode 100644 index 000000000..81dbaa050 --- /dev/null +++ b/web/src/app/shared/nav-bar/nav-bar.component.scss @@ -0,0 +1,111 @@ +$background-color: #224562; +$background-color-sidenav: #263847; +.navbar-inverse { + border:none; + background-color: $background-color; +} + +.navbar-inverse .navbar-toggle, .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { + border: none; + background-color: transparent; +} + +svg-icon.logo { + float: left; + width: 55px; + height: 55px; + padding:2px; +} + +.logo-container { + padding-left: 0px; +} + +p.navbar-brand >a{ + vertical-align: middle; + text-decoration: none; + color: #9d9d9d; + &:hover { + color: white; + } +} + +.navbar-backdrop{ + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: 990; + +} + +/* + * All side bar links styling. +*/ +.nav-sidebar > li > a { + padding-right: 20px; + padding-left: 20px; +} + + +.menu > span:hover, +.submenu > span:hover + { + color: white; + cursor: pointer; +} + +.sidenav { + position:fixed; + border-right: 1px solid grey; + z-index:999; + margin-top: -1px; + box-shadow: none; + height: 100%; + background-color: $background-color-sidenav; + &> div { + margin-bottom: 20px; + } +} + +.navbar { + margin-bottom: 0px; +} + +.menu,.submenu > span { + margin-top: 15px; + font-size: 20px; + + font-family: inherit; + font-weight: 500; + line-height: 1.1; +} + +.menu,.submenu > span { + padding-left: 12px; + color: #9d9d9d; + outline: none; + +} +.menu.selected,.submenu.selected { + background-color: transparent; + &> span{ + padding-left: 10px; + border-left: #22a39f 5px solid; + + color: white; + } +} + +.menu > .submenu{ + margin-left: 30px; +} + +a { + color: #9d9d9d; + &:hover{ + color:white; + } + text-decoration: none +} diff --git a/web/src/app/shared/nav-bar/nav-bar.component.spec.ts b/web/src/app/shared/nav-bar/nav-bar.component.spec.ts new file mode 100644 index 000000000..40cdd1589 --- /dev/null +++ b/web/src/app/shared/nav-bar/nav-bar.component.spec.ts @@ -0,0 +1,46 @@ +import { Routes } from '@angular/router'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { AngularSvgIconModule } from 'angular-svg-icon'; +import { HttpClientModule } from '@angular/common/http'; +import { NavBarComponent } from './nav-bar.component'; + +import { SelectedRouteService } from 'app/services/selected-route/selected-route'; + +describe('NavBarComponent', () => { + let component: NavBarComponent; + let fixture: ComponentFixture; + let navBar; + + const routes: Routes = [ + { path: 'classifications', component: NavBarComponent } + ]; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [NavBarComponent], + imports: [ + AngularSvgIconModule, + HttpClientModule, + RouterTestingModule.withRoutes(routes), + ], + providers: [SelectedRouteService] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NavBarComponent); + component = fixture.componentInstance; + navBar = fixture.debugElement.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it(`should have as title 'Taskana administration'`, (() => { + expect(navBar.title).toEqual('Taskana administration'); + })); +}); diff --git a/web/src/app/shared/nav-bar/nav-bar.component.ts b/web/src/app/shared/nav-bar/nav-bar.component.ts new file mode 100644 index 000000000..7a17e8fb7 --- /dev/null +++ b/web/src/app/shared/nav-bar/nav-bar.component.ts @@ -0,0 +1,53 @@ +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { environment } from 'environments/environment'; +import { SelectedRouteService } from 'app/services/selected-route/selected-route'; +import { Subscription } from 'rxjs/Subscription'; +import { trigger, state, style, transition, keyframes, animate } from '@angular/animations'; + +@Component({ + selector: 'taskana-nav-bar', + templateUrl: './nav-bar.component.html', + styleUrls: ['./nav-bar.component.scss'], + animations: [ + trigger('toggle', [ + transition('void => *', animate('300ms ease-in', keyframes([ + style({ opacity: 0, width: '0px' }), + style({ opacity: 1, width: '150px' }), + style({ opacity: 1, width: '*' })]))), + transition('* => void', animate('300ms ease-out', keyframes([ + style({ opacity: 1, width: '*' }), + style({ opacity: 0, width: '150px' }), + style({ opacity: 0, width: '0px' })]))) + ] + )], +}) +export class NavBarComponent implements OnInit, OnDestroy { + + selectedRoute = ''; + route: string; + title = 'Taskana administration'; + showNavbar = false; + + adminUrl: string = environment.taskanaAdminUrl; + monitorUrl: string = environment.taskanaMonitorUrl; + workplaceUrl: string = environment.taskanaWorkplaceUrl; + + selectedRouteSubscription: Subscription + + constructor(private selectedRouteService: SelectedRouteService) { } + + ngOnInit() { + this.selectedRouteSubscription = this.selectedRouteService.getSelectedRoute().subscribe((value: string) => { + this.selectedRoute = value; + }) + } + + ngOnDestroy(): void { + if (this.selectedRouteSubscription) { this.selectedRouteSubscription.unsubscribe(); } + } + + toogleNavBar() { + this.showNavbar = !this.showNavbar; + } + +}