wip: start on rundown view

Author: Julusian

packages/webui/src/client/lib/Components/ToggleSwitch.tsx

@@ -8,7 +8,7 @@ interface IToggleSwitchControlProps {
 	label?: string
 
 	value: boolean
-	handleUpdate: (value: boolean) => void
+	handleUpdate: (value: boolean, e: React.MouseEvent<HTMLElement>) => void
 }
 export function ToggleSwitchControl({
 	classNames,
@@ -21,10 +21,13 @@ export function ToggleSwitchControl({
 	const currentValue = useRef(value)
 	currentValue.current = value
 
-	const handleChange = useCallback(() => {
-		if (disabled) return
-		handleUpdate(!currentValue.current)
-	}, [handleUpdate, disabled])
+	const handleChange = useCallback(
+		(e: React.MouseEvent<HTMLElement>) => {
+			if (disabled) return
+			handleUpdate(!currentValue.current, e)
+		},
+		[handleUpdate, disabled]
+	)
 
 	return (
 		<Form.Check

packages/webui/src/client/lib/viewPort.ts

@@ -103,7 +103,9 @@ let HEADER_HEIGHT: number | undefined = undefined
 
 export function getHeaderHeight(): number {
 	if (HEADER_HEIGHT === undefined) {
-		const root = document.querySelector('#render-target > .container-fluid-custom > .rundown-view > .header')
+		const root = document.querySelector(
+			'#render-target > .container-fluid-custom > .rundown-view > .rundown-header'
+		)
 		if (!root) {
 			return FALLBACK_HEADER_HEIGHT
 		}

packages/webui/src/client/styles/bootstrap-customise.scss

@@ -17,3 +17,5 @@ $btn-disabled-opacity: 0.5;
 
 $modal-header-padding: 0.5rem 1rem;
 $modal-md: 550px;
+
+$body-bg-dark: #343434;

packages/webui/src/client/styles/fromOrigo.scss

@@ -1,6 +1,7 @@
 .header-clear {
 	padding-top: 4rem;
 	padding-right: $statusbar-width;
+	padding-left: 0;
 }
 
 ul {
@@ -84,6 +85,14 @@ header {
 	flex-direction: row;
 }
 
+.flex-col {
+	display: flex;
+	flex: 0 0 auto;
+	align-content: flex-start;
+	justify-content: flex-start;
+	flex-direction: column;
+}
+
 .action-btn {
 	font-size: 0.875rem;
 	cursor: pointer;

packages/webui/src/client/styles/main.scss

@@ -12,7 +12,7 @@ input {
 
 @use 'defaultColors';
 
-@use 'bootstrap';
+@import 'bootstrap';
 
 @import 'itemTypeColors';
 
@@ -41,13 +41,13 @@ input {
 // @import 'pieceStatusIcon';
 // @import 'prompter';
 @import 'rundownList';
-// @import 'rundownSystemStatus';
+@import 'rundownSystemStatus';
 @import 'settings';
 // @import 'splitDropdown';
 @import 'statusbar';
 // @import 'statusNotification';
-// @import 'studioScreenSaver';
-// @import 'supportAndSwitchboardPanel';
+@import 'studioScreenSaver';
+@import 'supportAndSwitchboardPanel';
 @import 'systemStatus';
 @import 'testtools';
 @import 'tooltips';
@@ -57,7 +57,7 @@ input {
 @import 'countdown/overlay';
 @import 'countdown/presenter';
 
-// @import 'customizations/nrk/shelf/taPanel';
+@import 'customizations/nrk/shelf/taPanel';
 
 @import 'shelf/adLibPanel';
 @import 'shelf/adLibRegionPanel';
@@ -115,7 +115,7 @@ input {
 @import '../ui/RundownView/MediaStatusPopUp/MediaStatusPopUpSegmentRule.scss';
 @import '../ui/SegmentAdlibTesting/SegmentAdlibTesting.scss';
 
-// @import 'rundownView';
+@import 'rundownView';
 
 // body {
 // 	overscroll-behavior: none;
@@ -229,3 +229,20 @@ input {
 		}
 	}
 }
+
+.form-switch.switch-lg {
+	// TODO
+	.form-check-input {
+		width: 3em;
+		height: 1.5em;
+	}
+}
+.form-switch.switch-nocolor {
+	.form-check-input,
+	.form-check-input:checked {
+		--bs-form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
+
+		background-color: #737373;
+		border-color: #737373;
+	}
+}

packages/webui/src/client/styles/notifications.scss

@@ -469,7 +469,7 @@
 	.rundown-view {
 		&.notification-center-open {
 			padding-right: 25vw !important;
-			> .header .rundown-overview {
+			> .rundown-header .rundown-overview {
 				padding-right: calc(25vw + 1.5em) !important;
 			}
 		}

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

@@ -137,19 +137,19 @@ $break-width: 35rem;
 		}
 	}
 
-	.header.rundown .notification-pop-ups {
+	.rundown-header .notification-pop-ups {
 		top: 65px;
 	}
 
-	> .header .rundown-overview {
+	> .rundown-header .rundown-overview {
 		transition: 0s padding-right 0.5s;
 	}
 
 	&.notification-center-open {
 		padding-right: $notification-center-width;
 		transition: 0s padding-right 1s;
 
-		> .header .rundown-overview {
+		> .rundown-header .rundown-overview {
 			padding-right: calc(#{$notification-center-width} + 1.5em);
 			transition: 0s padding-right 1s;
 		}
@@ -159,7 +159,7 @@ $break-width: 35rem;
 		padding-right: $properties-panel-width;
 		transition: 0s padding-right 1s;
 
-		> .header .rundown-overview {
+		> .rundown-header .rundown-overview {
 			padding-right: calc(#{$properties-panel-width} + 1.5em);
 			transition: 0s padding-right 1s;
 		}
@@ -220,8 +220,10 @@ body.no-overflow {
 	}
 }
 
-.header.rundown {
-	.row {
+.rundown-header {
+	padding: 0;
+
+	.header-row {
 		width: 100%;
 
 		&.margin-right {
@@ -435,17 +437,17 @@ body.no-overflow {
 	cursor: default;
 }
 
-.header.rundown.not-active .first-row {
+.rundown-header.not-active .first-row {
 	background-color: rgb(38, 137, 186);
 }
-.header.rundown.not-active .first-row .timing-clock,
-.header.rundown.not-active .first-row .timing-clock-label {
+.rundown-header.not-active .first-row .timing-clock,
+.rundown-header.not-active .first-row .timing-clock-label {
 	color: #fff !important;
 }
-// .header.rundown.active .first-row  {
+// .rundown-header.active .first-row  {
 // background-color: #600
 // }
-.header.rundown.active.rehearsal .first-row {
+.rundown-header.active.rehearsal .first-row {
 	background-color: #660;
 }
 
@@ -3172,7 +3174,7 @@ svg.icon {
 		> .thumbnail {
 			display: block;
 			width: 414px;
-			height: 233px; 
+			height: 233px;
 			background: #000;
 		}
 

packages/webui/src/client/styles/supportAndSwitchboardPanel.scss

@@ -133,6 +133,12 @@
 			color: #a4a4a4;
 		}
 
+		.form-switch {
+			display: inline-block;
+			margin-right: 1rem;
+			margin-left: 1.5rem;
+		}
+
 		&.dual {
 			display: flex;
 

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

@@ -22,7 +22,7 @@ import Escape from './../lib/Escape'
 
 import * as i18next from 'i18next'
 import Tooltip from 'rc-tooltip'
-import { NavLink, Route, Prompt } from 'react-router-dom'
+import { NavLink, Route, Prompt, Link } from 'react-router-dom'
 import {
 	DBRundownPlaylist,
 	QuickLoopMarker,
@@ -172,6 +172,10 @@ import * as RundownResolver from '../lib/RundownResolver'
 import { MAGIC_TIME_SCALE_FACTOR } from './SegmentTimeline/Constants'
 import { SelectedElementProvider, SelectedElementsContext } from './RundownView/SelectedElementsContext'
 import { PropertiesPanel } from './UserEditOperations/PropertiesPanel'
+import Container from 'react-bootstrap/esm/Container'
+import Navbar from 'react-bootstrap/esm/Navbar'
+import { LinkContainer } from 'react-router-bootstrap'
+import Nav from 'react-bootstrap/esm/Nav'
 
 const REHEARSAL_MARGIN = 1 * 60 * 1000
 const HIDE_NOTIFICATIONS_AFTER_MOUNT: number | undefined = 5000
@@ -1162,8 +1166,11 @@ const RundownHeader = withTranslation()(
 							)}
 						</ContextMenu>
 					</Escape>
-					<div
-						className={ClassNames('header rundown', {
+					<Navbar
+						data-bs-theme="dark"
+						fixed="top"
+						expand
+						className={ClassNames('rundown-header', {
 							active: !!this.props.playlist.activationId,
 							'not-active': !this.props.playlist.activationId,
 							rehearsal: this.props.playlist.rehearsal,
@@ -1184,15 +1191,15 @@ const RundownHeader = withTranslation()(
 									noResetOnActivate ? this.activateRundown(e) : this.resetAndActivateRundown(e)
 								}
 							/>
-							<div className="row flex-row first-row super-dark">
+							<div className="header-row flex-row first-row super-dark">
 								<div className="flex-col left horizontal-align-left">
-									<div className="badge mod">
+									<div className="badge-sofie my-3 mx-4">
 										<Tooltip
 											overlay={t('Add ?studio=1 to the URL to enter studio mode')}
 											visible={getHelpMode() && !this.props.userPermissions.studio}
 											placement="bottom"
 										>
-											<div className="media-elem mrs sofie-logo" />
+											<div className="media-elem me-2 sofie-logo" />
 										</Tooltip>
 										<div className="bd mls">
 											<span className="logo-text"></span>
@@ -1236,7 +1243,8 @@ const RundownHeader = withTranslation()(
 								</div>
 							</div>
 						</ContextMenuTrigger>
-					</div>
+					</Navbar>
+
 					<ModalDialog
 						title={t('Error')}
 						acceptText={t('OK')}
@@ -1839,6 +1847,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady, IState, ITracke
 
 		componentDidMount(): void {
 			document.body.classList.add('dark', 'vertical-overflow-only')
+			document.body.setAttribute('data-bs-theme', 'dark')
 
 			rundownNotificationHandler.set(this.onRONotificationClick)
 
@@ -2104,6 +2113,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady, IState, ITracke
 
 		componentWillUnmount(): void {
 			document.body.classList.remove('dark', 'vertical-overflow-only')
+			document.body.removeAttribute('data-bs-theme')
 			window.removeEventListener('beforeunload', this.onBeforeUnload)
 
 			documentTitle.set(null)

packages/webui/src/client/ui/RundownView/MediaStatusPopUp/index.tsx

@@ -87,7 +87,7 @@ export function MediaStatusPopUp({ playlistId }: Readonly<IProps>): JSX.Element
 						<MediaStatusPopOutIcon />
 					</NavLink>
 				</div>
-				<h2 className="mhm mvn">{t('Media Status')}</h2>
+				<h2 className="mx-3 my-0">{t('Media Status')}</h2>
 				<div className="media-status-panel__scrollbox">
 					<table className="media-status-panel__table">
 						<MediaStatusPopUpHeader