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

Merge pull request #4719 from FinnStutzenstein/chyronColor

Browse Source 
Added custom color for the projector chyron and reset buttons for colors
This commit is contained in:
Emanuel Schütze 2019-05-20 22:12:32 +02:00 committed by GitHub
commit 31274873f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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",