Merge pull request #4993 from GabrielInTheWorld/trafficLights

Implements 'traffic lights' to the countdown-time
This commit is contained in:
Emanuel Schütze 2019-09-13 09:11:28 +02:00 committed by GitHub
commit 1da7ba51fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 221 additions and 26 deletions

View File

@ -1,9 +1,25 @@
<div <div
id="countdown" class="countdown-time-wrapper"
[ngClass]="{ [ngClass]="{
negative: seconds <= 0, 'negative-time': seconds <= 0,
warning_time: seconds <= warningTime && seconds > 0 'warning-time': seconds <= warningTime && seconds > 0,
'stretch-to-fill-parent': fullscreen
}" }"
> >
{{ time }} <div
*ngIf="showTimeIndicator"
class="time-indicator-wrapper"
[ngClass]="{ 'only-time-indicator': !showCountdown && showTimeIndicator }"
>
<div id="timeIndicator"></div>
</div>
<div
*ngIf="showCountdown"
class="countdown-wrapper"
[ngClass]="{ 'only-countdown': showCountdown && !showTimeIndicator }"
>
<span id="countdown">
{{ time }}
</span>
</div>
</div> </div>

View File

@ -1,13 +1,140 @@
#countdown { @import '~assets/styles/media-queries.scss';
font-weight: bold; @import '~assets/styles/fonts.scss';
display: inline-block;
text-align: right;
&.warning_time { .countdown-time-wrapper {
color: #ed940d; $margin: 50px;
display: flex;
align-items: center;
justify-content: space-between;
&.warning-time {
$color: #ed940e;
color: $color;
.time-indicator-wrapper #timeIndicator {
background: $color;
}
} }
&.negative { &.negative-time {
color: #cc0000; $color: #c00;
color: $color;
.time-indicator-wrapper #timeIndicator {
background: $color;
}
}
.time-indicator-wrapper {
text-align: left;
&.only-time-indicator {
width: 100%;
text-align: right;
#timeIndicator {
$size: 60px;
width: $size;
height: $size;
}
}
#timeIndicator {
$size: 50px;
width: $size;
height: $size;
display: inline-block;
background: green;
border-radius: 50%;
}
}
.countdown-wrapper {
width: 170px;
text-align: right;
position: relative;
height: 100%;
&:not(.only-countdown) {
margin-left: 10px;
$size: 60px;
font-size: $size;
line-height: $size;
}
&.only-countdown {
width: 100%;
line-height: 100%;
text-align: center;
}
#countdown {
font-weight: bold;
text-align: center;
}
}
&.stretch-to-fill-parent {
.time-indicator-wrapper {
width: 30%;
#timeIndicator {
width: auto;
height: auto;
margin-left: $margin;
}
}
.countdown-wrapper {
width: 70%;
#countdown {
position: absolute;
right: 0;
margin-right: $margin;
}
}
.time-indicator-wrapper {
&.only-time-indicator {
width: 100%;
text-align: center;
#timeIndicator {
padding: 0 0 70% 70%;
}
}
&:not(.only-time-indicator) {
#timeIndicator {
padding: 0 0 65% 65%;
}
}
}
.countdown-wrapper.only-countdown {
margin: 0 50px;
width: calc(100% - 100px);
#countdown {
$size: 300px;
line-height: $size;
font-size: $size;
bottom: calc(50% - 150px);
}
}
@include set-breakpoint-lower(xs) {
.countdown-wrapper:not(.only-countdown) {
#countdown {
$size: 210px;
font-size: $size;
line-height: $size;
bottom: calc(50% - 105px);
}
}
}
@include set-breakpoint-upper(xs) {
.countdown-wrapper:not(.only-countdown) {
#countdown {
$size: 230px;
line-height: $size;
font-size: $size;
bottom: calc(50% - 115px);
}
}
}
} }
} }

View File

@ -22,6 +22,36 @@ export class CountdownTimeComponent implements OnDestroy {
@Input() @Input()
public warningTime: number; public warningTime: number;
/**
* Boolean, whether the countdown will be displayed in a fullscreen-mode.
*/
@Input()
public fullscreen = false;
/**
* Passing a specific display-type will decide, whether either only the time-indicator
* or only the countdown or both of them are displayed.
*
* @param displayType A string, that contains the preferred display-type.
*/
@Input()
public set displayType(displayType: string) {
this.showTimeIndicator = displayType === 'countdownAndTimeIndicator' || displayType === 'onlyTimeIndicator';
this.showCountdown = displayType === 'onlyCountdown' || displayType === 'countdownAndTimeIndicator';
}
/**
* Boolean to decide, if the time-indicator should be displayed.
* Defaults to `false`.
*/
public showTimeIndicator = false;
/**
* Boolean to decide, if the countdown should be displayed.
* Defaults to `true`.
*/
public showCountdown = true;
/** /**
* The amount of seconds to display * The amount of seconds to display
*/ */

View File

@ -38,5 +38,4 @@
.larger-countdown { .larger-countdown {
font-size: 150%; font-size: 150%;
min-width: 60px; min-width: 60px;
margin-right: 10px;
} }

View File

@ -48,6 +48,16 @@ export class ViewCountdown extends BaseProjectableViewModel<Countdown> implement
key: 'fullscreen', key: 'fullscreen',
displayName: 'Fullscreen', displayName: 'Fullscreen',
default: false default: false
},
{
key: 'displayType',
displayName: 'Displaytype',
choices: [
{ value: 'onlyCountdown', displayName: 'Only countdown' },
{ value: 'countdownAndTimeIndicator', displayName: 'Countdown and time-indicator' },
{ value: 'onlyTimeIndicator', displayName: 'Only time indicator' }
],
default: 'onlyCountdown'
} }
], ],
projectionDefaultName: 'countdowns', projectionDefaultName: 'countdowns',

View File

@ -1,11 +1,27 @@
<div class="countdown overlay" *ngIf="data && !data.element.fullscreen" [ngStyle]="{'margin-top': (!projector || projector.show_header_footer) ? '80px' : '30px'}"> <div
<os-countdown-time [countdown]="data.data" [warningTime]="data.data.warning_time"></os-countdown-time> class="countdown overlay"
<div class="description"> *ngIf="data && !data.element.fullscreen"
[ngClass]="{ 'only-time-indicator': data.element.displayType === 'onlyTimeIndicator' }"
[ngStyle]="{
'margin-top': !projector || projector.show_header_footer ? '80px' : '30px'
}"
>
<os-countdown-time
[countdown]="data.data"
[displayType]="data.element.displayType"
[warningTime]="data.data.warning_time"
></os-countdown-time>
<div *ngIf="data.data.description" class="description">
{{ data.data.description }} {{ data.data.description }}
</div> </div>
</div> </div>
<div class="countdown fullscreen" *ngIf="data && data.element.fullscreen"> <div class="countdown fullscreen" *ngIf="data && data.element.fullscreen">
<div> <div>
<os-countdown-time [countdown]="data.data" [warningTime]="data.data.warning_time"></os-countdown-time> <os-countdown-time
[countdown]="data.data"
[fullscreen]="true"
[displayType]="data.element.displayType"
[warningTime]="data.data.warning_time"
></os-countdown-time>
</div> </div>
</div> </div>

View File

@ -9,22 +9,15 @@
height: 100%; height: 100%;
z-index: 20; z-index: 20;
display: grid; display: grid;
& > div {
justify-content: center;
align-content: center;
font-size: 10vw;
display: inline-grid;
}
} }
&.overlay { &.overlay {
position: relative; position: relative;
float: right; float: right;
margin: 80px 0px 10px 10px; margin: 80px 0px 10px 10px;
padding: 35px 35px 0px 10px; padding: 10px 35px 10px 10px;
min-height: 60px; min-height: 60px;
min-width: 230px; width: 230px;
font-size: 3.7em; font-size: 3.7em;
font-weight: bold; font-weight: bold;
text-align: right; text-align: right;
@ -32,6 +25,10 @@
background-color: #f5f5f5; background-color: #f5f5f5;
border: 1px solid #e3e3e3; border: 1px solid #e3e3e3;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
&.only-time-indicator {
width: auto;
padding-left: 35px;
}
.description { .description {
font-weight: normal; font-weight: normal;