Merge pull request #4993 from GabrielInTheWorld/trafficLights

Implements 'traffic lights' to the countdown-time

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

@@ -1,9 +1,25 @@
 <div
-    id="countdown"
+    class="countdown-time-wrapper"
     [ngClass]="{
-        negative: seconds <= 0,
+        'negative-time': seconds <= 0,
-        warning_time: seconds <= warningTime && seconds > 0
+        'warning-time': seconds <= warningTime && seconds > 0,
+        'stretch-to-fill-parent': fullscreen
     }"
 >
-    {{ time }}
+    <div
+        *ngIf="showTimeIndicator"
+        class="time-indicator-wrapper"
+        [ngClass]="{ 'only-time-indicator': !showCountdown && showTimeIndicator }"
+    >
+        <div id="timeIndicator"></div>
+    </div>
+    <div
+        *ngIf="showCountdown"
+        class="countdown-wrapper"
+        [ngClass]="{ 'only-countdown': showCountdown && !showTimeIndicator }"
+    >
+        <span id="countdown">
+            {{ time }}
+        </span>
+    </div>
 </div>

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

@@ -1,13 +1,140 @@
-#countdown {
+@import '~assets/styles/media-queries.scss';
-    font-weight: bold;
+@import '~assets/styles/fonts.scss';
-    display: inline-block;
-    text-align: right;
 
-    &.warning_time {
+.countdown-time-wrapper {
-        color: #ed940d;
+    $margin: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &.warning-time {
+        $color: #ed940e;
+        color: $color;
+
+        .time-indicator-wrapper #timeIndicator {
+            background: $color;
+        }
     }
 
-    &.negative {
+    &.negative-time {
-        color: #cc0000;
+        $color: #c00;
+        color: $color;
+
+        .time-indicator-wrapper #timeIndicator {
+            background: $color;
+        }
+    }
+
+    .time-indicator-wrapper {
+        text-align: left;
+        &.only-time-indicator {
+            width: 100%;
+            text-align: right;
+            #timeIndicator {
+                $size: 60px;
+                width: $size;
+                height: $size;
+            }
+        }
+
+        #timeIndicator {
+            $size: 50px;
+            width: $size;
+            height: $size;
+            display: inline-block;
+            background: green;
+            border-radius: 50%;
+        }
+    }
+
+    .countdown-wrapper {
+        width: 170px;
+        text-align: right;
+        position: relative;
+        height: 100%;
+
+        &:not(.only-countdown) {
+            margin-left: 10px;
+            $size: 60px;
+            font-size: $size;
+            line-height: $size;
+        }
+
+        &.only-countdown {
+            width: 100%;
+            line-height: 100%;
+            text-align: center;
+        }
+
+        #countdown {
+            font-weight: bold;
+            text-align: center;
+        }
+    }
+
+    &.stretch-to-fill-parent {
+        .time-indicator-wrapper {
+            width: 30%;
+            #timeIndicator {
+                width: auto;
+                height: auto;
+                margin-left: $margin;
+            }
+        }
+        .countdown-wrapper {
+            width: 70%;
+            #countdown {
+                position: absolute;
+                right: 0;
+                margin-right: $margin;
+            }
+        }
+
+        .time-indicator-wrapper {
+            &.only-time-indicator {
+                width: 100%;
+                text-align: center;
+                #timeIndicator {
+                    padding: 0 0 70% 70%;
+                }
+            }
+            &:not(.only-time-indicator) {
+                #timeIndicator {
+                    padding: 0 0 65% 65%;
+                }
+            }
+        }
+        .countdown-wrapper.only-countdown {
+            margin: 0 50px;
+            width: calc(100% - 100px);
+            #countdown {
+                $size: 300px;
+                line-height: $size;
+                font-size: $size;
+                bottom: calc(50% - 150px);
+            }
+        }
+
+        @include set-breakpoint-lower(xs) {
+            .countdown-wrapper:not(.only-countdown) {
+                #countdown {
+                    $size: 210px;
+                    font-size: $size;
+                    line-height: $size;
+                    bottom: calc(50% - 105px);
+                }
+            }
+        }
+
+        @include set-breakpoint-upper(xs) {
+            .countdown-wrapper:not(.only-countdown) {
+                #countdown {
+                    $size: 230px;
+                    line-height: $size;
+                    font-size: $size;
+                    bottom: calc(50% - 115px);
+                }
+            }
+        }
     }
 }

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

@@ -22,6 +22,36 @@ export class CountdownTimeComponent implements OnDestroy {
     @Input()
     public warningTime: number;
 
+    /**
+     * Boolean, whether the countdown will be displayed in a fullscreen-mode.
+     */
+    @Input()
+    public fullscreen = false;
+
+    /**
+     * Passing a specific display-type will decide, whether either only the time-indicator
+     * or only the countdown or both of them are displayed.
+     *
+     * @param displayType A string, that contains the preferred display-type.
+     */
+    @Input()
+    public set displayType(displayType: string) {
+        this.showTimeIndicator = displayType === 'countdownAndTimeIndicator' || displayType === 'onlyTimeIndicator';
+        this.showCountdown = displayType === 'onlyCountdown' || displayType === 'countdownAndTimeIndicator';
+    }
+
+    /**
+     * Boolean to decide, if the time-indicator should be displayed.
+     * Defaults to `false`.
+     */
+    public showTimeIndicator = false;
+
+    /**
+     * Boolean to decide, if the countdown should be displayed.
+     * Defaults to `true`.
+     */
+    public showCountdown = true;
+
     /**
      * The amount of seconds to display
      */

client/src/app/site/projector/components/countdown-controls/countdown-controls.component.scss

@@ -38,5 +38,4 @@
 .larger-countdown {
     font-size: 150%;
     min-width: 60px;
-    margin-right: 10px;
 }

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

@@ -48,6 +48,16 @@ export class ViewCountdown extends BaseProjectableViewModel<Countdown> implement
                     key: 'fullscreen',
                     displayName: 'Fullscreen',
                     default: false
+                },
+                {
+                    key: 'displayType',
+                    displayName: 'Displaytype',
+                    choices: [
+                        { value: 'onlyCountdown', displayName: 'Only countdown' },
+                        { value: 'countdownAndTimeIndicator', displayName: 'Countdown and time-indicator' },
+                        { value: 'onlyTimeIndicator', displayName: 'Only time indicator' }
+                    ],
+                    default: 'onlyCountdown'
                 }
             ],
             projectionDefaultName: 'countdowns',

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

@@ -1,11 +1,27 @@
-<div class="countdown overlay" *ngIf="data && !data.element.fullscreen" [ngStyle]="{'margin-top': (!projector || projector.show_header_footer) ? '80px' : '30px'}">
+<div
-    <os-countdown-time [countdown]="data.data" [warningTime]="data.data.warning_time"></os-countdown-time>
+    class="countdown overlay"
-    <div class="description">
+    *ngIf="data && !data.element.fullscreen"
+    [ngClass]="{ 'only-time-indicator': data.element.displayType === 'onlyTimeIndicator' }"
+    [ngStyle]="{
+        'margin-top': !projector || projector.show_header_footer ? '80px' : '30px'
+    }"
+>
+    <os-countdown-time
+        [countdown]="data.data"
+        [displayType]="data.element.displayType"
+        [warningTime]="data.data.warning_time"
+    ></os-countdown-time>
+    <div *ngIf="data.data.description" class="description">
         {{ data.data.description }}
     </div>
 </div>
 <div class="countdown fullscreen" *ngIf="data && data.element.fullscreen">
     <div>
-        <os-countdown-time [countdown]="data.data" [warningTime]="data.data.warning_time"></os-countdown-time>
+        <os-countdown-time
+            [countdown]="data.data"
+            [fullscreen]="true"
+            [displayType]="data.element.displayType"
+            [warningTime]="data.data.warning_time"
+        ></os-countdown-time>
     </div>
 </div>

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

@@ -9,22 +9,15 @@
         height: 100%;
         z-index: 20;
         display: grid;
-
-        & > div {
-            justify-content: center;
-            align-content: center;
-            font-size: 10vw;
-            display: inline-grid;
-        }
     }
 
     &.overlay {
         position: relative;
         float: right;
         margin: 80px 0px 10px 10px;
-        padding: 35px 35px 0px 10px;
+        padding: 10px 35px 10px 10px;
         min-height: 60px;
-        min-width: 230px;
+        width: 230px;
         font-size: 3.7em;
         font-weight: bold;
         text-align: right;
@@ -32,6 +25,10 @@
         background-color: #f5f5f5;
         border: 1px solid #e3e3e3;
         box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+        &.only-time-indicator {
+            width: auto;
+            padding-left: 35px;
+        }
 
         .description {
             font-weight: normal;