mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-03 23:00:14 -05:00
Updated signup form modal (#16925)
Refs https://github.com/TryGhost/Team/issues/3340 --------- Co-authored-by: Simon Backx <simon@ghost.org>
This commit is contained in:
Sanne de Vries
GitHub
parent
af2e069cbe
commit
8833ec03de
7 changed files with 135 additions and 132 deletions
|
|
@ -9,65 +9,60 @@
|
|||
|
||||
<div class="modal-signup-form-embed-main">
|
||||
<header class="modal-header">
|
||||
<h1>Embed a signup form</h1>
|
||||
<h1>Embed signup form</h1>
|
||||
</header>
|
||||
|
||||
<div class="modal-body">
|
||||
|
||||
<div class="gh-signup-form-container">
|
||||
<div class="gh-stack-item gh-setting-first">
|
||||
<div class="flex-grow-1">
|
||||
<label class="gh-setting-title">
|
||||
Choose layout
|
||||
</label>
|
||||
|
||||
<Settings::SignupForm::StyleSelect
|
||||
@value={{this.style}}
|
||||
@onChange={{this.setStyle}}
|
||||
/>
|
||||
</div>
|
||||
<GhFormGroup class="gh-signup-form-container">
|
||||
<div class="gh-stack-item row">
|
||||
<label class="modal-fullsettings-title">
|
||||
Layout
|
||||
</label>
|
||||
<Settings::SignupForm::StyleSelect
|
||||
@value={{this.style}}
|
||||
@onChange={{this.setStyle}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="gh-stack-item gh-setting-first">
|
||||
<div class="flex-grow-1">
|
||||
<label class="gh-setting-title">
|
||||
Apply labels at signup
|
||||
</label>
|
||||
|
||||
<GhMemberLabelInput
|
||||
@onChange={{this.setLabels}}
|
||||
@allowEdit={{false}}
|
||||
@labels={{this.labels}}
|
||||
@triggerId="label-input"
|
||||
@placeholder="Select"
|
||||
/>
|
||||
</div>
|
||||
<div class="gh-stack-item row">
|
||||
<label class="modal-fullsettings-title">
|
||||
Background color
|
||||
</label>
|
||||
<Modals::Newsletters::Components::ColorPicker
|
||||
@color={{this.backgroundColor}}
|
||||
@presetColors={{this.backgroundPresetColors}}
|
||||
@onColorChange={{this.setBackgroundColor}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<div class="form-group gh-stack-item row">
|
||||
<label class="fw6 f8">Background color</label>
|
||||
<Modals::Newsletters::Components::ColorPicker
|
||||
@color={{this.backgroundColor}}
|
||||
@presetColors={{this.backgroundPresetColors}}
|
||||
@onColorChange={{this.setBackgroundColor}}
|
||||
/>
|
||||
</div>
|
||||
<div class="gh-stack-item">
|
||||
<label class="modal-fullsettings-title">
|
||||
Labels at signup
|
||||
</label>
|
||||
<GhMemberLabelInput
|
||||
@onChange={{this.setLabels}}
|
||||
@allowEdit={{false}}
|
||||
@labels={{this.labels}}
|
||||
@triggerId="label-input"
|
||||
@placeholder="Select"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="gh-stack-item gh-setting-first">
|
||||
<div class="gh-stack-item">
|
||||
<div class="flex-grow-1">
|
||||
<label class="gh-setting-title">
|
||||
<label class="modal-fullsettings-title">
|
||||
Embed code
|
||||
</label>
|
||||
|
||||
<textarea id="gh-signup-form-embed-code-input" class="gh-input" readonly>{{this.generatedCode}}</textarea>
|
||||
<p>Copy and paste this HTML code somewhere inside the <body> tag of your site.</p>
|
||||
<GhTextarea
|
||||
@id="gh-signup-form-embed-code-input"
|
||||
@class="gh-input gh-signup-form-embed-code-input"
|
||||
@value={{this.generatedCode}}
|
||||
readonly
|
||||
/>
|
||||
<p>Copy and paste this HTML code somewhere inside the <code><body></code> tag of your site.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</GhFormGroup>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,12 +24,12 @@ export default class SignupFormEmbedModal extends Component {
|
|||
@service feature;
|
||||
@tracked style = 'all-in-one';
|
||||
@tracked labels = [];
|
||||
@tracked backgroundColor = '#f9f9f9';
|
||||
@tracked backgroundColor = '#F1F3F4';
|
||||
@inject config;
|
||||
@service notifications;
|
||||
|
||||
static modalOptions = {
|
||||
className: 'fullwidth-modal'
|
||||
className: 'fullwidth-modal gh-signup-form-embed'
|
||||
};
|
||||
|
||||
@action
|
||||
|
|
@ -50,10 +50,10 @@ export default class SignupFormEmbedModal extends Component {
|
|||
get backgroundPresetColors() {
|
||||
return [
|
||||
{
|
||||
value: '#f9f9f9',
|
||||
value: '#F1F3F4',
|
||||
name: 'Light grey',
|
||||
class: '',
|
||||
style: 'background: #f9f9f9 !important;'
|
||||
style: 'background: #F1F3F4 !important;'
|
||||
},
|
||||
{
|
||||
value: '#000000',
|
||||
|
|
|
|||
|
|
@ -1,16 +1,5 @@
|
|||
<span
|
||||
class="gh-select mt2"
|
||||
data-select-text="test"
|
||||
tabindex="0"
|
||||
>
|
||||
<OneWaySelect
|
||||
@id="portal-button-style"
|
||||
@name="portal[button-style]"
|
||||
@options={{this.options}}
|
||||
@optionValuePath="value"
|
||||
@optionLabelPath="name"
|
||||
@value={{this.selectedOption.value}}
|
||||
@update={{this.setRecipients}}
|
||||
/>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
<div class="gh-btn-group">
|
||||
{{#each this.options as |option|}}
|
||||
<button class="gh-btn {{if (eq this.selectedOption.value option.value) "gh-btn-group-selected"}}" type="button" {{on "click" (fn this.setRecipients option)}}><span>{{option.name}}</span></button>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,4 +20,9 @@ export default class StyleSelect extends Component {
|
|||
setRecipients(option) {
|
||||
this.args.onChange(option.value);
|
||||
}
|
||||
|
||||
@action
|
||||
changeOption(option) {
|
||||
this.option = option;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1743,14 +1743,14 @@ p.gh-members-import-errordetail:first-of-type {
|
|||
overflow: hidden;
|
||||
padding: 4px;
|
||||
margin-right: -4px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.gh-email-design-color-picker .gh-btn-group p {
|
||||
opacity: 1;
|
||||
margin: 0;
|
||||
color: var(--midgrey);
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
font-weight: 400;
|
||||
transition: all .15s ease-in-out;
|
||||
transition-delay: .03s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3073,6 +3073,78 @@ p.theme-validation-details {
|
|||
color: var(--midgrey);
|
||||
}
|
||||
|
||||
/* Signup form modal */
|
||||
.gh-signup-form-embed {
|
||||
margin: 6vw 0;
|
||||
}
|
||||
|
||||
.gh-signup-form-iframe {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.fullwidth-modal {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.epm-modal .modal-signup-form-embed {
|
||||
display: grid;
|
||||
grid-template-columns: 5fr 3fr;
|
||||
max-width: 1120px;
|
||||
max-height: 520px;
|
||||
margin: 32px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modal-signup-form-embed-preview {
|
||||
position: relative;
|
||||
margin: 1.6rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.modal-signup-form-embed-preview iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-signup-form-embed-main {
|
||||
padding: 32px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.modal-signup-form-embed-main .modal-body {
|
||||
overflow-y: auto;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.modal-signup-form-embed-main .form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.gh-signup-form-container .gh-stack-item {
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
|
||||
.gh-signup-form-container .gh-stack-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.gh-signup-form-embed-code-input {
|
||||
min-height: 72px;
|
||||
background: var(--whitegrey-l2);
|
||||
font-family: var(--font-family-mono);
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.gh-signup-form-embed-code-input:focus {
|
||||
background: var(--whitegrey-l2);
|
||||
border-color: var(--lightgrey-l1) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* History log
|
||||
/* ---------------------------------------------------------- */
|
||||
.gh-history-filter-li {
|
||||
|
|
@ -3751,61 +3823,3 @@ p.theme-validation-details {
|
|||
padding: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Signup form */
|
||||
|
||||
.gh-signup-form-embed-code {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.gh-signup-form-embed-code button {
|
||||
flex-shrink: 0;
|
||||
/* Overlap the input to keep the button radius */
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.gh-signup-form-embed-code input {
|
||||
min-width: 0; /* Make sure this input can shrink inside a flex container */
|
||||
font-family: Consolas,Liberation Mono,Menlo,Courier,monospace;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
.gh-signup-form-iframe {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.fullwidth-modal {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.epm-modal .modal-signup-form-embed {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 32px;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modal-signup-form-embed-preview {
|
||||
flex-basis: 65%;
|
||||
position: relative;
|
||||
min-width: 500px;
|
||||
}
|
||||
|
||||
.modal-signup-form-embed-preview iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal-signup-form-embed-main {
|
||||
flex-basis: 35%;
|
||||
flex-shrink: 0;
|
||||
padding: 32px;
|
||||
max-height: 80vh;
|
||||
min-width: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -530,14 +530,14 @@ tt {
|
|||
|
||||
code,
|
||||
tt {
|
||||
padding: 0.2rem 0.3rem 0.1rem;
|
||||
border: color-mod(#f5f7f8 lightness(-10%)) 1px solid;
|
||||
background: #f5f7f8;
|
||||
padding: 0.2rem 0.3rem;
|
||||
border: 1px solid var(--whitegrey-d1);
|
||||
background: var(--whitegrey-l1);
|
||||
border-radius: 2px;
|
||||
color: #c25;
|
||||
color: var(--pink-d3);
|
||||
vertical-align: middle;
|
||||
white-space: pre-wrap;
|
||||
font-size: 0.8em;
|
||||
font-size: 0.85em;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
|
|
@ -546,8 +546,8 @@ pre {
|
|||
margin: 1.6em 0;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
border: color-mod(#f5f7f8 lightness(-10%)) 1px solid;
|
||||
background: #f5f7f8;
|
||||
border: 1px solid var(--whitegrey-d1);
|
||||
background: var(--whitegrey-l1);
|
||||
border-radius: 3px;
|
||||
white-space: pre;
|
||||
font-family: var(--font-family-mono);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue