Skip to content

Commit aa35b1b

Browse files
author
Mint de Wit
committed
chore: update styles
1 parent 77bf227 commit aa35b1b

File tree

9 files changed

+239
-144
lines changed

9 files changed

+239
-144
lines changed

‎packages/shared-lib/src/lib/JSONSchemaUtil.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export enum SchemaFormUIField {
2929
* Currently only valid for:
3030
* - object properties. Valid values are 'json'.
3131
* - string properties. Valid values are 'base64-image'.
32+
* - boolean properties. Valid values are 'switch'.
3233
*/
3334
DisplayType = 'ui:displayType',
3435
/**

‎packages/webui/src/client/lib/forms/SchemaFormWithOverrides.tsx‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { SchemaFormObjectTable } from './SchemaFormTable/ObjectTable'
2424
import { getSchemaUIField, SchemaFormUIField } from '@sofie-automation/blueprints-integration'
2525
import { SchemaFormSectionHeader } from './SchemaFormSectionHeader'
2626
import { Base64ImageInputControl } from '../Components/Base64ImageInput'
27+
import { ToggleSwitchControl } from '../Components/ToggleSwitch'
2728

2829
interface SchemaFormWithOverridesProps extends SchemaFormCommonProps {
2930
/** Base path of the schema within the document */
@@ -116,7 +117,11 @@ export function SchemaFormWithOverrides(props: Readonly<SchemaFormWithOverridesP
116117
case TypeName.Number:
117118
return <NumberFormWithOverrides {...childProps} />
118119
case TypeName.Boolean:
119-
return <BooleanFormWithOverrides {...childProps} />
120+
if (getSchemaUIField(props.schema, SchemaFormUIField.DisplayType) === 'switch') {
121+
return <SwitchFormWithOverrides {...childProps} />
122+
} else {
123+
return <BooleanFormWithOverrides {...childProps} />
124+
}
120125
case TypeName.String:
121126
if (getSchemaUIField(props.schema, SchemaFormUIField.DisplayType) === 'base64-image') {
122127
return <Base64ImagePickerWithOverrides {...childProps} />
@@ -352,6 +357,17 @@ const BooleanFormWithOverrides = ({ commonAttrs }: Readonly<FormComponentProps>)
352357
)
353358
}
354359

360+
const SwitchFormWithOverrides = ({ commonAttrs }: Readonly<FormComponentProps>) => {
361+
return (
362+
<LabelAndOverridesForCheckbox {...commonAttrs}>
363+
{(value, handleUpdate) => (
364+
// <CheckboxControl classNames="input" value={value ?? false} handleUpdate={handleUpdate} />
365+
<ToggleSwitchControl value={value ?? false} handleUpdate={handleUpdate} />
366+
)}
367+
</LabelAndOverridesForCheckbox>
368+
)
369+
}
370+
355371
const StringFormWithOverrides = ({ schema, commonAttrs }: Readonly<FormComponentProps>) => {
356372
return (
357373
<LabelAndOverrides {...commonAttrs}>

‎packages/webui/src/client/lib/forms/SchemaFormWithState.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useCallback, useMemo, useState } from 'react'
1+
import { useCallback, useMemo } from 'react'
22
import {
33
OverrideOpHelperForItemContentsBatcher,
44
WrappedOverridableItemNormal,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ $fullscreen-controls__button--radius: 3.125rem;
44

55
$statusbar-width: 3.6rem;
66
$notification-center-width: 25rem;
7+
$properties-panel-width: 550px;
78

89
$browser-context: 16px; // Default browser font size in pixels
910

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

Lines changed: 133 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,23 @@
22
@import '_colorScheme';
33
@import '_variables';
44

5-
6-
75
.properties-panel {
86
position: fixed;
97
background: #7b7b7b;
108
color: #000;
11-
top: 50px;
9+
top: 4rem;
1210
right: 0;
13-
bottom: 10px;
14-
width: calc(#{$notification-center-width} + 4.6875rem);
11+
bottom: 0;
12+
width: $properties-panel-width;
1513
z-index: 292;
1614

17-
transform: translateX(100%);
18-
transition: transform 0.2s ease-out;
19-
20-
// Add a class that will be applied when the component mounts
21-
&.is-mounted {
22-
transform: translateX(0%);
23-
}
15+
transform: translateX(100%);
16+
transition: transform 0.2s ease-out;
17+
18+
// Add a class that will be applied when the component mounts
19+
&.is-mounted {
20+
transform: translateX(0%);
21+
}
2422

2523
&::before {
2624
content: ' ';
@@ -34,70 +32,115 @@
3432
}
3533

3634
.propertiespanel-pop-up {
37-
background: #252525;
35+
background: #2e2e2e;
3836
border-radius: 1px;
3937
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
40-
margin: 1px;
41-
height: 98.2%;
42-
width: 87%;
43-
44-
&:first-child {
45-
margin-top: 0.9375rem;
46-
}
38+
height: 100%;
39+
width: calc(100% - 3.75rem);
40+
position: relative;
4741

48-
&:last-child {
49-
margin-bottom: 0.9375rem;
50-
}
51-
52-
> .propertiespanel-pop-up_close {
53-
position: absolute;
54-
top: 25px;
55-
right: 70px;
56-
color: white;
57-
}
42+
display: flex;
43+
flex-direction: column;
5844

5945
> .propertiespanel-pop-up__header {
60-
background: #3d3d3d;
46+
background: #0a20ed;
6147
color: #ddd;
6248

63-
min-width: 2.5rem;
64-
height: 2.5rem;
65-
font-size: 1.2em;
49+
// min-width: 2.5rem;
50+
// height: 2.5rem;
51+
max-width: 100%;
6652

67-
text-align: left;
68-
padding-left: 1rem;
6953
display: flex;
54+
padding: 1em;
7055
align-items: center;
71-
gap: 0.5rem;
56+
gap: 0.2em;
57+
align-self: stretch;
58+
59+
// text-align: left;
60+
// padding-left: 1rem;
61+
// display: flex;
62+
// align-items: center;
63+
// gap: 0.5rem;
64+
65+
text-shadow: 0.5px 0.5px 8px rgba(0, 0, 0, 0.8);
66+
font-family: Roboto;
67+
font-size: 1em;
68+
font-style: normal;
69+
font-weight: 500;
70+
line-height: normal;
71+
letter-spacing: 0.5px;
7272

7373
> .svg {
74-
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15));
75-
width: 1.1em;
76-
height: 1.1em;
74+
// filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15));
75+
width: 1em;
76+
height: 1.2em;
77+
flex-shrink: 0;
78+
}
79+
> .title {
80+
flex-grow: 1;
81+
flex-shrink: 1;
82+
text-overflow: ellipsis;
83+
white-space: nowrap;
84+
overflow: hidden;
85+
min-width: 0;
86+
}
87+
> .properties {
88+
color: #fff;
89+
font-family: Roboto;
90+
font-size: 16px;
91+
font-style: normal;
92+
font-weight: 300;
93+
line-height: normal;
94+
letter-spacing: -0.1px;
95+
flex-shrink: 0;
96+
}
97+
> .propertiespanel-pop-up_close {
98+
height: 1em;
99+
cursor: pointer;
100+
margin-left: 1em;
77101
}
78102
}
79103

80104
> .propertiespanel-pop-up__footer {
81105
flex: 1;
82-
position: absolute;
83-
left: 0;
84-
right: 0;
85-
bottom: 10px;
106+
// position: absolute;
107+
// left: 0;
108+
// right: 0;
109+
// bottom: 0;
110+
flex: 0 0 0;
111+
padding: 10px;
86112
display: flex;
87-
justify-content: center;
88-
align-items: center;
89-
margin-right: 50px;
113+
justify-content: space-between;
114+
// align-items: center;
115+
gap: 12px;
90116

91-
> .propertiespanel-pop-up__button {
92-
background: #636363;
93-
padding: 5px 5px 5px 5px;
94-
gap: 10px;
95-
border-radius: 5px;
96-
border: 1px;
97-
border: 1px solid #7F7F7F;
98-
color: #ddd;
117+
// margin-right: 50px;
118+
119+
> .propertiespanel-pop-up__button-group {
120+
display: inherit;
121+
gap: inherit;
122+
}
123+
124+
> .propertiespanel-pop-up__button,
125+
.propertiespanel-pop-up__button-group .propertiespanel-pop-up__button {
126+
// background: #636363;
127+
// padding: 5px 5px 5px 5px;
128+
// gap: 10px;
129+
// border-radius: 5px;
130+
// border: 1px;
131+
// border: 1px solid #7f7f7f;
132+
// color: #ddd;
133+
// margin: 10px auto;
99134
display: block;
100-
margin: 10px auto;
135+
136+
border-radius: 5px;
137+
border: 1px solid #7f7f7f;
138+
background: #636363;
139+
padding: 10px;
140+
141+
color: #dfdfdf;
142+
font-size: 0.875em;
143+
font-weight: 500;
101144

102145
&:active {
103146
transform: scale(0.95);
@@ -107,7 +150,7 @@
107150
&:disabled {
108151
cursor: not-allowed;
109152
opacity: 0.3;
110-
153+
111154
&:active {
112155
transform: none;
113156
top: 0;
@@ -128,29 +171,37 @@
128171
margin-top: 2px;
129172
line-height: inherit;
130173
}
174+
175+
&.start {
176+
justify-self: start;
177+
}
178+
&.end {
179+
justify-self: end;
180+
}
131181
}
132182
}
133183

134184
> .propertiespanel-pop-up__contents {
135185
flex: 1;
136-
padding: 0.625rem 0.9375rem;
137186
padding: 0.525rem 0.6375rem;
138187
cursor: default;
139-
188+
overflow: hidden auto;
140189
overflow-wrap: break-word;
141190

191+
flex: 1 0;
192+
142193
> hr {
143194
margin-left: 0px;
144195
width: 100%;
145-
border-color: #7F7F7F;
196+
border-color: #7f7f7f;
146197
}
147198

148199
> .propertiespanel-pop-up__groupselector {
149200
display: flex;
150201
flex-wrap: wrap;
151202
margin-top: 0.5em;
152203
margin-bottom: 0.5em;
153-
204+
154205
> .propertiespanel-pop-up__groupselector__button {
155206
@include item-type-colors();
156207

@@ -161,20 +212,20 @@
161212
gap: 10px;
162213
color: #ddd;
163214
opacity: 0.2;
164-
}
165215

166-
> .propertiespanel-pop-up__groupselector__button-active {
167-
@include item-type-colors();
216+
&.splits {
217+
background: linear-gradient(
218+
to right,
219+
$segment-layer-background-camera 50%,
220+
$segment-layer-background-remote 50.0001%
221+
);
222+
}
168223

169-
width: 50px;
170-
height: 30px;
171-
border: 0px;
172-
margin: 3px;
173-
gap: 10px;
174-
color: #fff;
175-
opacity: 1;
224+
&.active {
225+
color: #fff;
226+
opacity: 1;
227+
}
176228
}
177-
178229
}
179230

180231
> .propertiespanel-pop-up__action {
@@ -191,32 +242,31 @@
191242
display: flex;
192243
align-items: flex-start;
193244
gap: 8px;
194-
245+
195246
// Add positioning for the pencil icon
196247
> svg {
197-
margin-top: 4px;
198-
flex-shrink: 0;
248+
margin-top: 4px;
249+
flex-shrink: 0;
199250
}
200-
251+
201252
> .properties-panel-pop-up__form__schema {
202-
border-color: pink;
203-
border-width: 0px;
204-
flex-grow: 1;
253+
border-color: pink;
254+
border-width: 0px;
255+
flex-grow: 1;
205256
}
206257
}
207-
258+
208259
> .properties-panel-pop-up__has-been-edited {
209260
background-color: #ffffff16;
210261
border-radius: 8px;
211262
padding: 4px 4px;
212263
}
213264

214-
215265
> .propertiespanel-pop-up__label {
216266
color: #ddd;
217267
}
218268

219-
> .propertiespanel-pop-up__select{
269+
> .propertiespanel-pop-up__select {
220270
margin-top: 10px;
221271
width: 100%;
222272
height: 3em;
@@ -232,7 +282,7 @@
232282
gap: 10px;
233283
border-radius: 5px;
234284
border: 1px;
235-
border: 1px solid #7F7F7F;
285+
border: 1px solid #7f7f7f;
236286
color: #ddd;
237287

238288
&:active {

0 commit comments

Comments
 (0)