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_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;

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

@ -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>

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

@ -39,14 +39,17 @@
{{ ratio }}
</mat-radio-button>
</mat-radio-group>
<div class="spacer-top-20">
<mat-slider
[thumbLabel]="true"
min="800"
max="3840"
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,6 +60,8 @@
</mat-select>
<!-- colors -->
<div class="color-field-wrapper">
<div class="form">
<mat-form-field>
<span translate>Background color</span>
<input matInput formControlName="background_color" type="color" />
@ -64,6 +69,16 @@
<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" />
@ -71,6 +86,16 @@
<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" />
@ -78,6 +103,16 @@
<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" />
@ -85,6 +120,47 @@
<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>

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

@ -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;
}
}

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_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);
}
}

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;
}
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;
}

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

@ -1,3 +1,5 @@
export interface CurrentSpeakerChyronSlideData {
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">
{{ data.data.current_speaker }}
</span>

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

@ -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;

2
client/src/styles.scss
View File

@ -280,7 +280,7 @@ mat-card {
}
}
.projector-card .mat-form-field-infix {
width: 320px;
width: 290px;
}
// 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.
"""
# 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:

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_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)

2
openslides/core/serializers.py
View File

@ -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",