From 453e639d2f2bea51b2b84b9053aecbb56de95c73 Mon Sep 17 00:00:00 2001
From: GabrielMeyer <meyergabriel@live.de>
Date: Wed, 28 Aug 2019 10:14:10 +0200
Subject: [PATCH] Improves the layout of the projector

- Adds a grid-layout to have a flexible view for different devices
---
 .../projector-detail.component.html           | 546 +++++++++---------
 .../projector-detail.component.scss           |  11 -
 .../projector-detail.component.ts             |  11 +
 3 files changed, 287 insertions(+), 281 deletions(-)

diff --git a/client/src/app/site/projector/components/projector-detail/projector-detail.component.html b/client/src/app/site/projector/components/projector-detail/projector-detail.component.html
index f8e173fb8..96868c15c 100644
--- a/client/src/app/site/projector/components/projector-detail/projector-detail.component.html
+++ b/client/src/app/site/projector/components/projector-detail/projector-detail.component.html
@@ -5,290 +5,296 @@
     </div>
 </os-head-bar>
 
-<div class="content-container" *ngIf="projector">
-    <div class="column-left">
-        <a [routerLink]="['/projector', projector.id]">
-            <div id="projector">
-                <os-projector [projector]="projector"></os-projector>
+<os-grid-layout *ngIf="projector">
+    <os-tile [preferredSize]="projectorTileSizeLeft">
+        <div *ngIf="projector" class="column-left">
+            <a [routerLink]="['/projector', projector.id]">
+                <div id="projector">
+                    <os-projector [projector]="projector"></os-projector>
+                </div>
+            </a>
+            <!-- Controls under the projector preview -->
+            <div *osPerms="'core.can_manage_projector'" class="control-group projector-controls">
+                <!-- scale up -->
+                <button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Up)">
+                    <mat-icon>zoom_in</mat-icon>
+                </button>
+                <!-- scale down -->
+                <button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Down)">
+                    <mat-icon>zoom_out</mat-icon>
+                </button>
+                <!-- reset button -->
+                <button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Reset)">
+                    <mat-icon>refresh</mat-icon>
+                </button>
+                <!-- scaling indicator -->
+                <div class="button-size" [ngClass]="projector.scale != 0 ? 'warn' : ''">{{ projector.scale }}</div>
+
+                <!-- scroll viewport up (fast), decrease scroll counter -->
+                <button
+                    [disabled]="projector.scroll <= 4"
+                    type="button"
+                    class="spacer-left-50"
+                    mat-icon-button
+                    (click)="scroll(scrollScaleDirection.Down, 5)"
+                    matTooltip="{{ 'Scroll up (big step)' | translate }}"
+                >
+                    <mat-icon>arrow_upward</mat-icon>
+                </button>
+                <!-- scroll viewport up (slow), decrease scroll counter -->
+                <button
+                    [disabled]="projector.scroll <= 0"
+                    type="button"
+                    mat-icon-button
+                    (click)="scroll(scrollScaleDirection.Down)"
+                    matTooltip="{{ 'Scroll up' | translate }}"
+                >
+                    <mat-icon>arrow_drop_up</mat-icon>
+                </button>
+                <!-- scroll viewport down (slow), increase scroll counter -->
+                <button
+                    type="button"
+                    mat-icon-button
+                    (click)="scroll(scrollScaleDirection.Up)"
+                    matTooltip="{{ 'Scroll down' | translate }}"
+                >
+                    <mat-icon>arrow_drop_down</mat-icon>
+                </button>
+                <!-- scroll viewport down (fast), increase scroll counter -->
+                <button
+                    type="button"
+                    mat-icon-button
+                    (click)="scroll(scrollScaleDirection.Up, 5)"
+                    matTooltip="{{ 'Scroll down (big step)' | translate }}"
+                >
+                    <mat-icon>arrow_downward</mat-icon>
+                </button>
+                <!-- reset button -->
+                <button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Reset)">
+                    <mat-icon>refresh</mat-icon>
+                </button>
+                <!-- scroll indicator -->
+                <div class="button-size" [ngClass]="projector.scroll != 0 ? 'warn' : ''">
+                    {{ projector.scroll }}
+                </div>
             </div>
-        </a>
-        <!-- Controls under the projector preview -->
-        <div *osPerms="'core.can_manage_projector'" class="control-group projector-controls">
-            <!-- scale up -->
-            <button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Up)">
-                <mat-icon>zoom_in</mat-icon>
-            </button>
-            <!-- scale down -->
-            <button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Down)">
-                <mat-icon>zoom_out</mat-icon>
-            </button>
-            <!-- reset button -->
-            <button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Reset)">
-                <mat-icon>refresh</mat-icon>
-            </button>
-            <!-- scaling indicator -->
-            <div class="button-size" [ngClass]="projector.scale != 0 ? 'warn' : ''">{{ projector.scale }}</div>
-
-            <!-- scroll viewport up (fast), decrease scroll counter -->
-            <button
-                [disabled]="projector.scroll <= 4"
-                type="button"
-                class="spacer-left-50"
-                mat-icon-button
-                (click)="scroll(scrollScaleDirection.Down, 5)"
-                matTooltip="{{ 'Scroll up (big step)' | translate }}"
-            >
-                <mat-icon>arrow_upward</mat-icon>
-            </button>
-            <!-- scroll viewport up (slow), decrease scroll counter -->
-            <button
-                [disabled]="projector.scroll <= 0"
-                type="button"
-                mat-icon-button
-                (click)="scroll(scrollScaleDirection.Down)"
-                matTooltip="{{ 'Scroll up' | translate }}"
-            >
-                <mat-icon>arrow_drop_up</mat-icon>
-            </button>
-            <!-- scroll viewport down (slow), increase scroll counter -->
-            <button
-                type="button"
-                mat-icon-button
-                (click)="scroll(scrollScaleDirection.Up)"
-                matTooltip="{{ 'Scroll down' | translate }}"
-            >
-                <mat-icon>arrow_drop_down</mat-icon>
-            </button>
-            <!-- scroll viewport down (fast), increase scroll counter -->
-            <button
-                type="button"
-                mat-icon-button
-                (click)="scroll(scrollScaleDirection.Up, 5)"
-                matTooltip="{{ 'Scroll down (big step)' | translate }}"
-            >
-                <mat-icon>arrow_downward</mat-icon>
-            </button>
-            <!-- reset button -->
-            <button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Reset)">
-                <mat-icon>refresh</mat-icon>
-            </button>
-            <!-- scroll indicator -->
-            <div class="button-size" [ngClass]="projector.scroll != 0 ? 'warn' : ''">{{ projector.scroll }}</div>
         </div>
-    </div>
-    <div class="column-right" *osPerms="'core.can_manage_projector'">
-        <div class="control-group slide-controls">
-            <button
-                type="button"
-                mat-button
-                (click)="projectPreviousSlide()"
-                [disabled]="projector?.elements_history.length === 0"
-            >
-                <mat-icon>arrow_back</mat-icon>
-                <span translate>Previous</span>
-            </button>
-            <button
-                type="button"
-                mat-button
-                (click)="projectNextSlide()"
-                [disabled]="projector?.elements_preview.length === 0"
-            >
-                <span translate>Next</span>
-                <mat-icon>arrow_forward</mat-icon>
-            </button>
-            <hr />
-        </div>
-
-        <div>
-            <div *ngIf="projector.non_stable_elements.length">
-                <mat-list>
-                    <mat-list-item
-                        *ngFor="let element of projector.non_stable_elements"
-                        class="currentElement backgroundColorAccent"
-                    >
-                        <button type="button" mat-icon-button (click)="unprojectCurrent(element)">
-                            <mat-icon>videocam</mat-icon>
-                        </button>
-                        {{ getSlideTitle(element) }}
-                        <div class="button-right">
-                            <div>
-                                <button type="button" mat-icon-button (click)="unprojectCurrent(element)">
-                                    <mat-icon>close</mat-icon>
-                                </button>
-                            </div>
-                        </div>
-                    </mat-list-item>
-                </mat-list>
+    </os-tile>
+    <os-tile [preferredSize]="projectorTileSizeRight">
+        <div *osPerms="'core.can_manage_projector'">
+            <div class="control-group slide-controls">
+                <button
+                    type="button"
+                    mat-button
+                    (click)="projectPreviousSlide()"
+                    [disabled]="projector?.elements_history.length === 0"
+                >
+                    <mat-icon>arrow_back</mat-icon>
+                    <span translate>Previous</span>
+                </button>
+                <button
+                    type="button"
+                    mat-button
+                    (click)="projectNextSlide()"
+                    [disabled]="projector?.elements_preview.length === 0"
+                >
+                    <span translate>Next</span>
+                    <mat-icon>arrow_forward</mat-icon>
+                </button>
+                <hr />
             </div>
 
-            <!-- Expandable elements -->
-            <mat-accordion multi="true">
-                <!-- Queue -->
-                <mat-expansion-panel *ngIf="projector.elements_preview.length" [expanded]="true" class="queue">
-                    <mat-expansion-panel-header>
-                        <span translate>Queue</span>
-                    </mat-expansion-panel-header>
-                    <div
-                        cdkDropList
-                        class="drop-list"
-                        [cdkDropListDisabled]="!editQueue"
-                        (cdkDropListDropped)="onSortingChange($event)"
-                    >
-                        <div
-                            class="drop-list-entry queue-element backgroundColorLight"
-                            *ngFor="let element of projector.elements_preview; let i = index"
-                            cdkDrag
+            <div>
+                <div *ngIf="projector.non_stable_elements.length">
+                    <mat-list>
+                        <mat-list-item
+                            *ngFor="let element of projector.non_stable_elements"
+                            class="currentElement backgroundColorAccent"
                         >
-                            <div class="drag-handle" cdkDragHandle *ngIf="editQueue">
-                                <mat-icon>drag_indicator</mat-icon>
-                            </div>
-                            <div class="drag-handle no-drag" *ngIf="!editQueue">
-                                <button type="button" mat-icon-button (click)="projectNow(i)">
-                                    <mat-icon>videocam</mat-icon>
-                                </button>
-                            </div>
-                            <div class="name">
-                                <span>{{ getSlideTitle(element) }}</span>
-                            </div>
-                            <div class="button-right" *ngIf="editQueue">
+                            <button type="button" mat-icon-button (click)="unprojectCurrent(element)">
+                                <mat-icon>videocam</mat-icon>
+                            </button>
+                            {{ getSlideTitle(element) }}
+                            <div class="button-right">
                                 <div>
-                                    <button type="button" mat-icon-button (click)="removePreviewElement(i)">
-                                        <mat-icon>delete</mat-icon>
+                                    <button type="button" mat-icon-button (click)="unprojectCurrent(element)">
+                                        <mat-icon>close</mat-icon>
                                     </button>
                                 </div>
                             </div>
+                        </mat-list-item>
+                    </mat-list>
+                </div>
+
+                <!-- Expandable elements -->
+                <mat-accordion multi="true">
+                    <!-- Queue -->
+                    <mat-expansion-panel *ngIf="projector.elements_preview.length" [expanded]="true" class="queue">
+                        <mat-expansion-panel-header>
+                            <span translate>Queue</span>
+                        </mat-expansion-panel-header>
+                        <div
+                            cdkDropList
+                            class="drop-list"
+                            [cdkDropListDisabled]="!editQueue"
+                            (cdkDropListDropped)="onSortingChange($event)"
+                        >
+                            <div
+                                class="drop-list-entry queue-element backgroundColorLight"
+                                *ngFor="let element of projector.elements_preview; let i = index"
+                                cdkDrag
+                            >
+                                <div class="drag-handle" cdkDragHandle *ngIf="editQueue">
+                                    <mat-icon>drag_indicator</mat-icon>
+                                </div>
+                                <div class="drag-handle no-drag" *ngIf="!editQueue">
+                                    <button type="button" mat-icon-button (click)="projectNow(i)">
+                                        <mat-icon>videocam</mat-icon>
+                                    </button>
+                                </div>
+                                <div class="name">
+                                    <span>{{ getSlideTitle(element) }}</span>
+                                </div>
+                                <div class="button-right" *ngIf="editQueue">
+                                    <div>
+                                        <button type="button" mat-icon-button (click)="removePreviewElement(i)">
+                                            <mat-icon>delete</mat-icon>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                    <mat-action-row>
-                        <button *ngIf="!editQueue" type="button" mat-icon-button (click)="editQueue = !editQueue">
-                            <mat-icon>edit</mat-icon>
-                        </button>
-                        <button *ngIf="editQueue" type="button" mat-icon-button (click)="editQueue = !editQueue">
-                            <mat-icon>close</mat-icon>
-                        </button>
-                    </mat-action-row>
-                </mat-expansion-panel>
-
-                <!-- Previous Slides -->
-                <mat-expansion-panel *ngIf="projector.elements_history.length" class="previous-slides">
-                    <mat-expansion-panel-header>
-                        <span translate>Previous slides</span>
-                    </mat-expansion-panel-header>
-                    <p *ngFor="let elements of projector.elements_history; let i = index">
-                        {{ i + 1 }}. &nbsp; {{ getSlideTitle(elements[0]) }}
-                    </p>
-                </mat-expansion-panel>
-
-                <!-- countdowns -->
-                <mat-expansion-panel>
-                    <mat-expansion-panel-header>
-                        <span translate>Countdowns</span>
-                    </mat-expansion-panel-header>
-                    <mat-list>
-                        <mat-list-item *ngFor="let countdown of countdowns" class="larger-mat-list-item">
-                            <os-countdown-controls
-                                class="dynamic-list-entry"
-                                [countdown]="countdown"
-                                [projector]="projector.projector"
-                                (editEvent)="openCountdownDialog($event)"
-                            ></os-countdown-controls>
-                        </mat-list-item>
-                    </mat-list>
-                    <mat-action-row>
-                        <button type="button" mat-button (click)="openCountdownDialog()">
-                            <mat-icon>add</mat-icon>
-                            <span translate>Add countdown</span>
-                        </button>
-                    </mat-action-row>
-                </mat-expansion-panel>
-
-                <!-- messages -->
-                <mat-expansion-panel>
-                    <mat-expansion-panel-header>
-                        <span translate>Messages</span>
-                    </mat-expansion-panel-header>
-                    <mat-list>
-                        <mat-list-item *ngFor="let message of messages" class="larger-mat-list-item">
-                            <os-message-controls
-                                class="dynamic-list-entry"
-                                [message]="message"
-                                [projector]="projector.projector"
-                                (editEvent)="openMessagesDialog($event)"
-                            >
-                            </os-message-controls>
-                        </mat-list-item>
-                    </mat-list>
-                    <mat-action-row>
-                        <button type="button" mat-button (click)="openMessagesDialog()">
-                            <mat-icon>add</mat-icon>
-                            <span translate>Add message</span>
-                        </button>
-                    </mat-action-row>
-                </mat-expansion-panel>
-
-                <!-- Current list of speakers -->
-                <mat-expansion-panel>
-                    <mat-expansion-panel-header>
-                        <span translate>Current list of speakers</span>
-                    </mat-expansion-panel-header>
-
-                    <!-- Slide-->
-                    <mat-list *ngIf="projectorCount > 1">
-                        <mat-list-item>
-                            <button
-                                type="button"
-                                mat-mini-fab
-                                (click)="toggleClos(false)"
-                                [ngClass]="isClosProjected(false) ? 'projector-active' : 'projector-inactive'"
-                            >
-                                <mat-icon>videocam</mat-icon>
+                        <mat-action-row>
+                            <button *ngIf="!editQueue" type="button" mat-icon-button (click)="editQueue = !editQueue">
+                                <mat-icon>edit</mat-icon>
                             </button>
-                            <span class="spacer-left-10" translate>Slide</span>
-                        </mat-list-item>
-                    </mat-list>
-
-                    <!-- Overlay -->
-                    <mat-list>
-                        <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 *ngIf="editQueue" type="button" mat-icon-button (click)="editQueue = !editQueue">
+                                <mat-icon>close</mat-icon>
                             </button>
-                            <span class="spacer-left-10" translate>Overlay</span>
-                        </mat-list-item>
-                    </mat-list>
+                        </mat-action-row>
+                    </mat-expansion-panel>
 
-                    <!-- Chyron -->
-                    <mat-list>
-                        <mat-list-item>
-                            <button
-                                type="button"
-                                mat-mini-fab
-                                (click)="toggleChyron()"
-                                [ngClass]="isChyronProjected() ? 'projector-active' : 'projector-inactive'"
-                            >
-                                <mat-icon>videocam</mat-icon>
+                    <!-- Previous Slides -->
+                    <mat-expansion-panel *ngIf="projector.elements_history.length" class="previous-slides">
+                        <mat-expansion-panel-header>
+                            <span translate>Previous slides</span>
+                        </mat-expansion-panel-header>
+                        <p *ngFor="let elements of projector.elements_history; let i = index">
+                            {{ i + 1 }}. &nbsp; {{ getSlideTitle(elements[0]) }}
+                        </p>
+                    </mat-expansion-panel>
+
+                    <!-- countdowns -->
+                    <mat-expansion-panel>
+                        <mat-expansion-panel-header>
+                            <span translate>Countdowns</span>
+                        </mat-expansion-panel-header>
+                        <mat-list>
+                            <mat-list-item *ngFor="let countdown of countdowns" class="larger-mat-list-item">
+                                <os-countdown-controls
+                                    class="dynamic-list-entry"
+                                    [countdown]="countdown"
+                                    [projector]="projector.projector"
+                                    (editEvent)="openCountdownDialog($event)"
+                                ></os-countdown-controls>
+                            </mat-list-item>
+                        </mat-list>
+                        <mat-action-row>
+                            <button type="button" mat-button (click)="openCountdownDialog()">
+                                <mat-icon>add</mat-icon>
+                                <span translate>Add countdown</span>
                             </button>
-                            <span class="spacer-left-10" translate>Chyron</span>
-                        </mat-list-item>
-                    </mat-list>
-                </mat-expansion-panel>
+                        </mat-action-row>
+                    </mat-expansion-panel>
 
-                <!-- File display controls -->
-                <!--<mat-expansion-panel>
-                    <mat-expansion-panel-header>
-                            <span translate>Media controls</span>
-                    </mat-expansion-panel-header>
-                    <os-presentation-control [projector]="projector">
-                    </os-presentation-control>
-                </mat-expansion-panel>-->
+                    <!-- messages -->
+                    <mat-expansion-panel>
+                        <mat-expansion-panel-header>
+                            <span translate>Messages</span>
+                        </mat-expansion-panel-header>
+                        <mat-list>
+                            <mat-list-item *ngFor="let message of messages" class="larger-mat-list-item">
+                                <os-message-controls
+                                    class="dynamic-list-entry"
+                                    [message]="message"
+                                    [projector]="projector.projector"
+                                    (editEvent)="openMessagesDialog($event)"
+                                >
+                                </os-message-controls>
+                            </mat-list-item>
+                        </mat-list>
+                        <mat-action-row>
+                            <button type="button" mat-button (click)="openMessagesDialog()">
+                                <mat-icon>add</mat-icon>
+                                <span translate>Add message</span>
+                            </button>
+                        </mat-action-row>
+                    </mat-expansion-panel>
 
-                <os-presentation-control [projector]="projector"> </os-presentation-control>
-            </mat-accordion>
+                    <!-- Current list of speakers -->
+                    <mat-expansion-panel>
+                        <mat-expansion-panel-header>
+                            <span translate>Current list of speakers</span>
+                        </mat-expansion-panel-header>
+
+                        <!-- Slide-->
+                        <mat-list *ngIf="projectorCount > 1">
+                            <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 class="spacer-left-10" translate>Slide</span>
+                            </mat-list-item>
+                        </mat-list>
+
+                        <!-- Overlay -->
+                        <mat-list>
+                            <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 class="spacer-left-10" translate>Overlay</span>
+                            </mat-list-item>
+                        </mat-list>
+
+                        <!-- Chyron -->
+                        <mat-list>
+                            <mat-list-item>
+                                <button
+                                    type="button"
+                                    mat-mini-fab
+                                    (click)="toggleChyron()"
+                                    [ngClass]="isChyronProjected() ? 'projector-active' : 'projector-inactive'"
+                                >
+                                    <mat-icon>videocam</mat-icon>
+                                </button>
+                                <span class="spacer-left-10" translate>Chyron</span>
+                            </mat-list-item>
+                        </mat-list>
+                    </mat-expansion-panel>
+
+                    <!-- File display controls -->
+                    <!--<mat-expansion-panel>
+                        <mat-expansion-panel-header>
+                                <span translate>Media controls</span>
+                        </mat-expansion-panel-header>
+                        <os-presentation-control [projector]="projector">
+                        </os-presentation-control>
+                    </mat-expansion-panel>-->
+
+                    <os-presentation-control [projector]="projector"> </os-presentation-control>
+                </mat-accordion>
+            </div>
         </div>
-    </div>
-</div>
+    </os-tile>
+</os-grid-layout>
diff --git a/client/src/app/site/projector/components/projector-detail/projector-detail.component.scss b/client/src/app/site/projector/components/projector-detail/projector-detail.component.scss
index 61ff7d595..dbe802f48 100644
--- a/client/src/app/site/projector/components/projector-detail/projector-detail.component.scss
+++ b/client/src/app/site/projector/components/projector-detail/projector-detail.component.scss
@@ -7,11 +7,6 @@
 
 .column-left {
     color: black;
-    display: inline-block;
-    padding-top: 20px;
-    width: 60%;
-    min-width: 200px;
-    padding-right: 25px;
 
     /* Do not let the a tag ruin the projector */
     a {
@@ -20,12 +15,6 @@
     }
 }
 
-.column-right {
-    padding-top: 20px;
-    width: calc(40% - 30px);
-    float: right;
-}
-
 .control-group {
     color: rgba(0, 0, 0, 0.5);
 
diff --git a/client/src/app/site/projector/components/projector-detail/projector-detail.component.ts b/client/src/app/site/projector/components/projector-detail/projector-detail.component.ts
index e91a4de5d..72677b91f 100644
--- a/client/src/app/site/projector/components/projector-detail/projector-detail.component.ts
+++ b/client/src/app/site/projector/components/projector-detail/projector-detail.component.ts
@@ -15,6 +15,7 @@ import {
     ScrollScaleDirection
 } from 'app/core/repositories/projector/projector-repository.service';
 import { DurationService } from 'app/core/ui-services/duration.service';
+import { SizeObject } from 'app/shared/components/tile/tile.component';
 import { Countdown } from 'app/shared/models/core/countdown';
 import { ProjectorElement } from 'app/shared/models/core/projector';
 import { ProjectorMessage } from 'app/shared/models/core/projector-message';
@@ -52,6 +53,16 @@ export class ProjectorDetailComponent extends BaseViewComponent implements OnIni
 
     public projectorCount: number;
 
+    /**
+     * Defines the used sizes for different devices for the left column.
+     */
+    public projectorTileSizeLeft: SizeObject = { medium: 8, large: 10 };
+
+    /**
+     * Defines the used sizes for different devices for the right column.
+     */
+    public projectorTileSizeRight: SizeObject = { medium: 4, large: 6 };
+
     /**
      * true if the queue might be altered
      */