Skip to content

Commit af1a642

Browse files
olzzonolzzon
committed
Revert "wip: convert piece icons to css text icons"
This reverts commit fbaf9e0.
1 parent 9846cf4 commit af1a642

File tree

9 files changed

+229
-83
lines changed

9 files changed

+229
-83
lines changed

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

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

7-
@mixin layer-type-backgrounds {
8-
@each $layer-type in $layer-types {
9-
&.#{$layer-type} {
10-
// Background:
11-
display: inline-block;
12-
width: 207px;
13-
height: 126px;
14-
line-height: 126px;
15-
16-
background-color: var(--segment-layer-background-#{$layer-type});
17-
18-
&.second {
19-
background-color: var(--segment-layer-background-#{$layer-type}--second);
20-
}
21-
}
22-
}
23-
}
24-
257
// Base icon styles
268
.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;
9+
.camera {
10+
@include item-type-colors-svg();
11+
rx: 4;
12+
ry: 4;
13+
}
14+
15+
.live-speak {
16+
fill: url(#background-gradient);
17+
}
18+
19+
.graphics {
20+
@include item-type-colors-svg();
21+
rx: 4;
22+
ry: 4;
23+
}
24+
25+
.local {
26+
@include item-type-colors-svg();
27+
rx: 4;
28+
ry: 4;
29+
}
3430

35-
span {
36-
// Common styles
37-
@include layer-type-backgrounds; // Apply to all span elements that have layer type classes
38-
}
31+
.remote {
32+
@include item-type-colors-svg();
33+
rx: 4;
34+
ry: 4;
35+
}
3936

40-
.live-speak {
41-
fill: url(#background-gradient);
42-
}
37+
.vt {
38+
@include item-type-colors-svg();
39+
rx: 4;
40+
ry: 4;
41+
}
4342

44-
// Gradient styles for live-speak
45-
#background-gradient {
46-
.stop1 {
47-
stop-color: #954c4c;
48-
}
49-
.stop2 {
50-
stop-color: #4c954c;
51-
}
52-
}
43+
.unknown {
44+
@include item-type-colors-svg();
45+
rx: 4;
46+
ry: 4;
47+
}
5348

54-
// Split view specific styles
55-
.upper, .lower {
56-
57-
&.camera {
58-
@include item-type-colors-svg();
59-
}
60-
&.remote {
61-
@include item-type-colors-svg();
62-
}
63-
&.remote.second {
64-
@include item-type-colors-svg();
65-
}
66-
}
67-
}
49+
// Gradient styles for live-speak
50+
#background-gradient {
51+
.stop1 {
52+
stop-color: #954c4c;
53+
}
54+
.stop2 {
55+
stop-color: #4c954c;
56+
}
57+
}
58+
59+
// Split view specific styles
60+
.upper,
61+
.lower {
62+
rx: 4;
63+
ry: 4;
64+
65+
&.camera {
66+
@include item-type-colors-svg();
67+
}
68+
&.remote {
69+
@include item-type-colors-svg();
70+
}
71+
&.remote.second {
72+
@include item-type-colors-svg();
73+
}
74+
}
75+
76+
// Common text styles
77+
.piece-icon-text {
78+
fill: $text-color;
79+
font-family: Roboto Condensed, Roboto, sans-serif;
80+
font-size: 40px;
81+
82+
filter: drop-shadow($text-shadow);
83+
84+
.label {
85+
fill: $text-color;
86+
font-family: Roboto Condensed, Roboto, sans-serif;
87+
font-size: $font-size-base;
88+
font-weight: 300;
89+
letter-spacing: $letter-spacing;
90+
}
91+
}
92+
}

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

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,21 @@ export function CamInputIcon({
77
abbreviation?: string
88
}): JSX.Element {
99
return (
10-
<div className="piece-icon">
11-
<span className="camera">
12-
{abbreviation !== undefined ? abbreviation : 'C'}
13-
{inputIndex !== undefined ? inputIndex : ''}
14-
</span>
15-
</div>
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>
1626
)
1727
}

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

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,30 @@
11
export function GraphicsInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
22
return (
3-
<div className="piece-icon">
4-
<span className="graphics">{abbreviation !== undefined ? abbreviation : 'G'}</span>
5-
</div>
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>
629
)
730
}

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

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,35 @@
11
export function LiveSpeakInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
22
return (
3-
<div className="piece-icon">
4-
<span className="live-speak">{abbreviation !== undefined ? abbreviation : 'LSK'}</span>
5-
</div>
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>
634
)
735
}

‎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-
<span>{props.inputIndex ?? ''}</span>
7+
<tspan>{props.inputIndex ?? ''}</tspan>
88
</BaseRemoteInputIcon>
99
)
1010
}

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

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

33
export function BaseRemoteInputIcon(props: Readonly<React.PropsWithChildren<{ className: string }>>): JSX.Element {
4-
return <div className="piece-icon">{props.children}</div>
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+
)
521
}
622

723
export function RemoteInputIcon({
@@ -12,11 +28,9 @@ export function RemoteInputIcon({
1228
abbreviation?: string
1329
}): JSX.Element {
1430
return (
15-
<BaseRemoteInputIcon className="piece-icon">
16-
<span className="remote">
17-
{abbreviation !== undefined ? abbreviation : 'LIVE'}
18-
{inputIndex ?? ''}
19-
</span>
31+
<BaseRemoteInputIcon className="remote">
32+
{abbreviation !== undefined ? abbreviation : 'LIVE'}
33+
<tspan style={{ fontFamily: 'Roboto', fontWeight: 'normal' }}>{inputIndex ?? ''}</tspan>
2034
</BaseRemoteInputIcon>
2135
)
2236
}

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

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,30 @@
11
export function UnknownInputIcon(): JSX.Element {
22
return (
3-
<div className="piece-icon">
4-
<span className="unknown">?</span>
5-
</div>
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>
629
)
730
}

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

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,30 @@
11
export function VTInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
22
return (
3-
<div className="piece-icon">
4-
<span className="vt">{abbreviation !== undefined ? abbreviation : 'VT'}</span>
5-
</div>
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>
629
)
730
}

‎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 ? 'cc' : null}
594+
{innerPart.autoNext ? t('Auto') : this.state.isLive ? t('Next') : 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-
? 'dd'
769+
? t('Next')
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-
? 'aa'
804+
? t('Next')
805805
: null}
806806
</React.Fragment>
807807
)}

0 commit comments

Comments
 (0)