Merge pull request #4527 from tsiegleauq/list-of-speakers-template

Add prettier list of speakers
This commit is contained in:
Emanuel Schütze 2019-03-22 15:30:22 +01:00 committed by GitHub
commit faa0a6077e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 222 additions and 130 deletions

View File

@ -1,17 +1,17 @@
<div cdkDropList class="os-card" [cdkDropListDisabled]="!enable" (cdkDropListDropped)="drop($event)"> <div cdkDropList [cdkDropListDisabled]="!enable" (cdkDropListDropped)="drop($event)">
<div class="box line" *ngIf="!array.length"> <div class="line" *ngIf="!array.length">
<span translate>No data</span> <span translate>No data</span>
</div> </div>
<div class="box line" *ngFor="let item of array; let i = index" cdkDrag> <div class="line" *ngFor="let item of array; let i = index" cdkDrag>
<div class="section-one" cdkDragHandle *ngIf="enable"> <div class="section-one backgroundColorLight" cdkDragHandle *ngIf="enable">
<mat-icon>drag_indicator</mat-icon> <mat-icon>drag_indicator</mat-icon>
</div> </div>
<div class="section-two"> <div class="section-two backgroundColorLight">
<!-- {number}. {item.getTitle()} --> <!-- {number}. {item.getTitle()} -->
<span *ngIf="count">{{ i + 1 }}.&nbsp;</span> <span *ngIf="count">{{ i + 1 }}.&nbsp;</span>
<span>{{ item.getTitle() }}</span> <span>{{ item.getTitle() }}</span>
</div> </div>
<div class="section-three"> <div class="section-three backgroundColorLight">
<!-- Extra controls slot using implicit template references --> <!-- Extra controls slot using implicit template references -->
<ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template> <ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
</div> </div>

View File

@ -1,19 +1,11 @@
@import '~assets/styles/drag.scss'; @import '~assets/styles/drag.scss';
.box {
width: 100%;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
font-size: 14px;
}
.box:last-child {
border: none;
}
.line { .line {
display: table; display: table;
width: 100%;
font-size: 14px;
min-height: 50px; min-height: 50px;
margin-bottom: 5px;
.section-one { .section-one {
display: table-cell; display: table-cell;
@ -28,7 +20,12 @@
.section-two { .section-two {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
width: 80%; width: 100%;
padding-left: 20px;
span + span {
margin-left: 20px;
}
} }
.section-three { .section-three {

View File

@ -11,54 +11,64 @@
</div> </div>
</os-head-bar> </os-head-bar>
<mat-card class="os-card speaker-card" *ngIf="viewItem">
<!-- Title -->
<h1 class="title on-transition-fade" *ngIf="viewItem">{{ viewItem.getTitle() }}</h1> <h1 class="title on-transition-fade" *ngIf="viewItem">{{ viewItem.getTitle() }}</h1>
<mat-card class="speaker-card" *ngIf="viewItem">
<!-- List of finished speakers --> <!-- List of finished speakers -->
<mat-expansion-panel *ngIf="finishedSpeakers && finishedSpeakers.length > 0" class="finished-list"> <mat-expansion-panel *ngIf="finishedSpeakers && finishedSpeakers.length > 0" class="finished-list">
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title translate> Last speakers </mat-panel-title> <mat-panel-title translate> Last speakers </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-list> <mat-list>
<!-- {Number}. {full_name} {time} minutes (Start time: {begin_time}) [close button] -->
<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-prefix"> <div class="finished-speaker-grid">
<span>{{ number + 1 }}. {{ speaker }}</span> <div class="number">{{ number + 1 }}.</div>
</div> <div class="name">{{ speaker }}</div>
<div class="finished-suffix"> <div class="time">
&nbsp;&nbsp; {{ durationString(speaker) }} ({{ 'Start time' | translate }}: {{ durationString(speaker) }} ({{ 'Start time' | translate }}: {{ startTimeToString(speaker) }})
{{ startTimeToString(speaker) }})
</div> </div>
<div class="controls">
<button <button
mat-stroked-button mat-icon-button
matTooltip="{{ 'Remove' | translate }}" matTooltip="{{ 'Remove' | translate }}"
*osPerms="'agenda.can_manage_list_of_speakers'" *osPerms="'agenda.can_manage_list_of_speakers'"
(click)="onDeleteButton(speaker)" (click)="onDeleteButton(speaker)"
> >
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</div>
</div>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
</mat-expansion-panel> </mat-expansion-panel>
<!-- horizontal separation line -->
<mat-divider *ngIf="finishedSpeakers && finishedSpeakers.length"></mat-divider>
<div *ngIf="finishedSpeakers && finishedSpeakers.length" class="spacer-bottom-40"></div>
<!-- Current Speaker --> <!-- Current Speaker -->
<div class="current-speaker" *ngIf="activeSpeaker"> <div class="current-speaker" *ngIf="activeSpeaker">
<mat-icon class="speaking-icon">play_arrow</mat-icon> <span class="prefix">
<span class="speaking-name">{{ activeSpeaker }}</span> <mat-icon>mic</mat-icon>
</span>
<span class="name">{{ activeSpeaker }}</span>
<span class="suffix">
<!-- Stop speaker button -->
<button <button
mat-stroked-button mat-icon-button
matTooltip="{{ 'End speech' | translate }}" matTooltip="{{ 'End speech' | translate }}"
*osPerms="'agenda.can_manage_list_of_speakers'" *osPerms="'agenda.can_manage_list_of_speakers'"
(click)="onStopButton()" (click)="onStopButton()"
> >
<mat-icon>mic_off</mat-icon> <mat-icon>stop</mat-icon>
<span translate>Stop</span>
</button> </button>
</span>
</div> </div>
<!-- Waiting speakers --> <!-- Waiting speakers -->
<div>
<div class="waiting-list" *ngIf="speakers && speakers.length > 0"> <div class="waiting-list" *ngIf="speakers && speakers.length > 0">
<os-sorting-list <os-sorting-list
[input]="speakers" [input]="speakers"
@ -75,22 +85,27 @@
</span> </span>
<span *ngIf="item.gender">({{ item.gender | translate }})</span> <span *ngIf="item.gender">({{ item.gender | translate }})</span>
</span> </span>
<mat-button-toggle-group *osPerms="'agenda.can_manage_list_of_speakers'">
<mat-button-toggle matTooltip="{{ 'Begin speech' | translate }}" (click)="onStartButton(item)"> <!-- Start, start and delete buttons -->
<mat-icon>mic</mat-icon> <span *osPerms="'agenda.can_manage_list_of_speakers'">
<span translate>Start</span> <!-- start button -->
</mat-button-toggle> <button mat-icon-button matTooltip="{{ 'Begin speech' | translate }}" (click)="onStartButton(item)">
<mat-button-toggle matTooltip="{{ 'Mark speaker' | translate }}" (click)="onMarkButton(item)"> <mat-icon>play_arrow</mat-icon>
</button>
<!-- star button -->
<button mat-icon-button matTooltip="{{ 'Mark speaker' | translate }}" (click)="onMarkButton(item)">
<mat-icon>{{ item.marked ? 'star' : 'star_border' }}</mat-icon> <mat-icon>{{ item.marked ? 'star' : 'star_border' }}</mat-icon>
</mat-button-toggle> </button>
<mat-button-toggle matTooltip="{{ 'Remove' | translate }}" (click)="onDeleteButton(item)">
<!-- delete button -->
<button mat-icon-button matTooltip="{{ 'Remove' | translate }}" (click)="onDeleteButton(item)">
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</mat-button-toggle> </button>
</mat-button-toggle-group> </span>
</ng-template> </ng-template>
</os-sorting-list> </os-sorting-list>
</div> </div>
</div>
<!-- Search for speakers --> <!-- Search for speakers -->
<div *osPerms="'agenda.can_manage_list_of_speakers'"> <div *osPerms="'agenda.can_manage_list_of_speakers'">
@ -110,11 +125,11 @@
<!-- Add me and remove me if OP has correct permission --> <!-- Add me and remove me if OP has correct permission -->
<div *osPerms="'agenda.can_be_speaker'" class="add-self-buttons"> <div *osPerms="'agenda.can_be_speaker'" class="add-self-buttons">
<div *ngIf="speakers && !closedList"> <div *ngIf="speakers && !closedList">
<button mat-raised-button (click)="addNewSpeaker()" *ngIf="!isOpInList()"> <button mat-stroked-button (click)="addNewSpeaker()" *ngIf="!isOpInList()">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
<span translate>Add me</span> <span translate>Add me</span>
</button> </button>
<button mat-raised-button (click)="onDeleteButton()" *ngIf="isOpInList()"> <button mat-stroked-button (click)="onDeleteButton()" *ngIf="isOpInList()">
<mat-icon>remove</mat-icon> <mat-icon>remove</mat-icon>
<span translate>Remove me</span> <span translate>Remove me</span>
</button> </button>

View File

@ -1,53 +1,129 @@
@import '~@angular/material/theming';
@mixin os-list-of-speakers-style($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
$contrast: map-get($primary, contrast);
$foreground: map-get($theme, foreground);
.current-speaker {
background-color: mat-color($accent) !important;
> span {
color: mat-color($accent, default-contrast);
}
}
.finished-speaker-grid {
> .number .name .controls {
color: mat-color($foreground, text);
}
> .time {
color: mat-color($foreground, secondary-text);
}
}
}
.title { .title {
margin-left: 25px; margin-left: 25px;
} }
.speaker-card {
margin: 0 20px 0 20px;
padding: 0;
.finished-list { .finished-list {
box-shadow: none !important;
margin-bottom: 15px; margin-bottom: 15px;
.finished-suffix {
color: slategray;
font-size: 80%;
margin-right: 10px;
}
.mat-list-item { .mat-list-item {
height: auto; height: auto;
margin-bottom: 10px;
} }
button { .finished-speaker-grid {
margin-left: 10px; display: grid;
width: 100%;
grid-template-areas: 'number name time controls';
grid-gap: 5px;
grid-template-columns: 30px 1fr min-content min-content;
}
@media only screen and (max-width: 960px) {
.finished-speaker-grid {
grid-template-areas:
'number name controls'
'number time controls';
grid-template-columns: 30px 1fr min-content;
}
}
.number {
grid-area: number;
margin: 0;
}
.name {
grid-area: name;
margin: 0;
}
.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;
}
}
} }
} }
.current-speaker { .current-speaker {
padding: 10px 25px 15px 25px;
display: table; display: table;
.speaking-icon { width: -webkit-fill-available;
height: 50px;
margin: 50px 25px 20px 25px;
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
.prefix {
display: table-cell; display: table-cell;
padding: 0 15px;
vertical-align: middle;
.mat-icon {
vertical-align: middle; vertical-align: middle;
} }
}
.speaking-name { .name {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
font-weight: bold; font-weight: bold;
padding-left: 10px; padding-left: 10px;
width: 100%;
} }
button { .suffix {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
margin-left: 10px; white-space: nowrap;
padding-right: 10px;
} }
} }
.waiting-list { .waiting-list {
padding: 10px 25px 0 25px; padding: 10px 25px 0 25px;
width: 75%;
} }
form { form {
@ -63,10 +139,9 @@
} }
.add-self-buttons { .add-self-buttons {
padding: 20px 0 20px 25px; padding: 15px 0 20px 25px;
} }
.speaker-warning { .speaker-warning {
margin-right: 5px; margin-right: 5px;
} }
}

View File

@ -81,7 +81,7 @@
} }
.backgroundColorLight { .backgroundColorLight {
background-color: mat-color($background, status-bar); background-color: mat-color($background, hover);
color: mat-color($foreground, text) !important; color: mat-color($foreground, text) !important;
} }
} }

View File

@ -11,6 +11,7 @@
@import './app/site/site.component.scss-theme.scss'; @import './app/site/site.component.scss-theme.scss';
@import './assets/styles/global-components-style.scss'; @import './assets/styles/global-components-style.scss';
@import './app/shared/components/projector-button/projector-button.component.scss'; @import './app/shared/components/projector-button/projector-button.component.scss';
@import './app/site/agenda/components/list-of-speakers/list-of-speakers.component.scss';
/** fonts */ /** fonts */
@import './assets/styles/fonts.scss'; @import './assets/styles/fonts.scss';
@ -21,6 +22,7 @@
@include os-site-theme($theme); @include os-site-theme($theme);
@include os-components-style($theme); @include os-components-style($theme);
@include os-projector-button-style($theme); @include os-projector-button-style($theme);
@include os-list-of-speakers-style($theme);
/** More components are added here */ /** More components are added here */
} }
@ -408,6 +410,9 @@ button.mat-menu-item.selected {
.spacer-bottom-20 { .spacer-bottom-20 {
margin-bottom: 20px !important; margin-bottom: 20px !important;
} }
.spacer-bottom-40 {
margin-bottom: 40px !important;
}
.spacer-left-10 { .spacer-left-10 {
margin-left: 10px; margin-left: 10px;
} }