Implements 'traffic lights' to the countdown-time
This commit is contained in:
parent
7d307e5ffe
commit
d99a9c92c1
@ -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>
|
||||||
|
@ -1,13 +1,140 @@
|
|||||||
|
@import '~assets/styles/media-queries.scss';
|
||||||
|
@import '~assets/styles/fonts.scss';
|
||||||
|
|
||||||
|
.countdown-time-wrapper {
|
||||||
|
$margin: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&.warning-time {
|
||||||
|
$color: #ed940e;
|
||||||
|
color: $color;
|
||||||
|
|
||||||
|
.time-indicator-wrapper #timeIndicator {
|
||||||
|
background: $color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.negative-time {
|
||||||
|
$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 {
|
#countdown {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: inline-block;
|
text-align: center;
|
||||||
text-align: right;
|
}
|
||||||
|
|
||||||
&.warning_time {
|
|
||||||
color: #ed940d;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.negative {
|
&.stretch-to-fill-parent {
|
||||||
color: #cc0000;
|
.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
*/
|
*/
|
||||||
|
@ -38,5 +38,4 @@
|
|||||||
.larger-countdown {
|
.larger-countdown {
|
||||||
font-size: 150%;
|
font-size: 150%;
|
||||||
min-width: 60px;
|
min-width: 60px;
|
||||||
margin-right: 10px;
|
|
||||||
}
|
}
|
||||||
|
@ -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',
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user