Skip to content

Commit

Permalink
chore: add actions back into property panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@mint-dewit
mint-dewit committed Dec 2, 2024
1 parent aa35b1b commit ea2fb4a
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 60 deletions.
3 changes: 1 addition & 2 deletions packages/blueprints-integration/src/userEditing.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,6 @@ export interface UserEditingProperties {
* A list of id's of operations to be exposed on the properties panel as buttons. These operations
* must be available on the element
*
* note - perhaps these should have their own full definitions?
*/
operations?: string[]
operations?: UserEditingDefinitionAction[]
}
69 changes: 14 additions & 55 deletions packages/webui/src/client/styles/propertiesPanel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,14 +123,6 @@

> .propertiespanel-pop-up__button,
.propertiespanel-pop-up__button-group .propertiespanel-pop-up__button {
// background: #636363;
// padding: 5px 5px 5px 5px;
// gap: 10px;
// border-radius: 5px;
// border: 1px;
// border: 1px solid #7f7f7f;
// color: #ddd;
// margin: 10px auto;
display: block;

border-radius: 5px;
Expand Down Expand Up @@ -165,6 +157,11 @@
height: 1em;
}

svg {
width: 1.3em;
height: 0.875em;
}

.label {
margin-left: 10px;
margin-right: 10px;
Expand Down Expand Up @@ -235,67 +232,29 @@
}

> .properties-panel-pop-up__form {
margin-top: 15px;
color: #ddd;
padding: 4px 4px;
position: relative;
display: flex;
align-items: flex-start;
gap: 8px;

// Add positioning for the pencil icon
> svg {
margin-top: 4px;
flex-shrink: 0;
}

> .properties-panel-pop-up__form__schema {
border-color: pink;
border-width: 0px;
flex-grow: 1;
}
}

> .properties-panel-pop-up__has-been-edited {
background-color: #ffffff16;
border-radius: 8px;
padding: 4px 4px;
}

> .propertiespanel-pop-up__label {
color: #ddd;
}

> .propertiespanel-pop-up__select {
margin-top: 10px;
width: 100%;
height: 3em;
background: #232323;
margin-bottom: 0.5em;
color: #ddd;
}

> .propertiespanel-pop-up__button {
margin-top: 10px;
.propertiespanel-pop-up__button {
// margin-top: 10px;
background: #636363;
padding: 5px 5px 5px 5px;
padding: 10px;
gap: 10px;
border-radius: 5px;
border: 1px;
border: 1px solid #7f7f7f;
color: #ddd;
color: #dfdfdf;

font-size: 0.875em;
font-weight: 500;

&:active {
transform: scale(0.95);
top: 2px;
}

> svg {
margin-top: -0.1em;
vertical-align: middle;
margin-right: -0.4em;
svg {
width: 1em;
height: 1em;
height: 0.875em;
}

.label {
Expand Down
70 changes: 67 additions & 3 deletions packages/webui/src/client/ui/UserEditOperations/PropertiesPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
JSONBlob,
JSONBlobParse,
JSONSchema,
UserEditingDefinitionAction,
UserEditingProperties,
UserEditingSourceLayer,
UserEditingType,
Expand All @@ -23,6 +24,8 @@ import { RundownUtils } from '../../lib/rundown'
import * as CoreIcon from '@nrk/core-icons/jsx'
import { useCallback } from 'react'
import { SchemaFormWithState } from '../../lib/forms/SchemaFormWithState'
import { t } from 'i18next'
import { translateMessage } from '@sofie-automation/corelib/dist/TranslatableMessage'

type PendingChange = DefaultUserOperationEditProperties['payload']

Expand Down Expand Up @@ -117,6 +120,25 @@ export function PropertiesPanel(): JSX.Element {
clearSelections()
}

const executeAction = (e: React.MouseEvent, id: string) => {
if (!rundownId || !selectedElement) return
doUserAction(t, e, UserAction.EXECUTE_USER_OPERATION, (e, ts) =>
MeteorCall.userAction.executeUserChangeOperation(
e,
ts,
rundownId,
{
segmentExternalId: segment?.externalId,
partExternalId: part?.externalId,
pieceExternalId: undefined,
},
{
id,
}
)
)
}

const userEditOperations =
selectedElement?.type === 'part'
? part?.userEditOperations
Expand Down Expand Up @@ -176,6 +198,9 @@ export function PropertiesPanel(): JSX.Element {
setChange={setPendingChange}
/>
)}
{userEditProperties?.operations && (
<ActionList actions={userEditProperties?.operations} executeAction={executeAction} />
)}
</div>

<div className="propertiespanel-pop-up__footer">
Expand All @@ -184,6 +209,14 @@ export function PropertiesPanel(): JSX.Element {
onClick={handleRevertChanges}
// disabled={!hasPendingChanges}
>
<span className="svg">
<svg viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M2 14.5251H15C16.3261 14.5251 17.5979 13.9984 18.5355 13.0607C19.4732 12.123 20 10.8512 20 9.52515C20 8.19906 19.4732 6.92729 18.5355 5.98961C17.5979 5.05193 16.3261 4.52515 15 4.52515H10V0.475147L5 5.47515L10 10.4751V6.52515H15C15.7956 6.52515 16.5587 6.84122 17.1213 7.40383C17.6839 7.96643 18 8.7295 18 9.52515C18 10.3208 17.6839 11.0839 17.1213 11.6465C16.5587 12.2091 15.7956 12.5251 15 12.5251H2V14.5251Z"
fill="#979797"
/>
</svg>
</span>
<span className="propertiespanel-pop-up__label">{t('Restore from NRCS')}</span>
</button>
<div className="propertiespanel-pop-up__button-group">
Expand Down Expand Up @@ -233,7 +266,6 @@ function PropertiesEditor({
)
const onUpdate = useCallback(
(update: Record<string, any>) => {
console.log(change.pieceTypeProperties.type, update)
setChange({
...change,
pieceTypeProperties: {
Expand Down Expand Up @@ -269,7 +301,7 @@ function PropertiesEditor({
</div>
<hr />
{parsedSchema && (
<div className="properties-grid form-dark">
<div className="properties-panel-pop-up__form styled-schema-form">
<SchemaFormWithState
key={(selectedGroupSchema as any as string) ?? 'key'}
schema={parsedSchema}
Expand Down Expand Up @@ -301,7 +333,6 @@ function GlobalPropertiesEditor({

const onUpdate = useCallback(
(update: Record<string, any>) => {
console.log('glob', update)
setChange({
...change,
globalProperties: update,
Expand All @@ -326,3 +357,36 @@ function GlobalPropertiesEditor({
</div>
)
}

function ActionList({
actions,
executeAction,
}: {
actions: UserEditingDefinitionAction[]
executeAction: (e: any, id: string) => void
}) {
const { t } = useTranslation()

return (
<div>
{actions.map((action) => (
<button
title={'User Action : ' + action.label.key}
className="propertiespanel-pop-up__button"
onClick={(e) => executeAction(e, action.id)}
key={action.id}
>
{action.svgIcon && (
<span
className="svg"
dangerouslySetInnerHTML={{
__html: action.svgIcon,
}}
></span>
)}
<span className="propertiespanel-pop-up__label">{translateMessage(action.label, t)}</span>
</button>
))}
</div>
)
}

0 comments on commit ea2fb4a

Please sign in to comment.