ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Keep point-of-order infos

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,16 +17,25 @@
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-list> <mat-list>
<mat-list-item *ngFor="let speaker of finishedSpeakers; let number = index"> <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>
<div class="user-subtitle">
{{ durationString(speaker) }} ({{ 'Start time' | translate }}:
{{ startTimeToString(speaker) }})
</div>
</div> </div>
<div class="time">
{{ durationString(speaker) }} ({{ 'Start time' | translate }}: {{ startTimeToString(speaker) }}) <div>
</div>
<div class="controls">
<button <button
mat-icon-button mat-icon-button
matTooltip="{{ 'Remove' | translate }}" matTooltip="{{ 'Remove' | translate }}"
@ -54,17 +63,10 @@
<span class="name"> <span class="name">
{{ activeSpeaker.getListTitle() }} {{ activeSpeaker.getListTitle() }}
<div class="active-speaker-subtitle"> <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> </div>
</span> </span>
@ -75,7 +77,7 @@
matTooltip="{{ 'Point of order' | translate }}" matTooltip="{{ 'Point of order' | translate }}"
*ngIf="activeSpeaker.point_of_order" *ngIf="activeSpeaker.point_of_order"
> >
<mat-icon color="warn">warning</mat-icon> <mat-icon>warning</mat-icon>
</button> </button>
<!-- Stop speaker button --> <!-- Stop speaker button -->
<button <button
@ -107,45 +109,10 @@
{{ speaker.getTitle() }} {{ speaker.getTitle() }}
</div> </div>
<!-- Extra line --> <!-- 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>
<div class="speaker-controls one-line"> <div class="speaker-controls one-line">
<!-- Extra stuff: Spoken Count, Gender, 1st Contribution --> <!-- Extra stuff: Spoken Count, Gender, 1st Contribution -->
@ -177,7 +144,9 @@
matTooltip="{{ 'Forspeech' | translate }}" matTooltip="{{ 'Forspeech' | translate }}"
*ngIf="enableProContraSpeech && !speaker.point_of_order" *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"> <mat-icon class="green-text" *ngIf="speaker.pro_speech === true">
add_circle add_circle
</mat-icon> </mat-icon>
@ -190,9 +159,8 @@
matTooltip="{{ 'Counter speech' | translate }}" matTooltip="{{ 'Counter speech' | translate }}"
*ngIf="enableProContraSpeech && !speaker.point_of_order" *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> </mat-icon>
</button> </button>
@ -331,3 +299,45 @@
</ng-container> </ng-container>
</ng-template> </ng-template>
</mat-menu> </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>

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

@ -10,69 +10,21 @@
.mat-list-item { .mat-list-item {
height: auto; 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; 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;
}
} }
} }
} }

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

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