{{ 'example.with.data' | translate:data }}
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 8b13789179..dc8b94f882 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1 +1,13 @@ +@import '../styles/variables.scss'; +header nav.navbar { + border-radius: 0rem; +} + +header nav.navbar .navbar-toggler { + float: right; +} + +header nav.navbar .navbar-toggler:hover { + cursor: pointer; +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 39f73ee36b..5f1726afd0 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,5 @@ -import { Component, ChangeDetectionStrategy, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, HostListener, Input, ChangeDetectionStrategy, ViewEncapsulation, OnDestroy, OnInit } from '@angular/core'; +import { Event, NavigationEnd, Router } from '@angular/router'; import { TranslateService } from 'ng2-translate'; @@ -7,10 +8,19 @@ import { TranslateService } from 'ng2-translate'; encapsulation: ViewEncapsulation.Emulated, selector: 'ds-app', templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] + styleUrls: ['./app.component.css'] }) export class AppComponent implements OnDestroy, OnInit { + // TODO: move header and all related properties into its own component + + private navCollapsed: boolean; + + private routerSubscription: any; + + + private translateSubscription: any; + example: string; data: any = { @@ -18,25 +28,54 @@ export class AppComponent implements OnDestroy, OnInit { recipient: 'World' } - private registerSubscription: any; - - constructor(public translate: TranslateService) { + constructor(public translate: TranslateService, private router: Router) { // this language will be used as a fallback when a translation isn't found in the current language translate.setDefaultLang('en'); // the lang to use, if the lang isn't available, it will use the current loader to get them translate.use('en'); + + this.collapse(); } ngOnInit() { - this.registerSubscription = this.translate.get('example.with.data', { greeting: 'Hello', recipient: 'DSpace' }).subscribe((translation: string) => { + this.routerSubscription = this.router.events.subscribe((event: Event) => { + if (event instanceof NavigationEnd) { + this.collapse(); + } + }); + this.translateSubscription = this.translate.get('example.with.data', { greeting: 'Hello', recipient: 'DSpace' }).subscribe((translation: string) => { this.example = translation; }); } ngOnDestroy() { - if (this.registerSubscription) { - this.registerSubscription.unsubscribe(); + if (this.routerSubscription) { + this.routerSubscription.unsubscribe(); + } + if (this.translateSubscription) { + this.translateSubscription.unsubscribe(); } } + @HostListener('window:resize', ['$event']) + private onResize(event): void { + this.collapse(); + } + + private collapse(): void { + this.navCollapsed = true; + } + + private expand(): void { + this.navCollapsed = false; + } + + public toggle(): void { + this.navCollapsed ? this.expand() : this.collapse(); + } + + public isNavBarCollaped(): boolean { + return this.navCollapsed; + } + } diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css deleted file mode 100644 index 17b877f70b..0000000000 --- a/src/app/home/home.component.css +++ /dev/null @@ -1,8 +0,0 @@ -blockquote { - border-left:5px #158126 solid; - background:#fff; - padding:20px 20px 20px 40px; -} -blockquote::before { - left: 1em; -} diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss new file mode 100644 index 0000000000..da97dd7a62 --- /dev/null +++ b/src/app/home/home.component.scss @@ -0,0 +1 @@ +@import '../../styles/variables.scss'; diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 71d5be23ff..9cb0704a0a 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -8,12 +8,15 @@ import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/ templateUrl: './home.component.html' }) export class HomeComponent { + data: any = {}; + constructor() { this.universalInit(); } universalInit() { + } } diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 0f8b5e5625..91b9d1b87d 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { TranslateModule } from 'ng2-translate/ng2-translate'; import { ApiService } from './api.service'; @@ -14,7 +15,8 @@ const MODULES = [ RouterModule, TranslateModule, FormsModule, - ReactiveFormsModule + ReactiveFormsModule, + NgbModule ]; const PIPES = [ diff --git a/src/browser.module.ts b/src/browser.module.ts index e6475cc118..20c87fd924 100755 --- a/src/browser.module.ts +++ b/src/browser.module.ts @@ -5,6 +5,7 @@ import { RouterModule } from '@angular/router'; import { UniversalModule, isBrowser, isNode, AUTO_PREBOOT } from 'angular2-universal/browser'; // for AoT we need to manually split universal packages import { IdlePreload, IdlePreloadModule } from '@angularclass/idle-preload'; +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { TranslateLoader, TranslateModule, TranslateStaticLoader } from 'ng2-translate'; import { AppModule, AppComponent } from './app/app.module'; @@ -47,6 +48,7 @@ export const UNIVERSAL_KEY = 'UNIVERSAL_CACHE'; useFactory: (createTranslateLoader), deps: [Http] }), + NgbModule.forRoot(), UniversalModule, // BrowserModule, HttpModule, and JsonpModule are included diff --git a/src/index.html b/src/index.html index 979a468fcb..22c60b4ae9 100644 --- a/src/index.html +++ b/src/index.html @@ -2,22 +2,18 @@ -