TSK-236 Change application header styling
This commit is contained in:
Martin Rojas Miguel Angel
Holger Hagen
parent
227ab7782d
commit
79b767c858
|
|
@ -1,47 +1,5 @@
|
|||
<nav class="navbar navbar-fixed-top" (window:resize)="onResize($event)">
|
||||
<div class="navbar show no-border-radius navbar-inverse no-gutter">
|
||||
<div class="col-xs-3 col-md-4">
|
||||
<svg-icon class="logo hidden visible-xs visible-sm" src="./assets/icons/logo.svg"></svg-icon>
|
||||
<ul class="nav logo">
|
||||
<svg-icon class="logo hidden-xs hidden-sm" src="./assets/icons/logo.svg"></svg-icon>
|
||||
<p class="navbar-brand no-margin hidden-xs hidden-sm">
|
||||
<a [href]="adminUrl">{{title}}</a>
|
||||
</p>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-xs-8 col-md-7 logo-container">
|
||||
<ul class="nav nav-tabs no-border-bottom" id="myTabs" role="tablist">
|
||||
<li role="presentation" class="{{workbasketsRoute? 'active' : 'inactive'}}" role="tab" data-toggle="tab">
|
||||
<a routerLink="administration/workbaskets" aria-controls="Work baskets" routerLinkActive="active">Workbaskets</a>
|
||||
</li>
|
||||
<li role="presentation" class="{{workbasketsRoute? 'inactive' : 'active'}}" role="tab" data-toggle="tab">
|
||||
<a routerLink="administration/classifications" aria-controls="Classifications" routerLinkActive="active">Classifications</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-xs-1">
|
||||
<button type="button" class="navbar-toggle collapsed show" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
|
||||
aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="navbar" class="collapse pull-right navbar-inverse" data-html="false">
|
||||
<ul class="nav navbar-nav navbar-right content-margin">
|
||||
<li>
|
||||
<a [href]="monitorUrl">Monitor</a>
|
||||
</li>
|
||||
<li>
|
||||
<a [href]="workplaceUrl">Workplace</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid container-main">
|
||||
<taskana-nav-bar></taskana-nav-bar>
|
||||
<div class="container-fluid container-main" (window:resize)="onResize($event)">
|
||||
<div class="row ">
|
||||
<router-outlet></router-outlet>
|
||||
<taskana-general-message-modal *ngIf="modalErrorMessage" [(message)]="modalErrorMessage" [title]="modalTitle" error="true"></taskana-general-message-modal>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 <a> tag', (() => {
|
||||
fixture.detectChanges();
|
||||
|
|
|
|||
|
|
@ -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 = '';
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<input #selectedFile type="file" (change)="onSelectFile($event)" class="hide" />
|
||||
<button class="btn btn-default glyphicon glyphicon-upload" type="button" title="Import" (click)="selectedFile.click()"></button>
|
||||
<button class="btn btn-default" type="button" title="Import" (click)="selectedFile.click()">
|
||||
<span class="glyphicon glyphicon-upload blue"></span>
|
||||
</button>
|
||||
|
||||
<div class="dropdown" style="display: inline">
|
||||
<button type="button" title="Export" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="true" (click)="updateDomains()">
|
||||
<span class="glyphicon glyphicon-download"></span>
|
||||
<span class="glyphicon glyphicon-download blue"></span>
|
||||
</button>
|
||||
|
||||
<ul class="dropdown-menu">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
<nav class="navbar navbar-fixed-top">
|
||||
<div class="navbar no-border-radius navbar-inverse no-gutter col-xs-12">
|
||||
<div class="col-xs-2 col-md-5">
|
||||
<button type="button" *ngIf="!showNavbar" class="btn btn-default navbar-toggle show pull-left" (click)="toogleNavBar();"
|
||||
aria-expanded="true" aria-controls="navbar">
|
||||
<span class="glyphicon glyphicon-arrow-right white"></span>
|
||||
</button>
|
||||
<span> </span>
|
||||
</div>
|
||||
<div class="col-xs-1"></div>
|
||||
<div class="col-xs-9 col-md-7">
|
||||
<ul class="nav logo">
|
||||
<svg-icon class="logo white" src="./assets/icons/logo.svg"></svg-icon>
|
||||
<p class="navbar-brand no-margin">
|
||||
<a [href]="adminUrl">{{title}}</a>
|
||||
</p>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div [@toggle]="showNavbar" *ngIf="showNavbar" class="navbar-inverse sidenav full-height col-xs-6 col-md-3" data-html="false"
|
||||
aria-expanded="true">
|
||||
<div class="col-xs-12">
|
||||
<div class="row">
|
||||
<button type="button" *ngIf="showNavbar" class="btn btn-default navbar-toggle show pull-right" (click)="toogleNavBar();"
|
||||
aria-expanded="true" aria-controls="navbar">
|
||||
<span class="glyphicon glyphicon-arrow-left white"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="row menu">
|
||||
<span routerLink="administration/workbaskets" aria-controls="administration" routerLinkActive="active">Administration</span>
|
||||
<div class="row submenu" [ngClass]="{'selected': selectedRoute.indexOf('workbaskets') !== -1}">
|
||||
<span class="col-xs-6" routerLink="administration/workbaskets" aria-controls="Workbaskets" routerLinkActive="active">Workbaskets</span>
|
||||
</div>
|
||||
<div class="row submenu" [ngClass]="{'selected': selectedRoute.indexOf('classifications') !== -1}">
|
||||
<span class="col-xs-6" routerLink="administration/classifications" aria-controls="Classifications" routerLinkActive="active">Classifications</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row menu">
|
||||
<span>
|
||||
<a [href]="monitorUrl"> Monitor</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="row menu">
|
||||
<span>
|
||||
<a [href]="workplaceUrl"> Workplace</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="showNavbar" class="navbar-backdrop" (click)="toogleNavBar()"></div>
|
||||
</nav>
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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<NavBarComponent>;
|
||||
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');
|
||||
}));
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue