Keep point-of-order infos

Keeps pro, contra, poo infos in active speaker and finished speakers.
Cleans up a lot of template related code
This commit is contained in:
Sean 2021-05-21 17:15:20 +02:00 committed by Emanuel Schütze
parent 4d4a3bb0db
commit f05dd8c448
3 changed files with 89 additions and 125 deletions

View File

@ -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="number">{{ number + 1 }}.</div>
<div class="name">{{ speaker.getTitle() }}</div>
<div class="point-of-order" *ngIf="speaker.point_of_order">
<mat-icon color="warn">warning</mat-icon>
<div class="finished-speakers-grid">
<div>{{ number + 1 }}.</div>
<div class="finished-speaker-info">
<div>
<div>{{ speaker.getTitle() }}</div>
<div>
<ng-container
[ngTemplateOutlet]="speakerSubtitle"
[ngTemplateOutletContext]="{ speaker: speaker, showcolor: true }"
></ng-container>
</div>
</div>
<div class="user-subtitle">
{{ durationString(speaker) }} ({{ 'Start time' | translate }}:
{{ startTimeToString(speaker) }})
</div>
</div>
<div class="time">
{{ durationString(speaker) }} ({{ 'Start time' | translate }}: {{ startTimeToString(speaker) }})
</div>
<div class="controls">
<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">
{{ 'Forspeech' | translate }}
</i>
<i *ngIf="activeSpeaker.pro_speech === false">
{{ 'Counter speech' | translate }}
</i>
<i *ngIf="activeSpeaker.marked">
{{ 'Contribution' | translate }}
</i>
<ng-container
[ngTemplateOutlet]="speakerSubtitle"
[ngTemplateOutletContext]="{ speaker: activeSpeaker }"
></ng-container>
</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>
<!-- Pro Contra Mark -->
<ng-container *ngIf="speaker.pro_speech === true">
<mat-icon inline class="inline-icon-text-align green-text"> add_circle </mat-icon>
<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>
<ng-container
[ngTemplateOutlet]="speakerSubtitle"
[ngTemplateOutletContext]="{ speaker: speaker, showcolor: true }"
></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="red-warning-text" *ngIf="speaker.pro_speech === false">
remove_circle
<mat-icon class="user-subtitle" *ngIf="speaker.pro_speech !== false">
remove_circle_outline speaker 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>

View File

@ -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: 5px;
grid-gap: 1em;
grid-template-columns: min-content auto min-content;
grid-template-areas:
'number name controls'
'number time controls';
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;
}
.finished-speaker-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
}

View File

@ -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 {