Center automation flow horizontally on first load

[MAILPOET-5586]
This commit is contained in:
Jan Jakes
2023-10-06 09:01:29 +02:00
committed by Aschepikov
parent 524298ff41
commit 002bb2f92a
3 changed files with 39 additions and 8 deletions

View File

@@ -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%;

View File

@@ -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>

View File

@@ -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();