Keep point-of-order infos

Keeps pro, contra, poo infos in active speaker and finished speakers.
Cleans up a lot of template related code

client/src/app/shared/components/list-of-speakers-content/list-of-speakers-content.component.html

@@ -17,16 +17,25 @@
         </mat-expansion-panel-header>
         <mat-list>
             <mat-list-item *ngFor="let speaker of finishedSpeakers; let number = index">
-                <div class="finished-speaker-grid">
+                <div class="finished-speakers-grid">
-                    <div class="number">{{ number + 1 }}.</div>
+                    <div>{{ number + 1 }}.</div>
-                    <div class="name">{{ speaker.getTitle() }}</div>
+                    <div class="finished-speaker-info">
-                    <div class="point-of-order" *ngIf="speaker.point_of_order">
+                        <div>
-                        <mat-icon color="warn">warning</mat-icon>
+                            <div>{{ speaker.getTitle() }}</div>
+                            <div>
+                                <ng-container
+                                    [ngTemplateOutlet]="speakerSubtitle"
+                                    [ngTemplateOutletContext]="{ speaker: speaker, showcolor: true }"
+                                ></ng-container>
                             </div>
-                    <div class="time">
-                        {{ durationString(speaker) }} ({{ 'Start time' | translate }}: {{ startTimeToString(speaker) }})
                         </div>
-                    <div class="controls">
+                        <div class="user-subtitle">
+                            {{ durationString(speaker) }} ({{ 'Start time' | translate }}:
+                            {{ startTimeToString(speaker) }})
+                        </div>
+                    </div>
+
+                    <div>
                         <button
                             mat-icon-button
                             matTooltip="{{ 'Remove' | translate }}"
@@ -54,17 +63,10 @@
         <span class="name">
             {{ activeSpeaker.getListTitle() }}
             <div class="active-speaker-subtitle">
-                <i *ngIf="activeSpeaker.pro_speech === true">
+                <ng-container
-                    {{ 'Forspeech' | translate }}
+                    [ngTemplateOutlet]="speakerSubtitle"
-                </i>
+                    [ngTemplateOutletContext]="{ speaker: activeSpeaker }"
-
+                ></ng-container>
-                <i *ngIf="activeSpeaker.pro_speech === false">
-                    {{ 'Counter speech' | translate }}
-                </i>
-
-                <i *ngIf="activeSpeaker.marked">
-                    {{ 'Contribution' | translate }}
-                </i>
             </div>
         </span>
 
@@ -75,7 +77,7 @@
                 matTooltip="{{ 'Point of order' | translate }}"
                 *ngIf="activeSpeaker.point_of_order"
             >
-                <mat-icon color="warn">warning</mat-icon>
+                <mat-icon>warning</mat-icon>
             </button>
             <!-- Stop speaker button -->
             <button
@@ -107,45 +109,10 @@
                             {{ speaker.getTitle() }}
                         </div>
                         <!-- Extra line -->
-                        <ng-container>
+                        <ng-container
-                            <!-- Pro Contra Mark  -->
+                            [ngTemplateOutlet]="speakerSubtitle"
-                            <ng-container *ngIf="speaker.pro_speech === true">
+                            [ngTemplateOutletContext]="{ speaker: speaker, showcolor: true }"
-                                <mat-icon inline class="inline-icon-text-align green-text"> add_circle </mat-icon>
+                        ></ng-container>
-                                <i class="user-subtitle">
-                                    {{ 'Forspeech' | translate }}
-                                </i>
-                            </ng-container>
-
-                            <ng-container *ngIf="speaker.pro_speech === false">
-                                <mat-icon inline class="inline-icon-text-align red-warning-text">
-                                    remove_circle
-                                </mat-icon>
-                                <i class="user-subtitle">
-                                    {{ 'Counter speech' | translate }}
-                                </i>
-                            </ng-container>
-
-                            <ng-container *ngIf="speaker.marked">
-                                <mat-icon inline class="inline-icon-text-align icon">star</mat-icon>
-                                <i class="user-subtitle">
-                                    {{ 'Contribution' | translate }}
-                                </i>
-                            </ng-container>
-
-                            <!-- Point Of Order and note -->
-                            <ng-container>
-                                <mat-icon
-                                    inline
-                                    color="warn"
-                                    class="inline-icon-text-align"
-                                    *ngIf="speaker.point_of_order"
-                                    >warning</mat-icon
-                                >
-                                <i class="red-warning-text">
-                                    {{ speaker.note }}
-                                </i>
-                            </ng-container>
-                        </ng-container>
                     </div>
                     <div class="speaker-controls one-line">
                         <!-- Extra stuff: Spoken Count, Gender, 1st Contribution -->
@@ -177,7 +144,9 @@
                                     matTooltip="{{ 'Forspeech' | translate }}"
                                     *ngIf="enableProContraSpeech && !speaker.point_of_order"
                                 >
-                                    <mat-icon class="user-subtitle" *ngIf="speaker.pro_speech !== true"> add_circle_outline </mat-icon>
+                                    <mat-icon class="user-subtitle" *ngIf="speaker.pro_speech !== true">
+                                        add_circle_outline
+                                    </mat-icon>
                                     <mat-icon class="green-text" *ngIf="speaker.pro_speech === true">
                                         add_circle
                                     </mat-icon>
@@ -190,9 +159,8 @@
                                     matTooltip="{{ 'Counter speech' | translate }}"
                                     *ngIf="enableProContraSpeech && !speaker.point_of_order"
                                 >
-                                    <mat-icon class="user-subtitle" *ngIf="speaker.pro_speech !== false"> remove_circle_outline </mat-icon>
+                                    <mat-icon class="user-subtitle" *ngIf="speaker.pro_speech !== false">
-                                    <mat-icon class="red-warning-text" *ngIf="speaker.pro_speech === false">
+                                        remove_circle_outline speaker remove_circle
-                                        remove_circle
                                     </mat-icon>
                                 </button>
 
@@ -331,3 +299,45 @@
         </ng-container>
     </ng-template>
 </mat-menu>
+
+<ng-template #speakerSubtitle let-speaker="speaker" let-showcolor="showcolor">
+    <!-- Pro Speech -->
+    <ng-container *ngIf="speaker.pro_speech === true">
+        <mat-icon inline class="inline-icon-text-align" [class.green-text]="!!showcolor"> add_circle </mat-icon>
+        <i [class.user-subtitle]="!!showcolor">
+            {{ 'Forspeech' | translate }}
+        </i>
+    </ng-container>
+
+    <!-- Contra Speech -->
+    <ng-container *ngIf="speaker.pro_speech === false">
+        <mat-icon inline class="inline-icon-text-align" [class.red-warning-text]="!!showcolor">
+            remove_circle
+        </mat-icon>
+        <i [class.user-subtitle]="!!showcolor">
+            {{ 'Counter speech' | translate }}
+        </i>
+    </ng-container>
+
+    <!-- Marked -->
+    <ng-container *ngIf="speaker.marked">
+        <mat-icon inline class="inline-icon-text-align" [class.icon]="!!showcolor">star</mat-icon>
+        <i [class.user-subtitle]="!!showcolor">
+            {{ 'Contribution' | translate }}
+        </i>
+    </ng-container>
+
+    <!-- Point Of Order and note -->
+    <ng-container>
+        <mat-icon
+            inline
+            color="{{ !!showcolor ? 'warn' : null }}"
+            class="inline-icon-text-align"
+            *ngIf="speaker.point_of_order"
+            >warning</mat-icon
+        >
+        <i [class.red-warning-text]="!!showcolor">
+            {{ speaker.note }}
+        </i>
+    </ng-container>
+</ng-template>

client/src/app/shared/components/list-of-speakers-content/list-of-speakers-content.component.scss

@@ -10,69 +10,21 @@
 
     .mat-list-item {
         height: auto;
-        margin-bottom: 10px;
+        margin: 10px;
-    }
 
-    .finished-speaker-grid {
+        .mat-list-item-content {
+            display: block !important;
+        }
+    }
+    .finished-speakers-grid {
+        font-size: 14px;
         display: grid;
-        width: 100%;
+        grid-gap: 1em;
-        grid-gap: 5px;
+        grid-template-columns: min-content auto min-content;
 
-        grid-template-areas:
+        .finished-speaker-info {
-            'number name controls'
+            display: grid;
-            'number time controls';
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        grid-template-columns: 30px 1fr min-content;
-    }
-
-    @include desktop {
-        .finished-speaker-grid {
-            grid-template-areas: 'number name point-of-order time controls';
-            grid-template-columns: 30px 1fr min-content min-content;
-        }
-    }
-
-    .number {
-        grid-area: number;
-        margin: 0;
-    }
-
-    .name {
-        grid-area: name;
-        margin: 0;
-    }
-
-    .point-of-order {
-        grid-area: point-of-order;
-        margin: 0;
-        //allows pushing this grid area as small as possible and aligns the end to the same level
-        white-space: nowrap;
-        font-size: 80%;
-
-        .mat-icon {
-            line-height: 19px;
-        }
-    }
-
-    .time {
-        grid-area: time;
-        margin: 0;
-        //allows pushing this grid area as small as possible and aligns the end to the same level
-        white-space: nowrap;
-        font-size: 80%;
-    }
-
-    .controls {
-        grid-area: controls;
-        margin: 0;
-        opacity: 0.7;
-
-        .mat-icon-button {
-            height: 20px;
-            line-height: 1;
-
-            .mat-icon {
-                line-height: 19px;
-            }
         }
     }
 }

client/src/app/shared/components/list-of-speakers-content/list-of-speakers-content.component.ts

@@ -6,7 +6,8 @@ import {
     Input,
     OnInit,
     Output,
-    ViewChild
+    ViewChild,
+    ViewEncapsulation
 } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
@@ -37,6 +38,7 @@ import { SortingListComponent } from '../sorting-list/sorting-list.component';
     selector: 'os-list-of-speakers-content',
     templateUrl: './list-of-speakers-content.component.html',
     styleUrls: ['./list-of-speakers-content.component.scss'],
+    encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ListOfSpeakersContentComponent extends BaseViewComponentDirective implements OnInit {