Skip to content

Commit 323c289

Browse files
anteeekanteeek
committed
SOFIE-284 | improve UX in properties editor
1 parent 233c327 commit 323c289

9 files changed

Lines changed: 150 additions & 123 deletions

File tree

‎packages/meteor-lib/src/triggers/RundownViewEventBus.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export enum RundownViewEvents {
4848

4949
TOGGLE_SHELF_DROPZONE = 'toggleShelfDropzone',
5050
ITEM_DROPPED = 'itemDropped',
51+
CLOSE_NOTIFICATIONS = 'closeNotifications',
5152
}
5253

5354
export interface IEventContext {
@@ -156,6 +157,7 @@ export interface RundownViewEventBusEvents {
156157
[RundownViewEvents.CREATE_SNAPSHOT_FOR_DEBUG]: [e: BaseEvent]
157158
[RundownViewEvents.TOGGLE_SHELF_DROPZONE]: [e: ToggleShelfDropzoneEvent]
158159
[RundownViewEvents.ITEM_DROPPED]: [e: ItemDroppedEvent]
160+
[RundownViewEvents.CLOSE_NOTIFICATIONS]: []
159161
}
160162

161163
class RundownViewEventBus0 extends EventEmitter<RundownViewEventBusEvents> {}

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

Lines changed: 14 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@
3232
background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.15) 100%);
3333
}
3434

35+
.propertiespanel-pop-up__label-with-icon {
36+
margin-left: 0.5em;
37+
}
38+
3539
.propertiespanel-pop-up {
3640
background: #2e2e2e;
3741
border-radius: 1px;
@@ -64,8 +68,6 @@
6468
letter-spacing: 0.5px;
6569

6670
> .svg {
67-
width: 1em;
68-
height: 1.2em;
6971
flex-shrink: 0;
7072
}
7173
> .title {
@@ -87,13 +89,16 @@
8789
flex-shrink: 0;
8890
}
8991
> .propertiespanel-pop-up_close {
90-
height: 1em;
91-
margin-left: 1em;
9292
background-color: unset;
9393
border: none;
9494
}
9595
}
9696

97+
.propertiespanel-pop-up__buttons-container {
98+
display: flex;
99+
gap: 0.5em;
100+
}
101+
97102
> .propertiespanel-pop-up__footer {
98103
flex: 1;
99104
flex: 0 0 0;
@@ -109,7 +114,9 @@
109114

110115
> .propertiespanel-pop-up__button,
111116
.propertiespanel-pop-up__button-group .propertiespanel-pop-up__button {
112-
display: block;
117+
display: flex;
118+
gap: 0.5em;
119+
align-items: center;
113120

114121
border-radius: 5px;
115122
border: 1px solid #7f7f7f;
@@ -227,14 +234,14 @@
227234
}
228235

229236
.propertiespanel-pop-up__button {
230-
// margin-top: 10px;
231237
background: #636363;
232238
padding: 10px;
233-
gap: 10px;
234239
border-radius: 5px;
235240
border: 1px solid #7f7f7f;
236241
color: #dfdfdf;
237242

243+
gap: 0.5em;
244+
238245
font-size: 0.875em;
239246
font-weight: 500;
240247

@@ -266,63 +273,6 @@
266273
width: 100%;
267274
}
268275

269-
// // Force the base input-l class
270-
// .input-l {
271-
// width: 100% !important;
272-
// max-width: none !important;
273-
// margin-left: 0px;
274-
// border: none;
275-
// }
276-
277-
// // Force the select/text-input defaults
278-
// .select,
279-
// .inline-select,
280-
// .text-input {
281-
// display: block !important;
282-
// position: relative;
283-
// width: 100% !important;
284-
// }
285-
286-
// .input {
287-
// border: 1px solid #e5e7eb;
288-
// border-radius: 0.375rem;
289-
// padding: 0.5rem 0.75rem;
290-
// width: 100%;
291-
292-
// &:focus {
293-
// outline: none;
294-
// border-color: #3b82f6;
295-
// box-shadow: 0 0 0 1px #3b82f6;
296-
// background-color: unset !important; // origo >.>
297-
// }
298-
// }
299-
300-
// .label-text {
301-
// &:before {
302-
// content: none !important;
303-
// }
304-
// }
305-
306-
// .dropdown {
307-
// background: white;
308-
// border: 1px solid #e5e7eb;
309-
// border-radius: 0.375rem;
310-
// width: 100%;
311-
// max-width: 100%;
312-
313-
// .input,
314-
// .input-l {
315-
// border: none;
316-
// outline: none;
317-
// box-shadow: none;
318-
// }
319-
320-
// &:focus-within {
321-
// border-color: #3b82f6;
322-
// box-shadow: 0 0 0 1px #3b82f6;
323-
// }
324-
// }
325-
326276
.form-switch {
327277
margin: 0.5rem 0;
328278

@@ -337,13 +287,6 @@
337287
margin-bottom: 0.5rem; // Increased spacing between label and selector
338288
margin-top: 0.5rem; // Clearance from the previous
339289
}
340-
341-
// .label {
342-
// font-size: 0.875rem;
343-
// font-weight: 500;
344-
// color: #374151;
345-
// display: block;
346-
// }
347290
}
348291
}
349292
}

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

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ $break-width: 35rem;
161161
}
162162

163163
&.properties-panel-open {
164-
padding-right: $properties-panel-width;
164+
padding-right: calc(#{$properties-panel-width} - 3.5em);
165165
transition: 0s padding-right 1s;
166166

167167
> .rundown-header .rundown-overview {
@@ -209,8 +209,13 @@ body.no-overflow {
209209
bottom: 0;
210210
right: 0;
211211

212-
background:
213-
linear-gradient(-45deg, $color-status-fatal 33%, transparent 33%, transparent 66%, $color-status-fatal 66%),
212+
background: linear-gradient(
213+
-45deg,
214+
$color-status-fatal 33%,
215+
transparent 33%,
216+
transparent 66%,
217+
$color-status-fatal 66%
218+
),
214219
linear-gradient(-45deg, $color-status-fatal 33%, transparent 33%, transparent 66%, $color-status-fatal 66%),
215220
linear-gradient(-45deg, $color-status-fatal 33%, transparent 33%, transparent 66%, $color-status-fatal 66%),
216221
linear-gradient(-45deg, $color-status-fatal 33%, transparent 33%, transparent 66%, $color-status-fatal 66%);
@@ -1100,8 +1105,7 @@ svg.icon {
11001105
}
11011106
.segment-timeline__part {
11021107
.segment-timeline__part__invalid-cover {
1103-
background-image:
1104-
repeating-linear-gradient(
1108+
background-image: repeating-linear-gradient(
11051109
45deg,
11061110
var(--invalid-reason-color-transparent) 0%,
11071111
var(--invalid-reason-color-transparent) 4px,
@@ -1383,8 +1387,7 @@ svg.icon {
13831387
left: 2px;
13841388
right: 2px;
13851389
z-index: 3;
1386-
background:
1387-
repeating-linear-gradient(
1390+
background: repeating-linear-gradient(
13881391
45deg,
13891392
var(--invalid-reason-color-opaque) 0,
13901393
var(--invalid-reason-color-opaque) 5px,
@@ -1566,8 +1569,7 @@ svg.icon {
15661569
right: 1px;
15671570
z-index: 10;
15681571
pointer-events: all;
1569-
background-image:
1570-
repeating-linear-gradient(
1572+
background-image: repeating-linear-gradient(
15711573
45deg,
15721574
var(--invalid-reason-color-transparent) 0%,
15731575
var(--invalid-reason-color-transparent) 5px,

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -378,6 +378,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
378378

379379
RundownViewEventBus.on(RundownViewEvents.GO_TO_LIVE_SEGMENT, this.onGoToLiveSegment)
380380
RundownViewEventBus.on(RundownViewEvents.GO_TO_TOP, this.onGoToTop)
381+
RundownViewEventBus.on(RundownViewEvents.CLOSE_NOTIFICATIONS, this.onCloseNotifications)
381382

382383
if (this.props.playlist) {
383384
documentTitle.set(this.props.playlist.name)
@@ -621,6 +622,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
621622

622623
RundownViewEventBus.off(RundownViewEvents.GO_TO_LIVE_SEGMENT, this.onGoToLiveSegment)
623624
RundownViewEventBus.off(RundownViewEvents.GO_TO_TOP, this.onGoToTop)
625+
RundownViewEventBus.off(RundownViewEvents.CLOSE_NOTIFICATIONS, this.onCloseNotifications)
624626
}
625627

626628
private onBeforeUnload = (e: any) => {
@@ -904,6 +906,12 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
904906
)
905907
}
906908

909+
private onCloseNotifications = () => {
910+
this.setState({
911+
isNotificationsCenterOpen: undefined,
912+
})
913+
}
914+
907915
private onToggleSupportPanel = () => {
908916
this.setState({
909917
isSupportPanelOpen: !this.state.isSupportPanelOpen,
@@ -1369,6 +1377,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
13691377
>
13701378
<SelectedElementsContext.Consumer>
13711379
{(selectionContext) => {
1380+
const isPropertiesPanelOpen = selectionContext.listSelectedElements().length > 0
13721381
return (
13731382
<div
13741383
className={classNames('rundown-view', {
@@ -1461,13 +1470,13 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
14611470
</ErrorBoundary>
14621471
<ErrorBoundary>
14631472
<AnimatePresence>
1464-
{this.state.isNotificationsCenterOpen && (
1473+
{!isPropertiesPanelOpen && this.state.isNotificationsCenterOpen && (
14651474
<NotificationCenterPanel
14661475
filter={this.state.isNotificationsCenterOpen}
14671476
hideRundownHeader={this.props.hideRundownHeader}
14681477
/>
14691478
)}
1470-
{!this.state.isNotificationsCenterOpen && selectionContext.listSelectedElements().length > 0 && (
1479+
{isPropertiesPanelOpen && (
14711480
<div>
14721481
<PropertiesPanel />
14731482
</div>
@@ -1518,7 +1527,10 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
15181527
onQueueNextSegment={this.onQueueNextSegment}
15191528
onSetQuickLoopStart={this.onSetQuickLoopStart}
15201529
onSetQuickLoopEnd={this.onSetQuickLoopEnd}
1521-
onEditProps={(selection) => selectionContext.clearAndSetSelection(selection)}
1530+
onEditProps={(selection) => {
1531+
this.setState({ isNotificationsCenterOpen: undefined })
1532+
selectionContext.clearAndSetSelection(selection)
1533+
}}
15221534
studioMode={this.props.userPermissions.studio}
15231535
enablePlayFromAnywhere={!!studio.settings.enablePlayFromAnywhere}
15241536
enableQuickLoop={!!studio.settings.enableQuickLoop}

‎packages/webui/src/client/ui/RundownView/SelectedElementsContext.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,11 @@ export const SelectedElementProvider: React.FC<{
172172
},
173173

174174
clearSelections: () => {
175+
try {
176+
throw new Error('isdjkdjkfdj')
177+
} catch (e) {
178+
console.log(e)
179+
}
175180
dispatch({ type: 'CLEAR_SELECTIONS' })
176181
},
177182
getSelectedCount: () => {

‎packages/webui/src/client/ui/SegmentTimeline/SegmentContextMenu.tsx‎

Lines changed: 49 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,25 @@ export const SegmentContextMenu = withTranslation()(
6969
part?.instance._id !== this.props.playlist.nextPartInfo?.partInstanceId &&
7070
part?.instance._id !== this.props.playlist.previousPartInfo?.partInstanceId
7171

72+
const segmentHasEditableContent = !!(
73+
segment?.userEditOperations?.length ||
74+
segment?.userEditProperties?.pieceTypeProperties ||
75+
segment?.userEditProperties?.globalProperties ||
76+
segment?.userEditProperties?.operations?.length
77+
)
78+
const partHasEditableContent = !!(
79+
part?.instance.part.userEditOperations?.length ||
80+
part?.instance.part.userEditProperties?.pieceTypeProperties ||
81+
part?.instance.part.userEditProperties?.globalProperties ||
82+
part?.instance.part.userEditProperties?.operations?.length
83+
)
84+
const pieceHasEditableContent = !!(
85+
piece?.instance.piece.userEditOperations?.length ||
86+
piece?.instance.piece.userEditProperties?.pieceTypeProperties ||
87+
piece?.instance.piece.userEditProperties?.globalProperties ||
88+
piece?.instance.piece.userEditProperties?.operations?.length
89+
)
90+
7291
const canSetAsNext = !!this.props.playlist?.activationId
7392

7493
return segment?.orphaned !== SegmentOrphanedReason.ADLIB_TESTING ? (
@@ -108,7 +127,7 @@ export const SegmentContextMenu = withTranslation()(
108127
/>
109128
)}
110129
<hr />
111-
{this.props.enableUserEdits && (
130+
{this.props.enableUserEdits && segmentHasEditableContent && (
112131
<>
113132
<hr />
114133
<MenuItem
@@ -199,28 +218,35 @@ export const SegmentContextMenu = withTranslation()(
199218
isFormEditable={isPartEditAble}
200219
/>
201220

202-
{this.props.enableUserEdits && (
203-
<>
204-
<hr />
205-
<MenuItem
206-
onClick={() => this.props.onEditProps({ type: 'segment', elementId: part.instance.segmentId })}
207-
>
208-
<span>{t('Edit Segment Properties')}</span>
209-
</MenuItem>
210-
<MenuItem
211-
onClick={() => this.props.onEditProps({ type: 'part', elementId: part.instance.part._id })}
212-
>
213-
<span>{t('Edit Part Properties')}</span>
214-
</MenuItem>
215-
{piece && piece.instance.piece.userEditProperties && (
216-
<MenuItem
217-
onClick={() => this.props.onEditProps({ type: 'piece', elementId: piece.instance.piece._id })}
218-
>
219-
<span>{t('Edit Piece Properties')}</span>
220-
</MenuItem>
221-
)}
222-
</>
223-
)}
221+
{this.props.enableUserEdits &&
222+
(segmentHasEditableContent || partHasEditableContent || pieceHasEditableContent) && (
223+
<>
224+
<hr />
225+
{segmentHasEditableContent && (
226+
<MenuItem
227+
onClick={() =>
228+
this.props.onEditProps({ type: 'segment', elementId: part.instance.segmentId })
229+
}
230+
>
231+
<span>{t('Edit Segment Properties')}</span>
232+
</MenuItem>
233+
)}
234+
{partHasEditableContent && (
235+
<MenuItem
236+
onClick={() => this.props.onEditProps({ type: 'part', elementId: part.instance.part._id })}
237+
>
238+
<span>{t('Edit Part Properties')}</span>
239+
</MenuItem>
240+
)}
241+
{pieceHasEditableContent && (
242+
<MenuItem
243+
onClick={() => this.props.onEditProps({ type: 'piece', elementId: piece.instance.piece._id })}
244+
>
245+
<span>{t('Edit Piece Properties')}</span>
246+
</MenuItem>
247+
)}
248+
</>
249+
)}
224250
</>
225251
)}
226252
</ContextMenu>

0 commit comments

Comments
 (0)