wip: rework test tools

Author: Julusian

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

@@ -15,23 +15,6 @@ input {
 
 @use 'bootstrap';
 
-ul {
-	margin: 20px;
-	padding: 0;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-	font-weight: 300;
-}
-h1 {
-	font-size: 3rem;
-}
-
 @import 'colorScheme';
 @import '_variables';
 @import '_colorScheme';
@@ -63,7 +46,7 @@ h1 {
 // @import 'studioScreenSaver';
 // @import 'supportAndSwitchboardPanel';
 // @import 'systemStatus';
-// @import 'testtools';
+@import 'testtools';
 // @import 'tooltips';
 // @import 'utils';
 // @import 'elementSelected';
@@ -174,28 +157,82 @@ h1 {
 // #render-target {
 // 	font-weight: 300;
 
-// 	h5,
-// 	.h5,
-// 	.text-s,
-// 	.text-s p,
-// 	.text-s .mod,
-// 	.text-s .table,
-// 	.text-s .action-btn,
-// 	.switch,
-// 	.pill,
-// 	.pills .action-btn,
-// 	.notification,
-// 	.tooltip,
-// 	.btn,
-// 	.btn-tight {
-// 		font-weight: 300;
-// 	}
+ul {
+	margin: 20px;
+	padding: 0;
+}
 
-// 	p,
-// 	center,
-// 	.table {
-// 		font-weight: 300;
-// 	}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-weight: 300;
+	color: var(--bs-body-color);
+}
+
+h1,
+.h1 {
+	letter-spacing: -0.03em;
+	font-size: 3rem;
+	line-height: 1.2;
+}
+
+h2,
+.h2 {
+	letter-spacing: -0.03em;
+	font-size: 1.5rem;
+	line-height: 1.5;
+}
+
+h3,
+.h3 {
+	font-size: 0.875rem;
+	text-transform: uppercase;
+	font-weight: bold;
+	line-height: 1.5rem;
+	letter-spacing: 0.6px;
+}
+
+h4,
+.h4 {
+	font-size: 0.875rem;
+	text-transform: uppercase;
+	font-weight: normal;
+	line-height: 1.5rem;
+	letter-spacing: 0.5px;
+}
+
+h5,
+.h5,
+.text-s,
+.text-s p,
+.text-s .mod,
+.text-s .table,
+.text-s .action-btn,
+.switch,
+.pill,
+.pills .action-btn,
+.notification,
+.tooltip,
+.btn,
+.btn-tight {
+	font-weight: 300;
+}
+
+p,
+center,
+.table {
+	font-weight: 300;
+}
+
+.flex-row {
+	display: flex;
+	justify-content: flex-start;
+	align-items: flex-start;
+	flex-direction: row;
+}
 
 // 	.checkbox {
 // 		vertical-align: top;
@@ -231,15 +268,28 @@ h1 {
 // 	}
 // }
 
-// a.selectable {
-// 	display: block;
-// 	text-decoration: inherit;
+.selectable {
+	border-left: 4px solid transparent;
+	overflow: hidden;
+	display: block;
+	text-decoration: inherit;
 
-// 	&:hover,
-// 	&:active {
-// 		text-decoration: inherit;
-// 	}
-// }
+	padding: 0.25rem;
+
+	h3 {
+		margin: 0;
+	}
+
+	&:hover,
+	&:active {
+		text-decoration: inherit;
+	}
+}
+
+.selectable-selected {
+	background: #e0e3e4;
+	border-left-color: #1769ff;
+}
 
 // .btn > svg.svg-inline--fa + span {
 // 	margin-left: 0.5em;

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

@@ -1,50 +1,4 @@
-.testtools-timeline {
-	height: calc(100vh - 220px);
-	width: calc(100vw - 300px);
-	position: fixed;
-	top: 220px;
-	overflow-x: scroll;
-
-	.testtools-timeline-layer-label {
-		position: sticky;
-		left: 0;
-		border: 1px solid #000;
-	}
-
-	.testtools-timeline-layer-row {
-		position: static;
-		top: 0px;
-		left: 0px;
-		width: 100%;
-	}
-
-	.testtools-timeline-layer-object {
-		position: absolute;
-		border: 1px solid #f00;
-		background: #fff;
-		overflow-x: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-
-	.testtools-timeline-scroller {
-		position: absolute;
-		top: 0;
-		left: 0;
-		height: 100%;
-	}
-
-	.testtools-timeline-marker {
-		height: 100%;
-		width: 1px;
-		border-left: 1px solid #0f0;
-		position: absolute;
-		top: 0px;
-		z-index: 999;
-	}
-}
-
-.testtools-timelinetable {
+.testtools-datatable {
 	& > tbody > tr {
 		border-bottom: 1px solid #000;
 

packages/webui/src/client/ui/RundownList/GettingStarted.tsx

@@ -10,7 +10,7 @@ export function GettingStarted({ step }: Readonly<IGettingStartedProps>): JSX.El
 	const { t } = useTranslation()
 
 	return (
-		<div className="mtl gutter has-statusbar">
+		<div className="mx-5 mt-5 has-statusbar">
 			<h1>{t('Getting Started')}</h1>
 			<div>
 				<ul>

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

@@ -22,7 +22,7 @@ export function Settings(): JSX.Element | null {
 	useSubscription(CorelibPubSub.blueprints, null)
 
 	return (
-		<div className="mtl gutter has-statusbar">
+		<div className="mx-5 mt-5 has-statusbar">
 			<div className="mod mvl mhs">
 				<div className="row">
 					<div className="col c12 rm-c3 settings-menu">

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

@@ -75,7 +75,7 @@ export default function Status(props: Readonly<IStatusProps>): JSX.Element {
 	useSubscription(CorelibPubSub.showStyleVariants, null, null)
 
 	return (
-		<div className="mtl gutter has-statusbar">
+		<div className="mx-5 mt-5 has-statusbar">
 			{/* <header className='mvs'>
 					<h1>{t('Status')}</h1>
 				</header> */}

packages/webui/src/client/ui/Status/Evaluations.tsx

@@ -45,7 +45,7 @@ export function EvaluationView(): JSX.Element {
 			<header className="mbs">
 				<h1>{t('Evaluations')}</h1>
 			</header>
-			<div className="mod mvl">
+			<div className="my-5">
 				<div className="paging">
 					<DatePickerFromTo from={dateFrom} to={dateTo} onChange={handleChangeDate} />
 				</div>

packages/webui/src/client/ui/Status/ExternalMessages.tsx

@@ -34,7 +34,7 @@ function ExternalMessages(): JSX.Element {
 			<header className="mbs">
 				<h1>{t('Message Queue')}</h1>
 			</header>
-			<div className="mod mvl">
+			<div className="my-5">
 				<strong>Studio</strong>
 				<ul>
 					{studios.map((studio) => {
@@ -78,7 +78,7 @@ function ExternalMessagesInStudio({ studioId }: Readonly<IExternalMessagesInStud
 			<div className="paging alc">
 				<DatePickerFromTo from={dateFrom} to={dateTo} onChange={handleChangeDate} />
 			</div>
-			<div className="mod mvl">
+			<div className="my-5">
 				<ExternalMessagesQueuedMessages studioId={studioId} />
 				<ExternalMessagesSentMessages studioId={studioId} />
 			</div>

packages/webui/src/client/ui/Status/MediaManager.tsx

@@ -420,7 +420,7 @@ export function MediaManagerStatus(): JSX.Element {
 					</React.Fragment>
 				) : null}
 			</div>
-			<div className="mod mvl">
+			<div className="my-5">
 				{sortedWorkflows.map((mediaWorkflow) => (
 					<MediaManagerWorkFlowItem
 						isExpanded={expandedHelper.isExpanded(mediaWorkflow._id)}

packages/webui/src/client/ui/Status/SystemStatus/SystemStatus.tsx

@@ -31,7 +31,7 @@ export function SystemStatus(): JSX.Element {
 			<header className="mbs">
 				<h1>{t('System Status')}</h1>
 			</header>
-			<div className="mod mvl">
+			<div className="my-5">
 				{coreSystem && <CoreItem coreSystem={coreSystem} systemStatus={systemStatus} />}
 
 				{devicesHierarchy.map((d) => (

packages/webui/src/client/ui/Status/UserActivity.tsx

@@ -272,7 +272,7 @@ function UserActivity(): JSX.Element {
 			<header className="mbs">
 				<h1>{t('User Activity Log')}</h1>
 			</header>
-			<div className="mod mvl">{renderUserActivity()}</div>
+			<div className="my-5">{renderUserActivity()}</div>
 		</div>
 	)
 }

packages/webui/src/client/ui/TestTools/DeviceTriggers.tsx

@@ -13,6 +13,8 @@ import {
 	PeripheralDevicePubSub,
 	PeripheralDevicePubSubCollectionsNames,
 } from '@sofie-automation/shared-lib/dist/pubsub/peripheralDevice'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
 
 const MountedTriggers = new Mongo.Collection<DeviceTriggerMountedAction>(
 	PeripheralDevicePubSubCollectionsNames.mountedTriggers
@@ -30,16 +32,12 @@ const DeviceTriggersView: React.FC = function TimelineDatastoreView() {
 	const { peripheralDeviceId } = useParams<DeviceTriggersViewRouteParams>()
 
 	return (
-		<div className="mtl gutter">
-			<header className="mvs">
+		<div className="mx-5 mt-5">
+			<header className="my-2">
 				<h1>{t('Device Triggers')}</h1>
 			</header>
-			<div className="mod mvl">
-				{peripheralDeviceId && (
-					<div>
-						<DeviceTriggersControls peripheralDeviceId={protectString(peripheralDeviceId)} />
-					</div>
-				)}
+			<div className="my-5">
+				{peripheralDeviceId && <DeviceTriggersControls peripheralDeviceId={protectString(peripheralDeviceId)} />}
 			</div>
 		</div>
 	)
@@ -76,18 +74,20 @@ function DeviceTriggersControls({ peripheralDeviceId }: Readonly<IDatastoreContr
 	)
 
 	return (
-		<div>
-			<label>
-				Device Ids:
-				<input
-					value={deviceIds.join(', ')}
-					onChange={(e) => {
-						setDeviceIds(e.target.value.split(/,\s*/))
-					}}
-				/>
-			</label>
-			<div>
-				<table className="testtools-timelinetable">
+		<Row>
+			<Col xs={12} className="mb-4">
+				<label>
+					Device Ids:&nbsp;
+					<input
+						value={deviceIds.join(', ')}
+						onChange={(e) => {
+							setDeviceIds(e.target.value.split(/,\s*/))
+						}}
+					/>
+				</label>
+			</Col>
+			<Col xs={12}>
+				<table className="testtools-datatable">
 					<tbody>
 						<tr>
 							<th></th>
@@ -126,8 +126,8 @@ function DeviceTriggersControls({ peripheralDeviceId }: Readonly<IDatastoreContr
 						))}
 					</tbody>
 				</table>
-			</div>
-		</div>
+			</Col>
+		</Row>
 	)
 }