ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added custom color for the projector chyron and reset buttons for colors

Browse Source
This commit is contained in:
FinnStutzenstein 2019-05-17 14:10:33 +02:00 committed by Emanuel Schütze
parent 0f03eb1446
commit e267279f60
14 changed files with 203 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/shared/models/core/projector.ts
View File

@ -72,6 +72,8 @@ export class Projector extends BaseModel<Projector> {
public header_background_color: string; public header_background_color: string;
public header_font_color: string; public header_font_color: string;
public header_h1_color: string; public header_h1_color: string;
public chyron_background_color: string;
public chyron_font_color: string;
public show_header_footer: boolean; public show_header_footer: boolean;
public show_title: boolean; public show_title: boolean;
public show_logo: boolean; public show_logo: boolean;

18
client/src/app/site/projector/components/projector-detail/projector-detail.component.html
View File

@ -234,31 +234,31 @@
<!-- Slide--> <!-- Slide-->
<mat-list *ngIf="projectorCount > 1"> <mat-list *ngIf="projectorCount > 1">
<mat-list-item [ngClass]="{ projected: isClosProjected(false) }"> <mat-list-item>
<button type="button" mat-icon-button (click)="toggleClos(false)"> <button type="button" mat-mini-fab (click)="toggleClos(false)" [ngClass]="isClosProjected(false) ? 'projector-active' : 'projector-inactive'">
<mat-icon>videocam</mat-icon> <mat-icon>videocam</mat-icon>
</button> </button>
<span translate>Slide</span> <span class="spacer-left-10" translate>Slide</span>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
<!-- Overlay --> <!-- Overlay -->
<mat-list> <mat-list>
<mat-list-item [ngClass]="{ projected: isClosProjected(true) }"> <mat-list-item>
<button type="button" mat-icon-button (click)="toggleClos(true)"> <button type="button" mat-mini-fab (click)="toggleClos(true)" [ngClass]="isClosProjected(true) ? 'projector-active' : 'projector-inactive'">
<mat-icon>videocam</mat-icon> <mat-icon>videocam</mat-icon>
</button> </button>
<span translate>Overlay</span> <span class="spacer-left-10" translate>Overlay</span>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
<!-- Chyron --> <!-- Chyron -->
<mat-list> <mat-list>
<mat-list-item [ngClass]="{ projected: isChyronProjected() }"> <mat-list-item>
<button type="button" mat-icon-button (click)="toggleChyron()"> <button type="button" mat-mini-fab (click)="toggleChyron()" [ngClass]="isChyronProjected() ? 'projector-active' : 'projector-inactive'">
<mat-icon>videocam</mat-icon> <mat-icon>videocam</mat-icon>
</button> </button>
<span translate>Chyron</span> <span class="spacer-left-10" translate>Chyron</span>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
</mat-expansion-panel> </mat-expansion-panel>

148
client/src/app/site/projector/components/projector-list-entry/projector-list-entry.component.html
View File

@ -39,14 +39,17 @@
{{ ratio }} {{ ratio }}
</mat-radio-button> </mat-radio-button>
</mat-radio-group> </mat-radio-group>
<mat-slider <div class="spacer-top-20">
[thumbLabel]="true" <mat-slider
min="800" [thumbLabel]="true"
max="3840" min="800"
step="10" max="2000"
(change)="widthSliderValueChanged($event)" step="10"
></mat-slider> value="{{ updateForm.value.width }}"
{{ updateForm.value.width }} (change)="widthSliderValueChanged($event)"
></mat-slider>
{{ updateForm.value.width }}
</div>
<!-- projection defaults --> <!-- projection defaults -->
<h3 translate>Projection defaults</h3> <h3 translate>Projection defaults</h3>
@ -57,34 +60,107 @@
</mat-select> </mat-select>
<!-- colors --> <!-- colors -->
<mat-form-field> <div class="color-field-wrapper">
<span translate>Background color</span> <div class="form">
<input matInput formControlName="background_color" type="color" /> <mat-form-field>
<mat-hint *ngIf="!updateForm.controls.background_color.valid"> <span translate>Background color</span>
<span translate>Required</span> <input matInput formControlName="background_color" type="color" />
</mat-hint> <mat-hint *ngIf="!updateForm.controls.background_color.valid">
</mat-form-field> <span translate>Required</span>
<mat-form-field> </mat-hint>
<span translate>Header background color</span> </mat-form-field>
<input matInput formControlName="header_background_color" type="color" /> </div>
<mat-hint *ngIf="!updateForm.controls.header_background_color.valid"> <div class="reset-button">
<span translate>Required</span> <button mat-icon-button matTooltip="{{ 'Reset' | translate }}" (click)="resetField('background_color', '#ffffff')">
</mat-hint> <mat-icon>replay</mat-icon>
</mat-form-field> </button>
<mat-form-field> </div>
<span translate>Header font color</span> </div>
<input matInput formControlName="header_font_color" type="color" />
<mat-hint *ngIf="!updateForm.controls.header_font_color.valid"> <div class="color-field-wrapper">
<span translate>Required</span> <div class="form">
</mat-hint> <mat-form-field>
</mat-form-field> <span translate>Header background color</span>
<mat-form-field> <input matInput formControlName="header_background_color" type="color" />
<span translate>Headline color</span> <mat-hint *ngIf="!updateForm.controls.header_background_color.valid">
<input matInput formControlName="header_h1_color" type="color" /> <span translate>Required</span>
<mat-hint *ngIf="!updateForm.controls.header_h1_color.valid"> </mat-hint>
<span translate>Required</span> </mat-form-field>
</mat-hint> </div>
</mat-form-field> <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 --> <!-- checkboxes -->
<div> <div>

16
client/src/app/site/projector/components/projector-list-entry/projector-list-entry.component.scss
View File

@ -17,3 +17,19 @@ form {
color: inherit; color: inherit;
text-decoration: 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;
}
}

11
client/src/app/site/projector/components/projector-list-entry/projector-list-entry.component.ts
View File

@ -106,6 +106,8 @@ export class ProjectorListEntryComponent extends BaseViewComponent implements On
header_background_color: ['', Validators.required], header_background_color: ['', Validators.required],
header_font_color: ['', Validators.required], header_font_color: ['', Validators.required],
header_h1_color: ['', Validators.required], header_h1_color: ['', Validators.required],
chyron_background_color: ['', Validators.required],
chyron_font_color: ['', Validators.required],
show_header_footer: [], show_header_footer: [],
show_title: [], show_title: [],
show_logo: [] show_logo: []
@ -226,4 +228,13 @@ export class ProjectorListEntryComponent extends BaseViewComponent implements On
updateProjector.height = Math.round(event.value / aspectRatios[aspectRatio]); updateProjector.height = Math.round(event.value / aspectRatios[aspectRatio]);
this.repo.update(updateProjector, this.projector).then(null, this.raiseError); 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);
}
} }

8
client/src/app/site/projector/models/view-projector.ts
View File

@ -83,6 +83,14 @@ export class ViewProjector extends BaseViewModel {
return this.projector.header_h1_color; 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 { public get show_header_footer(): boolean {
return this.projector.show_header_footer; return this.projector.show_header_footer;
} }

2
client/src/app/slides/agenda/current-speaker-chyron/current-speaker-chyron-slide-data.ts
View File

@ -1,3 +1,5 @@
export interface CurrentSpeakerChyronSlideData { export interface CurrentSpeakerChyronSlideData {
current_speaker?: string; current_speaker?: string;
background_color: string;
font_color: string;
} }

5
client/src/app/slides/agenda/current-speaker-chyron/current-speaker-chyron-slide.component.html
View File

@ -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"> <span id="inner">
{{ data.data.current_speaker }} {{ data.data.current_speaker }}
</span> </span>

4
client/src/assets/styles/global-components-style.scss
View File

@ -71,10 +71,6 @@
} }
/* projector components */ /* projector components */
#chyron {
background-color: mat-color($primary);
color: white; // TODO
}
.backgroundColorAccent { .backgroundColorAccent {
background-color: mat-color($accent); background-color: mat-color($accent);
color: mat-color($accent, default-contrast) !important; color: mat-color($accent, default-contrast) !important;

2
client/src/styles.scss
View File

@ -280,7 +280,7 @@ mat-card {
} }
} }
.projector-card .mat-form-field-infix { .projector-card .mat-form-field-infix {
width: 320px; width: 290px;
} }
// Shared table definitions // Shared table definitions

15
openslides/agenda/projector.py
View File

@ -232,10 +232,18 @@ async def current_speaker_chyron_slide(
""" """
Returns the username for the current speaker. 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) reference_projector = await get_reference_projector(all_data, projector_id)
item_id = await get_current_item_id_for_projector(all_data, reference_projector) item_id = await get_current_item_id_for_projector(all_data, reference_projector)
if item_id is None: # no element found if item_id is None: # no element found
return {} return slide_data
# get item # get item
try: try:
@ -249,7 +257,10 @@ async def current_speaker_chyron_slide(
if speaker["begin_time"] is not None and speaker["end_time"] is None: if speaker["begin_time"] is not None and speaker["end_time"] is None:
current_speaker = await get_user_name(all_data, speaker["user_id"]) 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: def register_projector_slides() -> None:

21
openslides/core/migrations/0023_chyron_colors.py Normal file
View File

@ -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),
),
]

2
openslides/core/models.py
View File

@ -82,6 +82,8 @@ class Projector(RESTModelMixin, models.Model):
header_background_color = models.CharField(max_length=7, default="#317796") header_background_color = models.CharField(max_length=7, default="#317796")
header_font_color = models.CharField(max_length=7, default="#f5f5f5") header_font_color = models.CharField(max_length=7, default="#f5f5f5")
header_h1_color = models.CharField(max_length=7, default="#317796") 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_header_footer = models.BooleanField(default=True)
show_title = models.BooleanField(default=True) show_title = models.BooleanField(default=True)
show_logo = models.BooleanField(default=True) show_logo = models.BooleanField(default=True)

2
openslides/core/serializers.py
View File

@ -111,6 +111,8 @@ class ProjectorSerializer(ModelSerializer):
"header_background_color", "header_background_color",
"header_font_color", "header_font_color",
"header_h1_color", "header_h1_color",
"chyron_background_color",
"chyron_font_color",
"show_header_footer", "show_header_footer",
"show_title", "show_title",
"show_logo", "show_logo",