Ghost/ghost/admin/app/components/modals/newsletters/edit/preview.js
Kevin Ansfield 404d3c44cf Switched to a minimal form when creating a newsletter (#2356)
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>
2022-04-27 10:36:43 +01:00

48 lines
1.3 KiB
JavaScript

import Component from '@glimmer/component';
import {htmlSafe} from '@ember/template';
import {inject as service} from '@ember/service';
export default class EditNewsletterPreview extends Component {
@service ghostPaths;
@service session;
@service settings;
get showHeader() {
return (this.args.newsletter.showHeaderIcon && this.settings.get('icon'))
|| this.headerTitle;
}
get showHeaderTitle() {
return this.headerTitle || this.headerSubtitle;
}
get headerTitle() {
if (this.args.newsletter.showHeaderTitle) {
return this.settings.get('title');
} else if (this.args.newsletter.showHeaderName) {
return this.args.newsletter.name;
}
return null;
}
get headerSubtitle() {
if (this.args.newsletter.showHeaderTitle && this.args.newsletter.showHeaderName) {
return this.args.newsletter.name;
}
return null;
}
get featureImageUrl() {
// keep path separate so asset rewriting correctly picks it up
const imagePath = '/img/user-cover.png';
const fullPath = this.ghostPaths.assetRoot.replace(/\/$/, '') + imagePath;
return fullPath;
}
get featureImageStyle() {
return htmlSafe(`background-image: url(${this.featureImageUrl})`);
}
}