Skip to content

Commit 16836e2

Browse files
olzzonolzzon
committed
wip: further styling and hovers
1 parent 1e988aa commit 16836e2

File tree

5 files changed

+47
-40
lines changed

5 files changed

+47
-40
lines changed

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -480,7 +480,7 @@ body.no-overflow {
480480

481481
&.center {
482482
left: 50%;
483-
transform: translateX(-50%);
483+
margin-top: -4px;
484484
text-align: center;
485485
}
486486

@@ -561,9 +561,8 @@ body.no-overflow {
561561
}
562562
}
563563

564-
&.round-red {
564+
&.round-diff {
565565
border-radius: 20px;
566-
margin-top: 4px;
567566
padding: 10px 8px 8px 8px;
568567
max-height: 32px;
569568
font-variation-settings:

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,11 @@ import { useTranslation } from 'react-i18next'
33
import * as CoreIcon from '@nrk/core-icons/jsx'
44
import ClassNames from 'classnames'
55
import Escape from '../../../lib/Escape'
6-
import Tooltip from 'rc-tooltip'
76
import { NavLink } from 'react-router-dom'
87
import { DBRundownPlaylist } from '@sofie-automation/corelib/dist/dataModel/RundownPlaylist'
98
import { Rundown, getRundownNrcsName } from '@sofie-automation/corelib/dist/dataModel/Rundown'
109
import { ContextMenu, MenuItem, ContextMenuTrigger } from '@jstarpl/react-contextmenu'
1110
import { PieceUi } from '../../SegmentTimeline/SegmentTimelineContainer'
12-
import { RundownSystemStatus } from '../RundownSystemStatus'
13-
import { getHelpMode } from '../../../lib/localStorage'
1411
import { reloadRundownPlaylistClick } from '../RundownNotifier'
1512
import { useRundownViewEventBusListener } from '../../../lib/lib'
1613
import { RundownLayoutRundownHeader } from '@sofie-automation/meteor-lib/dist/collections/RundownLayouts'

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ export function TimingDisplay({
4949
<div className="timing__left">
5050
{rundownPlaylist.currentPartInfo && (
5151
<span className="timing-clock current-remaining">
52+
{isHovered && <span className="timing-clock-label left">{t('On Air Part')}</span>}
5253
<CurrentPartOrSegmentRemaining
5354
currentPartInstanceId={rundownPlaylist.currentPartInfo.partInstanceId}
5455
heavyClassName="overtime"

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

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,13 @@ export function PlaylistEndTimingV2({
4646
{!hideDiff ? (
4747
timingDurations ? (
4848
<span
49-
className={ClassNames('timing-clock round-red', {
49+
className={ClassNames('timing-clock round-diff', {
5050
heavy: overUnderClock < 0,
5151
light: overUnderClock >= 0,
5252
})}
5353
role="timer"
5454
>
55-
{!hidePlannedEndLabel && <span className="timing-clock-label right">{endLabel ?? t('Diff')}</span>}
55+
{!hidePlannedEndLabel && <span className="timing-clock-label center">{endLabel ?? t('Diff')}</span>}
5656
{RundownUtils.formatDiffToTimecode(overUnderClock, true, false, true, true, true, undefined, true, true)}
5757
</span>
5858
) : null
@@ -75,26 +75,32 @@ export function PlaylistEndTimingV2({
7575
!rundownPlaylist.startedPlayback ? (
7676
<span className="timing-clock plan-end visual-last-child" role="timer">
7777
{!hidePlannedEndLabel && <span className="timing-clock-label right">{endLabel ?? t('Planned End')}</span>}
78-
<Moment interval={0} format="HH:mm:ss" date={expectedEnd} />
78+
<span className="planned-end-time">
79+
<Moment interval={0} format="HH:mm:ss" date={expectedEnd} />
80+
</span>
7981
</span>
8082
) : (
8183
<span className="timing-clock plan-end visual-last-child" role="timer">
8284
{!hidePlannedEndLabel && (
8385
<span className="timing-clock-label right">{endLabel ?? t('Expected End')}</span>
8486
)}
85-
<Moment interval={0} format="HH:mm:ss" date={expectedEnd} />
87+
<span className="planned-end-time">
88+
<Moment interval={0} format="HH:mm:ss" date={expectedEnd} />
89+
</span>
8690
</span>
8791
)
8892
) : timingDurations ? (
8993
isLoopRunning(rundownPlaylist) ? (
9094
timingDurations.partCountdown && rundownPlaylist.activationId && rundownPlaylist.currentPartInfo ? (
9195
<span className="timing-clock plan-end visual-last-child" role="timer">
9296
{!hidePlannedEndLabel && <span className="timing-clock-label right">{t('Next Loop at')}</span>}
93-
<Moment
94-
interval={0}
95-
format="HH:mm:ss"
96-
date={now + (timingDurations.partCountdown[Object.keys(timingDurations.partCountdown)[0]] || 0)}
97-
/>
97+
<span className="planned-end-time">
98+
<Moment
99+
interval={0}
100+
format="HH:mm:ss"
101+
date={now + (timingDurations.partCountdown[Object.keys(timingDurations.partCountdown)[0]] || 0)}
102+
/>
103+
</span>
98104
</span>
99105
) : null
100106
) : (

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

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -35,29 +35,31 @@ export function PlaylistStartTimingV2({
3535

3636
return (
3737
<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>
4638
{!hidePlannedStart &&
4739
(rundownPlaylist.startedPlayback && rundownPlaylist.activationId && !rundownPlaylist.rehearsal ? (
4840
<span className="timing-clock plan-start left" role="timer">
49-
<span className="timing-clock-label left">{t('Started')}</span>
50-
<Moment interval={0} format="HH:mm:ss" date={rundownPlaylist.startedPlayback} />
41+
{!hidePlannedStartLabel && <span className="timing-clock-label left">{t('Started')}</span>}
42+
<span className="planned-start-time">
43+
<Moment interval={0} format="HH:mm:ss" date={rundownPlaylist.startedPlayback} />
44+
</span>
5145
</span>
5246
) : playlistExpectedStart ? (
5347
<span className="timing-clock plan-start left" role="timer">
54-
<span className="timing-clock-label left">{plannedStartText || t('Planned Start')}</span>
55-
<Moment interval={0} format="HH:mm:ss" date={playlistExpectedStart} />
48+
{!hidePlannedStartLabel && (
49+
<span className="timing-clock-label left">{plannedStartText || t('Planned Start')}</span>
50+
)}
51+
<span className="planned-start-time">
52+
<Moment interval={0} format="HH:mm:ss" date={playlistExpectedStart} />
53+
</span>
5654
</span>
5755
) : playlistExpectedEnd && playlistExpectedDuration ? (
5856
<span className="timing-clock plan-start left" role="timer">
59-
<span className="timing-clock-label left">{plannedStartText || t('Expected Start')}</span>
60-
<Moment interval={0} format="HH:mm:ss" date={playlistExpectedEnd - playlistExpectedDuration} />
57+
{!hidePlannedStartLabel && (
58+
<span className="timing-clock-label left">{plannedStartText || t('Expected Start')}</span>
59+
)}
60+
<span className="planned-start-time">
61+
<Moment interval={0} format="HH:mm:ss" date={playlistExpectedEnd - playlistExpectedDuration} />
62+
</span>
6163
</span>
6264
) : null)}
6365
{!hideDiff && expectedStart && (
@@ -68,17 +70,19 @@ export function PlaylistStartTimingV2({
6870
})}
6971
role="timer"
7072
>
71-
<span className="timing-clock-label">{t('Diff')}</span>
72-
{rundownPlaylist.startedPlayback
73-
? RundownUtils.formatDiffToTimecode(
74-
rundownPlaylist.startedPlayback - expectedStart,
75-
true,
76-
false,
77-
true,
78-
true,
79-
true
80-
)
81-
: RundownUtils.formatDiffToTimecode(getCurrentTime() - expectedStart, true, false, true, true, true)}
73+
{!hidePlannedStartLabel && <span className="timing-clock-label">{t('Diff')}</span>}
74+
<span className="planned-start-time">
75+
{rundownPlaylist.startedPlayback
76+
? RundownUtils.formatDiffToTimecode(
77+
rundownPlaylist.startedPlayback - expectedStart,
78+
true,
79+
false,
80+
true,
81+
true,
82+
true
83+
)
84+
: RundownUtils.formatDiffToTimecode(getCurrentTime() - expectedStart, true, false, true, true, true)}
85+
</span>
8286
</span>
8387
)}
8488
</React.Fragment>

0 commit comments

Comments
 (0)