Skip to content

Commit 5a2addc

Browse files
olzzonolzzon
committed
wip: rundownheader hover and re-design
1 parent c053313 commit 5a2addc

File tree

5 files changed

+134
-25
lines changed

5 files changed

+134
-25
lines changed

‎packages/webui/src/client/styles/rundownView.scss‎

Lines changed: 99 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -289,7 +289,7 @@ body.no-overflow {
289289
}
290290

291291
.timing {
292-
margin-top: 10px;
292+
margin-top: 4px;
293293
margin-left: 0px;
294294
min-width: auto;
295295
width: 100%;
@@ -306,6 +306,31 @@ body.no-overflow {
306306
gap: 2rem;
307307
pointer-events: none;
308308

309+
font-family: Roboto Flex;
310+
font-style: normal;
311+
font-size: 1.7em;
312+
313+
letter-spacing: 0.01em;
314+
font-feature-settings:
315+
'tnum' on,
316+
'liga' off;
317+
318+
// Default Roboto Flex settings:
319+
font-variation-settings:
320+
'GRAD' 0,
321+
'XOPQ' 96,
322+
'XTRA' 468,
323+
'YOPQ' 79,
324+
'YTAS' 750,
325+
'YTDE' -203,
326+
'YTFI' 738,
327+
'YTLC' 548,
328+
'YTUC' 712,
329+
'opsz' 100,
330+
'slnt' 0,
331+
'wdth' 100,
332+
'wght' 550;
333+
309334
> * {
310335
pointer-events: auto;
311336
}
@@ -326,6 +351,21 @@ body.no-overflow {
326351
display: flex;
327352
align-items: center;
328353
}
354+
.timing__right {
355+
position: absolute;
356+
right: 60px;
357+
display: flex;
358+
align-items: center;
359+
360+
.timing__right__rundownname {
361+
font-size: 0.6em;
362+
font-weight: 100;
363+
white-space: nowrap;
364+
overflow: hidden;
365+
text-overflow: ellipsis;
366+
max-width: 40vw;
367+
}
368+
}
329369

330370
.timing__counters {
331371
display: flex;
@@ -344,14 +384,7 @@ body.no-overflow {
344384
display: inline-flex;
345385
position: relative;
346386
margin-right: 0;
347-
font-family:
348-
'Roboto',
349-
Helvetica Neue,
350-
Arial,
351-
sans-serif;
352-
font-weight: 100;
353387
color: $general-clock;
354-
font-size: 1.5em;
355388
margin-top: 0;
356389
word-break: keep-all;
357390
white-space: nowrap;
@@ -447,7 +480,42 @@ body.no-overflow {
447480

448481
.planned-end-time {
449482
color: #ffffff;
450-
font-style: italic;
483+
font-size: 1.1em;
484+
// font-style: italic;
485+
font-variation-settings:
486+
'GRAD' 0,
487+
'XOPQ' 96,
488+
'XTRA' 468,
489+
'YOPQ' 79,
490+
'YTAS' 750,
491+
'YTDE' -203,
492+
'YTFI' 738,
493+
'YTLC' 548,
494+
'YTUC' 712,
495+
'opsz' 100,
496+
'slnt' -20,
497+
'wdth' 80,
498+
'wght' 550;
499+
}
500+
501+
.planned-start-time {
502+
color: #ffffff;
503+
font-size: 1.1em;
504+
// font-style: italic;
505+
font-variation-settings:
506+
'GRAD' 0,
507+
'XOPQ' 96,
508+
'XTRA' 468,
509+
'YOPQ' 79,
510+
'YTAS' 750,
511+
'YTDE' -203,
512+
'YTFI' 738,
513+
'YTLC' 548,
514+
'YTUC' 712,
515+
'opsz' 100,
516+
'slnt' -20,
517+
'wdth' 80,
518+
'wght' 550;
451519
}
452520

453521
&.heavy-light {
@@ -465,6 +533,25 @@ body.no-overflow {
465533
background: none;
466534
}
467535
}
536+
537+
&.round-red {
538+
font-weight: 400;
539+
border-radius: 20px;
540+
padding: 0px 8px;
541+
max-height: 30px;
542+
543+
&.heavy {
544+
// color: $general-late-color;
545+
background-color: #ffe900;
546+
color: black;
547+
}
548+
549+
&.light {
550+
color: black;
551+
background-color: $general-fast-color;
552+
text-shadow: 0px 0px 6px $general-fast-color--shadow;
553+
}
554+
}
468555
}
469556

470557
.rundown__header-status {
@@ -1207,8 +1294,7 @@ svg.icon {
12071294
}
12081295
.segment-timeline__part {
12091296
.segment-timeline__part__invalid-cover {
1210-
background-image:
1211-
repeating-linear-gradient(
1297+
background-image: repeating-linear-gradient(
12121298
45deg,
12131299
var(--invalid-reason-color-transparent) 0%,
12141300
var(--invalid-reason-color-transparent) 4px,
@@ -1490,8 +1576,7 @@ svg.icon {
14901576
left: 2px;
14911577
right: 2px;
14921578
z-index: 3;
1493-
background:
1494-
repeating-linear-gradient(
1579+
background: repeating-linear-gradient(
14951580
45deg,
14961581
var(--invalid-reason-color-opaque) 0,
14971582
var(--invalid-reason-color-opaque) 5px,
@@ -1673,8 +1758,7 @@ svg.icon {
16731758
right: 1px;
16741759
z-index: 10;
16751760
pointer-events: all;
1676-
background-image:
1677-
repeating-linear-gradient(
1761+
background-image: repeating-linear-gradient(
16781762
45deg,
16791763
var(--invalid-reason-color-transparent) 0%,
16801764
var(--invalid-reason-color-transparent) 5px,

‎packages/webui/src/client/ui/RundownView/RundownHeader/RundownHeader.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,13 @@ export function RundownHeader({
220220
/>
221221
</div>
222222
) : (
223-
<TimingDisplay rundownPlaylist={playlist} layout={layout} isHovered={isHeaderHovered} />
223+
<TimingDisplay
224+
rundownPlaylist={playlist}
225+
layout={layout}
226+
isHovered={isHeaderHovered}
227+
currentRundown={currentRundown}
228+
rundownCount={rundownIds.length}
229+
/>
224230
)}
225231
<div className="header-right-section">
226232
{isHeaderHovered && (

‎packages/webui/src/client/ui/RundownView/RundownHeader/TimingDisplay.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,16 @@ import { useTiming } from '../RundownTiming/withTiming'
1414
interface ITimingDisplayProps {
1515
rundownPlaylist: DBRundownPlaylist
1616
layout: RundownLayoutRundownHeader | undefined
17+
currentRundown: Rundown | undefined
18+
rundownCount: number
1719
isHovered: boolean
1820
}
19-
export function TimingDisplay({ rundownPlaylist, layout, isHovered }: ITimingDisplayProps): JSX.Element | null {
21+
export function TimingDisplay({
22+
rundownPlaylist,
23+
layout,
24+
isHovered,
25+
currentRundown,
26+
}: ITimingDisplayProps): JSX.Element | null {
2027
const { t } = useTranslation()
2128

2229
const timingDurations = useTiming()
@@ -56,7 +63,12 @@ export function TimingDisplay({ rundownPlaylist, layout, isHovered }: ITimingDis
5663
</div>
5764
<div className="timing__counters">
5865
<div className="timing__counters__center">
59-
<PlaylistStartTimingV2 rundownPlaylist={rundownPlaylist} hidePlannedStart={false} hideDiff={true} />
66+
<PlaylistStartTimingV2
67+
rundownPlaylist={rundownPlaylist}
68+
hidePlannedStart={false}
69+
hideDiff={true}
70+
hidePlannedStartLabel={!isHovered}
71+
/>
6072
{showNextBreakTiming ? (
6173
<NextBreakTiming
6274
rundownsBeforeBreak={timingDurations.rundownsBeforeNextBreak!}
@@ -72,12 +84,14 @@ export function TimingDisplay({ rundownPlaylist, layout, isHovered }: ITimingDis
7284
expectedEnd={expectedEnd}
7385
expectedDuration={expectedDuration}
7486
endLabel={layout?.plannedEndText}
75-
hideDiffLabel={!isHovered}
7687
hidePlannedEndLabel={!isHovered}
7788
/>
7889
) : null}
7990
</div>
8091
</div>
92+
<div className="timing__right">
93+
<div className="timing__right__rundownname">{isHovered && currentRundown?.name}</div>
94+
</div>
8195
</div>
8296
)
8397
}

‎packages/webui/src/client/ui/RundownView/RundownTiming/PlaylistEndTimingV2.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ interface IEndTimingProps {
1717
expectedEnd?: number
1818
endLabel?: string
1919
hidePlannedEndLabel?: boolean
20-
hideDiffLabel?: boolean
2120
hidePlannedEnd?: boolean
2221
hideCountdown?: boolean
2322
hideDiff?: boolean
@@ -31,7 +30,6 @@ export function PlaylistEndTimingV2({
3130
expectedEnd,
3231
endLabel,
3332
hidePlannedEndLabel,
34-
hideDiffLabel,
3533
hidePlannedEnd,
3634
hideCountdown,
3735
hideDiff,
@@ -48,15 +46,12 @@ export function PlaylistEndTimingV2({
4846
{!hideDiff ? (
4947
timingDurations ? (
5048
<span
51-
className={ClassNames('timing-clock heavy-light ', {
49+
className={ClassNames('timing-clock round-red', {
5250
heavy: overUnderClock < 0,
5351
light: overUnderClock >= 0,
5452
})}
5553
role="timer"
5654
>
57-
{!hideDiffLabel && (
58-
<span className="timing-clock-label center">{overUnderClock < 0 ? t('Under') : t('Over')}</span>
59-
)}
6055
{RundownUtils.formatDiffToTimecode(overUnderClock, true, false, true, true, true, undefined, true, true)}
6156
</span>
6257
) : null

‎packages/webui/src/client/ui/RundownView/RundownTiming/PlaylistStartTimingV2.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,15 @@ interface IStartTimingProps {
1111
rundownPlaylist: DBRundownPlaylist
1212
hidePlannedStart?: boolean
1313
hideDiff?: boolean
14+
hidePlannedStartLabel?: boolean
1415
plannedStartText?: string
1516
}
1617

1718
export function PlaylistStartTimingV2({
1819
rundownPlaylist,
1920
hidePlannedStart,
2021
hideDiff,
22+
hidePlannedStartLabel,
2123
plannedStartText,
2224
}: IStartTimingProps): JSX.Element {
2325
const { t } = useTranslation()
@@ -33,6 +35,14 @@ export function PlaylistStartTimingV2({
3335

3436
return (
3537
<React.Fragment>
38+
<span className="timing-clock plan-start left" role="timer">
39+
{!hidePlannedStartLabel && (
40+
<span className="timing-clock-label left">{plannedStartText ?? t('Planned Start At')}</span>
41+
)}
42+
<span className="planned-start-time">
43+
<Moment interval={0} format="HH:mm:ss" date={playlistExpectedStart} />
44+
</span>
45+
</span>
3646
{!hidePlannedStart &&
3747
(rundownPlaylist.startedPlayback && rundownPlaylist.activationId && !rundownPlaylist.rehearsal ? (
3848
<span className="timing-clock plan-start left" role="timer">

0 commit comments

Comments
 (0)