Merge pull request #4440 from FinnStutzenstein/clockFontColor
set the clock color to the header color of the projector
This commit is contained in:
commit
c140399fa7
@ -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">
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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() {}
|
||||
}
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user