Skip to content

Commit fbaf9e0

Browse files
olzzonolzzon
committed
wip: convert piece icons to css text icons
1 parent e6b4682 commit fbaf9e0

File tree

9 files changed

+57
-191
lines changed

9 files changed

+57
-191
lines changed

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

Lines changed: 29 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,41 @@ $font-size-base: 70px;
44
$text-shadow: 0 2px 9px rgba(0, 0, 0, 0.5);
55
$letter-spacing: 0.02em;
66

7-
// Base icon styles
8-
.piece-icon {
9-
.camera {
10-
@include item-type-colors-svg();
11-
}
12-
13-
.live-speak {
14-
fill: url(#background-gradient);
15-
}
7+
@mixin layer-type-backgrounds {
8+
@each $layer-type in $layer-types {
9+
&.#{$layer-type} {
10+
// Background:
11+
display: inline-block;
12+
width: 180px;
13+
height: 140px;
14+
line-height: 140px;
1615

17-
18-
.graphics {
19-
@include item-type-colors-svg();
20-
}
21-
22-
.local {
23-
@include item-type-colors-svg();
16+
background-color: var(--segment-layer-background-#{$layer-type});
17+
18+
&.second {
19+
background-color: var(--segment-layer-background-#{$layer-type}--second);
20+
}
21+
}
2422
}
23+
}
2524

26-
.remote {
27-
@include item-type-colors-svg();
28-
}
25+
// Base icon styles
26+
.piece-icon {
27+
// Text styles:
28+
fill: $text-color;
29+
font-family: Roboto Flex;
30+
filter: drop-shadow($text-shadow);
31+
font-size: $font-size-base;
32+
font-weight: 300;
33+
letter-spacing: $letter-spacing;
2934

30-
.vt {
31-
@include item-type-colors-svg();
35+
span {
36+
// Common styles
37+
@include layer-type-backgrounds; // Apply to all span elements that have layer type classes
3238
}
3339

34-
.unknown {
35-
@include item-type-colors-svg();
40+
.live-speak {
41+
fill: url(#background-gradient);
3642
}
3743

3844
// Gradient styles for live-speak
@@ -47,8 +53,6 @@ $letter-spacing: 0.02em;
4753

4854
// Split view specific styles
4955
.upper, .lower {
50-
rx: 4;
51-
ry: 4;
5256

5357
&.camera {
5458
@include item-type-colors-svg();
@@ -60,21 +64,4 @@ $letter-spacing: 0.02em;
6064
@include item-type-colors-svg();
6165
}
6266
}
63-
64-
// Common text styles
65-
.piece-icon-text {
66-
fill: $text-color;
67-
font-family: Roboto Condensed, Roboto, sans-serif;
68-
font-size: 40px;
69-
70-
filter: drop-shadow($text-shadow);
71-
72-
.label {
73-
fill: $text-color;
74-
font-family: Roboto Condensed, Roboto, sans-serif;
75-
font-size: $font-size-base;
76-
font-weight: 300;
77-
letter-spacing: $letter-spacing;
78-
}
79-
}
8067
}

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

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,11 @@ export function CamInputIcon({
77
abbreviation?: string
88
}): JSX.Element {
99
return (
10-
<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
11-
<rect width="126.5" height="89" className="camera" />
12-
<text
13-
x="63.25"
14-
y="71.513954"
15-
textAnchor="middle"
16-
textLength="126.5"
17-
className="piece-icon-text"
18-
xmlSpace="preserve"
19-
>
20-
<tspan lengthAdjust="spacing" className="label">
21-
{abbreviation !== undefined ? abbreviation : 'C'}
22-
<tspan>{inputIndex !== undefined ? inputIndex : ''}</tspan>
23-
</tspan>
24-
</text>
25-
</svg>
10+
<div className="piece-icon">
11+
<span className="camera">
12+
{abbreviation !== undefined ? abbreviation : 'C'}
13+
{inputIndex !== undefined ? inputIndex : ''}
14+
</span>
15+
</div>
2616
)
2717
}

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

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,7 @@
11
export function GraphicsInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
22
return (
3-
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
4-
<rect width="126.5" height="89" className="graphics" />
5-
<text
6-
x="37.5"
7-
y="71.513954"
8-
style={{
9-
fill: '#ffffff',
10-
fontFamily: 'open-sans',
11-
fontSize: '40px',
12-
letterSpacing: '0px',
13-
lineHeight: '1.25',
14-
wordSpacing: '0px',
15-
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
16-
}}
17-
xmlSpace="preserve"
18-
>
19-
<tspan
20-
x="37.5"
21-
y="71.513954"
22-
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 100 }}
23-
className="label"
24-
>
25-
{abbreviation !== undefined ? abbreviation : 'G'}
26-
</tspan>
27-
</text>
28-
</svg>
3+
<div className="piece-icon">
4+
<span className="graphics">{abbreviation !== undefined ? abbreviation : 'G'}</span>
5+
</div>
296
)
307
}

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

Lines changed: 3 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,7 @@
11
export function LiveSpeakInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
22
return (
3-
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
4-
<rect width="126.5" height="89" className="live-speak" />
5-
<linearGradient id="background-gradient" gradientTransform="rotate(90)">
6-
<stop className="stop1" offset={0.5} />
7-
<stop className="stop2" offset={0.5} />
8-
</linearGradient>
9-
<text
10-
x="5"
11-
y="66.514"
12-
textLength="116.5"
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-
}}
22-
xmlSpace="preserve"
23-
>
24-
<tspan
25-
x="5"
26-
y="66.514"
27-
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '62px', fontWeight: 100 }}
28-
className="label"
29-
>
30-
{abbreviation !== undefined ? abbreviation : 'LSK'}
31-
</tspan>
32-
</text>
33-
</svg>
3+
<div className="piece-icon">
4+
<span className="live-speak">{abbreviation !== undefined ? abbreviation : 'LSK'}</span>
5+
</div>
346
)
357
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export default function LocalInputIcon(props: Readonly<{ inputIndex?: string; ab
44
return (
55
<BaseRemoteInputIcon className="local">
66
{props.abbreviation !== undefined ? props.abbreviation : 'EVS'}
7-
<tspan>{props.inputIndex ?? ''}</tspan>
7+
<span>{props.inputIndex ?? ''}</span>
88
</BaseRemoteInputIcon>
99
)
1010
}

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

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,7 @@
11
import React from 'react'
22

33
export function BaseRemoteInputIcon(props: Readonly<React.PropsWithChildren<{ className: string }>>): JSX.Element {
4-
return (
5-
<svg className="piece-icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
6-
<rect width="126.5" height="89" className={props.className} />
7-
<text
8-
x="63.25"
9-
y="71.513954"
10-
textAnchor="middle"
11-
textLength="126.5"
12-
className="piece-icon-text"
13-
xmlSpace="preserve"
14-
>
15-
<tspan lengthAdjust="spacing" className="label">
16-
{props.children}
17-
</tspan>
18-
</text>
19-
</svg>
20-
)
4+
return <div className="piece-icon">{props.children}</div>
215
}
226

237
export function RemoteInputIcon({
@@ -28,9 +12,11 @@ export function RemoteInputIcon({
2812
abbreviation?: string
2913
}): JSX.Element {
3014
return (
31-
<BaseRemoteInputIcon className="remote">
32-
{abbreviation !== undefined ? abbreviation : 'LIVE'}
33-
<tspan style={{ fontFamily: 'Roboto', fontWeight: 'normal' }}>{inputIndex ?? ''}</tspan>
15+
<BaseRemoteInputIcon className="piece-icon">
16+
<span className="remote">
17+
{abbreviation !== undefined ? abbreviation : 'LIVE'}
18+
{inputIndex ?? ''}
19+
</span>
3420
</BaseRemoteInputIcon>
3521
)
3622
}

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

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,7 @@
11
export function UnknownInputIcon(): JSX.Element {
22
return (
3-
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
4-
<rect width="126.5" height="89" className="unknown" />
5-
<text
6-
x="37.5"
7-
y="71.513954"
8-
style={{
9-
fill: '#ffffff',
10-
fontFamily: 'open-sans',
11-
fontSize: '40px',
12-
letterSpacing: '0px',
13-
lineHeight: '1.25',
14-
wordSpacing: '0px',
15-
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
16-
}}
17-
xmlSpace="preserve"
18-
className="label"
19-
>
20-
<tspan
21-
x="45.5"
22-
y="71.513954"
23-
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 500 }}
24-
>
25-
?
26-
</tspan>
27-
</text>
28-
</svg>
3+
<div className="piece-icon">
4+
<span className="unknown">?</span>
5+
</div>
296
)
307
}

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

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,7 @@
11
export function VTInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
22
return (
3-
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
4-
<rect width="126.5" height="89" className="vt" />
5-
<text
6-
x="5.25"
7-
y="71.513954"
8-
style={{
9-
fill: '#ffffff',
10-
fontFamily: 'open-sans',
11-
fontSize: '40px',
12-
letterSpacing: '0px',
13-
lineHeight: '1.25',
14-
wordSpacing: '0px',
15-
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
16-
}}
17-
xmlSpace="preserve"
18-
className="label"
19-
>
20-
<tspan
21-
x="5.25"
22-
y="71.513954"
23-
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 100 }}
24-
>
25-
{abbreviation !== undefined ? abbreviation : 'VT'}
26-
</tspan>
27-
</text>
28-
</svg>
3+
<div className="piece-icon">
4+
<span className="vt">{abbreviation !== undefined ? abbreviation : 'VT'}</span>
5+
</div>
296
)
307
}

‎packages/webui/src/client/ui/SegmentTimeline/Parts/SegmentTimelinePart.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -591,7 +591,7 @@ export class SegmentTimelinePartClass extends React.Component<Translated<WithTim
591591
'segment-timeline__part__nextline__label--thin': innerPart.autoNext && !this.state.isLive,
592592
})}
593593
>
594-
{innerPart.autoNext ? t('Auto') : this.state.isLive ? t('Next') : null}
594+
{innerPart.autoNext ? t('Auto') : this.state.isLive ? 'cc' : null}
595595
{isEndOfLoopingShow && <LoopingIcon />}
596596
</div>
597597
</div>
@@ -766,7 +766,7 @@ export class SegmentTimelinePartClass extends React.Component<Translated<WithTim
766766
{this.props.autoNextPart || this.props.part.willProbablyAutoNext
767767
? t('Auto')
768768
: this.state.isNext
769-
? t('Next')
769+
? 'dd'
770770
: null}
771771
</React.Fragment>
772772
)}
@@ -801,7 +801,7 @@ export class SegmentTimelinePartClass extends React.Component<Translated<WithTim
801801
(!this.state.isNext && this.props.part.willProbablyAutoNext)
802802
? t('Auto')
803803
: this.state.isNext || this.props.isAfterLastValidInSegmentAndItsLive
804-
? t('Next')
804+
? 'aa'
805805
: null}
806806
</React.Fragment>
807807
)}

0 commit comments

Comments
 (0)