Skip to content

Commit a2e1b15

Browse files
JulusianJulusian
committed
wip: blueprint settings
1 parent d3b554d commit a2e1b15

File tree

2 files changed

+96
-65
lines changed

2 files changed

+96
-65
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,10 @@ header {
273273

274274
a:not(:hover) {
275275
text-decoration: none;
276+
color: inherit;
277+
}
278+
a:hover {
279+
color: inherit;
276280
}
277281
}
278282

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

Lines changed: 92 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { MeteorCall } from '../../lib/meteorApi'
2020
import { BlueprintId } from '@sofie-automation/corelib/dist/dataModel/Ids'
2121
import { Blueprints, CoreSystem, ShowStyleBases, Studios } from '../../collections'
2222
import { LabelActual } from '../../lib/Components/LabelAndOverrides'
23+
import Button from 'react-bootstrap/esm/Button'
2324

2425
interface IProps {
2526
blueprintId: BlueprintId
@@ -196,9 +197,9 @@ export default translateWithTracker<IProps, IState, ITrackedProps>((props: IProp
196197
switch (blueprint.blueprintType) {
197198
case BlueprintManifestType.SHOWSTYLE:
198199
return (
199-
<div>
200-
<p className="mod mhn mvs">{t('Assigned Show Styles:')}</p>
201-
<p className="mod mhn mvs">
200+
<div className="field">
201+
<LabelActual label={t('Assigned Show Styles')} />
202+
<div className="field-content">
202203
{this.props.assignedShowStyles.length > 0
203204
? this.props.assignedShowStyles.map((showStyleBase) => (
204205
<span key={unprotectString(showStyleBase._id)} className="pill">
@@ -208,14 +209,14 @@ export default translateWithTracker<IProps, IState, ITrackedProps>((props: IProp
208209
</span>
209210
))
210211
: t('This Blueprint is not being used by any Show Style')}
211-
</p>
212+
</div>
212213
</div>
213214
)
214215
case BlueprintManifestType.STUDIO:
215216
return (
216-
<div>
217-
<p className="mod mhn mvs">{t('Assigned Studios:')}</p>
218-
<p className="mod mhn mvs">
217+
<div className="field">
218+
<LabelActual label={t('Assigned Studios')} />
219+
<div className="field-content">
219220
{this.props.assignedStudios.length > 0
220221
? this.props.assignedStudios.map((i) => (
221222
<span key={unprotectString(i._id)} className="pill">
@@ -225,24 +226,25 @@ export default translateWithTracker<IProps, IState, ITrackedProps>((props: IProp
225226
</span>
226227
))
227228
: t('This Blueprint is not compatible with any Studio')}
228-
</p>
229+
</div>
229230
</div>
230231
)
231232
case BlueprintManifestType.SYSTEM:
232233
return (
233-
<div>
234-
<p className="mod mhn mvs">
235-
<button
236-
className="btn btn-primary"
234+
<div className="field">
235+
<LabelActual label="" />
236+
<div className="field-content">
237+
<Button
238+
variant="primary"
237239
onClick={() => this.assignSystemBlueprint(this.props.assignedSystem ? undefined : blueprint._id)}
238240
>
239241
{this.props.assignedSystem ? t('Unassign') : t('Assign')}
240-
</button>
241-
</p>
242+
</Button>
243+
</div>
242244
</div>
243245
)
244246
default:
245-
return <div></div>
247+
return null
246248
}
247249
}
248250

@@ -251,60 +253,82 @@ export default translateWithTracker<IProps, IState, ITrackedProps>((props: IProp
251253

252254
return (
253255
<div className="studio-edit mod mhl mvn">
254-
<div>
255-
<div className="mod mvs mhn">
256-
{t('Blueprint ID')}: <i>{unprotectString(blueprint._id)}</i>
257-
</div>
256+
<div className="properties-grid">
257+
<label className="field">
258+
<LabelActual label={t('Blueprint ID')} />
259+
<div className="field-content">
260+
<i>{unprotectString(blueprint._id)}</i>
261+
</div>
262+
</label>
263+
258264
<label className="field">
259265
<LabelActual label={t('Blueprint Name')} />
260-
{!blueprint.name ? (
261-
<div className="error-notice inline">
262-
{t('No name set')} <FontAwesomeIcon icon={faExclamationTriangle} />
263-
</div>
264-
) : null}
265-
<div className="mdi">
266+
267+
<div className="field-content">
266268
<EditAttribute
267269
modifiedClassName="bghl"
268270
attribute="name"
269271
obj={blueprint}
270272
type="text"
271273
collection={Blueprints}
272274
className="mdinput"
273-
></EditAttribute>
274-
<span className="mdfx"></span>
275+
/>
276+
</div>
277+
<div></div>
278+
<div>
279+
{!blueprint.name ? (
280+
<div className="error-notice inline">
281+
{t('No name set')} <FontAwesomeIcon icon={faExclamationTriangle} />
282+
</div>
283+
) : null}
275284
</div>
276285
</label>
277-
<div className="mod mvs mhn">
278-
{t('Blueprint Type')}: <i>{(blueprint.blueprintType || '').toUpperCase()}</i>
279-
{!blueprint.blueprintType ? (
280-
<div className="error-notice inline">
281-
{t('Upload a new blueprint')} <FontAwesomeIcon icon={faExclamationTriangle} />
282-
</div>
283-
) : null}
284-
</div>
286+
287+
<label className="field">
288+
<LabelActual label={t('Blueprint Type')} />
289+
<div className="field-content">
290+
<i>{(blueprint.blueprintType || '').toUpperCase()}</i>
291+
</div>
292+
<div></div>
293+
<div>
294+
{!blueprint.blueprintType ? (
295+
<div className="error-notice inline">
296+
{t('Upload a new blueprint')} <FontAwesomeIcon icon={faExclamationTriangle} />
297+
</div>
298+
) : null}
299+
</div>
300+
</label>
301+
285302
{this.renderAssignment(blueprint)}
286-
<div className="mod mvs mhn">
287-
<p className="mhn">
288-
{t('Last modified')}: <Moment format="YYYY/MM/DD HH:mm:ss">{blueprint.modified}</Moment>
289-
</p>
290-
</div>
291-
{blueprint.blueprintId ? (
292-
<div className="mod mvs mhn">
293-
<p className="mhn">
294-
{t('Blueprint Id')}: {blueprint.blueprintId}
295-
</p>
303+
304+
<label className="field">
305+
<LabelActual label={t('Last modified')} />
306+
<div className="field-content">
307+
<Moment format="YYYY/MM/DD HH:mm:ss">{blueprint.modified}</Moment>
296308
</div>
309+
</label>
310+
311+
{blueprint.blueprintId ? (
312+
<label className="field">
313+
<LabelActual label={t('Blueprint Id')} />
314+
<div className="field-content">
315+
<i>{blueprint.blueprintId}</i>
316+
</div>
317+
</label>
297318
) : null}
319+
298320
{blueprint.blueprintVersion ? (
299-
<div className="mod mvs mhn">
300-
<p className="mhn">
301-
{t('Blueprint Version')}: {blueprint.blueprintVersion}
302-
</p>
303-
</div>
304-
) : null}
305-
<div className="mod mtn mbm mhn">
306321
<label className="field">
307-
<LabelActual label={t('Disable version check')} />
322+
<LabelActual label={t('Blueprint Version')} />
323+
<div className="field-content">
324+
<i>{blueprint.blueprintVersion}</i>
325+
</div>
326+
</label>
327+
) : null}
328+
329+
<label className="field">
330+
<LabelActual label={t('Disable version check')} />
331+
<div className="field-content">
308332
<EditAttribute
309333
modifiedClassName="bghl"
310334
attribute="disableVersionChecks"
@@ -313,19 +337,22 @@ export default translateWithTracker<IProps, IState, ITrackedProps>((props: IProp
313337
collection={Blueprints}
314338
className="input"
315339
/>
316-
</label>
317-
</div>
340+
</div>
341+
</label>
318342

319-
<div className="mod mvs mhn">
320-
<UploadButton
321-
className="btn btn-primary"
322-
accept="text/javascript,.js"
323-
onChange={(e) => this.onUploadFile(e)}
324-
key={this.state.uploadFileKey}
325-
>
326-
<FontAwesomeIcon icon={faUpload} />
327-
<span>{t('Upload Blueprints')}</span>
328-
</UploadButton>
343+
<div className="field">
344+
<LabelActual label="" />
345+
<div className="field-content">
346+
<UploadButton
347+
className="btn btn-primary"
348+
accept="text/javascript,.js"
349+
onChange={(e) => this.onUploadFile(e)}
350+
key={this.state.uploadFileKey}
351+
>
352+
<FontAwesomeIcon icon={faUpload} />
353+
<span>{t('Upload Blueprints')}</span>
354+
</UploadButton>
355+
</div>
329356
</div>
330357
</div>
331358
</div>

0 commit comments

Comments
 (0)