wip: UserEditPanel - add support for SVG icons in grouping (e.g for s…

…plit or DVE backgrounds)

packages/blueprints-integration/src/userEditing.ts

@@ -57,6 +57,7 @@ export interface UserEditingGroupingType {
 	filter?: string
 	label?: string
 	color?: string
+	svgIcon?: string
 }
 
 export enum UserEditingButtonType {

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

@@ -116,10 +116,43 @@
 				border: 0px;
 				margin: 4px;
 				gap: 10px;
-				color: #ddd;
+				color: #fff;
 				opacity: 1;
 			}
 
+			> .usereditpanel-pop-up__groupselector__button-svg {
+				width: 50px;
+				height: 30px;
+				border: 0;
+				margin: 4px;
+				color: #ddd;
+				padding: 0;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				opacity: 0.2; // default state
+
+				&-active {
+				  @extend .usereditpanel-pop-up__groupselector__button-svg;
+				  opacity: 1;
+				}
+
+				> .svg-icon {
+				  width: 100%;
+				  height: 100%;
+				  margin-top: -1px;
+				  display: flex;
+				  align-items: center;
+				  justify-content: center;
+
+				  svg {
+					width: 100%;
+					height: 100%;
+					display: block;
+				  }
+				}
+			}
+
 		}
 
 		> .usereditpanel-pop-up__action {

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

@@ -30,6 +30,9 @@ import { UIParts } from '../Collections'
  * UserEditPanelPopUp props.
  */
 interface Props {
+	// Currently selected context menu context
+	// Plan is to replace this with a more specific selection of what is selected in the UI
+	// When selected element for UserEditPanel has been implemented
 	contextMenuContext: IContextMenuContext | null
 }
 
@@ -163,55 +166,31 @@ export function UserEditPanel(props: Props) {
 				</>
 			)}
 			<div className="usereditpanel-pop-up__footer">
-				{isPartSelected ? (
-					<button
-						className="usereditpanel-pop-up__button"
-						onClick={(e) => {
-							rundownId &&
-								doUserAction(t, e, UserAction.EXECUTE_USER_OPERATION, (e, ts) =>
-									MeteorCall.userAction.executeUserChangeOperation(
-										e,
-										ts,
-										rundownId,
-										{
-											segmentExternalId: segment?.externalId,
-											partExternalId: part?.externalId,
-											pieceExternalId: undefined,
-										},
-										{
-											id: DefaultUserOperationsTypes.REVERT_PART,
-										}
-									)
-								)
-						}}
-					>
-						<span className="usereditpanel-pop-up__label">REVERT CHANGES</span>
-					</button>
-				) : (
-					<button
-						className="usereditpanel-pop-up__button"
-						onClick={(e) => {
-							rundownId &&
-								doUserAction(t, e, UserAction.EXECUTE_USER_OPERATION, (e, ts) =>
-									MeteorCall.userAction.executeUserChangeOperation(
-										e,
-										ts,
-										rundownId,
-										{
-											segmentExternalId: segment?.externalId,
-											partExternalId: undefined,
-											pieceExternalId: undefined,
-										},
-										{
-											id: DefaultUserOperationsTypes.REVERT_SEGMENT,
-										}
-									)
+				<button
+					className="usereditpanel-pop-up__button"
+					onClick={(e) => {
+						rundownId &&
+							doUserAction(t, e, UserAction.EXECUTE_USER_OPERATION, (e, ts) =>
+								MeteorCall.userAction.executeUserChangeOperation(
+									e,
+									ts,
+									rundownId,
+									{
+										segmentExternalId: segment?.externalId,
+										partExternalId: part?.externalId,
+										pieceExternalId: undefined,
+									},
+									{
+										id: isPartSelected
+											? DefaultUserOperationsTypes.REVERT_PART
+											: DefaultUserOperationsTypes.REVERT_SEGMENT,
+									}
 								)
-						}}
-					>
-						<span className="usereditpanel-pop-up__label">REVERT CHANGES</span>
-					</button>
-				)}
+							)
+					}}
+				>
+					<span className="usereditpanel-pop-up__label">REVERT CHANGES</span>
+				</button>
 			</div>
 		</div>
 	)
@@ -332,7 +311,7 @@ function EditingTypeChangeSource(props: {
 			<div className="usereditpanel-pop-up__groupselector">
 				{props.userEditOperation.grouping &&
 					groups.map((group, index) => {
-						return (
+						return !group.svgIcon ? (
 							<button
 								className={
 									selectedGroup !== group.filter
@@ -346,7 +325,33 @@ function EditingTypeChangeSource(props: {
 								}}
 								disabled={!group.filter}
 							>
-								{group.label}
+								<div
+									className="svg"
+									dangerouslySetInnerHTML={{
+										__html: group.svgIcon || '',
+									}}
+								></div>
+								{!group.svgIcon && group.label}
+							</button>
+						) : (
+							<button
+								className={
+									selectedGroup !== group.filter
+										? `usereditpanel-pop-up__groupselector__button-svg`
+										: `usereditpanel-pop-up__groupselector__button-svg-active`
+								}
+								key={index}
+								onClick={() => {
+									setSelectedGroup(group.filter)
+								}}
+								disabled={!group.filter}
+							>
+								<div
+									className="svg-icon"
+									dangerouslySetInnerHTML={{
+										__html: group.svgIcon,
+									}}
+								></div>
 							</button>
 						)
 					})}