Skip to content

Commit 3c4a4fa

Browse files
olzzonolzzon
committed
feat: unify Piece Icons styling and handle empty vs undefined abbreviation
1 parent e217db1 commit 3c4a4fa

File tree

10 files changed

+147
-125
lines changed

10 files changed

+147
-125
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ input {
9898
@import '../ui/SegmentList/LinePartTransitionPiece/LinePartTransitionPiece.scss';
9999
@import '../ui/SegmentList/LinePartSecondaryPiece/LinePartSecondaryPiece.scss';
100100
@import '../ui/PieceIcons/IconColors.scss';
101+
@import '../ui/PieceIcons/PieceIcons';
101102
@import '../ui/ClockView/CameraScreen/CameraScreen.scss';
102103
@import '../ui/RundownView/MediaStatusPopUp/MediaStatusPopUpItem.scss';
103104
@import '../ui/RundownView/MediaStatusPopUp/MediaStatusPopUp.scss';

‎packages/webui/src/client/ui/PieceIcons/PieceIcons.scss‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
// Variables
2+
$text-color: #ffffff;
3+
$font-size-base: 75px;
4+
$text-shadow: 0 2px 9px rgba(0, 0, 0, 0.5);
5+
6+
// Base icon styles
7+
.piece-icon {
8+
.camera {
9+
@include item-type-colors-svg();
10+
rx: 4;
11+
ry: 4;
12+
}
13+
14+
.live-speak {
15+
fill: url(#background-gradient);
16+
rx: 4;
17+
ry: 4;
18+
}
19+
20+
21+
.graphics {
22+
@include item-type-colors-svg();
23+
rx: 4;
24+
ry: 4;
25+
}
26+
27+
.local {
28+
@include item-type-colors-svg();
29+
rx: 4;
30+
ry: 4;
31+
}
32+
33+
.remote {
34+
@include item-type-colors-svg();
35+
rx: 4;
36+
ry: 4;
37+
}
38+
39+
.vt {
40+
@include item-type-colors-svg();
41+
rx: 4;
42+
ry: 4;
43+
}
44+
45+
.unknown {
46+
@include item-type-colors-svg();
47+
rx: 4;
48+
ry: 4;
49+
}
50+
51+
// Gradient styles for live-speak
52+
#background-gradient {
53+
.stop1 {
54+
stop-color: #954c4c;
55+
}
56+
.stop2 {
57+
stop-color: #4c954c;
58+
}
59+
}
60+
61+
// Split view specific styles
62+
.upper, .lower {
63+
rx: 4;
64+
ry: 4;
65+
66+
&.camera {
67+
@include item-type-colors-svg();
68+
}
69+
&.remote {
70+
@include item-type-colors-svg();
71+
}
72+
&.remote.second {
73+
@include item-type-colors-svg();
74+
}
75+
}
76+
77+
// Common text styles
78+
.piece-icon-text {
79+
fill: $text-color;
80+
font-family: 'Open Sans', sans-serif;
81+
font-size: 40px;
82+
83+
filter: drop-shadow($text-shadow);
84+
85+
.label {
86+
fill: $text-color;
87+
font-family: Roboto, sans-serif;
88+
font-size: $font-size-base;
89+
font-weight: 100;
90+
}
91+
}
92+
}

‎packages/webui/src/client/ui/PieceIcons/Renderers/CamInputIcon.tsx‎

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,19 @@ import * as React from 'react'
44
export default class CamInputIcon extends React.Component<{ inputIndex?: string; abbreviation?: string }> {
55
render(): JSX.Element {
66
return (
7-
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
7+
<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
88
<rect width="126.5" height="89" className="camera" />
99
<text
10-
x="9.6414976"
11-
textLength="106.5"
10+
x="63.25"
1211
y="71.513954"
13-
style={{
14-
fill: '#ffffff',
15-
fontFamily: 'open-sans',
16-
fontSize: '40px',
17-
letterSpacing: '0px',
18-
lineHeight: '1.25',
19-
wordSpacing: '0px',
20-
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
21-
}}
12+
textAnchor="middle"
13+
textLength="126.5"
14+
className="piece-icon-text"
2215
xmlSpace="preserve"
2316
>
24-
<tspan
25-
x="9.6414976"
26-
y="71.513954"
27-
textLength="107.21"
28-
lengthAdjust="spacing"
29-
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 100 }}
30-
className="label"
31-
>
32-
{this.props.abbreviation ? this.props.abbreviation : 'C'}
33-
<tspan style={{ fontFamily: 'Roboto', fontWeight: 'normal' }}>
34-
{this.props.inputIndex !== undefined ? this.props.inputIndex : ''}
35-
</tspan>
17+
<tspan lengthAdjust="spacing" className="label">
18+
{this.props.abbreviation !== undefined ? this.props.abbreviation : 'C'}
19+
<tspan>{this.props.inputIndex !== undefined ? this.props.inputIndex : ''}</tspan>
3620
</tspan>
3721
</text>
3822
</svg>

‎packages/webui/src/client/ui/PieceIcons/Renderers/GraphicsInputIcon.tsx‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,17 @@ import * as React from 'react'
22
export default class GraphicsInputIcon extends React.Component<{ abbreviation?: string }> {
33
render(): JSX.Element {
44
return (
5-
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
5+
<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
66
<rect width="126.5" height="89" className="graphics" />
77
<text
8-
x="37.5"
8+
x="63.25"
99
y="71.513954"
10-
style={{
11-
fill: '#ffffff',
12-
fontFamily: 'open-sans',
13-
fontSize: '40px',
14-
letterSpacing: '0px',
15-
lineHeight: '1.25',
16-
wordSpacing: '0px',
17-
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
18-
}}
10+
textAnchor="middle"
11+
textLength="126.5"
12+
className="piece-icon-text"
1913
xmlSpace="preserve"
2014
>
21-
<tspan
22-
x="37.5"
23-
y="71.513954"
24-
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 100 }}
25-
className="label"
26-
>
15+
<tspan lengthAdjust="spacing" className="label">
2716
{this.props.abbreviation ? this.props.abbreviation : 'G'}
2817
</tspan>
2918
</text>

‎packages/webui/src/client/ui/PieceIcons/Renderers/LiveSpeakInputIcon.tsx‎

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,22 @@ import * as React from 'react'
33
export default class LiveSpeakInputIcon extends React.Component<{ abbreviation?: string }> {
44
render(): JSX.Element {
55
return (
6-
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
7-
<rect width="126.5" height="89" className="live-speak" />
6+
<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
87
<linearGradient id="background-gradient" gradientTransform="rotate(90)">
98
<stop className="stop1" offset={0.5} />
109
<stop className="stop2" offset={0.5} />
1110
</linearGradient>
11+
<rect width="126.5" height="89" className="live-speak" />
1212
<text
13-
x="5"
14-
y="66.514"
15-
textLength="116.5"
16-
style={{
17-
fill: '#ffffff',
18-
fontFamily: 'open-sans',
19-
fontSize: '40px',
20-
letterSpacing: '0px',
21-
lineHeight: '1.25',
22-
wordSpacing: '0px',
23-
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
24-
}}
13+
x="63.25"
14+
y="71.513954"
15+
textAnchor="middle"
16+
textLength="126.5"
17+
className="piece-icon-text"
2518
xmlSpace="preserve"
2619
>
27-
<tspan
28-
x="5"
29-
y="66.514"
30-
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '62px', fontWeight: 100 }}
31-
className="label"
32-
>
33-
{this.props.abbreviation ? this.props.abbreviation : 'LSK'}
20+
<tspan lengthAdjust="spacing" className="label">
21+
{this.props.abbreviation !== undefined ? this.props.abbreviation : 'LSK'}
3422
</tspan>
3523
</text>
3624
</svg>

‎packages/webui/src/client/ui/PieceIcons/Renderers/LocalInputIcon.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import { BaseRemoteInputIcon } from './RemoteInputIcon'
22

33
export default function LocalInputIcon(props: Readonly<{ inputIndex?: string; abbreviation?: string }>): JSX.Element {
4-
return <BaseRemoteInputIcon className="local">{props.abbreviation ? props.abbreviation : 'EVS'}</BaseRemoteInputIcon>
4+
return (
5+
<BaseRemoteInputIcon className="local">
6+
{props.abbreviation !== undefined ? props.abbreviation : 'EVS'}
7+
<tspan>{props.inputIndex ?? ''}</tspan>
8+
</BaseRemoteInputIcon>
9+
)
510
}

‎packages/webui/src/client/ui/PieceIcons/Renderers/RemoteInputIcon.tsx‎

Lines changed: 9 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,17 @@ import React from 'react'
22

33
export function BaseRemoteInputIcon(props: Readonly<React.PropsWithChildren<{ className: string }>>): JSX.Element {
44
return (
5-
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
5+
<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
66
<rect width="126.5" height="89" className={props.className} />
77
<text
8-
x="5"
9-
y="66.514"
10-
textLength="116.5"
11-
lengthAdjust="spacing"
12-
style={{
13-
fill: '#ffffff',
14-
fontFamily: 'open-sans',
15-
fontSize: '40px',
16-
letterSpacing: '0px',
17-
lineHeight: '1.25',
18-
wordSpacing: '0px',
19-
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
20-
}}
8+
x="63.25"
9+
y="71.513954"
10+
textAnchor="middle"
11+
textLength="126.5"
12+
className="piece-icon-text"
2113
xmlSpace="preserve"
2214
>
23-
<tspan
24-
x="5"
25-
y="66.514"
26-
textLength="116.5"
27-
lengthAdjust="spacing"
28-
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '62px', fontWeight: 100 }}
29-
className="label"
30-
>
15+
<tspan lengthAdjust="spacing" className="label">
3116
{props.children}
3217
</tspan>
3318
</text>
@@ -38,8 +23,8 @@ export function BaseRemoteInputIcon(props: Readonly<React.PropsWithChildren<{ cl
3823
export default function RemoteInputIcon(props: Readonly<{ inputIndex?: string; abbreviation?: string }>): JSX.Element {
3924
return (
4025
<BaseRemoteInputIcon className="remote">
41-
{props.abbreviation ? props.abbreviation : 'LIVE'}
42-
<tspan style={{ fontFamily: 'Roboto', fontWeight: 'normal' }}>{props.inputIndex ?? ''}</tspan>
26+
{props.abbreviation !== undefined ? props.abbreviation : 'LIVE'}
27+
<tspan className="index">{props.inputIndex ?? ''}</tspan>
4328
</BaseRemoteInputIcon>
4429
)
4530
}

‎packages/webui/src/client/ui/PieceIcons/Renderers/SplitInputIcon.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@ export default class SplitInputIcon extends React.Component<{
2525
</React.Fragment>
2626
)
2727
} else {
28-
return this.props.abbreviation ? this.props.abbreviation : 'Spl'
28+
return this.props.abbreviation !== undefined ? this.props.abbreviation : 'Spl'
2929
}
3030
} else {
31-
return this.props.abbreviation ? this.props.abbreviation : 'Spl'
31+
return this.props.abbreviation !== undefined ? this.props.abbreviation : 'Spl'
3232
}
3333
}
3434

‎packages/webui/src/client/ui/PieceIcons/Renderers/UnknownInputIcon.tsx‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,17 @@ import * as React from 'react'
33
export default class UnknownInputIcon extends React.Component<{ abbreviation?: string }> {
44
render(): JSX.Element {
55
return (
6-
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
7-
<rect width="126.5" height="89" className="unknown" />
6+
<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
7+
<rect width="126.5" height="89" className="piece-icon-rect" />
88
<text
9-
x="37.5"
9+
x="63.25"
1010
y="71.513954"
11-
style={{
12-
fill: '#ffffff',
13-
fontFamily: 'open-sans',
14-
fontSize: '40px',
15-
letterSpacing: '0px',
16-
lineHeight: '1.25',
17-
wordSpacing: '0px',
18-
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
19-
}}
11+
textAnchor="middle"
12+
textLength="126.5"
13+
className="piece-icon-text"
2014
xmlSpace="preserve"
21-
className="label"
2215
>
23-
<tspan
24-
x="45.5"
25-
y="71.513954"
26-
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 500 }}
27-
>
16+
<tspan lengthAdjust="spacing" className="label">
2817
?
2918
</tspan>
3019
</text>

‎packages/webui/src/client/ui/PieceIcons/Renderers/VTInputIcon.tsx‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,18 @@ import * as React from 'react'
33
export default class VTInputIcon extends React.Component<{ abbreviation?: string }> {
44
render(): JSX.Element {
55
return (
6-
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
6+
<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
77
<rect width="126.5" height="89" className="vt" />
88
<text
9-
x="5.25"
9+
x="63.25"
1010
y="71.513954"
11-
style={{
12-
fill: '#ffffff',
13-
fontFamily: 'open-sans',
14-
fontSize: '40px',
15-
letterSpacing: '0px',
16-
lineHeight: '1.25',
17-
wordSpacing: '0px',
18-
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
19-
}}
11+
textAnchor="middle"
12+
textLength="126.5"
13+
className="piece-icon-text"
2014
xmlSpace="preserve"
21-
className="label"
2215
>
23-
<tspan
24-
x="5.25"
25-
y="71.513954"
26-
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 100 }}
27-
>
28-
{this.props.abbreviation ? this.props.abbreviation : 'VT'}
16+
<tspan lengthAdjust="spacing" className="label">
17+
{this.props.abbreviation !== undefined ? this.props.abbreviation : 'VT'}
2918
</tspan>
3019
</text>
3120
</svg>

0 commit comments

Comments
 (0)