Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Fix header appearance in the form editor

Browse Source 
[MAILPOET-6054]
This commit is contained in:
Rostislav Wolny
2024-06-04 13:50:13 +02:00
committed by Aschepikov
parent 65b72a2b88
commit 6fa6f723f9
3 changed files with 43 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
mailpoet/assets/css/src/components-form-editor/_block-editor.scss
View File

@@ -12,12 +12,6 @@
}
}
// Fix for settings toolbar placement in header
.edit-post-header {
flex-direction: row-reverse;
justify-content: space-between;
}
// Fix for default appender appearance
// We don't use any default block (WP Post editor has paragraph)
// and CSS distributed within packages is works only with the paragraph block
@@ -140,18 +134,6 @@ h2 {
padding: 10px;
}
// Close button animation
.edit-post-header-toolbar.edit-post-header-toolbar__left
> .edit-post-header-toolbar__inserter-toggle {
svg {
transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
}
&.is-pressed svg {
transform: rotate(45deg);
}
}
// Hide block selector header with close button on desktops
@include respond-to(not-small-screen) {

19
mailpoet/assets/css/src/components-form-editor/_header.scss
View File

@@ -1,9 +1,26 @@
// Fix for settings toolbar placement in header
.edit-post-header {
flex-direction: row-reverse;
justify-content: space-between;
}
// Header buttons spacing
.mailpoet-editor-header-button {
padding-left: 8px;
padding-right: 8px;
@media (min-width: 600px) {
margin-right: 12px;
padding: 0 12px;
}
}
// Close button animation
.editor-document-tools__left > .edit-post-header-toolbar__inserter-toggle {
svg {
transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
}
&.is-pressed svg {
transform: rotate(45deg);
}
}

48
mailpoet/assets/js/src/form-editor/components/header.jsx
View File

@@ -35,8 +35,8 @@ function Header({ isInserterOpened, setIsInserterOpened }) {
useDispatch(storeName);
return (
<div className="edit-post-header">
<div className="edit-post-header__settings">
<div className="editor-header edit-post-header">
<div className="editor-header__settings">
<Button
variant="secondary"
onClick={showPreview}
@@ -87,27 +87,29 @@ function Header({ isInserterOpened, setIsInserterOpened }) {
)}
</DropdownMenu>
</div>
<div className="edit-post-header__toolbar">
<div className="toolbar edit-post-header-toolbar edit-post-header-toolbar__left">
<Button
variant="secondary"
href="?page=mailpoet-forms#/"
className="mailpoet-editor-header-button"
>
{MailPoet.I18n.t('back')}
</Button>
<ToolbarItem
as={Button}
data-automation-id="form_inserter_open"
className="edit-post-header-toolbar__inserter-toggle"
isPrimary
isPressed={isInserterOpened}
onClick={() => setIsInserterOpened(!isInserterOpened)}
icon={plus}
label={_x('Add block', 'Generic label for block inserter button')}
/>
<HistoryUndo data-automation-id="form_undo_button" />
<HistoryRedo data-automation-id="form_redo_button" />
<div className="editor-header__toolbar">
<div className="toolbar edit-post-header-toolbar">
<div className="editor-document-tools__left">
<Button
variant="secondary"
href="?page=mailpoet-forms#/"
className="mailpoet-editor-header-button"
>
{MailPoet.I18n.t('back')}
</Button>
<ToolbarItem
as={Button}
data-automation-id="form_inserter_open"
className="edit-post-header-toolbar__inserter-toggle"
variant="primary"
isPressed={isInserterOpened}
onClick={() => setIsInserterOpened(!isInserterOpened)}
icon={plus}
label={_x('Add block', 'Generic label for block inserter button')}
/>
<HistoryUndo data-automation-id="form_undo_button" />
<HistoryRedo data-automation-id="form_redo_button" />
</div>
</div>
</div>
</div>