feat: selected element indicator

Author: olzzon

packages/webui/src/client/styles/elementSelected.scss

@@ -0,0 +1,16 @@
+@import '_variables';
+
+.element-selected {
+	border-radius: 0.1px;
+	border-width: 1px;
+	border-color: #171717;
+	border-style: solid;
+	animation: blinker 1s linear infinite;
+
+	@keyframes blinker {
+		30% {
+			opacity: 0.8;
+			background-color: rgb(13, 13, 13);
+		}
+	}
+}

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

@@ -42,6 +42,7 @@ input {
 @import 'tooltips';
 @import 'users';
 @import 'utils';
+@import 'elementSelected';
 
 @import 'countdown/overlay';
 @import 'countdown/presenter';

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

@@ -1075,14 +1075,12 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 							>
 								<h2
 									id={`segment-name-${this.props.segment._id}`}
-									className={
-										'segment-timeline__title__label' +
-										(this.props.segment.identifier ? ' identifier' : '') +
-										(selectElementContext.isSelected(this.props.segment._id) ? ' selected' : '')
-									}
+									className={ClassNames(
+										'segment-timeline__title__label' + (this.props.segment.identifier ? ' identifier' : ''),
+										selectElementContext.isSelected(this.props.segment._id) ? 'element-selected' : ''
+									)}
 									data-identifier={this.props.segment.identifier}
 								>
-									{/* for debugging: */ selectElementContext.isSelected(this.props.segment._id) && <span>!!</span>}
 									{this.props.segment.name}
 								</h2>
 								{(criticalNotes > 0 || warningNotes > 0) && (

packages/webui/src/client/ui/SegmentTimeline/SourceLayerItem.tsx

@@ -24,6 +24,7 @@ import { UIStudio } from '@sofie-automation/meteor-lib/dist/api/studios'
 import { ReadonlyDeep } from 'type-fest'
 import { PieceContentStatusObj } from '@sofie-automation/meteor-lib/dist/api/pieceContentStatus'
 import { SelectedElementsContext } from '../RundownView/SelectedElementsContext'
+import classNames from 'classnames'
 const LEFT_RIGHT_ANCHOR_SPACER = 15
 const MARGINAL_ANCHORED_WIDTH = 5
 
@@ -671,15 +672,18 @@ export const SourceLayerItem = withTranslation()(
 					<SelectedElementsContext.Consumer>
 						{(selectElementContext) => (
 							<div
-								className={pieceUiClassNames(
-									piece,
-									this.props.contentStatus,
-									'segment-timeline__piece',
-									this.props.layer.type,
-									this.props.part.partId,
-									this.state.highlight,
-									elementWidth,
-									this.state
+								className={classNames(
+									pieceUiClassNames(
+										piece,
+										this.props.contentStatus,
+										'segment-timeline__piece',
+										this.props.layer.type,
+										this.props.part.partId,
+										this.state.highlight,
+										elementWidth,
+										this.state
+									),
+									selectElementContext.isSelected(this.props.part.instance.part._id) ? 'element-selected' : ''
 								)}
 								data-obj-id={piece.instance._id}
 								ref={this.setRef}

packages/webui/src/client/ui/UserEditOperations/PropertiesPanel.tsx

@@ -474,16 +474,18 @@ function EditingTypeChangeSourceLayerSource(props: {
 				})}
 			</div>
 			{selectedGroupSchema && (
-				<div onChange={handleSourceChange}>
+				<>
 					<a className="propertiespanel-pop-up__label">{t('Source')}:</a>
-					<SchemaFormInPlace
-						schema={selectedGroupSchema}
-						object={selectedValues}
-						translationNamespaces={props.userEditOperation.translationNamespaces}
-					/>
-					<br />
-					<hr />
-				</div>
+					<div onChange={handleSourceChange}>
+						<SchemaFormInPlace
+							schema={selectedGroupSchema}
+							object={selectedValues}
+							translationNamespaces={props.userEditOperation.translationNamespaces}
+						/>
+						<br />
+						<hr />
+					</div>
+				</>
 			)}
 		</>
 	)