From 587a0fe44381ca41deac1422552ecb6fc0f95ad6 Mon Sep 17 00:00:00 2001
From: Sean Engelhardt <sean.f.t.engelhardt@gmail.com>
Date: Thu, 28 Feb 2019 17:26:28 +0100
Subject: [PATCH 1/2] Clean projector detail interface

Alters the projector detail interface to provide better usability.
Alters the dragging slightly to have a nice preview and smoother
transitions.
---
 .../sorting-list/sorting-list.component.html  |   2 +-
 .../sorting-list/sorting-list.component.scss  |  17 +-
 .../projector-detail.component.html           | 296 ++++++++++--------
 .../projector-detail.component.scss           | 107 +++----
 .../projector-detail.component.ts             |   5 +
 client/src/assets/styles/drag.scss            |  29 ++
 6 files changed, 263 insertions(+), 193 deletions(-)
 create mode 100644 client/src/assets/styles/drag.scss

diff --git a/client/src/app/shared/components/sorting-list/sorting-list.component.html b/client/src/app/shared/components/sorting-list/sorting-list.component.html
index a26cfc724..84a8259b8 100644
--- a/client/src/app/shared/components/sorting-list/sorting-list.component.html
+++ b/client/src/app/shared/components/sorting-list/sorting-list.component.html
@@ -1,5 +1,5 @@
 <div cdkDropList class="os-card" (cdkDropListDropped)="drop($event)">
-    <div class= "box line" *ngIf="!array.length">
+    <div class="box line" *ngIf="!array.length">
         <span translate>No data</span>
     </div>
     <div class="box line" *ngFor="let item of array; let i = index" cdkDrag>
diff --git a/client/src/app/shared/components/sorting-list/sorting-list.component.scss b/client/src/app/shared/components/sorting-list/sorting-list.component.scss
index 3eb0fc8bf..af2500602 100644
--- a/client/src/app/shared/components/sorting-list/sorting-list.component.scss
+++ b/client/src/app/shared/components/sorting-list/sorting-list.component.scss
@@ -1,3 +1,5 @@
+@import '../../../../assets/styles/drag.scss';
+
 .box {
     width: 100%;
     border-bottom: solid 1px #ccc;
@@ -5,21 +7,6 @@
     font-size: 14px;
 }
 
-.cdk-drag-preview {
-    box-sizing: border-box;
-    border-radius: 4px;
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
-        0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.cdk-drag-placeholder {
-    opacity: 0;
-}
-
-.cdk-drag-animating {
-    transition: transform 125ms ease-in-out;
-}
-
 .box:last-child {
     border: none;
 }
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 9a6f74e74..bd574f893 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
@@ -12,56 +12,65 @@
                 <os-projector [projector]="projector"></os-projector>
             </div>
         </a>
-    </div>
-    <div class="column-right" *osPerms="'core.can_manage_projector'">
-        <div class="control-group">
-            <div class="button-size">{{ projector.scroll }}</div>
-            <button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Up)">
-                <mat-icon>arrow_upward</mat-icon>
+        <!-- Controls under the projector preview -->
+        <div class="control-group projector-controls">
+            <!-- scaling indicator -->
+            <div class="button-size">{{ projector.scale }}</div>
+
+            <!-- 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>
+
+            <!-- scroll indicator -->
+            <div class="button-size">{{ projector.scroll }}</div>
+
+            <!-- scroll down -->
             <button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Down)">
                 <mat-icon>arrow_downward</mat-icon>
             </button>
+
+            <!-- scroll up -->
+            <button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Up)">
+                <mat-icon>arrow_upward</mat-icon>
+            </button>
+
+            <!-- refresh button -->
             <button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Reset)">
                 <mat-icon>refresh</mat-icon>
             </button>
         </div>
-        <div class="control-group">
-            <div class="button-size">{{ projector.scale }}</div>
-            <button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Up)">
-                <mat-icon>zoom_in</mat-icon>
-            </button>
-            <button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Down)">
-                <mat-icon>zoom_out</mat-icon>
-            </button>
-            <button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Reset)">
-                <mat-icon>refresh</mat-icon>
-            </button>
-        </div>
-        <hr>
-        <div class="control-group">
-            <button type="button" mat-button (click)="projectPreviousSlide()" [disabled]="projector?.elements_history.length === 0">
+    </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">
+            <button
+                type="button"
+                mat-button
+                (click)="projectNextSlide()"
+                [disabled]="projector?.elements_preview.length === 0"
+            >
                 <span translate>Next</span>
                 <mat-icon>arrow_forward</mat-icon>
             </button>
-        </div>
-
-        <div class="queue" *ngIf="projector.elements_history.length">
-            <h5 translate>History</h5>
-            <p *ngFor="let elements of projector.elements_history">
-                {{ getSlideTitle(elements[0]) }}
-            </p>
+            <hr />
         </div>
 
         <div>
-            <h5 translate>Current</h5>
-
             <div *ngIf="projector.non_stable_elements.length">
-                <h4 translate>Slides</h4>
                 <mat-list>
                     <mat-list-item *ngFor="let element of projector.non_stable_elements" class="projected">
                         <button type="button" mat-icon-button (click)="unprojectCurrent(element)">
@@ -72,99 +81,142 @@
                 </mat-list>
             </div>
 
-            <div *ngIf="countdowns.length">
-                <h4>
-                    <span translate>Countdowns</span>
-                    <button type="button" mat-icon-button disableRipple routerLink="/projectors/countdowns">
-                        <mat-icon>edit</mat-icon>
-                    </button>
-                </h4>
-                <mat-list>
-                    <mat-list-item *ngFor="let countdown of countdowns" [ngClass]="{'projected': isProjected(countdown)}">
-                        <button type="button" mat-icon-button (click)="project(countdown)">
-                            <mat-icon>videocam</mat-icon>
-                        </button>
-                        {{ countdown.description }}
-                    </mat-list-item>
-                </mat-list>
-            </div>
+            <!-- Expandable elements -->
+            <mat-accordion multi="true">
+                <!-- Queue -->
+                <mat-expansion-panel *ngIf="projector.elements_preview.length" [expanded]="true">
+                    <mat-expansion-panel-header>
+                        <span translate>Queue</span>
+                    </mat-expansion-panel-header>
 
-            <div *ngIf="messages.length">
-                <h4>
-                    <span translate>Messages</span>
-                    <button type="button" mat-icon-button disableRipple routerLink="/projectors/messages">
-                        <mat-icon>edit</mat-icon>
-                    </button>
-                </h4>
-                <mat-list>
-                    <mat-list-item *ngFor="let message of messages"  [ngClass]="{'projected': isProjected(message)}">
-                        <button type="button" mat-icon-button (click)="project(message)">
-                            <mat-icon>videocam</mat-icon>
-                        </button>
-                        <span>{{ message.getPreview(40) }}</span>
-                    </mat-list-item>
-                </mat-list>
-            </div>
-
-            <div>
-                <h4>Current list of speakers overlay</h4>
-                <mat-list>
-                    <mat-list-item [ngClass]="{'projected': isClosProjected(true)}">
-                        <button type="button" mat-icon-button (click)="toggleClos(true)">
-                            <mat-icon>videocam</mat-icon>
-                        </button>
-                        <span translate>Current list of speakers overlay</span>
-                    </mat-list-item>
-                </mat-list>
-            </div>
-
-            <div *ngIf="!isClosProjected(false)">
-                <h4>Current list of speakers slide</h4>
-                <mat-list>
-                    <mat-list-item>
-                        <button type="button" mat-icon-button (click)="toggleClos(false)">
-                            <mat-icon>videocam</mat-icon>
-                        </button>
-                        <span translate>Current list of speakers slide</span>
-                    </mat-list-item>
-                </mat-list>
-            </div>
-        </div>
-
-        <div>
-            <h4>Current speaker chyron</h4>
-            <mat-list>
-                <mat-list-item [ngClass]="{'projected': isChyronProjected()}">
-                    <button type="button" mat-icon-button (click)="toggleChyron()">
-                        <mat-icon>videocam</mat-icon>
-                    </button>
-                    <span translate>Current speaker chyron</span>
-                </mat-list-item>
-            </mat-list>
-        </div>
-
-        <div class="queue" *ngIf="projector.elements_preview.length">
-            <h5 translate>Queue</h5>
-            <div cdkDropList class="drop-list" (cdkDropListDropped)="onSortingChange($event)">
-                <div class="list-entry" *ngFor="let element of projector.elements_preview; let i = index" cdkDrag>
-                    <div class="drag-handle" cdkDragHandle>
-                        <mat-icon>drag_indicator</mat-icon>
-                    </div>
-                    <div class="name">
-                        {{ i+1 }}.&nbsp;<span>{{ getSlideTitle(element) }}</span>
-                    </div>
-                    <div class="button-right">
-                        <div>
-                            <button type="button" mat-button (click)="projectNow(i)">
-                                <span translate>Project now</span>
-                            </button>
-                            <button type="button" mat-icon-button (click)="removePreviewElement(i)">
-                                <mat-icon>close</mat-icon>
-                            </button>
+                    <div
+                        cdkDropList
+                        class="drop-list"
+                        [cdkDropListDisabled]="!editQueue"
+                        (cdkDropListDropped)="onSortingChange($event)"
+                    >
+                        <div
+                            class="drop-list-entry"
+                            *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" *ngIf="!editQueue">
+                                <button type="button" mat-mini-fab (click)="projectNow(i)">
+                                    <mat-icon>videocam</mat-icon>
+                                </button>
+                            </div>
+                            <div class="name">
+                                {{ i + 1 }}.&nbsp;<span>{{ getSlideTitle(element) }}</span>
+                            </div>
+                            <div class="button-right" *ngIf="editQueue">
+                                <div>
+                                    <button type="button" mat-icon-button (click)="removePreviewElement(i)">
+                                        <mat-icon>close</mat-icon>
+                                    </button>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </div>
+                    <mat-action-row>
+                        <button type="button" mat-icon-button (click)="editQueue = !editQueue">
+                            <mat-icon>edit</mat-icon>
+                        </button>
+                    </mat-action-row>
+                </mat-expansion-panel>
+
+                <!-- Previous Slides -->
+                <mat-expansion-panel *ngIf="projector.elements_history.length">
+                    <mat-expansion-panel-header>
+                        <span translate>History</span>
+                    </mat-expansion-panel-header>
+                    <p *ngFor="let elements of projector.elements_history; let i = index">
+                        {{ i + 1 }}. {{ getSlideTitle(elements[0]) }}
+                    </p>
+                </mat-expansion-panel>
+
+                <!-- countdowns -->
+                <mat-expansion-panel *ngIf="countdowns.length">
+                    <mat-expansion-panel-header>
+                        <span translate>Countdowns</span>
+                    </mat-expansion-panel-header>
+                    <mat-list>
+                        <mat-list-item
+                            *ngFor="let countdown of countdowns"
+                            [ngClass]="{ projected: isProjected(countdown) }"
+                        >
+                            <button type="button" mat-icon-button (click)="project(countdown)">
+                                <mat-icon>videocam</mat-icon>
+                            </button>
+                            {{ countdown.description }}
+                        </mat-list-item>
+                    </mat-list>
+                    <mat-action-row>
+                        <button type="button" mat-icon-button routerLink="/projectors/countdowns">
+                            <mat-icon>edit</mat-icon>
+                        </button>
+                    </mat-action-row>
+                </mat-expansion-panel>
+
+                <!-- messages -->
+                <mat-expansion-panel *ngIf="messages.length">
+                    <mat-expansion-panel-header>
+                        <span translate>Messages</span>
+                    </mat-expansion-panel-header>
+                    <mat-list>
+                        <mat-list-item *ngFor="let message of messages" [ngClass]="{ projected: isProjected(message) }">
+                            <button type="button" mat-icon-button (click)="project(message)">
+                                <mat-icon>videocam</mat-icon>
+                            </button>
+                            <span>{{ message.getPreview(40) }}</span>
+                        </mat-list-item>
+                    </mat-list>
+                    <mat-action-row>
+                        <button type="button" mat-icon-button routerLink="/projectors/messages">
+                            <mat-icon>edit</mat-icon>
+                        </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>
+
+                    <!-- Overlay -->
+                    <mat-list>
+                        <mat-list-item [ngClass]="{ projected: isClosProjected(true) }">
+                            <button type="button" mat-icon-button (click)="toggleClos(true)">
+                                <mat-icon>videocam</mat-icon>
+                            </button>
+                            <span translate>Current list of speakers overlay</span>
+                        </mat-list-item>
+                    </mat-list>
+
+                    <!-- Current Speaker -->
+                    <mat-list *ngIf="!isClosProjected(false)">
+                        <mat-list-item>
+                            <button type="button" mat-icon-button (click)="toggleClos(false)">
+                                <mat-icon>videocam</mat-icon>
+                            </button>
+                            <span translate>Current list of speakers slide</span>
+                        </mat-list-item>
+                    </mat-list>
+
+                    <!-- Chyron -->
+                    <mat-list>
+                        <mat-list-item [ngClass]="{ projected: isChyronProjected() }">
+                            <button type="button" mat-icon-button (click)="toggleChyron()">
+                                <mat-icon>videocam</mat-icon>
+                            </button>
+                            <span translate>Current speaker chyron</span>
+                        </mat-list-item>
+                    </mat-list>
+                </mat-expansion-panel>
+            </mat-accordion>
         </div>
     </div>
 </div>
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 4c029feee..edaa9456c 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
@@ -1,3 +1,5 @@
+@import '../../../../../assets/styles/drag.scss';
+
 #projector {
     width: 100%; /*1000px;*/
     border: 1px solid lightgrey;
@@ -25,8 +27,7 @@
 }
 
 .control-group {
-    text-align: center;
-    color: rgba(0, 0, 0, 0.54);
+    color: rgba(0, 0, 0, 0.5);
 
     .button-size {
         width: 40px;
@@ -34,64 +35,60 @@
     }
 }
 
-h4 {
-    margin-top: 5px;
+.slide-controls {
+    text-align: center;
+}
 
-    button {
-        width: 20px;
-        height: 20px;
+.projector-controls {
+    text-align: right;
+}
+
+.drop-list {
+    width: 100%;
+    display: block;
+    overflow: hidden;
+}
+
+.drop-list-entry {
+    display: table;
+    min-height: 50px;
+    width: 100%;
+    border-bottom: solid 1px #ccc;
+    color: rgba(0, 0, 0, 0.87);
+
+    .drag-handle {
+        display: table-cell;
+        padding: 0 10px;
+        line-height: 0px;
+        vertical-align: middle;
+        width: 25px;
+        color: slategrey;
+        cursor: move;
     }
-}
 
-h5 {
-    margin-bottom: 0;
-}
+    .name {
+        display: table-cell;
+        vertical-align: middle;
+    }
 
-.queue {
-    margin-top: 15px;
+    .button-right {
+        display: table-cell;
+        padding-right: 10px;
+        vertical-align: middle;
+        width: auto;
+        white-space: nowrap;
 
-    .drop-list {
-        width: 100%;
-        display: block;
-        overflow: hidden;
-
-        .list-entry {
-            display: table;
-            min-height: 50px;
-            width: 100%;
-            border-bottom: solid 1px #ccc;
-            color: rgba(0, 0, 0, 0.87);
-
-            .drag-handle {
-                display: table-cell;
-                padding: 0 10px;
-                line-height: 0px;
-                vertical-align: middle;
-                width: 25px;
-                color: slategrey;
-                cursor: move;
-            }
-
-            .name {
-                display: table-cell;
-                vertical-align: middle;
-            }
-
-            .button-right {
-                display: table-cell;
-                padding-right: 10px;
-                vertical-align: middle;
-                width: auto;
-                white-space: nowrap;
-
-                div {
-                    float: right;
-                }
-            }
-        }
-
-        .list-entry:last-child {
-            border: none;
+        div {
+            float: right;
         }
     }
 }
+
+.drop-list-entry:last-child {
+    border: none;
+}
+
+// move away from preview.
+.drop-list.cdk-drop-list-dragging .drop-list-entry:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
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 ee07e2215..de2a25e7b 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
@@ -43,6 +43,11 @@ export class ProjectorDetailComponent extends BaseViewComponent implements OnIni
 
     public messages: ViewProjectorMessage[] = [];
 
+    /**
+     * true if the queue might be altered
+     */
+    public editQueue = false;
+
     /**
      * @param titleService
      * @param translate
diff --git a/client/src/assets/styles/drag.scss b/client/src/assets/styles/drag.scss
new file mode 100644
index 000000000..cddb5f38d
--- /dev/null
+++ b/client/src/assets/styles/drag.scss
@@ -0,0 +1,29 @@
+//shared CSS rules that are required for all components that implement drag and drop
+/**
+ * Moving list entries away from preview cannot be stored in this scss file, cause the naming
+ * of the css classes is relevant. Use it like the following.
+ *
+ * transform can somehow not be stored as css variable
+ *
+ * @example
+ * ```css
+ * .drop-list.cdk-drop-list-dragging .list-entry:not(.cdk-drag-placeholder) {
+ *     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+ * }
+ */
+
+.cdk-drag-preview {
+    box-sizing: border-box;
+    border-radius: 4px;
+    background-color: white;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+        0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+    opacity: 0;
+}
+
+.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

From 2257991abacf7116bd8e17fa983f4ce82fb526c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emanuel=20Sch=C3=BCtze?= <emanuel@intevation.de>
Date: Thu, 28 Feb 2019 21:39:05 +0100
Subject: [PATCH 2/2] Projector detail template improvements

---
 .../slide-container.component.scss            |  1 +
 .../motion-detail.component.html              |  5 +-
 .../projector-detail.component.html           | 53 +++++++++++--------
 .../projector-detail.component.scss           | 45 +++++++++++++---
 .../styles/global-components-style.scss       | 13 ++++-
 .../src/assets/styles/openslides-theme.scss   | 35 ------------
 client/src/styles.scss                        | 16 ++++++
 7 files changed, 98 insertions(+), 70 deletions(-)

diff --git a/client/src/app/shared/components/slide-container/slide-container.component.scss b/client/src/app/shared/components/slide-container/slide-container.component.scss
index 4687f8642..cb29e038e 100644
--- a/client/src/app/shared/components/slide-container/slide-container.component.scss
+++ b/client/src/app/shared/components/slide-container/slide-container.component.scss
@@ -7,6 +7,7 @@
         position: absolute;
         left: 50px;
         top: 50px;
+        line-height: 1.5em;
     }
 }
 
diff --git a/client/src/app/site/motions/components/motion-detail/motion-detail.component.html b/client/src/app/site/motions/components/motion-detail/motion-detail.component.html
index d6b887cbd..2ed4be551 100644
--- a/client/src/app/site/motions/components/motion-detail/motion-detail.component.html
+++ b/client/src/app/site/motions/components/motion-detail/motion-detail.component.html
@@ -72,10 +72,7 @@
                 <span translate>List of speakers</span>
             </button>
             <!-- Project -->
-            <button mat-menu-item *osPerms="'core.can_manage_projector'">
-                <mat-icon>videocam</mat-icon>
-                <span translate>Project</span>
-            </button>
+            <os-projector-button [object]="motion" [menuItem]="true" *osPerms="'core.can_manage_projector'"></os-projector-button>
             <!-- New amendment -->
             <button mat-menu-item (click)="createAmendment()" *ngIf="perms.isAllowed('can_create_amendments', motion)">
                 <mat-icon>add</mat-icon>
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 bd574f893..caded1525 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
@@ -14,36 +14,37 @@
         </a>
         <!-- Controls under the projector preview -->
         <div class="control-group projector-controls">
-            <!-- scaling indicator -->
-            <div class="button-size">{{ projector.scale }}</div>
 
             <!-- 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>
-
-            <!-- scroll indicator -->
-            <div class="button-size">{{ projector.scroll }}</div>
+            <!-- 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 down -->
-            <button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Down)">
+            <button type="button" class="spacer-left-40" mat-icon-button (click)="scroll(scrollScaleDirection.Down)">
                 <mat-icon>arrow_downward</mat-icon>
             </button>
-
             <!-- scroll up -->
             <button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Up)">
                 <mat-icon>arrow_upward</mat-icon>
             </button>
-
-            <!-- refresh 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'">
@@ -72,11 +73,18 @@
         <div>
             <div *ngIf="projector.non_stable_elements.length">
                 <mat-list>
-                    <mat-list-item *ngFor="let element of projector.non_stable_elements" class="projected">
+                    <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>
             </div>
@@ -84,7 +92,7 @@
             <!-- Expandable elements -->
             <mat-accordion multi="true">
                 <!-- Queue -->
-                <mat-expansion-panel *ngIf="projector.elements_preview.length" [expanded]="true">
+                <mat-expansion-panel *ngIf="projector.elements_preview.length" [expanded]="true" class="queue">
                     <mat-expansion-panel-header>
                         <span translate>Queue</span>
                     </mat-expansion-panel-header>
@@ -96,7 +104,7 @@
                         (cdkDropListDropped)="onSortingChange($event)"
                     >
                         <div
-                            class="drop-list-entry"
+                            class="drop-list-entry queue-element backgroundColorLight"
                             *ngFor="let element of projector.elements_preview; let i = index"
                             cdkDrag
                         >
@@ -104,7 +112,7 @@
                                 <mat-icon>drag_indicator</mat-icon>
                             </div>
                             <div class="drag-handle" *ngIf="!editQueue">
-                                <button type="button" mat-mini-fab (click)="projectNow(i)">
+                                <button type="button" mat-icon-button (click)="projectNow(i)">
                                     <mat-icon>videocam</mat-icon>
                                 </button>
                             </div>
@@ -121,14 +129,17 @@
                         </div>
                     </div>
                     <mat-action-row>
-                        <button type="button" mat-icon-button (click)="editQueue = !editQueue">
+                        <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">
+                <mat-expansion-panel *ngIf="projector.elements_history.length" class="previous-slides">
                     <mat-expansion-panel-header>
                         <span translate>History</span>
                     </mat-expansion-panel-header>
@@ -192,17 +203,17 @@
                             <button type="button" mat-icon-button (click)="toggleClos(true)">
                                 <mat-icon>videocam</mat-icon>
                             </button>
-                            <span translate>Current list of speakers overlay</span>
+                            <span translate>Overlay</span>
                         </mat-list-item>
                     </mat-list>
 
                     <!-- Current Speaker -->
-                    <mat-list *ngIf="!isClosProjected(false)">
-                        <mat-list-item>
+                    <mat-list>
+                        <mat-list-item [ngClass]="{ projected: isClosProjected(false) }">
                             <button type="button" mat-icon-button (click)="toggleClos(false)">
                                 <mat-icon>videocam</mat-icon>
                             </button>
-                            <span translate>Current list of speakers slide</span>
+                            <span translate>Slide</span>
                         </mat-list-item>
                     </mat-list>
 
@@ -212,7 +223,7 @@
                             <button type="button" mat-icon-button (click)="toggleChyron()">
                                 <mat-icon>videocam</mat-icon>
                             </button>
-                            <span translate>Current speaker chyron</span>
+                            <span translate>Chyron</span>
                         </mat-list-item>
                     </mat-list>
                 </mat-expansion-panel>
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 edaa9456c..0e4026a35 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
@@ -30,7 +30,7 @@
     color: rgba(0, 0, 0, 0.5);
 
     .button-size {
-        width: 40px;
+        padding-left: 5px;
         display: inline-block;
     }
 }
@@ -43,6 +43,37 @@
     text-align: right;
 }
 
+.currentElement {
+    margin-bottom: 20px;
+    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
+
+    .button-right {
+        position: absolute;
+        right: 10px;
+    }
+}
+
+.queue,
+.previous-slides {
+    box-shadow: none !important;
+    background: none !important;
+    margin-bottom: 20px;
+
+    .queue-element {
+        margin-bottom: 5px;
+    }
+
+    .mat-expansion-panel-header {
+        padding: 0 5px 0 0 !important;
+        height: 36px !important;
+    }
+
+    .mat-action-row {
+        border-top-style: none;
+        padding: 0;
+    }
+}
+
 .drop-list {
     width: 100%;
     display: block;
@@ -53,8 +84,6 @@
     display: table;
     min-height: 50px;
     width: 100%;
-    border-bottom: solid 1px #ccc;
-    color: rgba(0, 0, 0, 0.87);
 
     .drag-handle {
         display: table-cell;
@@ -66,11 +95,6 @@
         cursor: move;
     }
 
-    .name {
-        display: table-cell;
-        vertical-align: middle;
-    }
-
     .button-right {
         display: table-cell;
         padding-right: 10px;
@@ -82,6 +106,11 @@
             float: right;
         }
     }
+
+    .name {
+        display: table-cell;
+        vertical-align: middle;
+    }
 }
 
 .drop-list-entry:last-child {
diff --git a/client/src/assets/styles/global-components-style.scss b/client/src/assets/styles/global-components-style.scss
index e0f4f2218..c35824b5b 100644
--- a/client/src/assets/styles/global-components-style.scss
+++ b/client/src/assets/styles/global-components-style.scss
@@ -19,7 +19,7 @@
         color: mat-color($primary);
     }
 
-    .accent-text {
+    .accent, .accent-text {
         color: mat-color($accent);
     }
 
@@ -42,7 +42,7 @@
         font-size: 75%;
         display: block;
     }
-    .error {
+    .error, .warn {
         color: mat-color($warn);
     }
 
@@ -75,4 +75,13 @@
         background-color: mat-color($primary);
         color: white; // TODO
     }
+    .backgroundColorAccent {
+        background-color: mat-color($accent);
+        color: mat-color($accent, default-contrast) !important;
+    }
+
+    .backgroundColorLight {
+        background-color: mat-color($background, status-bar);
+        color: mat-color($foreground, text) !important;
+    }
 }
diff --git a/client/src/assets/styles/openslides-theme.scss b/client/src/assets/styles/openslides-theme.scss
index 2952fda99..38c31be84 100644
--- a/client/src/assets/styles/openslides-theme.scss
+++ b/client/src/assets/styles/openslides-theme.scss
@@ -32,46 +32,11 @@ $openslides-blue: (
     )
 );
 
-$openslides-green: (
-    50: #e9f2e6,
-    100: #c8e0bf,
-    200: #a3cb95,
-    300: #7eb66b,
-    400: #62a64b,
-    500: #46962b,
-    600: #3f8e26,
-    700: #0a321e,
-    800: #092d1a,
-    900: #072616,
-    A100: #acff9d,
-    A200: #80ff6a,
-    A400: #55ff37,
-    A700: #3fff1e,
-    contrast: (
-        50: #000000,
-        100: #000000,
-        200: #000000,
-        300: #000000,
-        400: #000000,
-        500: #ffffff,
-        600: #ffffff,
-        700: #ffffff,
-        800: #ffffff,
-        900: #ffffff,
-        A100: #000000,
-        A200: #000000,
-        A400: #000000,
-        A700: #000000
-    )
-);
-
 // Generate paletes using: https://material.io/design/color/
 // default values fir mat-palette: $default: 500, $lighter: 100, $darker: 700.
 $openslides-primary: mat-palette($openslides-blue);
 
 $openslides-accent: mat-palette($mat-light-blue);
-// $openslides-primary: mat-palette($openslides-green);
-// $openslides-accent: mat-palette($mat-amber);
 
 $openslides-warn: mat-palette($mat-red);
 
diff --git a/client/src/styles.scss b/client/src/styles.scss
index b3b58344e..a546c5bee 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -409,6 +409,9 @@ button.mat-menu-item.selected {
 .spacer-left-10 {
     margin-left: 10px;
 }
+.spacer-left-40 {
+    margin-left: 40px !important;
+}
 
 .button24 {
     background-color: white;
@@ -469,6 +472,12 @@ button.mat-menu-item.selected {
 .center {
     text-align: center;
 }
+.pointer:hover {
+    cursor: pointer;
+}
+.pointer.selected {
+    cursor: pointer;
+}
 
 /** Colors **/
 .lightblue {
@@ -638,3 +647,10 @@ button.mat-menu-item.selected {
 .mat-cell > * {
     z-index: 2;
 }
+
+
+.queue {
+    .mat-expansion-panel-body {
+        padding: 0 !important;
+    }
+}