Add manual sorting to Speaker list

Also create CSS Theme file to prevent side effects from theming
This commit is contained in:
Sean Engelhardt 2019-03-25 13:34:10 +01:00
parent 279b8b1d25
commit c0a2072cc2
4 changed files with 38 additions and 29 deletions

View File

@ -1,31 +1,3 @@
@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);
}
}
}
.los-title { .los-title {
margin-left: 25px; margin-left: 25px;
} }

View File

@ -0,0 +1,27 @@
@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);
}
}
}

View File

@ -241,7 +241,17 @@ export class ListOfSpeakersComponent extends BaseViewComponent implements OnInit
this.viewItem = newAgendaItem; this.viewItem = newAgendaItem;
const allSpeakers = this.repo.createSpeakerList(newAgendaItem.item); const allSpeakers = this.repo.createSpeakerList(newAgendaItem.item);
this.speakers = allSpeakers.filter(speaker => speaker.state === SpeakerState.WAITING); this.speakers = allSpeakers.filter(speaker => speaker.state === SpeakerState.WAITING);
// Since the speaker repository is not a normal repository, sorting cannot be handled there
this.speakers.sort((a: ViewSpeaker, b: ViewSpeaker) => a.weight - b.weight);
this.finishedSpeakers = allSpeakers.filter(speaker => speaker.state === SpeakerState.FINISHED); this.finishedSpeakers = allSpeakers.filter(speaker => speaker.state === SpeakerState.FINISHED);
// convert begin time to date and sort
this.finishedSpeakers.sort((a: ViewSpeaker, b: ViewSpeaker) => {
const aTime = new Date(a.begin_time).getTime();
const bTime = new Date(b.begin_time).getTime();
return aTime - bTime;
});
this.activeSpeaker = allSpeakers.find(speaker => speaker.state === SpeakerState.CURRENT); this.activeSpeaker = allSpeakers.find(speaker => speaker.state === SpeakerState.CURRENT);
} }
}); });

View File

@ -11,7 +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'; @import './app/site/agenda/components/list-of-speakers/list-of-speakers.component.scss-theme.scss';
/** fonts */ /** fonts */
@import './assets/styles/fonts.scss'; @import './assets/styles/fonts.scss';