From 642e0ebf0497d0671f0eae48d47599d4faac2619 Mon Sep 17 00:00:00 2001 From: Raoul Snyman Date: Thu, 7 Nov 2019 18:02:26 +0000 Subject: [PATCH] Update the UI --- src/app/app.component.html | 92 +++++++++---------- src/app/app.component.scss | 47 ++++------ src/app/app.component.ts | 9 +- src/app/app.module.ts | 9 +- src/app/components/alert/alert.component.ts | 11 ++- src/app/components/search/search.component.ts | 9 +- .../components/service/service.component.html | 12 +-- .../components/service/service.component.ts | 6 +- .../components/slides/slides.component.html | 13 +-- .../components/slides/slides.component.scss | 13 +++ src/app/components/slides/slides.component.ts | 12 ++- src/app/openlp.service.ts | 20 +++- src/app/page-title.service.ts | 16 ++++ src/index.html | 5 +- src/styles.scss | 59 +++++++++--- tslint.json | 9 +- 16 files changed, 204 insertions(+), 138 deletions(-) create mode 100644 src/app/page-title.service.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index de3e6dd..1b13e68 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,10 @@ - + + + + {{pageTitle}} + + + Service @@ -13,51 +19,43 @@ Fast switching -
-
- - - OpenLP Remote - - - -
-
- -
-
- - - - - - - - - - - - - - - + +
+ +
+
+ + + + + + + + + -
-
+ + + + + + + + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index ff54d55..7df31e0 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,47 +1,36 @@ mat-sidenav { - background: white; -} -.all-wrap { - min-height: 100vh; - } - -.page-wrap { - display: flex; - flex-direction: column; - min-height: 100vh; + background: white; } -.filler { - flex-grow: 1; -} - -.content { - flex: 1; +mat-sidenav-container { + min-height: 100vh; } mat-slide-toggle { - margin-left: 1rem; + margin-top: 0.8rem; + margin-left: 1rem; + font-size: 80%; } .fast-access { - display: flex; - justify-content: space-around; + display: flex; + justify-content: space-around; } .footer { - display: flex; - flex-direction: row; - justify-content: space-evenly; + display: flex; + flex-direction: row; + justify-content: space-evenly; } /* * Make the Component injected by Router Outlet full height: */ main { - display: flex; - flex-direction: column; - > *:not(router-outlet) { - flex: 1; - display: block; - } -} \ No newline at end of file + display: flex; + flex-direction: column; + > *:not(router-outlet) { + flex: 1; + display: block; + } +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index c826a6e..821625c 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,7 +1,9 @@ import { Component, OnInit } from '@angular/core'; +import { MatSlideToggleChange, MatDialog } from '@angular/material'; + import { State } from './responses'; import { OpenLPService } from './openlp.service'; -import { MatSlideToggleChange, MatDialog } from '@angular/material'; +import { PageTitleService } from './page-title.service'; import { LoginComponent } from './components/login/login.component'; @Component({ @@ -13,8 +15,11 @@ export class AppComponent implements OnInit { fastSwitching = false; state = new State(); showLogin = false; + pageTitle = 'OpenLP Remote'; - constructor(private openlpService: OpenLPService, private dialog: MatDialog) { + constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService, + private dialog: MatDialog) { + pageTitleService.pageTitleChanged$.subscribe(pageTitle => this.pageTitle = pageTitle); openlpService.stateChanged$.subscribe(item => this.state = item); } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f3565d7..37b4842 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,5 +1,5 @@ -import { BrowserModule } from '@angular/platform-browser'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; +import { BrowserModule, Title } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; @@ -18,6 +18,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { AppComponent } from './app.component'; +import { PageTitleService } from './page-title.service'; import { OpenLPService } from './openlp.service'; import { HttpClientModule } from '@angular/common/http'; import { AppRoutingModule } from './app.routing'; @@ -68,7 +69,9 @@ import { LoginComponent } from './components/login/login.component'; MatSnackBarModule ], providers: [ - OpenLPService + PageTitleService, + OpenLPService, + Title ], entryComponents: [ LoginComponent diff --git a/src/app/components/alert/alert.component.ts b/src/app/components/alert/alert.component.ts index 8daddba..e0fcc60 100644 --- a/src/app/components/alert/alert.component.ts +++ b/src/app/components/alert/alert.component.ts @@ -1,9 +1,9 @@ import { Component } from '@angular/core'; - - -import { OpenLPService } from '../../openlp.service'; import { MatSnackBar } from '@angular/material'; +import { PageTitleService } from '../../page-title.service'; +import { OpenLPService } from '../../openlp.service'; + @Component({ selector: 'openlp-alert', templateUrl: './alert.component.html', @@ -15,7 +15,10 @@ export class AlertComponent { public alert: string; - constructor(private openlpService: OpenLPService, private snackBar: MatSnackBar) { } + constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService, + private snackBar: MatSnackBar) { + pageTitleService.changePageTitle('Alerts'); + } onSubmit() { this.openlpService.showAlert(this.alert).subscribe(res => this.snackBar.open('Alert submitted', '', {duration: 2000})); diff --git a/src/app/components/search/search.component.ts b/src/app/components/search/search.component.ts index 7c1c1a5..3661bda 100644 --- a/src/app/components/search/search.component.ts +++ b/src/app/components/search/search.component.ts @@ -1,5 +1,7 @@ import { Component, OnInit } from '@angular/core'; + import { OpenLPService } from '../../openlp.service'; +import { PageTitleService } from '../../page-title.service'; import { PluginDescription } from '../../responses'; @Component({ @@ -8,17 +10,16 @@ import { PluginDescription } from '../../responses'; styleUrls: ['./search.component.scss'], providers: [OpenLPService] }) - - export class SearchComponent implements OnInit { - public searchPlugins: PluginDescription[] = []; public searchText = null; public searchResults = null; public selectedPlugin = 'songs'; public currentPlugin: string; - constructor(private openlpService: OpenLPService) {} + constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService) { + pageTitleService.changePageTitle('Search'); + } onSubmit() { this.currentPlugin = this.selectedPlugin; diff --git a/src/app/components/service/service.component.html b/src/app/components/service/service.component.html index bbec35e..678f7f5 100644 --- a/src/app/components/service/service.component.html +++ b/src/app/components/service/service.component.html @@ -1,9 +1,3 @@ -

Service items:

-
- - - {{ getIcon(item) }} -

{{item.title}}

- - -

\ No newline at end of file + + {{ getIcon(item) }} {{ item.title }} + diff --git a/src/app/components/service/service.component.ts b/src/app/components/service/service.component.ts index 9d1210b..3e36085 100644 --- a/src/app/components/service/service.component.ts +++ b/src/app/components/service/service.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { OpenLPService } from '../../openlp.service'; +import { PageTitleService } from '../../page-title.service'; import { ServiceItem } from '../../responses'; @Component({ @@ -13,6 +14,7 @@ import { ServiceItem } from '../../responses'; export class ServiceComponent implements OnInit { items: ServiceItem[] = []; + ngOnInit() { this.getServiceItems(); } @@ -26,7 +28,9 @@ export class ServiceComponent implements OnInit { this.openlpService.getServiceItems().subscribe(items => this.items = items); } - constructor(private openlpService: OpenLPService, private router: Router) { + constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService, + private router: Router) { + pageTitleService.changePageTitle('Service'); openlpService.stateChanged$.subscribe(item => this.getServiceItems()); } diff --git a/src/app/components/slides/slides.component.html b/src/app/components/slides/slides.component.html index e001bb2..99dcccc 100644 --- a/src/app/components/slides/slides.component.html +++ b/src/app/components/slides/slides.component.html @@ -1,9 +1,4 @@ -

Slides:

-
- - - {{ slide.tag }} - {{ slide.text }} - - -
\ No newline at end of file + +
{{ slide.tag }}
+
{{ slide.text }}
+ diff --git a/src/app/components/slides/slides.component.scss b/src/app/components/slides/slides.component.scss index 0462b93..c797f82 100644 --- a/src/app/components/slides/slides.component.scss +++ b/src/app/components/slides/slides.component.scss @@ -1,3 +1,16 @@ +mat-card { + cursor: pointer; +} + .selected { font-weight: 700; } + +.verse-tag { + float: left; +} + +.verse-text { + margin-left: 2.5rem; + white-space: pre-wrap; +} diff --git a/src/app/components/slides/slides.component.ts b/src/app/components/slides/slides.component.ts index fe44928..4768840 100644 --- a/src/app/components/slides/slides.component.ts +++ b/src/app/components/slides/slides.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; - import { OpenLPService } from '../../openlp.service'; +import { PageTitleService } from '../../page-title.service'; @Component({ selector: 'openlp-slides', @@ -12,6 +12,12 @@ import { OpenLPService } from '../../openlp.service'; export class SlidesComponent implements OnInit { slides = null; + + constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService) { + pageTitleService.changePageTitle('Slides'); + openlpService.stateChanged$.subscribe(item => this.getSlides()); + } + ngOnInit() { this.getSlides(); } @@ -23,8 +29,4 @@ export class SlidesComponent implements OnInit { getSlides() { this.openlpService.getItemSlides().subscribe(slides => this.slides = slides); } - - constructor(private openlpService: OpenLPService) { - openlpService.stateChanged$.subscribe(item => this.getSlides()); - } } diff --git a/src/app/openlp.service.ts b/src/app/openlp.service.ts index c1e0833..0f1897e 100644 --- a/src/app/openlp.service.ts +++ b/src/app/openlp.service.ts @@ -1,11 +1,20 @@ import { Injectable, EventEmitter } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; - import { Observable } from 'rxjs'; -import { PluginDescription, State, Slide, ServiceItem, MainView, SystemInformation, Credentials, AuthToken } from './responses'; +import { + PluginDescription, + State, + Slide, + ServiceItem, + MainView, + SystemInformation, + Credentials, + AuthToken +} from './responses'; import { environment } from '../environments/environment'; + const deserialize = (json, cls) => { const inst = new cls(); for (const p in json) { @@ -21,12 +30,14 @@ const httpOptions = { headers: new HttpHeaders({'Content-Type': 'application/json'}) }; + @Injectable() export class OpenLPService { private apiURL: string; public stateChanged$: EventEmitter; constructor(private http: HttpClient) { + const host = window.location.hostname; let port: string; if (environment.production) { port = window.location.port; @@ -34,12 +45,11 @@ export class OpenLPService { else { port = '4316'; } - this.apiURL = `http://localhost:${port}/api/v1`; - + this.apiURL = `http://${host}:${port}/api/v1`; this.stateChanged$ = new EventEmitter(); this.retrieveSystemInformation().subscribe(info => { - const ws = new WebSocket(`ws://localhost:${info.websocket_port}/state`); + const ws = new WebSocket(`ws://${host}:${info.websocket_port}/state`); ws.onmessage = (event) => { const reader = new FileReader(); reader.onload = () => { diff --git a/src/app/page-title.service.ts b/src/app/page-title.service.ts new file mode 100644 index 0000000..d9fa71b --- /dev/null +++ b/src/app/page-title.service.ts @@ -0,0 +1,16 @@ +import { Injectable } from '@angular/core'; +import { Title } from '@angular/platform-browser'; +import { Subject } from 'rxjs'; + +@Injectable() +export class PageTitleService { + private pageTitleSource = new Subject(); + public pageTitleChanged$ = this.pageTitleSource.asObservable(); + + constructor(private titleService: Title) {} + + changePageTitle(pageTitle: string) { + this.pageTitleSource.next(pageTitle); + this.titleService.setTitle(pageTitle + ' | OpenLP Remote'); + } +} diff --git a/src/index.html b/src/index.html index f31e44f..580d16e 100644 --- a/src/index.html +++ b/src/index.html @@ -2,12 +2,11 @@ - OpenLP • Remote + OpenLP Remote - - + diff --git a/src/styles.scss b/src/styles.scss index 2608e08..35af340 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,39 +1,74 @@ /* You can add global styles to this file, and also import other style files */ -@import "~@angular/material/prebuilt-themes/indigo-pink.css"; +@import '~@angular/material/theming'; +@include mat-core(); +$primary: mat-palette($mat-indigo); +$accent: mat-palette($mat-light-blue, A200, A100, A400); +$theme: mat-light-theme($primary, $accent); +@include angular-material-theme($theme); * { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; +} + +html, body { + margin: 0; + padding: 0; } mat-sidenav-layout { - background: rgba(0,0,0,0.03); + background: rgba(0,0,0,0.03); } + mat-sidenav { - width: 200px; + width: 12rem; +} + +mat-card { + margin-bottom: 1rem; +} + +mat-card.service-item, +mat-card.slide { + cursor: pointer; } .displayButton .active { - background: 'teal'; + background: 'teal'; +} + +.page-title { + margin-left: 1rem; } .content { - margin: 20px; + margin: 1rem; } -.chordline { +footer { + position: fixed; + bottom: 0; + left: 0; + right: 0; +} + +.chordline { line-height: 1.8; } - + .chordline1 { - line-height: 1.0 + line-height: 1.0 } - + .chordline span.chord span { position: relative; } - + .chordline span.chord span strong { position: absolute; top: -2.1rem; diff --git a/tslint.json b/tslint.json index 9538c86..6790e0b 100644 --- a/tslint.json +++ b/tslint.json @@ -72,7 +72,6 @@ "no-trailing-whitespace": true, "no-unnecessary-initializer": true, "no-unused-expression": true, - "no-use-before-declare": true, "no-var-keyword": true, "object-literal-sort-keys": false, "one-line": [ @@ -115,12 +114,12 @@ "check-type" ], "no-output-on-prefix": true, - "use-input-property-decorator": true, - "use-output-property-decorator": true, - "use-host-property-decorator": true, + "no-inputs-metadata-property": true, + "no-outputs-metadata-property": true, + "no-host-metadata-property": true, "no-input-rename": true, "no-output-rename": true, - "use-life-cycle-interface": true, + "use-lifecycle-interface": true, "use-pipe-transform-interface": true, "component-class-suffix": true, "directive-class-suffix": true