Skip to content

Commit ac44e84

Browse files
JulusianJulusian
committed
wip: rundown layouts
1 parent 7b3d237 commit ac44e84

File tree

5 files changed

+144
-120
lines changed

5 files changed

+144
-120
lines changed

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
}
5252

5353
&.form-select {
54-
background: none;
54+
background-image: none;
5555
}
5656

5757
&.expco-expanded:not(.expco-popper) {
@@ -79,17 +79,15 @@
7979
}
8080

8181
.expco.dropdown {
82-
position: relative;
83-
padding: 0px;
84-
8582
.expco-title {
8683
white-space: nowrap;
8784
overflow: hidden;
8885
text-overflow: ellipsis;
8986
vertical-align: middle;
90-
height: 31px;
91-
line-height: 31px;
9287
padding-right: 18px;
88+
89+
// Enforce the correct height when empty
90+
height: 1.1em;
9391
}
9492

9593
.expco-expand.action-btn {

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,22 @@
1010
}
1111
}
1212

13+
.checkbox-enable-before {
14+
display: grid;
15+
grid-template-columns: auto 1fr;
16+
column-gap: 0.25rem;
17+
18+
align-items: center;
19+
}
20+
21+
.secondary-control-after {
22+
display: grid;
23+
grid-template-columns: 1fr auto;
24+
column-gap: 0.25rem;
25+
26+
align-items: center;
27+
}
28+
1329
.settings-menu {
1430
.settings-menu__settings-menu-item {
1531
display: block;

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

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import { OutputLayers, SourceLayers } from '@sofie-automation/corelib/dist/dataM
3838
import { RundownLayouts } from '../../collections'
3939
import { LabelActual } from '../../lib/Components/LabelAndOverrides'
4040
import { withTranslation } from 'react-i18next'
41+
import Button from 'react-bootstrap/esm/Button'
4142

4243
export interface IProps {
4344
showStyleBaseId: ShowStyleBaseId
@@ -207,13 +208,10 @@ const RundownLayoutEditorContent = withTranslation()(
207208

208209
return (
209210
<React.Fragment>
210-
<h4 className="mod mhs">{t('Action Buttons')}</h4>
211+
<h4 className="my-2">{t('Action Buttons')}</h4>
211212
{item.actionButtons &&
212213
item.actionButtons.map((button, index) => (
213-
<div className="rundown-layout-editor-filter mod pan mas" key={button._id}>
214-
<button className="action-btn right mod man pas" onClick={() => this.onRemoveButton(item, button)}>
215-
<FontAwesomeIcon icon={faTrash} />
216-
</button>
214+
<div className="rundown-layout-editor-filter card m-2 p-2 grid-buttons-right" key={button._id}>
217215
<div className="properties-grid">
218216
<label className="field">
219217
<LabelActual label={t('Label')} />
@@ -300,6 +298,9 @@ const RundownLayoutEditorContent = withTranslation()(
300298
/>
301299
</label>
302300
</div>
301+
<button className="action-btn" onClick={() => this.onRemoveButton(item, button)}>
302+
<FontAwesomeIcon icon={faTrash} />
303+
</button>
303304
</div>
304305
))}
305306
</React.Fragment>
@@ -362,7 +363,7 @@ const RundownLayoutEditorContent = withTranslation()(
362363
)}
363364
{RundownLayoutsAPI.isLayoutWithFilters(item) && layout?.supportedFilters.length ? (
364365
<React.Fragment>
365-
<h4 className="mod mhs">{layout?.filtersTitle ?? t('Filters')}</h4>
366+
<h4 className="my-2">{layout?.filtersTitle ?? t('Filters')}</h4>
366367
{item.filters.length === 0 ? (
367368
<p className="text-s dimmed field-hint mhs">{t('There are no filters set up yet')}</p>
368369
) : null}
@@ -455,36 +456,41 @@ const RundownLayoutEditorContent = withTranslation()(
455456
</div>
456457

457458
{layout?.supportedFilters.length ? (
458-
<div className="mod mls">
459-
<button className="btn btn-secondary" onClick={() => this.onAddElement(item)}>
459+
<div className="my-2">
460+
<Button variant="outline-secondary" onClick={() => this.onAddElement(item)}>
460461
<FontAwesomeIcon icon={faPlus} />
461462
&nbsp;
462463
{layout?.filtersTitle
463464
? t('Add {{filtersTitle}}', { filtersTitle: layout?.filtersTitle })
464465
: t(`Add filter`)}
465-
</button>
466+
</Button>
466467
</div>
467468
) : null}
468469
{item.type === RundownLayoutType.DASHBOARD_LAYOUT ? (
469470
<>
470471
<div>{RundownLayoutsAPI.isDashboardLayout(item) ? this.renderActionButtons(item) : null}</div>
471-
<div className="mod mls">
472-
<button className="btn btn-primary right" onClick={() => this.finishEditItem(item)}>
473-
<FontAwesomeIcon icon={faCheck} />
474-
</button>
475-
<button className="btn btn-secondary" onClick={() => this.onAddButton(item)}>
476-
<FontAwesomeIcon icon={faPlus} />
477-
&nbsp;
478-
{t('Add button')}
479-
</button>
472+
<div className="my-2 grid-buttons-right">
473+
<div>
474+
<Button variant="outline-secondary" className="mx-1" onClick={() => this.onAddButton(item)}>
475+
<FontAwesomeIcon icon={faPlus} />
476+
&nbsp;
477+
{t('Add button')}
478+
</Button>
479+
</div>
480+
481+
<div>
482+
<Button variant="primary" className="mx-1" onClick={() => this.finishEditItem(item)}>
483+
<FontAwesomeIcon icon={faCheck} />
484+
</Button>
485+
</div>
480486
</div>
481487
</>
482488
) : (
483489
<>
484-
<div className="mod mls">
485-
<button className="btn btn-primary right" onClick={() => this.finishEditItem(item)}>
490+
<div className="my-2 text-end">
491+
<Button variant="primary" onClick={() => this.finishEditItem(item)}>
486492
<FontAwesomeIcon icon={faCheck} />
487-
</button>
493+
</Button>
488494
</div>
489495
</>
490496
)}
@@ -577,11 +583,11 @@ const RundownLayoutEditorContent = withTranslation()(
577583
<tbody>{this.renderItems()}</tbody>
578584
</table>
579585
<div className="my-1 mx-2">
580-
<button className="btn btn-primary mx-1" onClick={this.onAddLayout}>
586+
<Button variant="primary" className="mx-1" onClick={this.onAddLayout}>
581587
<FontAwesomeIcon icon={faPlus} />
582-
</button>
588+
</Button>
583589
<UploadButton
584-
className="btn btn-secondary mx-1"
590+
className="btn btn-outline-secondary mx-1"
585591
onChange={(e) => this.onUploadFile(e)}
586592
accept="application/json,.json"
587593
>

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { UploadButton } from '../../../lib/uploadButton'
1414
import _ from 'underscore'
1515
import { ShowStyleBases } from '../../../collections'
1616
import { LabelActual } from '../../../lib/Components/LabelAndOverrides'
17+
import Button from 'react-bootstrap/esm/Button'
1718

1819
interface IHotkeyLegendSettingsProps {
1920
showStyleBase: DBShowStyleBase
@@ -210,9 +211,9 @@ export const HotkeyLegendSettings = withTranslation()(
210211
</label>
211212
</div>
212213
<div className="m-1 me-2 text-end">
213-
<button className="btn btn-primary" onClick={() => this.finishEditItem(item)}>
214+
<Button variant="primary" onClick={() => this.finishEditItem(item)}>
214215
<FontAwesomeIcon icon={faCheck} />
215-
</button>
216+
</Button>
216217
</div>
217218
</td>
218219
</tr>
@@ -231,16 +232,16 @@ export const HotkeyLegendSettings = withTranslation()(
231232
<tbody>{this.renderItems()}</tbody>
232233
</table>
233234
<div className="my-1 mx-2">
234-
<button className="btn btn-primary" onClick={this.onAddHotkeyLegend}>
235+
<Button variant="primary" className="mx-1" onClick={this.onAddHotkeyLegend}>
235236
<FontAwesomeIcon icon={faPlus} />
236-
</button>
237+
</Button>
237238

238-
<button className="btn mls btn-secondary" onClick={() => this.exportHotkeyJSON()}>
239+
<Button variant="outline-secondary" className="mx-1" onClick={() => this.exportHotkeyJSON()}>
239240
<FontAwesomeIcon icon={faDownload} />
240241
&nbsp;{t('Export')}
241-
</button>
242+
</Button>
242243
<UploadButton
243-
className="btn mls btn-secondary"
244+
className="btn btn-outline-secondary mx-1"
244245
accept="application/json,.json"
245246
onChange={(e) => this.importHotKeyJSON(e)}
246247
key={this.state.uploadFileKey}

0 commit comments

Comments
 (0)