Center automation flow horizontally on first load
[MAILPOET-5586]
This commit is contained in:
@@ -1,13 +1,13 @@
|
||||
.mailpoet-automation-editor-automation {
|
||||
background: #fbfbfb;
|
||||
display: grid;
|
||||
flex-grow: 1;
|
||||
grid-template-rows: auto 1fr;
|
||||
}
|
||||
|
||||
.mailpoet-automation-editor-automation-wrapper {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
padding: 50px 20px;
|
||||
overflow: scroll;
|
||||
padding: 0 20px 50px;
|
||||
}
|
||||
|
||||
.mailpoet-automation-editor-automation-flow {
|
||||
@@ -32,7 +32,7 @@
|
||||
}
|
||||
|
||||
.mailpoet-automation-editor-stats {
|
||||
margin: 0 auto 32px;
|
||||
margin: 50px auto 32px;
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
|
||||
|
@@ -1,4 +1,4 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
__unstableComposite as Composite,
|
||||
__unstableUseCompositeState as useCompositeState,
|
||||
@@ -30,6 +30,24 @@ export function Automation({ context }: AutomationProps): JSX.Element {
|
||||
shift: true,
|
||||
});
|
||||
|
||||
// We need to trigger one more render to center the scroll, because the sidebar
|
||||
// is using a React Portal, and it is not in the layout after the first render.
|
||||
const [rendered, setRendered] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// first render
|
||||
if (!rendered) {
|
||||
setRendered(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// center the scroll to the first step
|
||||
const firstStep = document.querySelector('[data-step-id] > *');
|
||||
if (firstStep instanceof HTMLElement) {
|
||||
firstStep.scrollIntoView({ block: 'nearest', inline: 'center' });
|
||||
}
|
||||
}, [rendered]);
|
||||
|
||||
if (!automationData) {
|
||||
return <EmptyAutomation />;
|
||||
}
|
||||
@@ -44,8 +62,8 @@ export function Automation({ context }: AutomationProps): JSX.Element {
|
||||
aria-orientation="vertical"
|
||||
className="mailpoet-automation-editor-automation"
|
||||
>
|
||||
<div className="mailpoet-automation-editor-automation-wrapper">
|
||||
<Statistics />
|
||||
<div className="mailpoet-automation-editor-automation-wrapper">
|
||||
<div className="mailpoet-automation-editor-automation-flow">
|
||||
<Flow stepData={automationData.steps.root} row={0} />
|
||||
</div>
|
||||
|
@@ -5,8 +5,10 @@ import { Button, Icon, Popover, SlotFillProvider } from '@wordpress/components';
|
||||
import { store as noticesStore } from '@wordpress/notices';
|
||||
import { dispatch, select as globalSelect, useSelect } from '@wordpress/data';
|
||||
import { getSettings, setSettings } from '@wordpress/date';
|
||||
import { Platform } from '@wordpress/element';
|
||||
import { wordpress } from '@wordpress/icons';
|
||||
import {
|
||||
store as interfaceStore,
|
||||
ComplementaryArea,
|
||||
FullscreenMode,
|
||||
InterfaceSkeleton,
|
||||
@@ -21,7 +23,7 @@ import { KeyboardShortcuts } from './components/keyboard-shortcuts';
|
||||
import { EditorNotices } from './components/notices';
|
||||
import { Sidebar } from './components/sidebar';
|
||||
import { Automation } from './components/automation';
|
||||
import { createStore, storeName } from './store';
|
||||
import { automationSidebarKey, createStore, storeName } from './store';
|
||||
import { initializeApi } from '../api';
|
||||
import { initialize as initializeCoreIntegration } from '../integrations/core';
|
||||
import { initialize as initializeMailPoetIntegration } from '../integrations/mailpoet';
|
||||
@@ -187,6 +189,17 @@ window.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
createStore();
|
||||
|
||||
// Sync default sidebar state to the interface store before starting rendering,
|
||||
// so that the layout is computed early enough to center the automation scroll.
|
||||
const sidebarActiveByDefault = Platform.select({
|
||||
web: true,
|
||||
native: false,
|
||||
});
|
||||
dispatch(interfaceStore).enableComplementaryArea(
|
||||
storeName,
|
||||
sidebarActiveByDefault ? automationSidebarKey : undefined,
|
||||
);
|
||||
|
||||
const root = document.getElementById('mailpoet_automation_editor');
|
||||
if (root) {
|
||||
registerTranslations();
|
||||
|
Reference in New Issue
Block a user