feat: improve UX in properties editor #1620
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -380,6 +380,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps, | |
|
|
||
| RundownViewEventBus.on(RundownViewEvents.GO_TO_LIVE_SEGMENT, this.onGoToLiveSegment) | ||
| RundownViewEventBus.on(RundownViewEvents.GO_TO_TOP, this.onGoToTop) | ||
| RundownViewEventBus.on(RundownViewEvents.CLOSE_NOTIFICATIONS, this.onCloseNotifications) | ||
|
|
||
| if (this.props.playlist) { | ||
| documentTitle.set(this.props.playlist.name) | ||
|
|
@@ -623,6 +624,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps, | |
|
|
||
| RundownViewEventBus.off(RundownViewEvents.GO_TO_LIVE_SEGMENT, this.onGoToLiveSegment) | ||
| RundownViewEventBus.off(RundownViewEvents.GO_TO_TOP, this.onGoToTop) | ||
| RundownViewEventBus.off(RundownViewEvents.CLOSE_NOTIFICATIONS, this.onCloseNotifications) | ||
| } | ||
|
|
||
| private onBeforeUnload = (e: any) => { | ||
|
|
@@ -906,6 +908,12 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps, | |
| ) | ||
| } | ||
|
|
||
| private onCloseNotifications = () => { | ||
| this.setState({ | ||
| isNotificationsCenterOpen: undefined, | ||
| }) | ||
| } | ||
|
Comment on lines
+911
to
+915
There was a problem hiding this comment. Sync the global notification-center flag when these paths auto-close it. Lines 1200-1204 keep Suggested change private onCloseNotifications = () => {
+ NotificationCenter.isOpen = false
this.setState({
isNotificationsCenterOpen: undefined,
})
}
@@
onEditProps={(selection) => {
+ NotificationCenter.isOpen = false
this.setState({ isNotificationsCenterOpen: undefined })
selectionContext.clearAndSetSelection(selection)
}}Also applies to: 1536-1539 🤖 Prompt for AI Agents |
||
|
|
||
| private onToggleSupportPanel = () => { | ||
| this.setState({ | ||
| isSupportPanelOpen: !this.state.isSupportPanelOpen, | ||
|
|
@@ -1372,6 +1380,8 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps, | |
| <DragContextProvider t={t}> | ||
| <SelectedElementsContext.Consumer> | ||
| {(selectionContext) => { | ||
| const isPropertiesPanelOpen = selectionContext.listSelectedElements().length > 0 | ||
|
|
||
| return ( | ||
| <div | ||
| className={classNames('rundown-view', { | ||
|
|
@@ -1464,13 +1474,14 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps, | |
| </ErrorBoundary> | ||
| <ErrorBoundary> | ||
| <AnimatePresence> | ||
| {!isPropertiesPanelOpen && this.state.isNotificationsCenterOpen && ( | ||
| <NotificationCenterPanel | ||
| filter={this.state.isNotificationsCenterOpen} | ||
| hideRundownHeader={this.props.hideRundownHeader} | ||
| /> | ||
| )} | ||
| {isPropertiesPanelOpen && | ||
| !this.state.isNotificationsCenterOpen && | ||
| selectionContext.listSelectedElements().length > 0 && ( | ||
| <div> | ||
| <PropertiesPanel /> | ||
|
|
@@ -1522,7 +1533,10 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps, | |
| onQueueNextSegment={this.onQueueNextSegment} | ||
| onSetQuickLoopStart={this.onSetQuickLoopStart} | ||
| onSetQuickLoopEnd={this.onSetQuickLoopEnd} | ||
| onEditProps={(selection) => { | ||
| this.setState({ isNotificationsCenterOpen: undefined }) | ||
| selectionContext.clearAndSetSelection(selection) | ||
| }} | ||
| studioMode={this.props.userPermissions.studio} | ||
| enablePlayFromAnywhere={!!studio.settings.enablePlayFromAnywhere} | ||
| enableQuickLoop={!!studio.settings.enableQuickLoop} | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -17,6 +17,7 @@ import { CoreUserEditingDefinition } from '@sofie-automation/corelib/dist/dataMo | |
| import * as RundownResolver from '../../lib/RundownResolver.js' | ||
| import { SelectedElement } from '../RundownView/SelectedElementsContext.js' | ||
| import { DBPartInstance } from '@sofie-automation/corelib/dist/dataModel/PartInstance.js' | ||
| import { hasUserEditableContent } from '../UserEditOperations/PropertiesPanel.js' | ||
|
|
||
| interface IProps { | ||
| onSetNext: (partInstance: DBPartInstance | DBPart | undefined, e: any, offset?: number, take?: boolean) => void | ||
|
|
@@ -120,6 +121,10 @@ export function SegmentContextMenu({ | |
| part?.instance._id !== playlist.nextPartInfo?.partInstanceId && | ||
| part?.instance._id !== playlist.previousPartInfo?.partInstanceId | ||
|
|
||
| const segmentHasEditableContent = hasUserEditableContent(segment) | ||
| const partHasEditableContent = hasUserEditableContent(part?.instance.part) | ||
| const pieceHasEditableContent = hasUserEditableContent(piece?.instance.piece) | ||
|
|
||
| const isPartOrphaned: boolean | undefined = part ? part.instance.orphaned !== undefined : undefined | ||
|
|
||
| const isPartNext: boolean | undefined = part ? playlist.nextPartInfo?.partInstanceId === part.instance._id : undefined | ||
|
|
@@ -159,7 +164,7 @@ export function SegmentContextMenu({ | |
| isFormEditable={isSegmentEditAble} | ||
| /> | ||
| )} | ||
| {enableUserEdits && segmentHasEditableContent && ( | ||
| <> | ||
| <hr /> | ||
| <MenuItem onClick={() => onEditProps({ type: 'segment', elementId: part.instance.segmentId })}> | ||
|
|
@@ -286,16 +291,20 @@ export function SegmentContextMenu({ | |
| /> | ||
| )} | ||
|
|
||
| {enableUserEdits && (segmentHasEditableContent || partHasEditableContent || pieceHasEditableContent) && ( | ||
| <> | ||
| <hr /> | ||
| {segmentHasEditableContent && ( | ||
| <MenuItem onClick={() => onEditProps({ type: 'segment', elementId: part.instance.segmentId })}> | ||
| <span>{t('Edit Segment Properties')}</span> | ||
| </MenuItem> | ||
| )} | ||
| {partHasEditableContent && ( | ||
| <MenuItem onClick={() => onEditProps({ type: 'part', elementId: part.instance.part._id })}> | ||
| <span>{t('Edit Part Properties')}</span> | ||
| </MenuItem> | ||
| )} | ||
| {pieceHasEditableContent && piece && ( | ||
| <MenuItem onClick={() => onEditProps({ type: 'piece', elementId: piece.instance.piece._id })}> | ||
| <span>{t('Edit Piece Properties')}</span> | ||
| </MenuItem> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -58,6 +58,7 @@ import * as RundownResolver from '../../lib/RundownResolver.js' | |||||||||||||||||||||||||||||||||||||||||||||||||
| import { DBSegment } from '@sofie-automation/corelib/dist/dataModel/Segment' | ||||||||||||||||||||||||||||||||||||||||||||||||||
| import { SelectedElementsContext } from '../RundownView/SelectedElementsContext.js' | ||||||||||||||||||||||||||||||||||||||||||||||||||
| import { BlueprintAssetIcon } from '../../lib/Components/BlueprintAssetIcon.js' | ||||||||||||||||||||||||||||||||||||||||||||||||||
| import { hasUserEditableContent } from '../UserEditOperations/PropertiesPanel.js' | ||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||
| interface IProps { | ||||||||||||||||||||||||||||||||||||||||||||||||||
| id: string | ||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
@@ -1015,8 +1016,13 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming< | |||||||||||||||||||||||||||||||||||||||||||||||||
| <div | ||||||||||||||||||||||||||||||||||||||||||||||||||
| onDoubleClick={() => { | ||||||||||||||||||||||||||||||||||||||||||||||||||
| if (this.props.studio.settings.enableUserEdits) { | ||||||||||||||||||||||||||||||||||||||||||||||||||
| const segment = this.props.segment | ||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||
| const hasEditableContent = hasUserEditableContent(segment) | ||||||||||||||||||||||||||||||||||||||||||||||||||
| if (!hasEditableContent) return | ||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||
| if (!selectElementContext.isSelected(segment._id)) { | ||||||||||||||||||||||||||||||||||||||||||||||||||
| selectElementContext.clearAndSetSelection({ type: 'segment', elementId: segment._id }) | ||||||||||||||||||||||||||||||||||||||||||||||||||
|
Comment on lines
1017
to
+1025
There was a problem hiding this comment. Close notifications before selecting a segment. When the notification center is already open, this only changes the selection. Suggested change if (this.props.studio.settings.enableUserEdits) {
const segment = this.props.segment
const hasEditableContent = hasUserEditableContent(segment)
if (!hasEditableContent) return
if (!selectElementContext.isSelected(segment._id)) {
+ RundownViewEventBus.emit(RundownViewEvents.CLOSE_NOTIFICATIONS)
selectElementContext.clearAndSetSelection({ type: 'segment', elementId: segment._id })
} else {
selectElementContext.clearSelections()
}📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||||||||||||||||||||||||||||||||||||||||||||||
| } else { | ||||||||||||||||||||||||||||||||||||||||||||||||||
| selectElementContext.clearSelections() | ||||||||||||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -18,7 +18,10 @@ import { LocalLayerItemRenderer } from './Renderers/LocalLayerItemRenderer.js' | |
| import { DEBUG_MODE } from './SegmentTimelineDebugMode.js' | ||
| import { getElementDocumentOffset, OffsetPosition } from '../../utils/positions.js' | ||
| import { unprotectString } from '@sofie-automation/shared-lib/dist/lib/protectedString' | ||
| import RundownViewEventBus, { | ||
| RundownViewEvents, | ||
| HighlightEvent, | ||
| } from '@sofie-automation/meteor-lib/dist/triggers/RundownViewEventBus' | ||
| import { pieceUiClassNames } from '../../lib/ui/pieceUiClassNames.js' | ||
| import { TransitionSourceRenderer } from './Renderers/TransitionSourceRenderer.js' | ||
| import { UIStudio } from '@sofie-automation/meteor-lib/dist/api/studios' | ||
|
|
@@ -33,6 +36,7 @@ import { | |
| PreviewPopUpContext, | ||
| } from '../PreviewPopUp/PreviewPopUpContext.js' | ||
| import { useRundownViewEventBusListener } from '../../lib/lib.js' | ||
| import { hasUserEditableContent } from '../UserEditOperations/PropertiesPanel.js' | ||
| const LEFT_RIGHT_ANCHOR_SPACER = 15 | ||
| const MARGINAL_ANCHORED_WIDTH = 5 | ||
|
|
||
|
|
@@ -180,8 +184,14 @@ export const SourceLayerItem = (props: Readonly<ISourceLayerItemProps>): JSX.Ele | |
| e.stopPropagation() | ||
|
|
||
| if (studio?.settings.enableUserEdits && !studio?.settings.allowPieceDirectPlay) { | ||
| const innerPiece = piece.instance.piece | ||
|
|
||
| const hasEditableContent = hasUserEditableContent(innerPiece) | ||
| if (!hasEditableContent) return | ||
|
|
||
| const pieceId = innerPiece._id | ||
| if (!selectElementContext.isSelected(pieceId)) { | ||
| RundownViewEventBus.emit(RundownViewEvents.CLOSE_NOTIFICATIONS) | ||
| selectElementContext.clearAndSetSelection({ type: 'piece', elementId: pieceId }) | ||
| } else { | ||
| selectElementContext.clearSelections() | ||
|
|
||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧩 Analysis chain
🏁 Script executed:
Repository: Sofie-Automation/sofie-core
Length of output: 564
🏁 Script executed:
Repository: Sofie-Automation/sofie-core
Length of output: 985
🏁 Script executed:
Repository: Sofie-Automation/sofie-core
Length of output: 1897
🏁 Script executed:
rg -n "propertiespanel-pop-up__button" packages/webui/src/client/styles/propertiesPanel.scssRepository: Sofie-Automation/sofie-core
Length of output: 331
🏁 Script executed:
Repository: Sofie-Automation/sofie-core
Length of output: 664
🏁 Script executed:
Repository: Sofie-Automation/sofie-core
Length of output: 894
🏁 Script executed:
Repository: Sofie-Automation/sofie-core
Length of output: 1826
🏁 Script executed:
Repository: Sofie-Automation/sofie-core
Length of output: 1379
Add
display: flexand remove blank line beforegap.The
.propertiespanel-pop-up__buttonselector nested inside.propertiespanel-pop-up__contents(line 236) is missing thedisplay: flexproperty that exists in the earlier declaration under.propertiespanel-pop-up__footer(line 115). Without flex display, thegap: 0.5em;property has no effect. The blank line beforegapis also a Stylelint error.Suggested change
.propertiespanel-pop-up__button { + display: flex; + align-items: center; background: `#636363`; padding: 10px; border-radius: 5px; border: 1px solid `#7f7f7f`; color: `#dfdfdf`; - gap: 0.5em;📝 Committable suggestion
🧰 Tools
🪛 Stylelint (17.4.0)
[error] 243-243: Unexpected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
🤖 Prompt for AI Agents