Skip to content

Commit ee09635

Browse files
JulusianJulusian
committed
wip: refine rundown view
1 parent c9ad65e commit ee09635

File tree

13 files changed

+254
-181
lines changed

13 files changed

+254
-181
lines changed

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

Lines changed: 139 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import React, { useState, ReactNode, useCallback } from 'react'
1+
import React, { ReactNode } from 'react'
22
import ClassNames from 'classnames'
3+
import { Manager, Popper, Reference } from 'react-popper'
34

45
interface IProps {
56
selectedKey: string
@@ -19,37 +20,141 @@ export function SplitDropdownItem(props: Readonly<SplitDropdownItemObj>): SplitD
1920
}
2021
}
2122

22-
export function SplitDropdown(props: Readonly<IProps>): JSX.Element {
23-
const [expanded, setExpanded] = useState(false)
24-
const toggleExpco = useCallback(() => setExpanded((oldVal) => !oldVal), [])
25-
26-
function getSelected() {
27-
const selectedChild =
28-
props.options &&
29-
Array.isArray(props.options) &&
30-
props.options.find((element) => element.key === props.selectedKey)?.node
31-
return selectedChild ? <>{selectedChild}</> : <div className="expco-item"></div>
32-
}
33-
34-
return (
35-
<div
36-
className={ClassNames(
37-
'expco button focusable subtle split-dropdown',
38-
{
39-
'expco-expanded': expanded,
40-
},
41-
props.className
42-
)}
43-
>
44-
<div className="expco-title focusable-main">{getSelected()}</div>
45-
<div className="action-btn right expco-expand subtle" onClick={toggleExpco}>
46-
&nbsp;
47-
</div>
48-
<div className="expco-body bd">
49-
{props.options?.map((child, index) => (
50-
<React.Fragment key={child.key || index}>{child.node}</React.Fragment>
51-
))}
52-
</div>
53-
</div>
54-
)
23+
interface IState {
24+
expanded: boolean
25+
}
26+
27+
export class SplitDropdown extends React.Component<IProps, IState> {
28+
private _popperRef: HTMLElement | null = null
29+
private _popperUpdate: (() => Promise<any>) | undefined
30+
31+
constructor(props: IProps) {
32+
super(props)
33+
34+
this.state = {
35+
expanded: false,
36+
}
37+
}
38+
39+
async componentDidUpdate(_prevProps: IProps): Promise<void> {
40+
if (this.state.expanded && typeof this._popperUpdate === 'function') {
41+
await this._popperUpdate()
42+
}
43+
}
44+
45+
private toggleExpco = async (e: React.MouseEvent<HTMLElement>) => {
46+
e.preventDefault()
47+
e.stopPropagation()
48+
49+
if (typeof this._popperUpdate === 'function') {
50+
await this._popperUpdate()
51+
}
52+
53+
this.setState({
54+
expanded: !this.state.expanded,
55+
})
56+
}
57+
58+
private setPopperRef = (ref: HTMLDivElement | null, popperRef: React.Ref<any>) => {
59+
this._popperRef = ref
60+
if (typeof popperRef === 'function') {
61+
popperRef(ref)
62+
}
63+
}
64+
65+
private setUpdate = (update: () => Promise<any>) => {
66+
this._popperUpdate = update
67+
}
68+
69+
private onBlur = (event: React.FocusEvent<HTMLDivElement>) => {
70+
if (
71+
!(
72+
event.relatedTarget &&
73+
event.relatedTarget instanceof HTMLElement &&
74+
this._popperRef &&
75+
(this._popperRef === event.relatedTarget || this._popperRef.contains(event.relatedTarget))
76+
)
77+
) {
78+
this.setState({
79+
expanded: false,
80+
})
81+
}
82+
}
83+
84+
render(): JSX.Element {
85+
const getSelected = () => {
86+
const selectedChild =
87+
this.props.options &&
88+
Array.isArray(this.props.options) &&
89+
this.props.options.find((element) => element.key === this.props.selectedKey)?.node
90+
return selectedChild ? <>{selectedChild}</> : <div className="expco-item"></div>
91+
}
92+
93+
return (
94+
<Manager>
95+
<Reference>
96+
{({ ref }) => (
97+
<div
98+
ref={ref}
99+
className={ClassNames(
100+
'expco button subtle form-select',
101+
{
102+
'expco-expanded': this.state.expanded,
103+
},
104+
this.props.className
105+
)}
106+
>
107+
<div className="expco-title focusable-main">{getSelected()}</div>
108+
<div className="action-btn expco-expand subtle" onClick={this.toggleExpco}>
109+
&nbsp;
110+
</div>
111+
</div>
112+
)}
113+
</Reference>
114+
<Popper
115+
placement="bottom-start"
116+
modifiers={[
117+
{ name: 'flip', enabled: false },
118+
{ name: 'offset', enabled: true, options: { offset: [0, -1] } },
119+
{
120+
name: 'eventListeners',
121+
enabled: true,
122+
options: {
123+
scroll: this.state.expanded,
124+
resize: this.state.expanded,
125+
},
126+
},
127+
]}
128+
>
129+
{({ ref, style, placement, update }) => {
130+
this.setUpdate(update)
131+
return (
132+
<div
133+
ref={(r) => this.setPopperRef(r, ref)}
134+
style={style}
135+
data-placement={placement}
136+
className={ClassNames(
137+
'expco expco-popper split-dropdown',
138+
{
139+
'expco-expanded': this.state.expanded,
140+
},
141+
this.props.className
142+
)}
143+
tabIndex={-1}
144+
onBlur={this.onBlur}
145+
>
146+
{this.state.expanded && (
147+
<div className="expco-body bd">
148+
{this.props.options?.map((child, index) => (
149+
<React.Fragment key={child.key || index}>{child.node}</React.Fragment>
150+
))}
151+
</div>
152+
)}
153+
</div>
154+
)
155+
}}
156+
</Popper>
157+
</Manager>
158+
)
159+
}
55160
}

‎packages/webui/src/client/lib/forms/SchemaFormInPlace.scss‎

Lines changed: 0 additions & 75 deletions
This file was deleted.

‎packages/webui/src/client/lib/forms/SchemaFormInPlace.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
} from '../../ui/Settings/util/OverrideOpHelper'
77
import { SchemaFormCommonProps } from './schemaFormUtil'
88
import { SchemaFormWithOverrides } from './SchemaFormWithOverrides'
9-
import './SchemaFormInPlace.scss'
109

1110
interface SchemaFormInPlaceProps extends Omit<SchemaFormCommonProps, 'isRequired'> {
1211
/** The object to be modified in place */

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
padding: 5px;
4444
border: 1px solid #000;
4545
background: #fff;
46+
color: #000;
4647
}
4748

4849
&:not(:focus-within) {

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,11 @@ h4,
5050
letter-spacing: 0.5px;
5151
}
5252

53+
h5,
54+
.h5 {
55+
font-size: 0.875rem;
56+
}
57+
5358
h5,
5459
.h5,
5560
.text-s,
@@ -206,6 +211,11 @@ header {
206211
padding: 0;
207212
}
208213

209-
.expco {
214+
.expco-expanded {
210215
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
211216
}
217+
218+
table {
219+
border-collapse: collapse;
220+
border-spacing: 0;
221+
}

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ input {
2525
@import 'fromOrigo';
2626

2727
@import 'afterBroadcastForm';
28-
// @import 'collapseJSON';
28+
@import 'collapseJSON';
2929
@import 'colorPicker';
3030
@import 'contextMenu';
3131
@import 'datePicker';
@@ -36,23 +36,21 @@ input {
3636
@import 'multiSelect';
3737
@import 'notifications';
3838
@import 'propertiesPanel';
39-
// @import 'organization';
40-
// @import 'overflowingContainer';
41-
// @import 'pieceStatusIcon';
39+
@import 'overflowingContainer';
40+
@import 'pieceStatusIcon';
4241
// @import 'prompter';
4342
@import 'rundownList';
4443
@import 'rundownSystemStatus';
4544
@import 'settings';
46-
// @import 'splitDropdown';
45+
@import 'splitDropdown';
4746
@import 'statusbar';
48-
// @import 'statusNotification';
4947
@import 'studioScreenSaver';
5048
@import 'supportAndSwitchboardPanel';
5149
@import 'systemStatus';
5250
@import 'testtools';
5351
@import 'tooltips';
5452
// @import 'utils';
55-
// @import 'elementSelected';
53+
@import 'elementSelected';
5654

5755
@import 'countdown/overlay';
5856
@import 'countdown/presenter';
@@ -231,7 +229,6 @@ input {
231229
}
232230

233231
.form-switch.switch-lg {
234-
// TODO
235232
.form-check-input {
236233
width: 3em;
237234
height: 1.5em;

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,8 @@
147147

148148
.btn-default {
149149
background: #d7dade;
150+
color: #000;
151+
font-weight: 300;
150152
}
151153

152154
> .notification-pop-up__actions--default {

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

Lines changed: 0 additions & 8 deletions
This file was deleted.

0 commit comments

Comments
 (0)