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
Emanuel Schütze
parent
4d4a3bb0db
commit
f05dd8c448
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue