Merge pull request #4719 from FinnStutzenstein/chyronColor

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

client/src/app/shared/models/core/projector.ts

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

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

@@ -234,31 +234,31 @@
 
                     <!-- Slide-->
                     <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>
                             </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) }">
+                        <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>
                             </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() }">
+                        <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>
                             </button>
-                            <span translate>Chyron</span>
+                            <span class="spacer-left-10" translate>Chyron</span>
                         </mat-list-item>
                     </mat-list>
                 </mat-expansion-panel>

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

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

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

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

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

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

client/src/app/site/projector/models/view-projector.ts

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

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

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

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

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

client/src/assets/styles/global-components-style.scss

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

client/src/styles.scss

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

openslides/agenda/projector.py

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

openslides/core/migrations/0023_chyron_colors.py

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

openslides/core/models.py

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

openslides/core/serializers.py

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