fix: PieceIcons layout, RundownView loading spinner

jstarpl · jstarpl · commit ed9891133c8e · 2025-05-01T15:19:51.000+02:00
diff --git a/packages/webui/src/client/styles/bootstrap-customize.scss b/packages/webui/src/client/styles/bootstrap-customize.scss
@@ -63,7 +63,7 @@
 }
 
 [data-bs-theme=dark] {
-	scrollbar-color: var(--org-color-shade-3) var(--org-color-shade-1);
+	scrollbar-color: var(--ui-dark-color-brighter) var(--ui-dark-color);
 
 	.btn.btn-secondary {
 		--bs-btn-border-color: transparent;
@@ -220,6 +220,16 @@ fieldset:disabled .btn::before {
 	min-width: 5em;
 }
 
+@media (max-width: 992px) {
+	.modal {
+		padding-top: 1em !important;
+	}
+
+	.modal-dialog-scrollable {
+		height: 80vh;
+	}
+}
+
 .card {
 	--bs-card-bg: var(--org-color-shade-0, hsla(207, 10%, 18%, 1));
 	--bs-card-border-width: 0;
diff --git a/packages/webui/src/client/styles/rundownView.scss b/packages/webui/src/client/styles/rundownView.scss
@@ -3513,7 +3513,7 @@ svg.icon {
 .rundown-view--loading {
 	margin-top: 0;
 
-	> .mod.mhl.mvl.alc {
+	> div > .origo-spinner {
 		position: absolute;
 		top: 50%;
 		left: 50%;
diff --git a/packages/webui/src/client/ui/PieceIcons/PieceIcon.tsx b/packages/webui/src/client/ui/PieceIcons/PieceIcon.tsx
@@ -50,7 +50,7 @@ export const PieceIcon = (props: {
 				const rmContent = piece ? (piece.content as RemoteContent | undefined) : undefined
 				return (
 					<RemoteInputIcon
-						inputIndex={rmContent ? rmContent.studioLabelShort || rmContent.studioLabel : undefined}
+						inputNumber={rmContent ? rmContent.studioLabelShort || rmContent.studioLabel : undefined}
 						abbreviation={props.sourceLayer.abbreviation}
 					/>
 				)
@@ -62,7 +62,7 @@ export const PieceIcon = (props: {
 				const localContent = piece ? (piece.content as EvsContent | undefined) : undefined
 				return (
 					<LocalInputIcon
-						inputIndex={localContent ? localContent.studioLabelShort || localContent.studioLabel : undefined}
+						inputNumber={localContent ? localContent.studioLabelShort || localContent.studioLabel : undefined}
 						abbreviation={props.sourceLayer.abbreviation}
 					/>
 				)
@@ -75,7 +75,7 @@ export const PieceIcon = (props: {
 				const camContent = piece ? (piece.content as CameraContent | undefined) : undefined
 				return (
 					<CamInputIcon
-						inputIndex={camContent ? camContent.studioLabelShort || camContent.studioLabel : undefined}
+						inputNumber={camContent ? camContent.studioLabelShort || camContent.studioLabel : undefined}
 						abbreviation={props.sourceLayer.abbreviation}
 					/>
 				)
diff --git a/packages/webui/src/client/ui/PieceIcons/PieceIcons.scss b/packages/webui/src/client/ui/PieceIcons/PieceIcons.scss
@@ -26,6 +26,10 @@ $letter-spacing: 0.02em;
 			font-size: $font-size-base;
 			font-weight: 300;
 			letter-spacing: $letter-spacing;
+
+			.input-number {
+				font-weight: normal;
+			}
 		}
 	}
 }
diff --git a/packages/webui/src/client/ui/PieceIcons/Renderers/CamInputIcon.tsx b/packages/webui/src/client/ui/PieceIcons/Renderers/CamInputIcon.tsx
@@ -1,25 +1,18 @@
 // @todo: use dynamic data for camera number
 export function CamInputIcon({
-	inputIndex,
+	inputNumber,
 	abbreviation,
 }: {
-	inputIndex?: string
+	inputNumber?: string
 	abbreviation?: string
 }): JSX.Element {
 	return (
 		<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
 			<rect width="126.5" height="89" className="piece-icon-bkg camera" />
-			<text
-				x="63.25"
-				y="71.513954"
-				textAnchor="middle"
-				textLength="126.5"
-				className="piece-icon-text"
-				xmlSpace="preserve"
-			>
-				<tspan lengthAdjust="spacing" className="label">
+			<text x="63.25" y="71.513954" textAnchor="middle" className="piece-icon-text" xmlSpace="preserve">
+				<tspan className="label">
 					{abbreviation !== undefined ? abbreviation : 'C'}
-					<tspan>{inputIndex !== undefined ? inputIndex : ''}</tspan>
+					<tspan className="input-number">{inputNumber !== undefined ? inputNumber : ''}</tspan>
 				</tspan>
 			</text>
 		</svg>
diff --git a/packages/webui/src/client/ui/PieceIcons/Renderers/GraphicsInputIcon.tsx b/packages/webui/src/client/ui/PieceIcons/Renderers/GraphicsInputIcon.tsx
@@ -2,17 +2,8 @@ export function GraphicsInputIcon({ abbreviation }: { abbreviation?: string }):
 	return (
 		<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
 			<rect width="126.5" height="89" className="piece-icon-bkg graphics" />
-			<text
-				x="63.25"
-				y="71.513954"
-				textAnchor="middle"
-				textLength="126.5"
-				className="piece-icon-text"
-				xmlSpace="preserve"
-			>
-				<tspan lengthAdjust="spacing" className="label">
-					{abbreviation !== undefined ? abbreviation : 'G'}
-				</tspan>
+			<text x="63.25" y="71.513954" textAnchor="middle" className="piece-icon-text" xmlSpace="preserve">
+				<tspan className="label">{abbreviation !== undefined ? abbreviation : 'G'}</tspan>
 			</text>
 		</svg>
 	)
diff --git a/packages/webui/src/client/ui/PieceIcons/Renderers/LiveSpeakInputIcon.tsx b/packages/webui/src/client/ui/PieceIcons/Renderers/LiveSpeakInputIcon.tsx
@@ -6,17 +6,8 @@ export function LiveSpeakInputIcon({ abbreviation }: { abbreviation?: string }):
 				<stop className="stop1" offset={0.5} />
 				<stop className="stop2" offset={0.5} />
 			</linearGradient>
-			<text
-				x="63.25"
-				y="71.513954"
-				textAnchor="middle"
-				textLength="126.5"
-				className="piece-icon-text"
-				xmlSpace="preserve"
-			>
-				<tspan lengthAdjust="spacing" className="label">
-					{abbreviation !== undefined ? abbreviation : 'LSK'}
-				</tspan>
+			<text x="63.25" y="71.513954" textAnchor="middle" className="piece-icon-text" xmlSpace="preserve">
+				<tspan className="label">{abbreviation !== undefined ? abbreviation : 'LSK'}</tspan>
 			</text>
 		</svg>
 	)
diff --git a/packages/webui/src/client/ui/PieceIcons/Renderers/LocalInputIcon.tsx b/packages/webui/src/client/ui/PieceIcons/Renderers/LocalInputIcon.tsx
@@ -1,10 +1,10 @@
 import { BaseRemoteInputIcon } from './RemoteInputIcon.js'
 
-export default function LocalInputIcon(props: Readonly<{ inputIndex?: string; abbreviation?: string }>): JSX.Element {
+export default function LocalInputIcon(props: Readonly<{ inputNumber?: string; abbreviation?: string }>): JSX.Element {
 	return (
 		<BaseRemoteInputIcon className="local">
 			{props.abbreviation !== undefined ? props.abbreviation : 'EVS'}
-			<tspan>{props.inputIndex ?? ''}</tspan>
+			<tspan>{props.inputNumber ?? ''}</tspan>
 		</BaseRemoteInputIcon>
 	)
 }
diff --git a/packages/webui/src/client/ui/PieceIcons/Renderers/RemoteInputIcon.tsx b/packages/webui/src/client/ui/PieceIcons/Renderers/RemoteInputIcon.tsx
@@ -4,33 +4,24 @@ export function BaseRemoteInputIcon(props: Readonly<React.PropsWithChildren<{ cl
 	return (
 		<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
 			<rect width="126.5" height="89" className={`piece-icon-bkg ${props.className}`} />
-			<text
-				x="63.25"
-				y="71.513954"
-				textAnchor="middle"
-				textLength="126.5"
-				className="piece-icon-text"
-				xmlSpace="preserve"
-			>
-				<tspan lengthAdjust="spacing" className="label">
-					{props.children}
-				</tspan>
+			<text x="63.25" y="71.513954" textAnchor="middle" className="piece-icon-text" xmlSpace="preserve">
+				<tspan className="label">{props.children}</tspan>
 			</text>
 		</svg>
 	)
 }
 
 export function RemoteInputIcon({
-	inputIndex,
+	inputNumber,
 	abbreviation,
 }: {
-	inputIndex?: string
+	inputNumber?: string
 	abbreviation?: string
 }): JSX.Element {
 	return (
 		<BaseRemoteInputIcon className="remote">
 			{abbreviation !== undefined ? abbreviation : 'LIVE'}
-			<tspan className="index">{inputIndex ?? ''}</tspan>
+			<tspan className="input-number">{inputNumber ?? ''}</tspan>
 		</BaseRemoteInputIcon>
 	)
 }
diff --git a/packages/webui/src/client/ui/PieceIcons/Renderers/RemoteSpeakInputIcon.tsx b/packages/webui/src/client/ui/PieceIcons/Renderers/RemoteSpeakInputIcon.tsx
@@ -9,7 +9,6 @@ export function RemoteSpeakInputIcon({ abbreviation }: { abbreviation?: string }
 			<text
 				x="5"
 				y="66.514"
-				textLength="116.5"
 				style={{
 					fill: '#ffffff',
 					fontFamily: 'open-sans',
diff --git a/packages/webui/src/client/ui/PieceIcons/Renderers/SplitInputIcon.tsx b/packages/webui/src/client/ui/PieceIcons/Renderers/SplitInputIcon.tsx
@@ -21,7 +21,7 @@ export default class SplitInputIcon extends React.Component<{
 				return (
 					<React.Fragment>
 						{label && label[1] ? label[1].substr(0, 1).toUpperCase() + ' ' : ''}
-						<tspan style={{ fontFamily: 'Roboto', fontWeight: 'normal' }}>{label ? label[2] : ''}</tspan>
+						<tspan className="input-number">{label ? label[2] : ''}</tspan>
 					</React.Fragment>
 				)
 			} else {
@@ -72,17 +72,8 @@ export default class SplitInputIcon extends React.Component<{
 					className={classNames('piece-icon-bkg', 'lower', this.getRightSourceType(this.props.piece))}
 				/>
 				{!this.props.hideLabel && (
-					<text
-						x="63.25"
-						y="71.513954"
-						textAnchor="middle"
-						textLength="126.5"
-						className="piece-icon-text"
-						xmlSpace="preserve"
-					>
-						<tspan lengthAdjust="spacing" className="label">
-							{this.getCameraLabel(this.props.piece)}
-						</tspan>
+					<text x="63.25" y="71.513954" textAnchor="middle" className="piece-icon-text" xmlSpace="preserve">
+						<tspan className="label">{this.getCameraLabel(this.props.piece)}</tspan>
 					</text>
 				)}
 			</svg>
diff --git a/packages/webui/src/client/ui/PieceIcons/Renderers/UnknownInputIcon.tsx b/packages/webui/src/client/ui/PieceIcons/Renderers/UnknownInputIcon.tsx
@@ -2,17 +2,8 @@ export function UnknownInputIcon(): JSX.Element {
 	return (
 		<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
 			<rect width="126.5" height="89" className="piece-icon-bkg unknown" />
-			<text
-				x="63.25"
-				y="71.513954"
-				textAnchor="middle"
-				textLength="126.5"
-				className="piece-icon-text"
-				xmlSpace="preserve"
-			>
-				<tspan lengthAdjust="spacing" className="label">
-					?
-				</tspan>
+			<text x="63.25" y="71.513954" textAnchor="middle" className="piece-icon-text" xmlSpace="preserve">
+				<tspan className="label">?</tspan>
 			</text>
 		</svg>
 	)
diff --git a/packages/webui/src/client/ui/PieceIcons/Renderers/VTInputIcon.tsx b/packages/webui/src/client/ui/PieceIcons/Renderers/VTInputIcon.tsx
@@ -2,17 +2,8 @@ export function VTInputIcon({ abbreviation }: { abbreviation?: string }): JSX.El
 	return (
 		<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
 			<rect width="126.5" height="89" className="piece-icon-bkg vt" />
-			<text
-				x="63.25"
-				y="71.513954"
-				textAnchor="middle"
-				textLength="126.5"
-				className="piece-icon-text"
-				xmlSpace="preserve"
-			>
-				<tspan lengthAdjust="spacing" className="label">
-					{abbreviation !== undefined ? abbreviation : 'VT'}
-				</tspan>
+			<text x="63.25" y="71.513954" textAnchor="middle" className="piece-icon-text" xmlSpace="preserve">
+				<tspan className="label">{abbreviation !== undefined ? abbreviation : 'VT'}</tspan>
 			</text>
 		</svg>
 	)
diff --git a/packages/webui/src/client/ui/SegmentTimeline/SegmentTimeline.scss b/packages/webui/src/client/ui/SegmentTimeline/SegmentTimeline.scss
@@ -126,8 +126,7 @@ $timeline-layer-height: 1em;
 		white-space: nowrap;
 
 		> .piece-icon {
-			margin-top: 0.25em;
-			width: 1.5em;
+			height: 1.35em;
 		}
 	}
 }
diff --git a/packages/webui/src/client/ui/Settings/components/triggeredActions/TriggeredActionsEditor.tsx b/packages/webui/src/client/ui/Settings/components/triggeredActions/TriggeredActionsEditor.tsx
@@ -99,21 +99,25 @@ export const TriggeredActionsEditor: React.FC<IProps> = function TriggeredAction
 	const systemTriggeredActionIds = useTracker(
 		() =>
 			TriggeredActions.find(
-				Object.assign(
-					{
-						showStyleBaseId: null,
-					},
-					parsedTriggerFilter
-						? {
-								triggers: {
-									$elemMatch: {
-										type: TriggerType.hotkey,
-										keys: { $regex: `${parsedTriggerFilter}`, $options: 'i' },
+				parsedTriggerFilter
+					? {
+							$or: [
+								{
+									triggersWithOverrides: {
+										defaults: {
+											0: {
+												type: TriggerType.hotkey,
+												keys: { $regex: `${parsedTriggerFilter}`, $options: 'i' },
+											},
+										},
 									},
+									showStyleBaseId: null,
 								},
-							}
-						: undefined
-				),
+							],
+						}
+					: {
+							showStyleBaseId: null,
+						},
 				{
 					sort: {
 						_rank: 1,
@@ -128,21 +132,25 @@ export const TriggeredActionsEditor: React.FC<IProps> = function TriggeredAction
 	const showTriggeredActionIds = useTracker(
 		() =>
 			TriggeredActions.find(
-				Object.assign(
-					{
-						showStyleBaseId: showStyleBaseId,
-					},
-					parsedTriggerFilter
-						? {
-								triggers: {
-									$elemMatch: {
-										type: TriggerType.hotkey,
-										keys: { $regex: `${parsedTriggerFilter}`, $options: 'i' },
+				parsedTriggerFilter
+					? {
+							$or: [
+								{
+									triggersWithOverrides: {
+										defaults: {
+											0: {
+												type: TriggerType.hotkey,
+												keys: { $regex: `${parsedTriggerFilter}`, $options: 'i' },
+											},
+										},
 									},
+									showStyleBaseId,
 								},
-							}
-						: undefined
-				),
+							],
+						}
+					: {
+							showStyleBaseId,
+						},
 				{
 					sort: {
 						_rank: 1,
diff --git a/packages/webui/src/client/ui/Status/StatusCodePill.tsx b/packages/webui/src/client/ui/Status/StatusCodePill.tsx
@@ -29,7 +29,7 @@ export const StatusCodePill: React.FC<{
 	connected: boolean
 	statusCode: StatusCode
 	messages?: string[]
-}> = function ExpectedPackagesStatus(props) {
+}> = function StatusCodePill(props) {
 	const { t } = useTranslation()
 
 	function statusCodeString() {
diff --git a/packages/webui/src/client/ui/Status/SystemStatus/CoreItem.tsx b/packages/webui/src/client/ui/Status/SystemStatus/CoreItem.tsx
@@ -48,15 +48,17 @@ export function CoreItem({ systemStatus, coreSystem }: ICoreItemProps): JSX.Elem
 										: undefined
 								}
 							>
-								{systemStatus && systemStatus.status}
+								{systemStatus?.status ?? t('Unknown')}
 							</a>
 						</span>
 					</div>
 				</div>
 			</div>
 			<div className="device-item__id">
 				<div className="value">
-					{t('Sofie Automation Server Core: {{name}}', { name: coreSystem.name || 'unnamed' })}
+					{!coreSystem.name
+						? t('Sofie Automation Server Core')
+						: t('Sofie Automation Server Core: {{name}}', { name: coreSystem.name })}
 				</div>
 			</div>
 			<div className="device-item__version">

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,10 @@ $letter-spacing: 0.02em;`
`26`	`26`	`font-size: $font-size-base;`
`27`	`27`	`font-weight: 300;`
`28`	`28`	`letter-spacing: $letter-spacing;`
	`29`	`+`
	`30`	`+ .input-number {`
	`31`	`+ font-weight: normal;`
	`32`	`+ }`
`29`	`33`	`}`
`30`	`34`	`}`
`31`	`35`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,10 +1,10 @@`
`1`	`1`	`import { BaseRemoteInputIcon } from './RemoteInputIcon.js'`
`2`	`2`
`3`		`-export default function LocalInputIcon(props: Readonly<{ inputIndex?: string; abbreviation?: string }>): JSX.Element {`
	`3`	`+export default function LocalInputIcon(props: Readonly<{ inputNumber?: string; abbreviation?: string }>): JSX.Element {`
`4`	`4`	`return (`
`5`	`5`	`<BaseRemoteInputIcon className="local">`
`6`	`6`	`{props.abbreviation !== undefined ? props.abbreviation : 'EVS'}`
`7`		`- <tspan>{props.inputIndex ?? ''}</tspan>`
	`7`	`+ <tspan>{props.inputNumber ?? ''}</tspan>`
`8`	`8`	`</BaseRemoteInputIcon>`
`9`	`9`	`)`
`10`	`10`	`}`