Skip to content

Commit bc4fd37

Browse files
JulusianJulusian
committed
wip: studio settings
1 parent 4cdf69e commit bc4fd37

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+323
-275
lines changed

‎packages/webui/src/client/lib/Components/Checkbox.tsx‎

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
import { faCheckSquare, faSquare } from '@fortawesome/free-solid-svg-icons'
2-
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
31
import React, { useCallback } from 'react'
4-
import ClassNames from 'classnames'
2+
import Form from 'react-bootstrap/Form'
53

64
interface ICheckboxControlProps {
75
classNames?: string
@@ -26,21 +24,13 @@ export function CheckboxControl({
2624
)
2725

2826
return (
29-
<span className={ClassNames('checkbox', classNames)}>
30-
<input
31-
type="checkbox"
32-
className="form-control"
33-
checked={value}
34-
onChange={handleChange}
35-
disabled={disabled}
36-
title={title}
37-
/>
38-
<span className="checkbox-checked" title={title}>
39-
<FontAwesomeIcon icon={faCheckSquare} />
40-
</span>
41-
<span className="checkbox-unchecked" title={title}>
42-
<FontAwesomeIcon icon={faSquare} />
43-
</span>
44-
</span>
27+
<Form.Check
28+
type="checkbox"
29+
className={classNames}
30+
checked={value}
31+
onChange={handleChange}
32+
disabled={disabled}
33+
title={title}
34+
/>
4535
)
4636
}

‎packages/webui/src/client/lib/Components/FloatInput.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useCallback, useState } from 'react'
22
import ClassNames from 'classnames'
3+
import Form from 'react-bootstrap/Form'
34

45
interface IFloatInputControlProps {
56
classNames?: string
@@ -79,7 +80,7 @@ export function FloatInputControl({
7980
if (showValue === undefined || isNaN(Number(showValue))) showValue = ''
8081

8182
return (
82-
<input
83+
<Form.Control
8384
type="number"
8485
step={step ?? 0.1}
8586
min={min}

‎packages/webui/src/client/lib/Components/IntInput.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useCallback, useState } from 'react'
22
import ClassNames from 'classnames'
3+
import Form from 'react-bootstrap/Form'
34

45
interface IIntInputControlProps {
56
classNames?: string
@@ -79,7 +80,7 @@ export function IntInputControl({
7980
if (showValue === undefined || isNaN(Number(showValue))) showValue = ''
8081

8182
return (
82-
<input
83+
<Form.Control
8384
type="number"
8485
step={step ?? 1}
8586
min={min}

‎packages/webui/src/client/lib/Components/LabelAndOverrides.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { faSync } from '@fortawesome/free-solid-svg-icons'
1+
import { faQuestionCircle, faSync } from '@fortawesome/free-solid-svg-icons'
22
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
33
import { objectPathGet } from '@sofie-automation/corelib/dist/lib'
44
import React, { useCallback } from 'react'
@@ -7,6 +7,7 @@ import { ReadonlyDeep } from 'type-fest'
77
import { OverrideOpHelperForItemContents, WrappedOverridableItemNormal } from '../../ui/Settings/util/OverrideOpHelper'
88
import { DropdownInputOption, findOptionByValue } from './DropdownInput'
99
import { hasOpWithPath } from './util'
10+
import Button from 'react-bootstrap/Button'
1011

1112
export interface LabelAndOverridesProps<T extends object, TValue> {
1213
label: string
@@ -77,25 +78,30 @@ export function LabelAndOverrides<T extends object, TValue = any>({
7778

7879
<div className="field-content">
7980
{showClearButton && (
80-
<button className="btn btn-primary field-clear" onClick={() => setValue(undefined)} title={t('Clear value')}>
81+
<Button
82+
variant="primary"
83+
className="field-clear"
84+
onClick={() => setValue(undefined)}
85+
title={t('Clear value')}
86+
>
8187
&nbsp;
8288
<FontAwesomeIcon icon={faSync} />
83-
</button>
89+
</Button>
8490
)}
8591

8692
{children(value, setValue)}
8793
</div>
8894

8995
{item.defaults && (
9096
<>
91-
<span>
92-
&nbsp;({t('Default')} = {displayValue})
97+
<span className="field-default">
98+
<FontAwesomeIcon icon={faQuestionCircle} title={`${t('Default')}: ${displayValue}`} />
9399
</span>
94-
<button className="btn btn-primary" onClick={clearOverride} title="Reset to default" disabled={!isOverridden}>
100+
<Button variant="primary" onClick={clearOverride} title="Reset to default" disabled={!isOverridden}>
95101
{t('Reset')}
96102
&nbsp;
97103
<FontAwesomeIcon icon={faSync} />
98-
</button>
104+
</Button>
99105
</>
100106
)}
101107

‎packages/webui/src/client/lib/Components/TextInput.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react'
22
import ClassNames from 'classnames'
33
import { DropdownInputOption } from './DropdownInput'
44
import { getRandomString } from '@sofie-automation/corelib/dist/lib'
5+
import Form from 'react-bootstrap/Form'
56

67
export type TextInputSuggestion = DropdownInputOption<string>
78
export interface TextInputSuggestionGroup {
@@ -75,9 +76,9 @@ export function TextInputControl({
7576
const fieldId = useMemo(() => getRandomString(), [])
7677

7778
const textInput = (
78-
<input
79+
<Form.Control
7980
type="text"
80-
className={ClassNames('form-control', classNames, editingValue !== null && modifiedClassName)}
81+
className={ClassNames(classNames, editingValue !== null && modifiedClassName)}
8182
placeholder={placeholder}
8283
value={editingValue ?? value ?? ''}
8384
onChange={handleChange}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ export function ModalDialog({
208208
className={ClassNames(
209209
'mod',
210210
{
211-
alright: !secondaryText,
211+
'text-end': !secondaryText,
212212
},
213213
'modal-dialog-actions'
214214
)}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import { useCallback } from 'react'
22
import { useHistory } from 'react-router-dom'
33
import { BlueprintId } from '@sofie-automation/corelib/dist/dataModel/Ids'
4+
import Button from 'react-bootstrap/Button'
45

56
export function RedirectToBlueprintButton(props: Readonly<{ id: BlueprintId | undefined }>): JSX.Element {
67
const history = useHistory()
78

89
const redirectToId = useCallback(() => history.push('/settings/showStyleBase/' + props.id), [props.id])
910

1011
return (
11-
<button className="btn btn-primary btn-add-new" onClick={redirectToId} disabled={!props.id}>
12+
<Button variant="primary" onClick={redirectToId} disabled={!props.id}>
1213
Edit Blueprint
13-
</button>
14+
</Button>
1415
)
1516
}

‎packages/webui/src/client/lib/forms/SchemaFormTable/ArrayTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ export const SchemaFormArrayTable = ({
156156
</tbody>
157157
</table>
158158

159-
<div className="mod mhs">
159+
<div className="my-1 mx-2">
160160
<button className="btn btn-primary" onClick={addNewItem}>
161161
<FontAwesomeIcon icon={faPlus} />
162162
</button>

‎packages/webui/src/client/lib/forms/SchemaFormTable/ObjectTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ export const SchemaFormObjectTable = ({
265265
</tbody>
266266
</table>
267267

268-
<div className="mod mhs">
268+
<div className="my-1 mx-2">
269269
<button className="btn btn-primary" onClick={addNewItem}>
270270
<FontAwesomeIcon icon={faPlus} />
271271
</button>

‎packages/webui/src/client/lib/forms/SchemaFormTable/TableEditRow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export function SchemaFormTableEditRow({
5454
)
5555
)}
5656
</div>
57-
<div className="mod alright">
57+
<div className="m-1 me-2 text-end">
5858
<button className={classNames('btn btn-primary')} onClick={finishEditItem}>
5959
<FontAwesomeIcon icon={faCheck} />
6060
</button>

0 commit comments

Comments
 (0)