mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-19 08:31:43 +03:00
404d3c44cf
no issue The full edit newsletter form with all the settings, design options, and preview felt quite overwhelming when the only piece of data that's required to create a newsletter is the name. - re-organised the newsletter modal components by renaming `modals/edit-newlsetter` to `modals/newsletters` to better represent the full suite of modals that are used in newsletter management - added a `modals/newsletters/new` component containing a minimal form with name/description/opt-in-existing fields - switched the `new-newsletter` route to open the new modal rather than the previous dual-purpose edit modal - moved message about newsletter creation into the create modal and dropped the separate create confirmation modal - dropped unnecessary unsaved-changes confirmation - removed the now-unused opt-in-existing behaviour from the edit newsletter modal Co-authored-by: Peter Zimon <peter.zimon@gmail.com>
77 lines
3.7 KiB
Handlebars
77 lines
3.7 KiB
Handlebars
<div class="modal-content">
|
||
<header class="modal-header">
|
||
<h1>Create newsletter</h1>
|
||
</header>
|
||
<button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
|
||
|
||
<div class="modal-body">
|
||
<fieldset>
|
||
<GhFormGroup @errors={{@data.newsletter.errors}} @hasValidated={{@data.newsletter.hasValidated}} @property="name">
|
||
<label for="newsletter-title" class="modal-fullsettings-title">Name</label>
|
||
<input
|
||
id="newsletter-title"
|
||
type="text"
|
||
class="gh-input miw-100 form-text"
|
||
value={{@data.newsletter.name}}
|
||
placeholder="Weekly Roundup"
|
||
{{on "input" (fn this.onInput "name")}}
|
||
/>
|
||
<GhErrorMessage @errors={{@data.newsletter.errors}} @property="name" />
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @errors={{@data.newsletter.errors}} @hasValidated={{@data.newsletter.hasValidated}} @property="description">
|
||
<label for="newsletter-description" class="modal-fullsettings-title">Description</label>
|
||
<textarea
|
||
id="newsletter-description"
|
||
class="gh-input miw-100 form-text"
|
||
{{on "input" (fn this.onInput "description")}}
|
||
>{{@data.newsletter.description}}</textarea>
|
||
<GhErrorMessage @errors={{@data.newsletter.errors}} @property="description" />
|
||
</GhFormGroup>
|
||
|
||
<GhFormGroup @classNames="flex justify-between items-start mb2">
|
||
<div class="mr3">
|
||
<label for="opt-in-existing" class="modal-fullsettings-title">Opt-in existing subscribers</label>
|
||
<p>
|
||
{{#if this.optInExisting}}
|
||
{{#let (members-count-fetcher query=(hash filter="newsletters.status:active")) as |countFetcher|}}
|
||
This newsletter will be available to <strong>all members</strong>. Your {{#if countFetcher.count}}<strong>{{countFetcher.count}}</strong>{{/if}} existing subscriber{{#if (gt countFetcher.count 1)}}s{{/if}} will also be opted-in to receive it.
|
||
{{/let}}
|
||
{{else}}
|
||
The newsletter will be available to <strong>all new members</strong>. Existing members won’t be subscribed, but may visit their account area to opt-in to future emails.
|
||
{{/if}}
|
||
</p>
|
||
</div>
|
||
<div class="for-switch small">
|
||
<div class="container">
|
||
<input
|
||
type="checkbox"
|
||
id="opt-in-existing"
|
||
checked={{this.optInExisting}}
|
||
{{on "check" this.setOptInExisting}}
|
||
>
|
||
<button type="button" class="input-toggle-component" {{on "click" this.toggleOptInExisting}}></button>
|
||
</div>
|
||
</div>
|
||
</GhFormGroup>
|
||
</fieldset>
|
||
</div>
|
||
|
||
<div class="modal-footer">
|
||
<button class="gh-btn" type="button" {{on "click" @close}}>
|
||
<span>Cancel</span>
|
||
</button>
|
||
|
||
<GhTaskButton
|
||
@buttonText="Create"
|
||
@runningText="Creating"
|
||
@successText="Created"
|
||
@task={{this.saveTask}}
|
||
@idleClass="gh-btn-primary"
|
||
@class="gh-btn gh-btn-icon"
|
||
{{on-key "cmd+s" this.saveViaKeyboard priority=1}}
|
||
{{on-key "Enter" this.saveViaKeyboard priority=1}}
|
||
data-test-button="save-newsletter"
|
||
/>
|
||
</div>
|
||
</div> |