Merge pull request #4406 from FinnStutzenstein/closSlide

clos slide content

client/src/app/shared/components/contdown-time/countdown-time.component.scss

@@ -1,8 +1,6 @@
 #countdown {
     font-weight: bold;
-    padding: 10px;
     display: inline-block;
-    min-width: 75px;
     text-align: right;
 
     &.warning_time {

client/src/app/slides/agenda/common/common-list-of-speakers-slide-data.ts

@@ -4,10 +4,10 @@ interface SlideSpeaker {
 }
 
 export interface CommonListOfSpeakersSlideData {
-    waiting: SlideSpeaker[];
+    waiting?: SlideSpeaker[];
-    current: SlideSpeaker;
+    current?: SlideSpeaker;
-    finished: SlideSpeaker[];
+    finished?: SlideSpeaker[];
-    title_information: object;
+    title_information?: object;
-    content_object_collection: string;
+    content_object_collection?: string;
-    item_number: string;
+    item_number?: string;
 }

client/src/app/slides/agenda/common/common-list-of-speakers-slide.component.html

@@ -1,11 +1,11 @@
 <div *ngIf="data">
     <div class="slidetitle">
         <h1 translate>List of speakers</h1>
-        <h2> {{ getTitle() }}</h2>
+        <h2>{{ getTitle() }}</h2>
     </div>
 
     <!-- Last speakers -->
-    <div *ngIf="data.data.finished.length">
+    <div *ngIf="data.data.finished && data.data.finished.length">
         <div *ngFor="let speaker of data.data.finished" class="lastSpeakers">
             {{ speaker.user }}
             <mat-icon *ngIf="speaker.marked">star</mat-icon>
@@ -14,11 +14,12 @@
 
     <!-- Current speaker -->
     <div *ngIf="data.data.current" class="currentSpeaker">
-        <mat-icon>mic</mat-icon> {{ data.data.current.user }}
+        <mat-icon>mic</mat-icon>
+        <span>{{ data.data.current.user }}</span>
     </div>
 
     <!-- Next speakers -->
-    <div *ngIf="data.data.waiting.length">
+    <div *ngIf="data.data.waiting && data.data.waiting.length">
         <ol class="nextSpeakers">
             <li *ngFor="let speaker of data.data.waiting">
                 {{ speaker.user }}

client/src/app/slides/agenda/common/common-list-of-speakers-slide.component.scss

@@ -1,14 +1,24 @@
 .lastSpeakers {
     color: #9a9898;
-    margin-left: 30px;
+    margin-left: 33px;
+    margin-bottom: 10px;
 }
 
 .currentSpeaker {
     font-weight: bold;
+
+    .mat-icon,
+    span {
+        vertical-align: middle;
+    }
+    span {
+        padding-left: 8px;
+    }
 }
 
 .nextSpeakers {
     margin-left: 13px !important;
+    margin-top: 10px !important;
 
     li {
         line-height: 150%;

client/src/app/slides/agenda/common/common-list-of-speakers-slide.component.ts

@@ -16,13 +16,17 @@ export class CommonListOfSpeakersSlideComponent extends BaseSlideComponent<Commo
     }
 
     public getTitle(): string {
+        if (!this.data.data.content_object_collection || !this.data.data.title_information) {
+            return '';
+        }
+
         const numberPrefix = this.data.data.item_number ? `${this.data.data.item_number} · ` : '';
         const repo = this.collectionStringMapperService.getRepository(this.data.data.content_object_collection);
 
         if (isBaseAgendaContentObjectRepository(repo)) {
             return numberPrefix + repo.getAgendaTitle(this.data.data.title_information);
         } else {
-            throw new Error('The content object has no agenda based repository!');
+            throw new Error('The content object has no agenda base repository!');
         }
     }
 }

client/src/app/slides/agenda/current-list-of-speakers-overlay/current-list-of-speakers-overlay-slide.component.html

@@ -1,3 +1,27 @@
 <div id="overlay" *ngIf="data">
-    TODO
+    <h3 translate>List of speakers</h3>
+
+    <!-- Last speakers -->
+    <div *ngIf="data.data.finished && data.data.finished.length">
+        <div *ngFor="let speaker of data.data.finished" class="lastSpeakers">
+            {{ speaker.user }}
+            <mat-icon *ngIf="speaker.marked">star</mat-icon>
+        </div>
+    </div>
+
+    <!-- Current speaker -->
+    <div *ngIf="data.data.current" class="currentSpeaker">
+        <mat-icon>mic</mat-icon>
+        <span>{{ data.data.current.user }}</span>
+    </div>
+
+    <!-- Next speakers -->
+    <div *ngIf="data.data.waiting && data.data.waiting.length">
+        <ol class="nextSpeakers">
+            <li *ngFor="let speaker of data.data.waiting">
+                {{ speaker.user }}
+                <mat-icon *ngIf="speaker.marked">star</mat-icon>
+            </li>
+        </ol>
+    </div>
 </div>

client/src/app/slides/agenda/current-list-of-speakers-overlay/current-list-of-speakers-overlay-slide.component.scss

@@ -1,9 +1,17 @@
+@import '../common/common-list-of-speakers-slide.component.scss';
+
 #overlay {
     position: absolute;
     right: 0;
     bottom: 0;
-    background-color: green;
+    background-color: #d3d3d3;
-    height: 30px;
+    width: 40%;
+    height: 200px;
     margin: 10px;
-    z-index: 2;
+    z-index: 20;
+    border-radius: 7px;
+    border: 1px solid #999;
+    padding: 0px 7px 10px 19px;
+    box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.5);
+    overflow: hidden;
 }

client/src/app/slides/agenda/current-list-of-speakers-overlay/current-list-of-speakers-overlay-slide.component.spec.ts

@@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CurrentListOfSpeakersOverlaySlideComponent } from './current-list-of-speakers-overlay-slide.component';
 import { E2EImportsModule } from '../../../../e2e-imports.module';
+import { CommonListOfSpeakersSlideModule } from '../common/common-list-of-speakers-slide.module';
 
 describe('CurrentListOfSpeakersOverlaySlideComponent', () => {
     let component: CurrentListOfSpeakersOverlaySlideComponent;
@@ -9,7 +10,7 @@ describe('CurrentListOfSpeakersOverlaySlideComponent', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [E2EImportsModule],
+            imports: [E2EImportsModule, CommonListOfSpeakersSlideModule],
             declarations: [CurrentListOfSpeakersOverlaySlideComponent]
         }).compileComponents();
     }));

client/src/app/slides/agenda/current-list-of-speakers-overlay/current-list-of-speakers-overlay-slide.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { BaseSlideComponent } from 'app/slides/base-slide-component';
 import { CommonListOfSpeakersSlideData } from '../common/common-list-of-speakers-slide-data';
@@ -9,12 +9,6 @@ import { CommonListOfSpeakersSlideData } from '../common/common-list-of-speakers
     styleUrls: ['./current-list-of-speakers-overlay-slide.component.scss']
 })
 export class CurrentListOfSpeakersOverlaySlideComponent extends BaseSlideComponent<CommonListOfSpeakersSlideData> {
-    // TODO: remove to access data in the template
-    @Input()
-    public set data(value: any) {
-        console.log(value.data);
-    }
-
     public constructor() {
         super();
     }

client/src/app/slides/agenda/current-list-of-speakers-overlay/current-list-of-speakers-overlay-slide.module.ts

@@ -1,7 +1,15 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
-import { makeSlideModule } from 'app/slides/base-slide-module';
 import { CurrentListOfSpeakersOverlaySlideComponent } from './current-list-of-speakers-overlay-slide.component';
+import { CommonListOfSpeakersSlideModule } from '../common/common-list-of-speakers-slide.module';
+import { SharedModule } from 'app/shared/shared.module';
+import { SLIDE } from 'app/slides/slide-token';
 
-@NgModule(makeSlideModule(CurrentListOfSpeakersOverlaySlideComponent))
+@NgModule({
+    imports: [CommonModule, SharedModule, CommonListOfSpeakersSlideModule],
+    declarations: [CurrentListOfSpeakersOverlaySlideComponent],
+    providers: [{ provide: SLIDE, useValue: CurrentListOfSpeakersOverlaySlideComponent }],
+    entryComponents: [CurrentListOfSpeakersOverlaySlideComponent]
+})
 export class CurrentListOfSpeakersOverlaySlideModule {}

client/src/app/slides/core/clock/clock-slide.component.scss

@@ -1,21 +1,19 @@
 #clock {
     position: absolute;
-    right: 0;
+    right: 38px;
-    top: 0;
+    top: 23px;
-    color: white;
     height: 30px;
-    margin: 12px;
+    z-index: 10;
-    z-index: 2;
+    padding-left: 30px;
-    padding-right: 50px;
+    text-align: right;
-    padding-top: 5px;
 
     mat-icon {
-        padding-top: 5px;
+        vertical-align: middle;
     }
 
     span {
         padding-left: 5px;
         font-size: 24px;
-        float: right;
+        vertical-align: middle;
     }
 }

client/src/app/slides/core/countdown/countdown-slide.component.scss

@@ -21,10 +21,10 @@
     &.overlay {
         position: relative;
         float: right;
-        margin: 100px 10px 10px 10px;
+        margin: 80px 0px 10px 10px;
-        padding: 10px 40px 7px 10px;
+        padding: 35px 35px 0px 10px;
-        min-height: 72px;
+        min-height: 60px;
-        min-width: 180px;
+        min-width: 230px;
         font-size: 3.7em;
         font-weight: bold;
         text-align: right;
@@ -37,6 +37,7 @@
             font-weight: normal;
             font-size: 18px;
             padding-right: 6px;
+            padding-top: 20px;
         }
     }
 }

client/src/app/slides/core/projector-message/projector-message-slide.component.scss

@@ -3,7 +3,7 @@
     left: 0;
     top: 0;
     background-color: rgba($color: #000000, $alpha: 0.5);
-    z-index: 10;
+    z-index: 100;
     width: 100%;
     height: 100%;
     display: grid;
@@ -17,10 +17,11 @@
         justify-self: center;
         border-radius: 0.2em;
         background: #ffffff;
-        font-size: 2.75em;
+        font-size: 2.3em;
-        padding: 0.2em 0;
+        padding: 0.5em 0.25em;
         box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
         min-height: 20px;
+        line-height: normal;
 
         ::ng-deep p {
             margin: 0 0 10px;

client/src/app/slides/motions/motion/motion-slide.component.scss

@@ -7,7 +7,7 @@
 #sidebox {
     width: 260px;
     right: 0;
-    margin-top: 50px;
+    margin-top: 95px;
     background: #d3d3d3;
     border-radius: 7px 0 0 7px;
     padding: 3px 7px 10px 10px;