Skip to content

Commit 4cdcff2

Browse files
JulusianJulusian
committed
wip: status pages
1 parent 1e1fb79 commit 4cdcff2

17 files changed

+162
-112
lines changed

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

+13-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import classNames from 'classnames'
22
import { useMemo, useState } from 'react'
3+
import Button from 'react-bootstrap/Button'
34

45
/**
56
* pretty-prints JSON content, and collapses it if it's too long.
@@ -55,7 +56,9 @@ export function CollapseJSON({ json }: { json: string }): JSX.Element {
5556
<>
5657
{originalString}
5758
<div className="collapse-json__tools">
58-
<button
59+
<Button
60+
variant="light"
61+
size="sm"
5962
key={'collapse'}
6063
className="collapse-json__copy"
6164
tabIndex={0}
@@ -65,8 +68,10 @@ export function CollapseJSON({ json }: { json: string }): JSX.Element {
6568
}}
6669
>
6770
Copy
68-
</button>
69-
<button
71+
</Button>
72+
<Button
73+
variant="light"
74+
size="sm"
7075
key={'collapse'}
7176
className="collapse-json__collapser"
7277
tabIndex={0}
@@ -76,14 +81,16 @@ export function CollapseJSON({ json }: { json: string }): JSX.Element {
7681
}}
7782
>
7883
⮥
79-
</button>
84+
</Button>
8085
</div>
8186
</>
8287
) : (
8388
<>
8489
{originalString.substring(0, Math.min(indexOf5thLine || 100, 100))}
8590
<div className="collapse-json__tools">
86-
<button
91+
<Button
92+
variant="light"
93+
size="sm"
8794
key={'expand'}
8895
className="collapse-json__collapser"
8996
tabIndex={0}
@@ -93,7 +100,7 @@ export function CollapseJSON({ json }: { json: string }): JSX.Element {
93100
}}
94101
>
95102
…
96-
</button>
103+
</Button>
97104
</div>
98105
</>
99106
)

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

+8-7
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
66
import { faChevronRight, faChevronLeft } from '@fortawesome/free-solid-svg-icons'
77
import { Time } from './tempLib'
88
import { useTranslation } from 'react-i18next'
9+
import Button from 'react-bootstrap/Button'
910

1011
export function DatePickerFromTo({
1112
from,
@@ -67,18 +68,18 @@ export function DatePickerFromTo({
6768

6869
return (
6970
<div className="datepicker-from-to">
70-
<button className="action-btn mod mhm" onClick={onClickPrevious}>
71+
<Button variant="link" className="action-btn mx-2 my-4" onClick={onClickPrevious}>
7172
<FontAwesomeIcon icon={faChevronLeft} />
72-
</button>
73-
<label className="mod mhs mvn">
73+
</Button>
74+
<label className="mod mx-2 my-0">
7475
{t('From')}
7576
<div className="picker expco">
7677
<DatePicker
7778
dateFormat="yyyy-MM-dd HH:mm"
7879
showTimeInput
7980
selected={localFrom}
8081
onChange={handleChangeFrom}
81-
className="expco-title"
82+
className="form-control"
8283
/>
8384
</div>
8485
</label>
@@ -90,13 +91,13 @@ export function DatePickerFromTo({
9091
showTimeInput
9192
selected={localTo}
9293
onChange={handleChangeTo}
93-
className="expco-title"
94+
className="form-control"
9495
/>
9596
</div>
9697
</label>
97-
<button className="action-btn mod mhm" onClick={onClickNext}>
98+
<Button variant="link" className="action-btn mx-2 my-4" onClick={onClickNext}>
9899
<FontAwesomeIcon icon={faChevronRight} />
99-
</button>
100+
</Button>
100101
</div>
101102
)
102103
}

‎packages/webui/src/client/styles/bootstrap-customise.scss

+2
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,5 @@ $font-weight-base: 300; // lighter
99
$navbar-brand-font-size: 1rem;
1010

1111
$line-height-base: 1.2;
12+
13+
$input-padding-y: 0.5rem;

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

+48-7
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,11 @@ input {
1111
@use 'fonts';
1212

1313
@use 'defaultColors';
14-
@use 'itemTypeColors';
1514

1615
@use 'bootstrap';
1716

17+
@import 'itemTypeColors';
18+
1819
@import 'colorScheme';
1920
@import '_variables';
2021
@import '_colorScheme';
@@ -25,7 +26,7 @@ input {
2526
// @import 'collapseJSON';
2627
// @import 'colorPicker';
2728
// @import 'contextMenu';
28-
// @import 'datePicker';
29+
@import 'datePicker';
2930
// @import 'editAttribute';
3031
// @import 'externalMessagesStatus';
3132
// @import 'iconPicker';
@@ -45,7 +46,7 @@ input {
4546
// @import 'statusNotification';
4647
// @import 'studioScreenSaver';
4748
// @import 'supportAndSwitchboardPanel';
48-
// @import 'systemStatus';
49+
@import 'systemStatus';
4950
@import 'testtools';
5051
// @import 'tooltips';
5152
// @import 'utils';
@@ -94,10 +95,10 @@ input {
9495
// @import '../ui/Settings/components/triggeredActions/TriggeredActionsEditor.scss';
9596
// @import '../ui/Settings/Forms.scss';
9697
// @import '../ui/SegmentTimeline/SegmentTimeline.scss';
97-
// @import '../ui/Status/media-status/MediaStatusListItem.scss';
98-
// @import '../ui/Status/media-status/MediaStatusList.scss';
99-
// @import '../ui/Status/media-status/MediaStatusListHeader.scss';
100-
// @import '../ui/Status/package-status/package-status.scss';
98+
@import '../ui/Status/media-status/MediaStatusListItem.scss';
99+
@import '../ui/Status/media-status/MediaStatusList.scss';
100+
@import '../ui/Status/media-status/MediaStatusListHeader.scss';
101+
@import '../ui/Status/package-status/package-status.scss';
101102
// @import '../ui/SegmentList/LinePartPieceIndicator/LinePartPieceIndicator.scss';
102103
// @import '../ui/SegmentList/LinePartPieceIndicator/PieceIndicatorMenu.scss';
103104
// @import '../ui/SegmentList/SegmentList.scss';
@@ -227,13 +228,53 @@ center,
227228
font-weight: 300;
228229
}
229230

231+
header {
232+
font-weight: 700;
233+
}
234+
230235
.flex-row {
231236
display: flex;
232237
justify-content: flex-start;
233238
align-items: flex-start;
234239
flex-direction: row;
235240
}
236241

242+
.action-btn {
243+
cursor: pointer;
244+
background: transparent;
245+
color: #636363;
246+
border: none;
247+
display: inline-block;
248+
padding: 0;
249+
text-decoration: none;
250+
vertical-align: baseline;
251+
transition: color 0.2s;
252+
}
253+
.action-btn .icon {
254+
fill: #737373;
255+
}
256+
257+
.dimmed,
258+
:link .dimmed,
259+
:visited .dimmed {
260+
color: #9f9f9f;
261+
}
262+
263+
.pill {
264+
background: #252627;
265+
border: 1px solid #252627;
266+
border-radius: 1rem;
267+
color: #ffffff;
268+
display: inline-block;
269+
line-height: 2;
270+
margin: -4px 10px -4px 0;
271+
padding: 0 0.5rem;
272+
273+
a:not(:hover) {
274+
text-decoration: none;
275+
}
276+
}
277+
237278
// .checkbox {
238279
// vertical-align: top;
239280

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

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
2-
.status-dialog {
3-
overflow: visible !important;
4-
}
5-
61
.system-status {
72
.device-item-container {
83
.children {
@@ -269,6 +264,12 @@
269264
}
270265
}
271266

267+
.user-action-log__pickers {
268+
display: grid;
269+
grid-template-columns: 1fr auto;
270+
align-items: center;
271+
}
272+
272273
.media-manager-status {
273274
.workflow {
274275
background: #ffffff;

‎packages/webui/src/client/ui/Status.tsx

+21-29
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { MeteorPubSub } from '@sofie-automation/meteor-lib/dist/api/pubsub'
1010
import { ExpectedPackagesStatus } from './Status/package-status'
1111
import { MediaStatus } from './Status/media-status'
1212
import { CorelibPubSub } from '@sofie-automation/corelib/dist/pubsub'
13+
import Row from 'react-bootstrap/Row'
14+
import Col from 'react-bootstrap/Col'
1315

1416
interface IStatusMenuProps {
1517
match?: any
@@ -75,35 +77,25 @@ export default function Status(props: Readonly<IStatusProps>): JSX.Element {
7577
useSubscription(CorelibPubSub.showStyleVariants, null, null)
7678

7779
return (
78-
<div className="mx-5 mt-5 has-statusbar">
79-
{/* <header className='mvs'>
80-
<h1>{t('Status')}</h1>
81-
</header> */}
82-
<div className="mod mvl mhs">
83-
<div className="flex-row hide-m-up">
84-
<div className="flex-col c12 rm-c1 status-menu">
85-
<StatusMenu match={props.match} />
86-
</div>
87-
</div>
88-
<div className="flex-row">
89-
<div className="flex-col c12 rm-c1 show-m-up status-menu">
90-
<StatusMenu match={props.match} />
91-
</div>
92-
<div className="flex-col c12 rm-c11 status-dialog">
93-
<Switch>
94-
{/* <Route path='/status' exact component={WelcomeToStatus} /> */}
95-
<Route path="/status/messages" component={ExternalMessages} />
96-
<Route path="/status/media" component={MediaStatus} />
97-
<Route path="/status/media-legacy" component={MediaManagerStatus} />
98-
<Route path="/status/expected-packages" component={ExpectedPackagesStatus} />
99-
<Route path="/status/system" component={SystemStatus} />
100-
<Route path="/status/userLog" component={UserActivity} />
101-
<Route path="/status/evaluations" component={EvaluationView} />
102-
<Redirect to="/status/system" />
103-
</Switch>
104-
</div>
105-
</div>
106-
</div>
80+
<div className="mt-5 mx-5 has-statusbar">
81+
<Row>
82+
<Col xs={12} sm={4} md={3} lg={2}>
83+
<StatusMenu match={props.match} />
84+
</Col>
85+
<Col xs={12} sm={8} md={9} lg={10}>
86+
<Switch>
87+
{/* <Route path='/status' exact component={WelcomeToStatus} /> */}
88+
<Route path="/status/messages" component={ExternalMessages} />
89+
<Route path="/status/media" component={MediaStatus} />
90+
<Route path="/status/media-legacy" component={MediaManagerStatus} />
91+
<Route path="/status/expected-packages" component={ExpectedPackagesStatus} />
92+
<Route path="/status/system" component={SystemStatus} />
93+
<Route path="/status/userLog" component={UserActivity} />
94+
<Route path="/status/evaluations" component={EvaluationView} />
95+
<Redirect to="/status/system" />
96+
</Switch>
97+
</Col>
98+
</Row>
10799
</div>
108100
)
109101
}

‎packages/webui/src/client/ui/Status/Evaluations.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ export function EvaluationView(): JSX.Element {
4141
}, [])
4242

4343
return (
44-
<div className="mhl gutter external-message-status">
45-
<header className="mbs">
44+
<div className="mx-5">
45+
<header className="mb-2">
4646
<h1>{t('Evaluations')}</h1>
4747
</header>
4848
<div className="my-5">

‎packages/webui/src/client/ui/Status/SystemStatus/CoreItem.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { MeteorCall } from '../../../lib/meteorApi'
1111
import { hashSingleUseToken } from '../../../lib/lib'
1212
import { UserPermissionsContext } from '../../UserPermissions'
1313
import { ClientAPI } from '@sofie-automation/meteor-lib/dist/api/client'
14+
import Button from 'react-bootstrap/Button'
1415

1516
interface ICoreItemProps {
1617
systemStatus: StatusResponse | undefined
@@ -66,8 +67,8 @@ export function CoreItem({ systemStatus, coreSystem }: ICoreItemProps): JSX.Elem
6667
{(userPermissions.configure || userPermissions.developer) && (
6768
<div className="actions-container">
6869
<div className="device-item__actions">
69-
<button
70-
className="btn btn-secondary"
70+
<Button
71+
variant="outline-secondary"
7172
onClick={(e) => {
7273
e.preventDefault()
7374
e.stopPropagation()
@@ -126,7 +127,7 @@ export function CoreItem({ systemStatus, coreSystem }: ICoreItemProps): JSX.Elem
126127
}}
127128
>
128129
{t('Restart')}
129-
</button>
130+
</Button>
130131
</div>
131132
</div>
132133
)}

0 commit comments

Comments
 (0)