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 { .mailpoet-automation-panel-plain-body-title-action {
margin-top: -13px; margin-top: -10px;
padding-right: 0; padding-right: 0;
padding-top: 0; padding-top: 0;
} }
} }
.mailpoet-step-name-input, .mailpoet-step-name-popover {
.mailpoet-step-name-description, margin-top: -25px;
.mailpoet-step-name-title { padding: 8px;
min-width: 250px;
} }
.mailpoet-step-name-title { .mailpoet-step-name-input {
font-size: 13px; min-width: 208px;
font-weight: normal;
line-height: 1.5;
margin: 1em 0;
} }

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 ( return (
<Dropdown <Dropdown
className="mailpoet-step-name-dropdown" className="mailpoet-step-name-dropdown"
position="bottom center" contentClassName="mailpoet-step-name-popover"
position="bottom left"
renderToggle={({ isOpen, onToggle }) => ( renderToggle={({ isOpen, onToggle }) => (
<PlainBodyTitle <PlainBodyTitle
title={step.name && step.name.length > 0 ? step.name : stepType.title} title={step.name && step.name.length > 0 ? step.name : stepType.title}
@ -34,22 +35,17 @@ export function StepName({ step }: Props): JSX.Element {
</PlainBodyTitle> </PlainBodyTitle>
)} )}
renderContent={() => ( renderContent={() => (
<> <TextControl
<h3 className="mailpoet-step-name-title">Step name</h3> label="Step name"
<TextControl className="mailpoet-step-name-input"
className="mailpoet-step-name-input" placeholder={stepType.title}
placeholder={stepType.title} value={step.name}
value={step.name} onChange={(value) => {
onChange={(value) => { dispatch(store).updateStepName(step.id, 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."
<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>
</>
)} )}
/> />
); );