wip: Preview popup (next gen floating inspector)

Author: jstarpl

meteor/client/ui/PreviewPopUp/PreviewPopUp.scss

@@ -0,0 +1,43 @@
+.preview-popUp {
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: repeat(4, auto);
+	grid-template-areas:
+		'preview'
+		'controls'
+		'content-info'
+		'warnings';
+
+	border: 1px solid var(--sofie-segment-layer-hover-popup-border);
+	background: var(--sofie-segment-layer-hover-popup-background);
+	box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
+	border-radius: 5px;
+	overflow: hidden;
+	pointer-events: none;
+
+	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
+
+	&--large {
+	}
+
+	&-small {
+	}
+}
+
+.preview-popUp__preview {
+}
+
+.preview-popUp__controls {
+}
+
+.preview-popUp__content-info {
+}
+
+.preview-popUp__warnings {
+}
+
+.preview-popUp__warning-row {
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-auto-rows: auto;
+}

meteor/client/ui/PreviewPopUp/PreviewPopUp.tsx

@@ -0,0 +1,87 @@
+import React, { useMemo, useState } from 'react'
+import classNames from 'classnames'
+import { usePopper } from 'react-popper'
+import { Padding, Placement, VirtualElement } from '@popperjs/core'
+
+export function PreviewPopUp({
+	anchor,
+	padding,
+	placement,
+	size,
+	preview,
+	controls,
+	contentInfo,
+	warnings,
+}: {
+	anchor: HTMLElement | VirtualElement
+	padding: Padding
+	placement: Placement
+	size: 'small' | 'large'
+	preview?: React.ReactNode
+	controls?: React.ReactNode
+	contentInfo?: React.ReactNode
+	warnings?: React.ReactNode
+}): React.JSX.Element {
+	const warningsCount = React.Children.count(warnings)
+
+	const [popperEl, setPopperEl] = useState<HTMLDivElement | null>(null)
+	const popperOptions = useMemo(
+		() => ({
+			placement: placement ?? 'top',
+			strategy: 'fixed' as const,
+			modifiers: [
+				{
+					name: 'flip',
+					options: {
+						fallbackPlacements: [
+							'top-start',
+							'top-end',
+							'right',
+							'right-start',
+							'right-end',
+							'left',
+							'left-start',
+							'left-end',
+							'bottom',
+							'bottom-start',
+							'bottom-end',
+						],
+						rootBoundary: 'viewport',
+						padding: padding ?? 0,
+					},
+				},
+				{
+					name: 'preventOverflow',
+					options: {
+						padding: padding ?? 0, // additional padding placed here (like Header, etc.)
+					},
+				},
+			],
+		}),
+		[padding]
+	)
+	const { styles, attributes } = usePopper(anchor, popperEl, popperOptions)
+
+	return (
+		<div
+			ref={setPopperEl}
+			className={classNames('preview-popUp', {
+				'preview-popUp--large': size === 'large',
+				'preview-popUp--small': size === 'small',
+			})}
+			style={styles.popper}
+			{...attributes.popper}
+		>
+			{preview && <div className="preview-popUp__preview">{preview}</div>}
+			{controls && <div className="preview-popUp__controls">{controls}</div>}
+			{contentInfo && <div className="preview-popUp__content-info">{contentInfo}</div>}
+			{warnings && warningsCount > 0 && (
+				<div className="preview-popUp__warnings">
+					{React.Children.map(warnings, (child) => (
+						<div className="preview-popUp__warning-row">{child}</div>
+					))}
+				</div>
+			)}
+		</div>
+	)
+}

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

@@ -40,6 +40,9 @@ $segment-layer-separator-color: transparentize(#000, 0.5);
 
 :root {
 	--popdown: 2rem;
+	
+	--sofie-segment-layer-hover-popup-border: #838383;
+	--sofie-segment-layer-hover-popup-background: #333333;
 }
 $break-width: 35rem;