Projector detail template improvements

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

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'">
+            <os-projector-button [object]="motion" [menuItem]="true" *osPerms="'core.can_manage_projector'"></os-projector-button>
-                <mat-icon>videocam</mat-icon>
-                <span translate>Project</span>
-            </button>
             <!-- New amendment -->
             <button mat-menu-item (click)="createAmendment()" *ngIf="perms.isAllowed('can_create_amendments', motion)">
                 <mat-icon>add</mat-icon>

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>
-
+            <!-- reset button -->
-            <!-- scroll indicator -->
+            <button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Reset)">
-            <div class="button-size">{{ projector.scroll }}</div>
+                <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>
-
+            <!-- reset button -->
-            <!-- refresh 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>
-                        <mat-list-item>
+                        <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>

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 {

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

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

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