Make LYS preview frame resizable (#46327)
* Make LYS preview frame resizable * Add changelog * Refactor site-preview.scss: Remove components-resizable-box__container styles * Set z-index to 2 to preview container to fix resizing handler on max size * Make room for the handle on the left side
This commit is contained in:
Chi-Hsuan Huang
GitHub
parent
2751023836
commit
5a57525bd6
|
|
@ -1,8 +1,66 @@
|
|||
// Resizable frame styles
|
||||
.edit-site-resizable-frame__inner.is-resizing::before {
|
||||
content: "";
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.edit-site-resizable-frame__inner-content {
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.edit-site-resizable-frame__handle {
|
||||
align-items: center;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: var(--wp-admin-theme-color);
|
||||
cursor: ew-resize;
|
||||
display: flex;
|
||||
height: 64px;
|
||||
justify-content: flex-end;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: calc(50% - 32px);
|
||||
width: 4px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.edit-site-resizable-frame__handle::before {
|
||||
content: "";
|
||||
height: 100%;
|
||||
left: 100%;
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.edit-site-resizable-frame__handle::after {
|
||||
content: "";
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.edit-site-resizable-frame__handle:focus-visible {
|
||||
outline: 2px solid #0000;
|
||||
}
|
||||
|
||||
.edit-site-resizable-frame__handle.is-resizing,
|
||||
.edit-site-resizable-frame__handle:focus,
|
||||
.edit-site-resizable-frame__handle:hover {
|
||||
background-color: var(--wp-admin-theme-color);
|
||||
}
|
||||
|
||||
.launch-store-site-preview-page__container {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
padding: 16px 16px 16px 0;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
|
||||
.launch-store-site__preview-site-iframe {
|
||||
display: block;
|
||||
|
|
@ -23,7 +81,19 @@
|
|||
z-index: 1;
|
||||
background-color: #fff;
|
||||
opacity: 0.9;
|
||||
height: calc(100% - 32px);
|
||||
width: calc(100% - 16px);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.launch-store-preview-layout__canvas {
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -32px; // Make room for the handle on the left side for maximum width
|
||||
width: calc(100% + 32px);
|
||||
padding: 16px 16px 16px 32px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,11 +4,18 @@
|
|||
import classnames from 'classnames';
|
||||
import { useState, useRef, useEffect } from '@wordpress/element';
|
||||
import { Spinner } from '@woocommerce/components';
|
||||
import { useResizeObserver } from '@wordpress/compose';
|
||||
import {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore No types for this exist yet.
|
||||
__unstableMotion as motion,
|
||||
} from '@wordpress/components';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { getAdminSetting } from '~/utils/admin-settings';
|
||||
import ResizableFrame from '~/customize-store/assembler-hub/resizable-frame';
|
||||
import type { MainContentComponentProps } from '../xstate';
|
||||
import './site-preview.scss';
|
||||
|
||||
|
|
@ -16,6 +23,9 @@ export const SitePreviewPage = ( props: MainContentComponentProps ) => {
|
|||
const siteUrl = getAdminSetting( 'siteUrl' ) + '?site-preview=1';
|
||||
const [ isLoading, setIsLoading ] = useState( true );
|
||||
const iframeRef = useRef< HTMLIFrameElement >( null );
|
||||
const [ frameResizer, frameSize ] = useResizeObserver();
|
||||
const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
|
||||
useState( false );
|
||||
|
||||
useEffect( () => {
|
||||
const iframeContentWindow = iframeRef.current?.contentWindow;
|
||||
|
|
@ -49,18 +59,41 @@ export const SitePreviewPage = ( props: MainContentComponentProps ) => {
|
|||
props.className
|
||||
) }
|
||||
>
|
||||
{ isLoading && (
|
||||
<div className="launch-store-site-preview-site__loading-overlay">
|
||||
<Spinner />
|
||||
</div>
|
||||
{ frameResizer }
|
||||
{ !! frameSize.width && (
|
||||
<motion.div
|
||||
initial={ false }
|
||||
layout="position"
|
||||
className="launch-store-preview-layout__canvas"
|
||||
>
|
||||
<ResizableFrame
|
||||
isReady={ ! isLoading }
|
||||
isHandleVisibleByDefault={ false }
|
||||
isFullWidth={ false }
|
||||
defaultSize={ {
|
||||
width: frameSize.width - 24,
|
||||
height: frameSize.height,
|
||||
} }
|
||||
isOversized={ isResizableFrameOversized }
|
||||
setIsOversized={ setIsResizableFrameOversized }
|
||||
innerContentStyle={ {} }
|
||||
>
|
||||
{ isLoading && (
|
||||
<div className="launch-store-site-preview-site__loading-overlay">
|
||||
<Spinner />
|
||||
</div>
|
||||
) }
|
||||
|
||||
<iframe
|
||||
ref={ iframeRef }
|
||||
className="launch-store-site__preview-site-iframe"
|
||||
src={ siteUrl }
|
||||
title="Preview"
|
||||
onLoad={ () => setIsLoading( false ) }
|
||||
/>
|
||||
</ResizableFrame>
|
||||
</motion.div>
|
||||
) }
|
||||
<iframe
|
||||
ref={ iframeRef }
|
||||
className="launch-store-site__preview-site-iframe"
|
||||
src={ siteUrl }
|
||||
title="Preview"
|
||||
onLoad={ () => setIsLoading( false ) }
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: update
|
||||
|
||||
Make LYS preview frame resizable
|
||||
Loading…
Reference in New Issue