Skip to content

Commit

Permalink
wip: more
Browse files Browse the repository at this point in the history
  • Loading branch information
@Julusian
Julusian committed Jul 3, 2024
1 parent 7d4b922 commit f1689a1
Show file tree
Hide file tree
Showing 14 changed files with 207 additions and 267 deletions.
7 changes: 3 additions & 4 deletions webui/src/Buttons/ActionRecorder/RecorderSessionHeading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,11 @@ import {
LoadingRetryOrError,
PreventDefaultHandler,
} from '../../util.js'
import { CButton, CAlert, CButtonGroup, CCol, CRow, CForm, CFormLabel } from '@coreui/react'
import { CButton, CAlert, CButtonGroup, CCol, CRow, CForm, CFormLabel, CFormSwitch } from '@coreui/react'
import { useMemo } from 'react'
import { DropdownInputField } from '../../Components/index.js'
import { ActionsList } from '../../Controls/ActionSetEditor.js'
import { usePanelCollapseHelper } from '../../Helpers/CollapseHelper.js'
import CSwitch from '../../CSwitch.js'
import type { DropdownChoiceId } from '@companion-module/base'
import type { RecordSessionInfo } from '@companion-app/shared/Model/ActionRecorderModel.js'
import { useActionRecorderActionService } from '../../Services/Controls/ControlActionsService.js'
Expand Down Expand Up @@ -96,7 +95,7 @@ export function RecorderSessionHeading({ confirmRef, sessionId, sessionInfo, doF
<>
<CForm onSubmit={PreventDefaultHandler}>
<CRow form className="flex-form flex-form-row" style={{ clear: 'both' }}>
<div className="flex w-full gap-2">
<div className="flex w-full gap-2rem">
<div className="w-full">
<CFormLabel>Connections</CFormLabel>
<DropdownInputField<true>
Expand All @@ -110,7 +109,7 @@ export function RecorderSessionHeading({ confirmRef, sessionId, sessionInfo, doF
<div>
<CFormLabel>Recording</CFormLabel>
<p>
<CSwitch color="success" size="lg" checked={!!sessionInfo.isRunning} onChange={changeRecording} />
<CFormSwitch color="success" size="lg" checked={!!sessionInfo.isRunning} onChange={changeRecording} />
</p>
</div>
</div>
Expand Down
300 changes: 162 additions & 138 deletions webui/src/Buttons/EditButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import {
CNavItem,
CNavLink,
CNav,
CCol,
CFormSwitch,
} from '@coreui/react'
import {
faChevronLeft,
Expand Down Expand Up @@ -51,7 +53,6 @@ import { ControlFeedbacksEditor } from '../Controls/FeedbackEditor.js'
import { cloneDeep } from 'lodash-es'
import { useElementSize } from 'usehooks-ts'
import { GetStepIds } from '@companion-app/shared/Controls.js'
import CSwitch from '../CSwitch.js'
import { formatLocation } from '@companion-app/shared/ControlId.js'
import { ControlLocation } from '@companion-app/shared/Model/Common.js'
import { ActionInstance, ActionSetsModel, ActionStepOptions } from '@companion-app/shared/Model/ActionModel.js'
Expand Down Expand Up @@ -242,80 +243,87 @@ export const EditButton = observer(function EditButton({ location, onKeyUp }: Ed
<LoadingRetryOrError dataReady={dataReady} error={loadError} doRetry={doRetryLoad} />
{hasConfig && dataReady && (
<>
<ButtonPreviewBase fixedSize preview={previewImage} right={true} />
{(!config || config.type === undefined) && (
<MyErrorBoundary>
{' '}
<CDropdown className="" style={{ display: 'inline-block', marginRight: -4 }}>
<CButtonGroup>
{/* This could be simplified to use the split property on CDropdownToggle, but then onClick doesnt work https://github.com/coreui/coreui-react/issues/179 */}
<CButton color="danger" onClick={() => setButtonType('button')}>
Create button
</CButton>
<CDropdownToggle
caret
color="danger"
style={{ opacity: 0.7, paddingLeft: 14, paddingRight: 16 }}
className="dropdown-toggle dropdown-toggle-split"
>
<span className="sr-only">Toggle Dropdown</span>
</CDropdownToggle>
</CButtonGroup>
<CDropdownMenu>
<CDropdownItem onClick={() => setButtonType('button')}>Regular button</CDropdownItem>
<CDropdownItem onClick={() => setButtonType('pageup')}>Page up</CDropdownItem>
<CDropdownItem onClick={() => setButtonType('pagenum')}>Page number</CDropdownItem>
<CDropdownItem onClick={() => setButtonType('pagedown')}>Page down</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</MyErrorBoundary>
)}
&nbsp;
<MyErrorBoundary>
<CButton color="danger" hidden={!config} onClick={clearButton} title="Clear Button">
<FontAwesomeIcon icon={faTrashAlt} />
</CButton>
<CCol sm={12}>
<ButtonPreviewBase fixedSize preview={previewImage} right={true} />
{(!config || config.type === undefined) && (
<MyErrorBoundary>
{' '}
<CDropdown className="" style={{ display: 'inline-block', marginRight: -4 }}>
<CButtonGroup>
{/* This could be simplified to use the split property on CDropdownToggle, but then onClick doesnt work https://github.com/coreui/coreui-react/issues/179 */}
<CButton color="danger" onClick={() => setButtonType('button')}>
Create button
</CButton>
<CDropdownToggle
caret
color="danger"
style={{ opacity: 0.7, paddingLeft: 14, paddingRight: 16 }}
className="dropdown-toggle dropdown-toggle-split"
>
<span className="sr-only">Toggle Dropdown</span>
</CDropdownToggle>
</CButtonGroup>
<CDropdownMenu>
<CDropdownItem onClick={() => setButtonType('button')}>Regular button</CDropdownItem>
<CDropdownItem onClick={() => setButtonType('pageup')}>Page up</CDropdownItem>
<CDropdownItem onClick={() => setButtonType('pagenum')}>Page number</CDropdownItem>
<CDropdownItem onClick={() => setButtonType('pagedown')}>Page down</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</MyErrorBoundary>
)}
&nbsp;
<CButtonGroup>
<CButton
color="warning"
hidden={!config || config.type !== 'button'}
onMouseDown={hotPressDown}
onMouseUp={hotPressUp}
style={{ color: 'white' }}
title="Test press button"
>
<FontAwesomeIcon icon={faPlay} />
&nbsp;Test
</CButton>
</CButtonGroup>{' '}
</MyErrorBoundary>
&nbsp;
{config && 'options' in config && config?.options?.rotaryActions && (
<MyErrorBoundary>
<CButton color="warning" onMouseDown={hotRotateLeft} style={{ color: 'white' }} title="Test rotate left">
<FontAwesomeIcon icon={faUndo} />
<CButton color="danger" hidden={!config} onClick={clearButton} title="Clear Button">
<FontAwesomeIcon icon={faTrashAlt} />
</CButton>
&nbsp;
<CButton
color="warning"
onMouseDown={hotRotateRight}
style={{ color: 'white' }}
title="Test rotate right"
>
<FontAwesomeIcon icon={faRedo} />
</CButton>
<CButtonGroup>
<CButton
color="warning"
hidden={!config || config.type !== 'button'}
onMouseDown={hotPressDown}
onMouseUp={hotPressUp}
style={{ color: 'white' }}
title="Test press button"
>
<FontAwesomeIcon icon={faPlay} />
&nbsp;Test
</CButton>
</CButtonGroup>{' '}
</MyErrorBoundary>
)}
{!config && (
<>
<h4>Empty button</h4>
<p className="mt-3">
To get started, click button above to create a regular button, or use the drop down to make a special
button.
</p>
</>
)}
&nbsp;
{config && 'options' in config && config?.options?.rotaryActions && (
<MyErrorBoundary>
<CButton
color="warning"
onMouseDown={hotRotateLeft}
style={{ color: 'white' }}
title="Test rotate left"
>
<FontAwesomeIcon icon={faUndo} />
</CButton>
&nbsp;
<CButton
color="warning"
onMouseDown={hotRotateRight}
style={{ color: 'white' }}
title="Test rotate right"
>
<FontAwesomeIcon icon={faRedo} />
</CButton>
</MyErrorBoundary>
)}
{!config && (
<>
<h4>Empty button</h4>
<p className="mt-3">
To get started, click button above to create a regular button, or use the drop down to make a special
button.
</p>
</>
)}
</CCol>
{controlId && config && (
<MyErrorBoundary>
<ButtonStyleConfig
Expand Down Expand Up @@ -375,13 +383,13 @@ function TabsSection({ style, controlId, location, steps, runtimeProps, rotaryAc

const confirmRef = useRef<GenericConfirmModalRef>(null)

const tabsScrollRef = useRef(null)
const tabsScrollRef = useRef<HTMLDivElement>()
const [tabsSizeRef] = useElementSize()

const setTabsRef = useCallback(
(ref) => {
(ref: HTMLDivElement | null) => {
tabsSizeRef(ref)
tabsScrollRef.current = ref
tabsScrollRef.current = ref ?? undefined
},
[tabsSizeRef]
)
Expand Down Expand Up @@ -596,58 +604,62 @@ function TabsSection({ style, controlId, location, steps, runtimeProps, rotaryAc
</CButton>
</CButtonGroup>

{rotaryActions && selectedStep2 && (
<>
<MyErrorBoundary>
<ControlActionSetEditor
heading="Rotate left actions"
<div>
{/* Wrap the action-category, for :first-child to work */}

{rotaryActions && selectedStep2 && (
<>
<MyErrorBoundary>
<ControlActionSetEditor
heading="Rotate left actions"
controlId={controlId}
location={location}
stepId={selectedKey}
setId="rotate_left"
addPlaceholder="+ Add rotate left action"
actions={selectedStep2.action_sets['rotate_left']}
/>
</MyErrorBoundary>

<MyErrorBoundary>
<ControlActionSetEditor
heading="Rotate right actions"
controlId={controlId}
location={location}
stepId={selectedKey}
setId="rotate_right"
addPlaceholder="+ Add rotate right action"
actions={selectedStep2.action_sets['rotate_right']}
/>
</MyErrorBoundary>
</>
)}

{selectedStep2 && (
<>
<MyErrorBoundary>
<ControlActionSetEditor
heading={`Press actions`}
controlId={controlId}
location={location}
stepId={selectedKey}
setId="down"
addPlaceholder={`+ Add press action`}
actions={selectedStep2.action_sets['down']}
/>
</MyErrorBoundary>

<EditActionsRelease
controlId={controlId}
location={location}
action_sets={selectedStep2.action_sets}
stepOptions={selectedStep2.options}
stepId={selectedKey}
setId="rotate_left"
addPlaceholder="+ Add rotate left action"
actions={selectedStep2.action_sets['rotate_left']}
removeSet={removeSet}
/>
</MyErrorBoundary>

<MyErrorBoundary>
<ControlActionSetEditor
heading="Rotate right actions"
controlId={controlId}
location={location}
stepId={selectedKey}
setId="rotate_right"
addPlaceholder="+ Add rotate right action"
actions={selectedStep2.action_sets['rotate_right']}
/>
</MyErrorBoundary>
</>
)}

{selectedStep2 && (
<>
<MyErrorBoundary>
<ControlActionSetEditor
heading={`Press actions`}
controlId={controlId}
location={location}
stepId={selectedKey}
setId="down"
addPlaceholder={`+ Add press action`}
actions={selectedStep2.action_sets['down']}
/>
</MyErrorBoundary>

<EditActionsRelease
controlId={controlId}
location={location}
action_sets={selectedStep2.action_sets}
stepOptions={selectedStep2.options}
stepId={selectedKey}
removeSet={removeSet}
/>
</>
)}
</>
)}
</div>

<br />
<p>
Expand Down Expand Up @@ -911,11 +923,11 @@ const EditDurationGroupPropertiesModal = forwardRef<
[]
)

const onDurationChange = useCallback((e) => {
const onDurationChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
setNewDurationValue(Number(e.target.value))
}, [])

const onWhileHeldChange = useCallback((e) => {
const onWhileHeldChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
setNewWhileHeldValue(!!e.target.checked)
}, [])

Expand All @@ -925,21 +937,33 @@ const EditDurationGroupPropertiesModal = forwardRef<
<h5>Change delay group properties</h5>
</CModalHeader>
<CModalBody>
<CForm onSubmit={doAction}>
<CFormInput
label="Press duration"
type="number"
value={newDurationValue || ''}
min={1}
step={1}
style={{ color: !newDurationValue || newDurationValue <= 0 ? 'red' : undefined }}
onChange={onDurationChange}
/>

<CFormLabel>Execute while held</CFormLabel>
<p>
<CSwitch color="success" checked={!!newWhileHeldValue} onChange={onWhileHeldChange} />
</p>
<CForm className="row g-3" onSubmit={doAction}>
<CFormLabel htmlFor="colFormPressDuration" className="col-sm-4 col-form-label col-form-label-sm">
Press duration
</CFormLabel>
<CCol sm={8}>
<CFormInput
name="colFormPressDuration"
type="number"
value={newDurationValue || ''}
min={1}
step={1}
style={{ color: !newDurationValue || newDurationValue <= 0 ? 'red' : undefined }}
onChange={onDurationChange}
/>
</CCol>

<CFormLabel htmlFor="colFormExecuteWhileHeld" className="col-sm-4 col-form-label col-form-label-sm">
Execute while held
</CFormLabel>
<CCol sm={8}>
<CFormSwitch
name="colFormExecuteWhileHeld"
size="xl"
checked={!!newWhileHeldValue}
onChange={onWhileHeldChange}
/>
</CCol>
</CForm>
</CModalBody>
<CModalFooter>
Expand Down
Loading

0 comments on commit f1689a1

Please sign in to comment.