feat: unify Piece Icons styling and handle empty vs undefined abbrevi…

…ation
bbc · Feb 4, 2025 · 3c4a4fa · 3c4a4fa
1 parent e217db1
commit 3c4a4fa
Show file tree

Hide file tree

Showing 10 changed files with 147 additions and 125 deletions.
diff --git a/packages/webui/src/client/styles/main.scss b/packages/webui/src/client/styles/main.scss
@@ -98,6 +98,7 @@ input {
 @import '../ui/SegmentList/LinePartTransitionPiece/LinePartTransitionPiece.scss';
 @import '../ui/SegmentList/LinePartSecondaryPiece/LinePartSecondaryPiece.scss';
 @import '../ui/PieceIcons/IconColors.scss';
+@import '../ui/PieceIcons/PieceIcons';
 @import '../ui/ClockView/CameraScreen/CameraScreen.scss';
 @import '../ui/RundownView/MediaStatusPopUp/MediaStatusPopUpItem.scss';
 @import '../ui/RundownView/MediaStatusPopUp/MediaStatusPopUp.scss';

diff --git a/packages/webui/src/client/ui/PieceIcons/PieceIcons.scss b/packages/webui/src/client/ui/PieceIcons/PieceIcons.scss
@@ -0,0 +1,92 @@
+// Variables
+$text-color: #ffffff;
+$font-size-base: 75px;
+$text-shadow: 0 2px 9px rgba(0, 0, 0, 0.5);
+
+// Base icon styles
+.piece-icon {
+  .camera {
+    @include item-type-colors-svg();
+    rx: 4;
+    ry: 4;
+  }
+
+  .live-speak {
+    fill: url(#background-gradient);
+    rx: 4;
+    ry: 4;
+  }
+
+
+  .graphics {
+    @include item-type-colors-svg();
+    rx: 4;
+    ry: 4;
+  }
+
+  .local {
+    @include item-type-colors-svg();
+    rx: 4;
+    ry: 4;
+  }
+
+  .remote {
+    @include item-type-colors-svg();
+    rx: 4;
+    ry: 4;
+  }
+
+  .vt {
+    @include item-type-colors-svg();
+    rx: 4;
+    ry: 4;
+  }
+
+  .unknown {
+    @include item-type-colors-svg();
+    rx: 4;
+    ry: 4;
+  }
+
+  // Gradient styles for live-speak
+  #background-gradient {
+    .stop1 {
+      stop-color: #954c4c;
+    }
+    .stop2 {
+      stop-color: #4c954c;
+    }
+  }
+
+  // Split view specific styles
+  .upper, .lower {
+    rx: 4;
+    ry: 4;
+
+    &.camera {
+      @include item-type-colors-svg();
+    }
+    &.remote {
+      @include item-type-colors-svg();
+    }
+    &.remote.second {
+      @include item-type-colors-svg();
+    }
+  }
+
+  // Common text styles
+  .piece-icon-text {
+    fill: $text-color;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 40px;
+
+    filter: drop-shadow($text-shadow);
+
+    .label {
+      fill: $text-color;
+      font-family: Roboto, sans-serif;
+      font-size: $font-size-base;
+      font-weight: 100;
+    }
+  }
+}
diff --git a/packages/webui/src/client/ui/PieceIcons/Renderers/CamInputIcon.tsx b/packages/webui/src/client/ui/PieceIcons/Renderers/CamInputIcon.tsx
@@ -4,35 +4,19 @@ import * as React from 'react'
 export default class CamInputIcon extends React.Component<{ inputIndex?: string; abbreviation?: string }> {
 	render(): JSX.Element {
 		return (
-			<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
+			<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="camera" />
 				<text
-					x="9.6414976"
-					textLength="106.5"
+					x="63.25"
 					y="71.513954"
-					style={{
-						fill: '#ffffff',
-						fontFamily: 'open-sans',
-						fontSize: '40px',
-						letterSpacing: '0px',
-						lineHeight: '1.25',
-						wordSpacing: '0px',
-						textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
-					}}
+					textAnchor="middle"
+					textLength="126.5"
+					className="piece-icon-text"
 					xmlSpace="preserve"
 				>
-					<tspan
-						x="9.6414976"
-						y="71.513954"
-						textLength="107.21"
-						lengthAdjust="spacing"
-						style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 100 }}
-						className="label"
-					>
-						{this.props.abbreviation ? this.props.abbreviation : 'C'}
-						<tspan style={{ fontFamily: 'Roboto', fontWeight: 'normal' }}>
-							{this.props.inputIndex !== undefined ? this.props.inputIndex : ''}
-						</tspan>
+					<tspan lengthAdjust="spacing" className="label">
+						{this.props.abbreviation !== undefined ? this.props.abbreviation : 'C'}
+						<tspan>{this.props.inputIndex !== undefined ? this.props.inputIndex : ''}</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,28 +2,17 @@ import * as React from 'react'
 export default class GraphicsInputIcon extends React.Component<{ abbreviation?: string }> {
 	render(): JSX.Element {
 		return (
-			<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
+			<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="graphics" />
 				<text
-					x="37.5"
+					x="63.25"
 					y="71.513954"
-					style={{
-						fill: '#ffffff',
-						fontFamily: 'open-sans',
-						fontSize: '40px',
-						letterSpacing: '0px',
-						lineHeight: '1.25',
-						wordSpacing: '0px',
-						textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
-					}}
+					textAnchor="middle"
+					textLength="126.5"
+					className="piece-icon-text"
 					xmlSpace="preserve"
 				>
-					<tspan
-						x="37.5"
-						y="71.513954"
-						style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 100 }}
-						className="label"
-					>
+					<tspan lengthAdjust="spacing" className="label">
 						{this.props.abbreviation ? this.props.abbreviation : 'G'}
 					</tspan>
 				</text>

diff --git a/packages/webui/src/client/ui/PieceIcons/Renderers/LiveSpeakInputIcon.tsx b/packages/webui/src/client/ui/PieceIcons/Renderers/LiveSpeakInputIcon.tsx
@@ -3,34 +3,22 @@ import * as React from 'react'
 export default class LiveSpeakInputIcon extends React.Component<{ abbreviation?: string }> {
 	render(): 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="live-speak" />
+			<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
 				<linearGradient id="background-gradient" gradientTransform="rotate(90)">
 					<stop className="stop1" offset={0.5} />
 					<stop className="stop2" offset={0.5} />
 				</linearGradient>
+				<rect width="126.5" height="89" className="live-speak" />
 				<text
-					x="5"
-					y="66.514"
-					textLength="116.5"
-					style={{
-						fill: '#ffffff',
-						fontFamily: 'open-sans',
-						fontSize: '40px',
-						letterSpacing: '0px',
-						lineHeight: '1.25',
-						wordSpacing: '0px',
-						textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
-					}}
+					x="63.25"
+					y="71.513954"
+					textAnchor="middle"
+					textLength="126.5"
+					className="piece-icon-text"
 					xmlSpace="preserve"
 				>
-					<tspan
-						x="5"
-						y="66.514"
-						style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '62px', fontWeight: 100 }}
-						className="label"
-					>
-						{this.props.abbreviation ? this.props.abbreviation : 'LSK'}
+					<tspan lengthAdjust="spacing" className="label">
+						{this.props.abbreviation !== undefined ? this.props.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,5 +1,10 @@
 import { BaseRemoteInputIcon } from './RemoteInputIcon'
 
 export default function LocalInputIcon(props: Readonly<{ inputIndex?: string; abbreviation?: string }>): JSX.Element {
-	return <BaseRemoteInputIcon className="local">{props.abbreviation ? props.abbreviation : 'EVS'}</BaseRemoteInputIcon>
+	return (
+		<BaseRemoteInputIcon className="local">
+			{props.abbreviation !== undefined ? props.abbreviation : 'EVS'}
+			<tspan>{props.inputIndex ?? ''}</tspan>
+		</BaseRemoteInputIcon>
+	)
 }
diff --git a/packages/webui/src/client/ui/PieceIcons/Renderers/RemoteInputIcon.tsx b/packages/webui/src/client/ui/PieceIcons/Renderers/RemoteInputIcon.tsx
@@ -2,32 +2,17 @@ import React from 'react'
 
 export function BaseRemoteInputIcon(props: Readonly<React.PropsWithChildren<{ className: string }>>): JSX.Element {
 	return (
-		<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
+		<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={props.className} />
 			<text
-				x="5"
-				y="66.514"
-				textLength="116.5"
-				lengthAdjust="spacing"
-				style={{
-					fill: '#ffffff',
-					fontFamily: 'open-sans',
-					fontSize: '40px',
-					letterSpacing: '0px',
-					lineHeight: '1.25',
-					wordSpacing: '0px',
-					textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
-				}}
+				x="63.25"
+				y="71.513954"
+				textAnchor="middle"
+				textLength="126.5"
+				className="piece-icon-text"
 				xmlSpace="preserve"
 			>
-				<tspan
-					x="5"
-					y="66.514"
-					textLength="116.5"
-					lengthAdjust="spacing"
-					style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '62px', fontWeight: 100 }}
-					className="label"
-				>
+				<tspan lengthAdjust="spacing" className="label">
 					{props.children}
 				</tspan>
 			</text>
@@ -38,8 +23,8 @@ export function BaseRemoteInputIcon(props: Readonly<React.PropsWithChildren<{ cl
 export default function RemoteInputIcon(props: Readonly<{ inputIndex?: string; abbreviation?: string }>): JSX.Element {
 	return (
 		<BaseRemoteInputIcon className="remote">
-			{props.abbreviation ? props.abbreviation : 'LIVE'}
-			<tspan style={{ fontFamily: 'Roboto', fontWeight: 'normal' }}>{props.inputIndex ?? ''}</tspan>
+			{props.abbreviation !== undefined ? props.abbreviation : 'LIVE'}
+			<tspan className="index">{props.inputIndex ?? ''}</tspan>
 		</BaseRemoteInputIcon>
 	)
 }
diff --git a/packages/webui/src/client/ui/PieceIcons/Renderers/SplitInputIcon.tsx b/packages/webui/src/client/ui/PieceIcons/Renderers/SplitInputIcon.tsx
@@ -25,10 +25,10 @@ export default class SplitInputIcon extends React.Component<{
 					</React.Fragment>
 				)
 			} else {
-				return this.props.abbreviation ? this.props.abbreviation : 'Spl'
+				return this.props.abbreviation !== undefined ? this.props.abbreviation : 'Spl'
 			}
 		} else {
-			return this.props.abbreviation ? this.props.abbreviation : 'Spl'
+			return this.props.abbreviation !== undefined ? this.props.abbreviation : 'Spl'
 		}
 	}
 

diff --git a/packages/webui/src/client/ui/PieceIcons/Renderers/UnknownInputIcon.tsx b/packages/webui/src/client/ui/PieceIcons/Renderers/UnknownInputIcon.tsx
@@ -3,28 +3,17 @@ import * as React from 'react'
 export default class UnknownInputIcon extends React.Component<{ abbreviation?: string }> {
 	render(): 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="unknown" />
+			<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-rect" />
 				<text
-					x="37.5"
+					x="63.25"
 					y="71.513954"
-					style={{
-						fill: '#ffffff',
-						fontFamily: 'open-sans',
-						fontSize: '40px',
-						letterSpacing: '0px',
-						lineHeight: '1.25',
-						wordSpacing: '0px',
-						textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
-					}}
+					textAnchor="middle"
+					textLength="126.5"
+					className="piece-icon-text"
 					xmlSpace="preserve"
-					className="label"
 				>
-					<tspan
-						x="45.5"
-						y="71.513954"
-						style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 500 }}
-					>
+					<tspan lengthAdjust="spacing" className="label">
 						?
 					</tspan>
 				</text>

diff --git a/packages/webui/src/client/ui/PieceIcons/Renderers/VTInputIcon.tsx b/packages/webui/src/client/ui/PieceIcons/Renderers/VTInputIcon.tsx
@@ -3,29 +3,18 @@ import * as React from 'react'
 export default class VTInputIcon extends React.Component<{ abbreviation?: string }> {
 	render(): JSX.Element {
 		return (
-			<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
+			<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="vt" />
 				<text
-					x="5.25"
+					x="63.25"
 					y="71.513954"
-					style={{
-						fill: '#ffffff',
-						fontFamily: 'open-sans',
-						fontSize: '40px',
-						letterSpacing: '0px',
-						lineHeight: '1.25',
-						wordSpacing: '0px',
-						textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
-					}}
+					textAnchor="middle"
+					textLength="126.5"
+					className="piece-icon-text"
 					xmlSpace="preserve"
-					className="label"
 				>
-					<tspan
-						x="5.25"
-						y="71.513954"
-						style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 100 }}
-					>
-						{this.props.abbreviation ? this.props.abbreviation : 'VT'}
+					<tspan lengthAdjust="spacing" className="label">
+						{this.props.abbreviation !== undefined ? this.props.abbreviation : 'VT'}
 					</tspan>
 				</text>
 			</svg>