Merge pull request #4993 from GabrielInTheWorld/trafficLights
Implements 'traffic lights' to the countdown-time
This commit is contained in:
Emanuel Schütze
GitHub
commit
1da7ba51fd
|
|
@ -1,9 +1,25 @@
|
|||
<div
|
||||
id="countdown"
|
||||
class="countdown-time-wrapper"
|
||||
[ngClass]="{
|
||||
negative: seconds <= 0,
|
||||
warning_time: seconds <= warningTime && seconds > 0
|
||||
'negative-time': 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>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,140 @@
|
|||
#countdown {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
@import '~assets/styles/media-queries.scss';
|
||||
@import '~assets/styles/fonts.scss';
|
||||
|
||||
&.warning_time {
|
||||
color: #ed940d;
|
||||
.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 {
|
||||
color: #cc0000;
|
||||
&.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 {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,36 @@ export class CountdownTimeComponent implements OnDestroy {
|
|||
@Input()
|
||||
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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -38,5 +38,4 @@
|
|||
.larger-countdown {
|
||||
font-size: 150%;
|
||||
min-width: 60px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,6 +48,16 @@ export class ViewCountdown extends BaseProjectableViewModel<Countdown> implement
|
|||
key: 'fullscreen',
|
||||
displayName: 'Fullscreen',
|
||||
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',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,27 @@
|
|||
<div class="countdown overlay" *ngIf="data && !data.element.fullscreen" [ngStyle]="{'margin-top': (!projector || projector.show_header_footer) ? '80px' : '30px'}">
|
||||
<os-countdown-time [countdown]="data.data" [warningTime]="data.data.warning_time"></os-countdown-time>
|
||||
<div class="description">
|
||||
<div
|
||||
class="countdown overlay"
|
||||
*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 }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="countdown fullscreen" *ngIf="data && data.element.fullscreen">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -9,22 +9,15 @@
|
|||
height: 100%;
|
||||
z-index: 20;
|
||||
display: grid;
|
||||
|
||||
& > div {
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
font-size: 10vw;
|
||||
display: inline-grid;
|
||||
}
|
||||
}
|
||||
|
||||
&.overlay {
|
||||
position: relative;
|
||||
float: right;
|
||||
margin: 80px 0px 10px 10px;
|
||||
padding: 35px 35px 0px 10px;
|
||||
padding: 10px 35px 10px 10px;
|
||||
min-height: 60px;
|
||||
min-width: 230px;
|
||||
width: 230px;
|
||||
font-size: 3.7em;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
|
|
@ -32,6 +25,10 @@
|
|||
background-color: #f5f5f5;
|
||||
border: 1px solid #e3e3e3;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||
&.only-time-indicator {
|
||||
width: auto;
|
||||
padding-left: 35px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-weight: normal;
|
||||
|
|
|
|||
Loading…
Reference in New Issue