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

Use TextInput help and label for step name and adjust width and position of side name dropdown

Browse Source 
[MAILPOET-4445]
This commit is contained in:
David Remer
2022-08-12 09:47:16 +03:00
committed by Veljko V
parent 70081a846d
commit 2a09646e8d
2 changed files with 19 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
mailpoet/assets/css/src/components-automation-editor/_panel.scss
View File

@ -34,21 +34,17 @@
}
.mailpoet-automation-panel-plain-body-title-action {
margin-top: -13px;
margin-top: -10px;
padding-right: 0;
padding-top: 0;
}
}
.mailpoet-step-name-input,
.mailpoet-step-name-description,
.mailpoet-step-name-title {
min-width: 250px;
.mailpoet-step-name-popover {
margin-top: -25px;
padding: 8px;
}
.mailpoet-step-name-title {
font-size: 13px;
font-weight: normal;
line-height: 1.5;
margin: 1em 0;
.mailpoet-step-name-input {
min-width: 208px;
}

30
mailpoet/assets/js/src/automation/editor/components/panel/step-name.tsx
View File

@ -19,7 +19,8 @@ export function StepName({ step }: Props): JSX.Element {
return (
<Dropdown
className="mailpoet-step-name-dropdown"
position="bottom center"
contentClassName="mailpoet-step-name-popover"
position="bottom left"
renderToggle={({ isOpen, onToggle }) => (
<PlainBodyTitle
title={step.name && step.name.length > 0 ? step.name : stepType.title}
@ -34,22 +35,17 @@ export function StepName({ step }: Props): JSX.Element {
</PlainBodyTitle>
)}
renderContent={() => (
<>
<h3 className="mailpoet-step-name-title">Step name</h3>
<TextControl
className="mailpoet-step-name-input"
placeholder={stepType.title}
value={step.name}
onChange={(value) => {
dispatch(store).updateStepName(step.id, value);
}}
/>
<p className="mailpoet-step-name-description">
Give the automation step a name that indicates its purpose. E.g
“Abandoned cart recovery”. <br />
This name will be displayed only to you and not to the clients.
</p>
</>
<TextControl
label="Step name"
className="mailpoet-step-name-input"
placeholder={stepType.title}
value={step.name}
onChange={(value) => {
dispatch(store).updateStepName(step.id, value);
}}
help="Give the automation step a name that indicates its purpose. E.g
“Abandoned cart recovery”. This name will be displayed only to you and not to the clients."
/>
)}
/>
);