Skip to content

Commit d3b554d

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

File tree

7 files changed

+73
-59
lines changed

7 files changed

+73
-59
lines changed

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
@import 'colorScheme';
22

3+
.grid-buttons-right {
4+
display: grid;
5+
grid-template-columns: 1fr auto;
6+
7+
button {
8+
align-self: start;
9+
margin: 0.25rem;
10+
}
11+
}
12+
313
.settings-menu {
414
.settings-menu__settings-menu-item {
515
display: block;

‎packages/webui/src/client/ui/Settings/Studio/PackageManager/AccessorTableRow.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { TextInputControl } from '../../../../lib/Components/TextInput'
1717
import { DropdownInputControl, getDropdownInputOptions } from '../../../../lib/Components/DropdownInput'
1818
import { OverrideOpHelper, WrappedOverridableItemNormal } from '../../util/OverrideOpHelper'
1919
import { CheckboxControl } from '../../../../lib/Components/Checkbox'
20+
import Button from 'react-bootstrap/Button'
2021

2122
interface AccessorTableRowProps {
2223
packageContainer: WrappedOverridableItemNormal<StudioPackageContainer>
@@ -529,10 +530,10 @@ export function AccessorTableRow({
529530
{(value, handleUpdate) => <CheckboxControl value={!!value} handleUpdate={handleUpdate} />}
530531
</LabelAndOverridesForCheckbox>
531532
</div>
532-
<div className="mod">
533-
<button className="btn btn-primary right" onClick={() => toggleExpanded(accessorId)}>
533+
<div className="text-end">
534+
<Button variant="primary" onClick={() => toggleExpanded(accessorId)}>
534535
<FontAwesomeIcon icon={faCheck} />
535-
</button>
536+
</Button>
536537
</div>
537538
</td>
538539
</tr>

‎packages/webui/src/client/ui/Settings/Studio/PackageManager/PackageContainers.tsx‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -138,27 +138,29 @@ export function PackageContainersTable({
138138
return (
139139
<>
140140
<table className="table expando settings-studio-package-containers-table">
141-
{packageContainersFromOverrides.map(
142-
(packageContainer: WrappedOverridableItem<StudioPackageContainer>): React.JSX.Element =>
143-
packageContainer.type == 'normal' ? (
144-
<PackageContainerRow
145-
key={packageContainer.id}
146-
studio={studio}
147-
packageContainer={packageContainer}
148-
overrideHelper={overrideHelper}
149-
toggleExpanded={toggleExpanded}
150-
isExpanded={isExpanded}
151-
confirmRemovePackageContainer={confirmRemovePackageContainer}
152-
confirmReset={confirmReset}
153-
/>
154-
) : (
155-
<PackageContainerDeletedRow
156-
key={packageContainer.id}
157-
packageContainer={packageContainer}
158-
overrideHelper={overrideHelper}
159-
/>
160-
)
161-
)}
141+
<tbody>
142+
{packageContainersFromOverrides.map(
143+
(packageContainer: WrappedOverridableItem<StudioPackageContainer>): React.JSX.Element =>
144+
packageContainer.type == 'normal' ? (
145+
<PackageContainerRow
146+
key={packageContainer.id}
147+
studio={studio}
148+
packageContainer={packageContainer}
149+
overrideHelper={overrideHelper}
150+
toggleExpanded={toggleExpanded}
151+
isExpanded={isExpanded}
152+
confirmRemovePackageContainer={confirmRemovePackageContainer}
153+
confirmReset={confirmReset}
154+
/>
155+
) : (
156+
<PackageContainerDeletedRow
157+
key={packageContainer.id}
158+
packageContainer={packageContainer}
159+
overrideHelper={overrideHelper}
160+
/>
161+
)
162+
)}
163+
</tbody>
162164
</table>
163165
<div className="my-1 mx-2">
164166
<button className="btn btn-primary" onClick={addNewPackageContainer}>

‎packages/webui/src/client/ui/Settings/Studio/PackageManager/index.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,15 @@ export function StudioPackageManagerSettings({ studio }: StudioPackageManagerSet
2121
)
2222

2323
return (
24-
<div>
25-
<h2 className="mhn mbs">{t('Package Manager')}</h2>
24+
<div className="settings-studio-package-containers">
25+
<h2 className="my-4">{t('Package Manager')}</h2>
2626

27-
<div className="settings-studio-package-containers">
28-
<h3 className="mhn">{t('Studio Settings')}</h3>
27+
<h3 className="my-2">{t('Studio Settings')}</h3>
2928

30-
<PackageContainersPickers studio={studio} packageContainersFromOverrides={packageContainersFromOverrides} />
29+
<PackageContainersPickers studio={studio} packageContainersFromOverrides={packageContainersFromOverrides} />
3130

32-
<h3 className="mhn">{t('Package Containers')}</h3>
33-
<PackageContainersTable studio={studio} packageContainersFromOverrides={packageContainersFromOverrides} />
34-
</div>
31+
<h3 className="my-2">{t('Package Containers')}</h3>
32+
<PackageContainersTable studio={studio} packageContainersFromOverrides={packageContainersFromOverrides} />
3533
</div>
3634
)
3735
}

‎packages/webui/src/client/ui/Settings/Studio/Routings/RouteSetAbPlayers.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,14 @@ export function RouteSetAbPlayers({ routeSet, overrideHelper }: Readonly<RouteSe
5353

5454
return (
5555
<>
56-
<h4 className="mod mhs">{t('AB Playout devices')}</h4>
57-
<p className="text-s dimmed field-hint mhs">
56+
<h4 className="my-2">{t('AB Playout devices')}</h4>
57+
<p className="text-s dimmed field-hint my-2">
5858
{t(
5959
'Any AB Playout devices here will only be active when this or another RouteSet that includes them is active'
6060
)}
6161
</p>
6262
{routeSet.computed.abPlayers.length === 0 ? (
63-
<p className="text-s dimmed field-hint mhs">{t('There are no AB Playout devices set up yet')}</p>
63+
<p className="text-s dimmed field-hint my-2">{t('There are no AB Playout devices set up yet')}</p>
6464
) : (
6565
routeSet.computed.abPlayers.map((route, index) => (
6666
<AbPlayerRow
@@ -109,10 +109,7 @@ function AbPlayerRow({
109109
)
110110

111111
return (
112-
<div className="route-sets-editor mod pan mas">
113-
<button className="action-btn right mod man pas" onClick={confirmRemoveRouteLocal}>
114-
<FontAwesomeIcon icon={faTrash} />
115-
</button>
112+
<div className="route-sets-editor card m-2 p-2 grid-buttons-right">
116113
<div className="properties-grid">
117114
<LabelAndOverrides
118115
label={t('Pool name')}
@@ -145,6 +142,9 @@ function AbPlayerRow({
145142
)}
146143
</LabelAndOverrides>
147144
</div>
145+
<button className="action-btn" onClick={confirmRemoveRouteLocal}>
146+
<FontAwesomeIcon icon={faTrash} />
147+
</button>
148148
</div>
149149
)
150150
}

‎packages/webui/src/client/ui/Settings/Studio/Routings/RouteSets.tsx‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ import {
5151
import { Studios } from '../../../../collections'
5252
import { useToggleExpandHelper } from '../../../util/useToggleExpandHelper'
5353
import { RouteSetAbPlayers } from './RouteSetAbPlayers'
54+
import Button from 'react-bootstrap/esm/Button'
5455

5556
interface RouteSetsTable {
5657
studio: DBStudio
@@ -386,45 +387,47 @@ function RouteSetRow({
386387
studioMappings={studioMappings}
387388
/>
388389
<div className="my-1 mx-2">
389-
<button className="btn btn-secondary" onClick={() => addNewRouteInSet(routeSet.id)}>
390+
<Button variant="outline-secondary" onClick={() => addNewRouteInSet(routeSet.id)}>
390391
<FontAwesomeIcon icon={faPlus} />
391-
</button>
392+
</Button>
392393
&nbsp;
393394
{routeSet.defaults && (
394-
<button
395-
className="btn btn-primary"
395+
<Button
396+
variant="primary"
396397
onClick={resyncRoutesTable}
397398
title="Reset to default"
398399
disabled={!routesIsOverridden}
399400
>
400401
{t('Reset')}
401402
&nbsp;
402403
<FontAwesomeIcon icon={faSync} />
403-
</button>
404+
</Button>
404405
)}
405406
</div>
406407
<RouteSetAbPlayers routeSet={routeSet} overrideHelper={overrideHelper} />
407408
<div className="my-1 mx-2">
408-
<button className="btn btn-secondary" onClick={() => addNewAbPlayerInSet(routeSet.id)}>
409+
<Button variant="outline-secondary" onClick={() => addNewAbPlayerInSet(routeSet.id)}>
409410
<FontAwesomeIcon icon={faPlus} />
410-
</button>
411+
</Button>
411412
&nbsp;
412413
{routeSet.defaults && (
413-
<button
414-
className="btn btn-primary"
414+
<Button
415+
variant="primary"
415416
onClick={resyncAbPlayerTable}
416417
title="Reset to default"
417418
disabled={!abPlayerIsOverridden}
418419
>
419420
{t('Reset')}
420421
&nbsp;
421422
<FontAwesomeIcon icon={faSync} />
422-
</button>
423+
</Button>
423424
)}
424425
</div>
425-
<button className="btn btn-primary right" onClick={() => toggleExpanded(routeSet.id)}>
426-
<FontAwesomeIcon icon={faCheck} />
427-
</button>
426+
<div className="text-end">
427+
<Button variant="primary" onClick={() => toggleExpanded(routeSet.id)}>
428+
<FontAwesomeIcon icon={faCheck} />
429+
</Button>
430+
</div>
428431
</td>
429432
</tr>
430433
)}
@@ -587,10 +590,7 @@ function RenderRoutesRow({
587590
const confirmRemoveRouteLocal = React.useCallback(() => confirmRemoveRoute(route), [confirmRemoveRoute, route])
588591

589592
return (
590-
<div className="route-sets-editor mod pan mas">
591-
<button className="action-btn right mod man pas" onClick={confirmRemoveRouteLocal}>
592-
<FontAwesomeIcon icon={faTrash} />
593-
</button>
593+
<div className="route-sets-editor card m-2 p-2 grid-buttons-right">
594594
<div className="properties-grid">
595595
<LabelAndOverridesForDropdown
596596
label={t('Original Layer')}
@@ -723,6 +723,9 @@ function RenderRoutesRow({
723723
</>
724724
) : null}
725725
</div>
726+
<button className="action-btn" onClick={confirmRemoveRouteLocal}>
727+
<FontAwesomeIcon icon={faTrash} />
728+
</button>
726729
</div>
727730
)
728731
}

‎packages/webui/src/client/ui/Settings/Studio/Routings/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export function StudioRoutings({
4141

4242
return (
4343
<div>
44-
<h2 className="mhn mbs">{t('Route Sets')}</h2>
44+
<h2 className="my-4">{t('Route Sets')}</h2>
4545
{!manifest && <span>{t('Add a playout device to the studio in order to configure the route sets')}</span>}
4646
{manifest && (
4747
<>
@@ -50,13 +50,13 @@ export function StudioRoutings({
5050
'Controls for exposed Route Sets will be displayed to the producer within the Rundown View in the Switchboard.'
5151
)}
5252
</p>
53-
<h3 className="mhn">{t('Exclusivity Groups')}</h3>
53+
<h3 className="my-2">{t('Exclusivity Groups')}</h3>
5454
<ExclusivityGroupsTable
5555
studio={studio}
5656
routeSetsFromOverrides={routeSetsFromOverrides}
5757
exclusivityGroupsFromOverrides={exclusivityGroupsFromOverrides}
5858
/>
59-
<h3 className="mhn">{t('Route Sets')}</h3>
59+
<h3 className="my-2">{t('Route Sets')}</h3>
6060
<RouteSetsTable
6161
studio={studio}
6262
routeSetsFromOverrides={routeSetsFromOverrides}

0 commit comments

Comments
 (0)