Skip to content

Commit 1fc550e

Browse files
JulusianJulusian
committed
wip: some showstyle settings
1 parent a2e1b15 commit 1fc550e

File tree

14 files changed

+239
-221
lines changed

14 files changed

+239
-221
lines changed

‎packages/webui/src/client/lib/multiSelect.tsx‎

Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import ClassNames from 'classnames'
55
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
66
import { faCheckSquare, faSquare, faChevronUp } from '@fortawesome/free-solid-svg-icons'
77
import { Manager, Reference, Popper } from 'react-popper'
8+
import Form from 'react-bootstrap/esm/Form'
89

910
export interface MultiSelectEvent {
1011
selectedValues: Array<string>
@@ -181,25 +182,15 @@ export class MultiSelect extends React.Component<IProps, IState> {
181182

182183
private renderOption = (value: string, key: string, className: string | undefined) => {
183184
return (
184-
<p className="expco-item" key={key}>
185-
<label className={ClassNames('action-btn', className)}>
186-
<span className="checkbox">
187-
<input
188-
type="checkbox"
189-
className="form-control"
190-
checked={this.isChecked(key)}
191-
onChange={() => this.handleChange(key)}
192-
/>
193-
<span className="checkbox-checked">
194-
<FontAwesomeIcon icon={faCheckSquare} />
195-
</span>
196-
<span className="checkbox-unchecked">
197-
<FontAwesomeIcon icon={faSquare} />
198-
</span>
199-
</span>
200-
{value}
201-
</label>
202-
</p>
185+
<div className="expco-item" key={key}>
186+
<Form.Check
187+
className={ClassNames(className)}
188+
checked={this.isChecked(key)}
189+
onChange={() => this.handleChange(key)}
190+
id={`multiseelct-${value}`}
191+
label={value}
192+
/>
193+
</div>
203194
)
204195
}
205196

@@ -212,7 +203,7 @@ export class MultiSelect extends React.Component<IProps, IState> {
212203
<div
213204
ref={(r) => this.setTitleRef(r, ref)}
214205
className={ClassNames(
215-
'expco subtle',
206+
'expco form-control',
216207
{
217208
'expco-expanded': this.state.expanded,
218209
disabled: this.props.disabled,
@@ -224,14 +215,14 @@ export class MultiSelect extends React.Component<IProps, IState> {
224215
>
225216
<div
226217
className={ClassNames('expco-title', {
227-
placeholder: !simpleSummary,
218+
'title-placeholder': !simpleSummary,
228219
})}
229220
onClick={this.toggleExpco}
230221
title={simpleSummary || this.props.placeholder || ''}
231222
>
232223
{this.generateRichSummary() || this.props.placeholder || ''}
233224
</div>
234-
<a className="action-btn right expco-expand subtle" onClick={this.toggleExpco}>
225+
<a className="action-btn right expco-expand" onClick={this.toggleExpco}>
235226
<FontAwesomeIcon icon={faChevronUp} />
236227
</a>
237228
</div>
@@ -260,7 +251,7 @@ export class MultiSelect extends React.Component<IProps, IState> {
260251
style={style}
261252
data-placement={placement}
262253
className={ClassNames(
263-
'expco subtle expco-popper dropdown',
254+
'expco expco-popper dropdown',
264255
{
265256
'expco-expanded': this.state.expanded,
266257
},

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ input {
3131
// @import 'externalMessagesStatus';
3232
// @import 'iconPicker';
3333
// @import 'modalDialog';
34-
// @import 'multiSelect';
34+
@import 'multiSelect';
3535
// @import 'notifications';
3636
// @import 'propertiesPanel';
3737
// @import 'organization';

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

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,37 @@
33
.expco {
44
user-select: none;
55

6+
&.form-control {
7+
display: flex;
8+
9+
.expco-title {
10+
flex-grow: 1;
11+
}
12+
}
13+
614
.expco-expand.action-btn {
715
top: 10px;
816
}
917

1018
.expco-body .expco-item {
11-
.action-btn {
12-
position: static;
13-
14-
.checkbox {
15-
.checkbox-checked,
16-
.checkbox-unchecked {
17-
top: -3px;
18-
}
19-
}
20-
}
19+
margin: 0.5rem;
20+
21+
display: flex;
22+
23+
// .action-btn {
24+
// position: static;
25+
26+
// .checkbox {
27+
// .checkbox-checked,
28+
// .checkbox-unchecked {
29+
// top: -3px;
30+
// }
31+
// }
32+
// }
2133
}
2234

2335
.expco-title.focusable-main {
24-
&.placeholder {
36+
&.title-placeholder {
2537
color: #bbb;
2638
}
2739
}

‎packages/webui/src/client/ui/Settings/RundownLayoutEditor.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -577,11 +577,11 @@ const RundownLayoutEditorContent = withTranslation()(
577577
<tbody>{this.renderItems()}</tbody>
578578
</table>
579579
<div className="my-1 mx-2">
580-
<button className="btn btn-primary" onClick={this.onAddLayout}>
580+
<button className="btn btn-primary mx-1" onClick={this.onAddLayout}>
581581
<FontAwesomeIcon icon={faPlus} />
582582
</button>
583583
<UploadButton
584-
className="btn btn-secondary mls"
584+
className="btn btn-secondary mx-1"
585585
onChange={(e) => this.onUploadFile(e)}
586586
accept="application/json,.json"
587587
>

‎packages/webui/src/client/ui/Settings/ShowStyle/BlueprintConfiguration/SelectBlueprint.tsx‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -38,26 +38,28 @@ export function SelectBlueprint({ showStyleBase }: Readonly<SelectBlueprintProps
3838
}, [allShowStyleBlueprints])
3939

4040
return (
41-
<div className="mod mvs mhs">
42-
<label className="field">
43-
<LabelActual label={t('Blueprint')} />
41+
<label className="field">
42+
<LabelActual label={t('Blueprint')} />
43+
44+
<EditAttribute
45+
modifiedClassName="bghl"
46+
attribute="blueprintId"
47+
obj={showStyleBase}
48+
type="dropdown"
49+
options={blueprintOptions}
50+
collection={ShowStyleBases}
51+
className="input text-input input-l"
52+
/>
53+
<div>
4454
{!showStyleBase.blueprintId ? (
4555
<div className="error-notice inline">
4656
{t('Blueprint not set')} <FontAwesomeIcon icon={faExclamationTriangle} />
4757
</div>
4858
) : null}
49-
50-
<EditAttribute
51-
modifiedClassName="bghl"
52-
attribute="blueprintId"
53-
obj={showStyleBase}
54-
type="dropdown"
55-
options={blueprintOptions}
56-
collection={ShowStyleBases}
57-
className="input text-input input-l"
58-
/>
59+
</div>
60+
<div>
5961
<RedirectToBlueprintButton id={showStyleBase.blueprintId} />
60-
</label>
61-
</div>
62+
</div>
63+
</label>
6264
)
6365
}

‎packages/webui/src/client/ui/Settings/ShowStyle/BlueprintConfiguration/SelectConfigPreset.tsx‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,21 @@ export function SelectConfigPreset({ showStyleBase }: Readonly<SelectConfigPrese
4343
}, [blueprint?.showStyleConfigPresets])
4444

4545
return (
46-
<div className="mod mvs mhs">
47-
<label className="field">
48-
<LabelActual label={t('Blueprint config preset')} />
46+
<label className="field">
47+
<LabelActual label={t('Blueprint config preset')} />
48+
49+
<EditAttribute
50+
modifiedClassName="bghl"
51+
attribute="blueprintConfigPresetId"
52+
obj={showStyleBase}
53+
type="dropdown"
54+
options={configPresetOptions}
55+
mutateDisplayValue={(v) => v || ''}
56+
mutateUpdateValue={(v) => (v === '' ? undefined : v)}
57+
collection={ShowStyleBases}
58+
className="input text-input input-l"
59+
/>
60+
<div>
4961
{!showStyleBase.blueprintConfigPresetId && (
5062
<div className="error-notice inline">
5163
{t('Blueprint config preset not set')} <FontAwesomeIcon icon={faExclamationTriangle} />
@@ -56,18 +68,7 @@ export function SelectConfigPreset({ showStyleBase }: Readonly<SelectConfigPrese
5668
{t('Blueprint config preset is missing')} <FontAwesomeIcon icon={faExclamationTriangle} />
5769
</div>
5870
)}
59-
<EditAttribute
60-
modifiedClassName="bghl"
61-
attribute="blueprintConfigPresetId"
62-
obj={showStyleBase}
63-
type="dropdown"
64-
options={configPresetOptions}
65-
mutateDisplayValue={(v) => v || ''}
66-
mutateUpdateValue={(v) => (v === '' ? undefined : v)}
67-
collection={ShowStyleBases}
68-
className="input text-input input-l"
69-
/>
70-
</label>
71-
</div>
71+
</div>
72+
</label>
7273
)
7374
}

‎packages/webui/src/client/ui/Settings/ShowStyle/BlueprintConfiguration/index.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,13 +59,23 @@ export function ShowStyleBaseBlueprintConfigurationSettings(
5959
<>
6060
<h2 className="my-4">{t('Blueprint Configuration')}</h2>
6161

62-
<SelectBlueprint showStyleBase={props.showStyleBase} />
63-
<SelectConfigPreset showStyleBase={props.showStyleBase} />
62+
<div className="properties-grid">
63+
<SelectBlueprint showStyleBase={props.showStyleBase} />
64+
<SelectConfigPreset showStyleBase={props.showStyleBase} />
6465

65-
<p>
66-
{t('Upgrade Status')}: {statusMessage}
67-
{status && <UpgradeStatusButtons upgradeResult={status} />}
68-
</p>
66+
<label className="field">
67+
<div className="label-actual">{t('Upgrade Status')}</div>
68+
<div className="field-content">{statusMessage}</div>
69+
</label>
70+
{status && (
71+
<div className="field">
72+
<div className="label-actual"></div>
73+
<div className="field-content">
74+
<UpgradeStatusButtons upgradeResult={status} />
75+
</div>
76+
</div>
77+
)}
78+
</div>
6979

7080
{!status || status.pendingRunOfFixupFunction ? (
7181
!status ? (

‎packages/webui/src/client/ui/Settings/ShowStyle/Generic.tsx‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -20,31 +20,35 @@ export function ShowStyleGenericProperties({
2020
const { t } = useTranslation()
2121

2222
return (
23-
<div>
24-
<div>
25-
<label className="field">
26-
<LabelActual label={t('Show Style Base Name')} />
23+
<div className="properties-grid">
24+
<h2 className="my-4">{t('Generic Properties')}</h2>
25+
26+
<label className="field">
27+
<LabelActual label={t('Show Style Base Name')} />
28+
29+
<div className="field-content">
30+
<EditAttribute
31+
modifiedClassName="bghl"
32+
attribute="name"
33+
obj={showStyleBase}
34+
type="text"
35+
collection={ShowStyleBases}
36+
className="mdinput"
37+
></EditAttribute>
38+
</div>
39+
<div></div>
40+
<div>
2741
{!showStyleBase?.name ? (
2842
<div className="error-notice inline">
2943
<FontAwesomeIcon icon={faExclamationTriangle} /> {t('No name set')}
3044
</div>
3145
) : null}
32-
<div className="mdi">
33-
<EditAttribute
34-
modifiedClassName="bghl"
35-
attribute="name"
36-
obj={showStyleBase}
37-
type="text"
38-
collection={ShowStyleBases}
39-
className="mdinput"
40-
></EditAttribute>
41-
<span className="mdfx"></span>
42-
</div>
43-
</label>
44-
</div>
45-
<div>
46-
<p className="mod mhn mvs">{t('Compatible Studios:')}</p>
47-
<p className="mod mhn mvs">
46+
</div>
47+
</label>
48+
49+
<div className="field">
50+
<LabelActual label={t('Compatible Studios')} />
51+
<div className="field-content">
4852
{compatibleStudios.length > 0
4953
? compatibleStudios.map((i) => (
5054
<span key={unprotectString(i._id)} className="pill">
@@ -54,7 +58,7 @@ export function ShowStyleGenericProperties({
5458
</span>
5559
))
5660
: t('This Show Style is not compatible with any Studio')}
57-
</p>
61+
</div>
5862
</div>
5963
</div>
6064
)

0 commit comments

Comments
 (0)