Merge pull request #4719 from FinnStutzenstein/chyronColor
Added custom color for the projector chyron and reset buttons for colors
This commit is contained in:
Emanuel Schütze
GitHub
commit
31274873f1
|
|
@ -72,6 +72,8 @@ export class Projector extends BaseModel<Projector> {
|
|||
public header_background_color: string;
|
||||
public header_font_color: string;
|
||||
public header_h1_color: string;
|
||||
public chyron_background_color: string;
|
||||
public chyron_font_color: string;
|
||||
public show_header_footer: boolean;
|
||||
public show_title: boolean;
|
||||
public show_logo: boolean;
|
||||
|
|
|
|||
|
|
@ -234,31 +234,31 @@
|
|||
|
||||
<!-- Slide-->
|
||||
<mat-list *ngIf="projectorCount > 1">
|
||||
<mat-list-item [ngClass]="{ projected: isClosProjected(false) }">
|
||||
<button type="button" mat-icon-button (click)="toggleClos(false)">
|
||||
<mat-list-item>
|
||||
<button type="button" mat-mini-fab (click)="toggleClos(false)" [ngClass]="isClosProjected(false) ? 'projector-active' : 'projector-inactive'">
|
||||
<mat-icon>videocam</mat-icon>
|
||||
</button>
|
||||
<span translate>Slide</span>
|
||||
<span class="spacer-left-10" translate>Slide</span>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
|
||||
<!-- Overlay -->
|
||||
<mat-list>
|
||||
<mat-list-item [ngClass]="{ projected: isClosProjected(true) }">
|
||||
<button type="button" mat-icon-button (click)="toggleClos(true)">
|
||||
<mat-list-item>
|
||||
<button type="button" mat-mini-fab (click)="toggleClos(true)" [ngClass]="isClosProjected(true) ? 'projector-active' : 'projector-inactive'">
|
||||
<mat-icon>videocam</mat-icon>
|
||||
</button>
|
||||
<span translate>Overlay</span>
|
||||
<span class="spacer-left-10" translate>Overlay</span>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
|
||||
<!-- Chyron -->
|
||||
<mat-list>
|
||||
<mat-list-item [ngClass]="{ projected: isChyronProjected() }">
|
||||
<button type="button" mat-icon-button (click)="toggleChyron()">
|
||||
<mat-list-item>
|
||||
<button type="button" mat-mini-fab (click)="toggleChyron()" [ngClass]="isChyronProjected() ? 'projector-active' : 'projector-inactive'">
|
||||
<mat-icon>videocam</mat-icon>
|
||||
</button>
|
||||
<span translate>Chyron</span>
|
||||
<span class="spacer-left-10" translate>Chyron</span>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-expansion-panel>
|
||||
|
|
|
|||
|
|
@ -39,14 +39,17 @@
|
|||
{{ ratio }}
|
||||
</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<mat-slider
|
||||
[thumbLabel]="true"
|
||||
min="800"
|
||||
max="3840"
|
||||
step="10"
|
||||
(change)="widthSliderValueChanged($event)"
|
||||
></mat-slider>
|
||||
{{ updateForm.value.width }}
|
||||
<div class="spacer-top-20">
|
||||
<mat-slider
|
||||
[thumbLabel]="true"
|
||||
min="800"
|
||||
max="2000"
|
||||
step="10"
|
||||
value="{{ updateForm.value.width }}"
|
||||
(change)="widthSliderValueChanged($event)"
|
||||
></mat-slider>
|
||||
{{ updateForm.value.width }}
|
||||
</div>
|
||||
|
||||
<!-- projection defaults -->
|
||||
<h3 translate>Projection defaults</h3>
|
||||
|
|
@ -57,34 +60,107 @@
|
|||
</mat-select>
|
||||
|
||||
<!-- colors -->
|
||||
<mat-form-field>
|
||||
<span translate>Background color</span>
|
||||
<input matInput formControlName="background_color" type="color" />
|
||||
<mat-hint *ngIf="!updateForm.controls.background_color.valid">
|
||||
<span translate>Required</span>
|
||||
</mat-hint>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<span translate>Header background color</span>
|
||||
<input matInput formControlName="header_background_color" type="color" />
|
||||
<mat-hint *ngIf="!updateForm.controls.header_background_color.valid">
|
||||
<span translate>Required</span>
|
||||
</mat-hint>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<span translate>Header font color</span>
|
||||
<input matInput formControlName="header_font_color" type="color" />
|
||||
<mat-hint *ngIf="!updateForm.controls.header_font_color.valid">
|
||||
<span translate>Required</span>
|
||||
</mat-hint>
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<span translate>Headline color</span>
|
||||
<input matInput formControlName="header_h1_color" type="color" />
|
||||
<mat-hint *ngIf="!updateForm.controls.header_h1_color.valid">
|
||||
<span translate>Required</span>
|
||||
</mat-hint>
|
||||
</mat-form-field>
|
||||
<div class="color-field-wrapper">
|
||||
<div class="form">
|
||||
<mat-form-field>
|
||||
<span translate>Background color</span>
|
||||
<input matInput formControlName="background_color" type="color" />
|
||||
<mat-hint *ngIf="!updateForm.controls.background_color.valid">
|
||||
<span translate>Required</span>
|
||||
</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="reset-button">
|
||||
<button mat-icon-button matTooltip="{{ 'Reset' | translate }}" (click)="resetField('background_color', '#ffffff')">
|
||||
<mat-icon>replay</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-field-wrapper">
|
||||
<div class="form">
|
||||
<mat-form-field>
|
||||
<span translate>Header background color</span>
|
||||
<input matInput formControlName="header_background_color" type="color" />
|
||||
<mat-hint *ngIf="!updateForm.controls.header_background_color.valid">
|
||||
<span translate>Required</span>
|
||||
</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="reset-button">
|
||||
<button mat-icon-button matTooltip="{{ 'Reset' | translate }}" (click)="resetField('header_background_color', '#317796')">
|
||||
<mat-icon>replay</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-field-wrapper">
|
||||
<div class="form">
|
||||
<mat-form-field>
|
||||
<span translate>Header font color</span>
|
||||
<input matInput formControlName="header_font_color" type="color" />
|
||||
<mat-hint *ngIf="!updateForm.controls.header_font_color.valid">
|
||||
<span translate>Required</span>
|
||||
</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="reset-button">
|
||||
<button mat-icon-button matTooltip="{{ 'Reset' | translate }}" (click)="resetField('header_font_color', '#f5f5f5')">
|
||||
<mat-icon>replay</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-field-wrapper">
|
||||
<div class="form">
|
||||
<mat-form-field>
|
||||
<span translate>Headline color</span>
|
||||
<input matInput formControlName="header_h1_color" type="color" />
|
||||
<mat-hint *ngIf="!updateForm.controls.header_h1_color.valid">
|
||||
<span translate>Required</span>
|
||||
</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="reset-button">
|
||||
<button mat-icon-button matTooltip="{{ 'Reset' | translate }}" (click)="resetField('header_h1_color', '#317796')">
|
||||
<mat-icon>replay</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-field-wrapper">
|
||||
<div class="form">
|
||||
<mat-form-field>
|
||||
<span translate>Chyron background color</span>
|
||||
<input matInput formControlName="chyron_background_color" type="color" />
|
||||
<mat-hint *ngIf="!updateForm.controls.chyron_background_color.valid">
|
||||
<span translate>Required</span>
|
||||
</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="reset-button">
|
||||
<button mat-icon-button matTooltip="{{ 'Reset' | translate }}" (click)="resetField('chyron_background_color', '#317796')">
|
||||
<mat-icon>replay</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-field-wrapper">
|
||||
<div class="form">
|
||||
<mat-form-field>
|
||||
<span translate>Chyron font color</span>
|
||||
<input matInput formControlName="chyron_font_color" type="color" />
|
||||
<mat-hint *ngIf="!updateForm.controls.chyron_font_color.valid">
|
||||
<span translate>Required</span>
|
||||
</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="reset-button">
|
||||
<button mat-icon-button matTooltip="{{ 'Reset' | translate }}" (click)="resetField('chyron_font_color', '#ffffff')">
|
||||
<mat-icon>replay</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- checkboxes -->
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -17,3 +17,19 @@ form {
|
|||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
.color-field-wrapper {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: auto 30px;
|
||||
|
||||
.form {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 1;
|
||||
}
|
||||
.reset-button {
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 2;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -106,6 +106,8 @@ export class ProjectorListEntryComponent extends BaseViewComponent implements On
|
|||
header_background_color: ['', Validators.required],
|
||||
header_font_color: ['', Validators.required],
|
||||
header_h1_color: ['', Validators.required],
|
||||
chyron_background_color: ['', Validators.required],
|
||||
chyron_font_color: ['', Validators.required],
|
||||
show_header_footer: [],
|
||||
show_title: [],
|
||||
show_logo: []
|
||||
|
|
@ -226,4 +228,13 @@ export class ProjectorListEntryComponent extends BaseViewComponent implements On
|
|||
updateProjector.height = Math.round(event.value / aspectRatios[aspectRatio]);
|
||||
this.repo.update(updateProjector, this.projector).then(null, this.raiseError);
|
||||
}
|
||||
|
||||
/**
|
||||
* Resets the given form field to the given default.
|
||||
*/
|
||||
public resetField(field: string, value: string): void {
|
||||
const patchValue = {};
|
||||
patchValue[field] = value;
|
||||
this.updateForm.patchValue(patchValue);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,6 +83,14 @@ export class ViewProjector extends BaseViewModel {
|
|||
return this.projector.header_h1_color;
|
||||
}
|
||||
|
||||
public get chyron_background_color(): string {
|
||||
return this.projector.chyron_background_color;
|
||||
}
|
||||
|
||||
public get chyron_font_color(): string {
|
||||
return this.projector.chyron_font_color;
|
||||
}
|
||||
|
||||
public get show_header_footer(): boolean {
|
||||
return this.projector.show_header_footer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
export interface CurrentSpeakerChyronSlideData {
|
||||
current_speaker?: string;
|
||||
background_color: string;
|
||||
font_color: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
<div id="chyron" *ngIf="data">
|
||||
<div id="chyron" *ngIf="data"[ngStyle]="{
|
||||
'background-color': data.data.background_color,
|
||||
color: data.data.font_color}">
|
||||
|
||||
<span id="inner">
|
||||
{{ data.data.current_speaker }}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -71,10 +71,6 @@
|
|||
}
|
||||
|
||||
/* projector components */
|
||||
#chyron {
|
||||
background-color: mat-color($primary);
|
||||
color: white; // TODO
|
||||
}
|
||||
.backgroundColorAccent {
|
||||
background-color: mat-color($accent);
|
||||
color: mat-color($accent, default-contrast) !important;
|
||||
|
|
|
|||
|
|
@ -280,7 +280,7 @@ mat-card {
|
|||
}
|
||||
}
|
||||
.projector-card .mat-form-field-infix {
|
||||
width: 320px;
|
||||
width: 290px;
|
||||
}
|
||||
|
||||
// Shared table definitions
|
||||
|
|
|
|||
|
|
@ -232,10 +232,18 @@ async def current_speaker_chyron_slide(
|
|||
"""
|
||||
Returns the username for the current speaker.
|
||||
"""
|
||||
# get projector for color information
|
||||
projector = all_data["core/projector"][projector_id]
|
||||
|
||||
slide_data = {
|
||||
"background_color": projector["chyron_background_color"],
|
||||
"font_color": projector["chyron_font_color"],
|
||||
}
|
||||
|
||||
reference_projector = await get_reference_projector(all_data, projector_id)
|
||||
item_id = await get_current_item_id_for_projector(all_data, reference_projector)
|
||||
if item_id is None: # no element found
|
||||
return {}
|
||||
return slide_data
|
||||
|
||||
# get item
|
||||
try:
|
||||
|
|
@ -249,7 +257,10 @@ async def current_speaker_chyron_slide(
|
|||
if speaker["begin_time"] is not None and speaker["end_time"] is None:
|
||||
current_speaker = await get_user_name(all_data, speaker["user_id"])
|
||||
|
||||
return {"current_speaker": current_speaker}
|
||||
if current_speaker is not None:
|
||||
slide_data["current_speaker"] = current_speaker
|
||||
|
||||
return slide_data
|
||||
|
||||
|
||||
def register_projector_slides() -> None:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
# Generated by Django 2.2 on 2019-05-17 11:55
|
||||
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [("core", "0022_remove_chatmessage")]
|
||||
|
||||
operations = [
|
||||
migrations.AddField(
|
||||
model_name="projector",
|
||||
name="chyron_background_color",
|
||||
field=models.CharField(default="#317796", max_length=7),
|
||||
),
|
||||
migrations.AddField(
|
||||
model_name="projector",
|
||||
name="chyron_font_color",
|
||||
field=models.CharField(default="#ffffff", max_length=7),
|
||||
),
|
||||
]
|
||||
|
|
@ -82,6 +82,8 @@ class Projector(RESTModelMixin, models.Model):
|
|||
header_background_color = models.CharField(max_length=7, default="#317796")
|
||||
header_font_color = models.CharField(max_length=7, default="#f5f5f5")
|
||||
header_h1_color = models.CharField(max_length=7, default="#317796")
|
||||
chyron_background_color = models.CharField(max_length=7, default="#317796")
|
||||
chyron_font_color = models.CharField(max_length=7, default="#ffffff")
|
||||
show_header_footer = models.BooleanField(default=True)
|
||||
show_title = models.BooleanField(default=True)
|
||||
show_logo = models.BooleanField(default=True)
|
||||
|
|
|
|||
|
|
@ -111,6 +111,8 @@ class ProjectorSerializer(ModelSerializer):
|
|||
"header_background_color",
|
||||
"header_font_color",
|
||||
"header_h1_color",
|
||||
"chyron_background_color",
|
||||
"chyron_font_color",
|
||||
"show_header_footer",
|
||||
"show_title",
|
||||
"show_logo",
|
||||
|
|
|
|||
Loading…
Reference in New Issue