Assembler: Allow to zoom out the preview (#83034)

* Device Switcher: Add range control of zoom * Device Switcher: Handle zoom-out * Device Switcher: Adjust styles * Adjust the zoom-out behavior * Adjust slider styles * Adjust styles * Disable zoom-out behavior when there is no selected pattern * Clean up: PatternLayout * Keep the action bar un-scaled and stick to the top of the active pattern * Centralize viewport components * Adjust action bar position * Fix types * Fix viewport height * Add tracks event * Debounce the tracks event
Automattic · Oct 24, 2023 · 430e0b0 · 430e0b0
1 parent fd9c9f4
commit 430e0b0
Show file tree

Hide file tree

Showing 12 changed files with 358 additions and 376 deletions.
diff --git a/...t/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/events.ts b/...t/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/events.ts
@@ -64,6 +64,6 @@ export const PATTERN_ASSEMBLER_EVENTS = {
 	/**
 	 * Large Preview
 	 */
-	LARGE_PREVIEW_ADD_HEADER_BUTTON_CLICK:
-		'calypso_signup_pattern_assembler_large_preview_add_header_button_click',
+	LARGE_PREVIEW_ZOOM_OUT_SCALE_CHANGE:
+		'calypso_signup_pattern_assembler_large_preview_zoom_out_scale_change',
 } as const;
diff --git a/...t/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx b/...t/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx
@@ -628,7 +628,6 @@ const PatternAssembler = ( props: StepProps & NoticesProps ) => {
 
 	return (
 		<StepContainer
-			className="pattern-assembler__sidebar-revamp"
 			stepName="pattern-assembler"
 			stepSectionName={ currentScreen.name }
 			backLabelText={

diff --git a/...per/declarative-flow/internals/steps-repository/pattern-assembler/pattern-action-bar.scss b/...per/declarative-flow/internals/steps-repository/pattern-assembler/pattern-action-bar.scss
@@ -1,54 +1,90 @@
-.pattern-assembler {
-	.pattern-action-bar {
+.pattern-assembler__pattern-action-bar {
+	display: flex;
+	align-items: center;
+	gap: 0;
+	position: absolute;
+	top: 16px;
+	left: 16px;
+	height: 40px;
+	padding: 0;
+	border: 1px solid #1e1e1e;
+	border-radius: 2px;
+	box-sizing: border-box;
+	background-color: #fff;
+	z-index: 1;
+
+	&.pattern-assembler__pattern-action-bar--overflow {
+		transform: translate(-16px, calc(-100% - 16px - 12px));
+
+		&::before {
+			display: block;
+		}
+	}
+
+	.pattern-action-bar__block {
+		flex-direction: column;
 		display: flex;
-		opacity: 0;
 		align-items: center;
-		position: absolute;
+		justify-content: center;
+	}
+
+	.pattern-action-bar__action {
 		height: 40px;
-		right: 0;
 
-		.pattern-action-bar__block {
-			flex-direction: column;
-			display: flex;
-			align-items: center;
-			justify-content: center;
+		&.has-icon {
+			min-width: 40px;
+			max-width: 40px;
+			padding: 0;
 		}
 
-		.pattern-action-bar__action {
-			&.has-icon {
-				min-width: 40px;
-				max-width: 40px;
-				padding: 0;
-			}
+		svg {
+			fill: var(--studio-gray-80);
+		}
+
+		&:not(:disabled):hover {
+			color: var(--studio-blue-50);
 
 			svg {
-				fill: var(--studio-gray-80);
+				fill: var(--studio-blue-50);
 			}
+		}
 
-			&:not(:disabled):hover {
-				color: var(--studio-blue-50);
+		&--move-up,
+		&--move-down {
+			height: 13px;
+			display: flex;
+			align-items: center;
+		}
 
-				svg {
-					fill: var(--studio-blue-50);
-				}
+		&--shuffle {
+			&.has-icon {
+				flex-direction: row;
+				gap: 4px;
+				line-height: 40px;
+				max-width: none;
+				padding: 0 12px;
 			}
+		}
+	}
 
-			&--move-up,
-			&--move-down {
-				height: 13px;
-				display: flex;
-				align-items: center;
-			}
+	> .pattern-action-bar__action:not(:first-child) {
+		border-left: 1px solid #1e1e1e;
+	}
 
-			&--shuffle {
-				&.has-icon {
-					flex-direction: row;
-					gap: 4px;
-					line-height: 40px;
-					max-width: none;
-					padding: 0 12px;
-				}
-			}
-		}
+	/**
+	 * Increase the area of the action bar to keep the element active
+	 * when hovering on the the action bar
+	 */
+	&::before {
+		content: "";
+		display: none;
+		position: absolute;
+		top: -12px;
+		left: -12px;
+		width: 100%;
+		height: 100%;
+		padding: 12px 12px 20px 12px;
+		box-sizing: content-box;
+		z-index: -1;
 	}
 }
diff --git a/...pper/declarative-flow/internals/steps-repository/pattern-assembler/pattern-action-bar.tsx b/...pper/declarative-flow/internals/steps-repository/pattern-assembler/pattern-action-bar.tsx
@@ -1,6 +1,8 @@
 import { Button } from '@wordpress/components';
 import { chevronUp, chevronDown, edit, shuffle, trash } from '@wordpress/icons';
+import classnames from 'classnames';
 import { useTranslate } from 'i18n-calypso';
+import React from 'react';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { PATTERN_ASSEMBLER_EVENTS } from './events';
 import type { Category } from './types';
@@ -12,11 +14,13 @@ type PatternActionBarProps = {
 	onMoveUp?: () => void;
 	onMoveDown?: () => void;
 	onShuffle: () => void;
+	onMouseLeave?: ( event: React.MouseEvent< HTMLElement > ) => void;
 	disableMoveUp?: boolean;
 	disableMoveDown?: boolean;
 	patternType: string;
 	category?: Category;
 	source: 'list' | 'large_preview';
+	isOverflow?: boolean;
 };
 
 const PatternActionBar = ( {
@@ -25,11 +29,13 @@ const PatternActionBar = ( {
 	onMoveUp,
 	onMoveDown,
 	onShuffle,
+	onMouseLeave,
 	disableMoveUp,
 	disableMoveDown,
 	patternType,
 	category,
 	source,
+	isOverflow,
 }: PatternActionBarProps ) => {
 	const translate = useTranslate();
 	const eventProps = {
@@ -39,10 +45,14 @@ const PatternActionBar = ( {
 	};
 
 	return (
+		// eslint-disable-next-line jsx-a11y/interactive-supports-focus
 		<div
-			className="pattern-action-bar"
+			className={ classnames( 'pattern-assembler__pattern-action-bar', {
+				'pattern-assembler__pattern-action-bar--overflow': isOverflow,
+			} ) }
 			role="menubar"
 			aria-label={ translate( 'Pattern actions' ) }
+			onMouseLeave={ onMouseLeave }
 		>
 			{ onMoveUp && onMoveDown && (
 				<div className="pattern-action-bar__block">

diff --git a/.../declarative-flow/internals/steps-repository/pattern-assembler/pattern-large-preview.scss b/.../declarative-flow/internals/steps-repository/pattern-assembler/pattern-large-preview.scss
@@ -37,45 +37,6 @@
 	$pattern-large-preview-outer-border-radius: calc(var(--device-switcher-border-radius) - var(--device-switcher-border-width));
 	position: relative;
 
-	.pattern-action-bar {
-		box-sizing: border-box;
-		position: absolute;
-		top: 16px;
-		left: 16px;
-		right: unset;
-		padding: 0;
-		border: 1px solid #1e1e1e;
-		border-radius: 2px;
-		gap: 0;
-		background-color: #fff;
-		opacity: 0;
-		z-index: 1;
-		// Scale up the action bar in fixed viewport
-		transform: scale(calc(1 / var(--viewport-scale)));
-		transform-origin: top left;
-
-		> .pattern-action-bar__action {
-			position: relative;
-			min-height: 40px;
-			min-width: 40px;
-			padding: 2px;
-
-			&:first-child::after {
-				content: none;
-			}
-
-			&::after {
-				background-color: #1e1e1e;
-				bottom: 0;
-				content: "";
-				left: 0;
-				position: absolute;
-				top: 0;
-				width: 1px;
-			}
-		}
-	}
-
 	&::after {
 		content: "";
 		position: absolute;
@@ -96,16 +57,13 @@
 		border-bottom-right-radius: $pattern-large-preview-outer-border-radius;
 	}
 
+	&--active,
 	&:hover,
 	&:focus,
 	&:focus-within {
-		.pattern-action-bar {
-			opacity: 1;
-		}
-
 		&::after {
-			// Scale up the border of a hovered pattern in fixed viewport
-			border: calc(2px * (1 / var(--viewport-scale))) solid var(--color-primary-light);
+			// Scale up the border of a active pattern
+			border: calc(2px * (1 / var(--viewport-scale) / var(--pattern-large-preview-zoom-out-scale))) solid var(--color-primary-light);
 		}
 	}
 }