set the clock color to the header color of the projector

This commit is contained in:
FinnStutzenstein 2019-03-01 09:40:22 +01:00
parent 69fe4632f4
commit d3773bc8e8
4 changed files with 39 additions and 7 deletions

View File

@ -16,7 +16,7 @@
</div>
<div *ngFor="let slide of slides">
<os-slide-container [slideData]="slide" [scroll]="scroll" [scale]="scale" [headerEnabled]="projector.show_header_footer"></os-slide-container>
<os-slide-container [slideData]="slide" [scroll]="scroll" [scale]="scale" [projector]="projector"></os-slide-container>
</div>
<div id="footer" [ngStyle]="headerFooterStyle" *ngIf="projector && projector.show_header_footer">

View File

@ -7,6 +7,7 @@ import { SlideManager } from 'app/slides/services/slide-manager.service';
import { BaseSlideComponent } from 'app/slides/base-slide-component';
import { SlideData } from 'app/site/projector/services/projector-data.service';
import { ProjectorElement } from 'app/shared/models/core/projector';
import { ViewProjector } from 'app/site/projector/models/view-projector';
function hasError(obj: object): obj is { error: string } {
return (<{ error: string }>obj).error !== undefined;
@ -62,14 +63,23 @@ export class SlideContainerComponent extends BaseComponent {
this.setDataForComponent();
}
public get slideData(): SlideData<object> {
return this._slideData;
}
private _projector: ViewProjector;
/**
* Variable, if the projector header is enabled.
*/
@Input()
public headerEnabled: boolean;
public set projector(projector: ViewProjector) {
this._projector = projector;
this.setProjectorForComponent();
}
public get slideData(): SlideData<object> {
return this._slideData;
public get projector(): ViewProjector {
return this._projector;
}
/**
@ -86,6 +96,10 @@ export class SlideContainerComponent extends BaseComponent {
this.updateScroll();
}
public get scroll(): number {
return this._scroll;
}
/**
* Update the slideStyle, when the scale changes.
*/
@ -122,9 +136,9 @@ export class SlideContainerComponent extends BaseComponent {
*/
private updateScroll(): void {
if (this.slideOptions.scrollable) {
let value = this._scroll;
let value = this.scroll;
value *= -50;
if (this.headerEnabled) {
if (this.projector.show_header_footer) {
value += 50; // Default offset for the header
}
this.slideStyle['margin-top'] = `${value}px`;
@ -154,6 +168,7 @@ export class SlideContainerComponent extends BaseComponent {
this.slide.clear();
this.slideRef = this.slide.createComponent(slideFactory);
this.setDataForComponent();
this.setProjectorForComponent();
});
}
@ -165,4 +180,14 @@ export class SlideContainerComponent extends BaseComponent {
this.slideRef.instance.data = this.slideData;
}
}
/**
* "injects" the projector into the slide component.
*/
private setProjectorForComponent(): void {
if (this.slideRef && this.slideRef.instance) {
console.log(this.projector);
this.slideRef.instance.projector = this.projector;
}
}
}

View File

@ -1,5 +1,6 @@
import { Input } from '@angular/core';
import { SlideData } from 'app/site/projector/services/projector-data.service';
import { ViewProjector } from 'app/site/projector/models/view-projector';
/**
* Every slide has to extends this base class. It forces the slides
@ -12,5 +13,11 @@ export abstract class BaseSlideComponent<T extends object> {
@Input()
public data: SlideData<T>;
/**
* The projector where this slide is projected on.
*/
@Input()
public projector: ViewProjector;
public constructor() {}
}

View File

@ -1,4 +1,4 @@
<div id="clock" *ngIf="time">
<div id="clock" *ngIf="time && projector" [ngStyle]="{color: projector.header_font_color}">
<mat-icon>schedule</mat-icon>
<span>{{ time }}</span>
</div>