From 8e897ffdd43eccb69fbb50e6d8c53dcf8d07832b Mon Sep 17 00:00:00 2001 From: Elena Baidakova Date: Fri, 21 Apr 2023 12:49:29 +0400 Subject: [PATCH] Wired announcement settings admin UI to API (#16692) refs TryGhost/Team#3094 --- .../announcement-settings/background.hbs | 22 ++--- .../announcement-settings/background.js | 10 +-- .../announcement-settings/visibility.hbs | 80 +++++++++++-------- .../announcement-settings/visibility.js | 44 +++++++--- .../gh-nav-menu/announcement-bar.hbs | 6 +- .../gh-nav-menu/announcement-bar.js | 75 +---------------- ghost/admin/app/models/setting.js | 2 +- 7 files changed, 99 insertions(+), 140 deletions(-) diff --git a/ghost/admin/app/components/announcement-settings/background.hbs b/ghost/admin/app/components/announcement-settings/background.hbs index b26c4b01df..2f65da5292 100644 --- a/ghost/admin/app/components/announcement-settings/background.hbs +++ b/ghost/admin/app/components/announcement-settings/background.hbs @@ -7,22 +7,16 @@
- - - + {{#each this.options as |settingOption|}} + + {{/each}}
- - {{!-- - - {{svg-jar "arrow-down-small"}} - --}} \ No newline at end of file diff --git a/ghost/admin/app/components/announcement-settings/background.js b/ghost/admin/app/components/announcement-settings/background.js index 18ec84170d..622a7d9d99 100644 --- a/ghost/admin/app/components/announcement-settings/background.js +++ b/ghost/admin/app/components/announcement-settings/background.js @@ -11,15 +11,15 @@ export default class AnnouncementSettingsBackgroundComponent extends Component { get options() { return [ - {value: 'accent', label: 'Accent'}, - {value: 'dark', label: 'Dark'}, - {value: 'light', label: 'Light'} + {value: 'dark', label: 'Dark', className: 'kg-headerstyle-btn-dark'}, + {value: 'light', label: 'Light', className: 'kg-headerstyle-btn-light'}, + {value: 'accent', label: 'Accent', className: 'kg-headerstyle-btn-accent'} ]; } @action - setBackground(event) { - this.settings.announcementBackground = event.target.value; + setBackground(value) { + this.settings.announcementBackground = value; this.settings.save(); this.args.onChange?.(); } diff --git a/ghost/admin/app/components/announcement-settings/visibility.hbs b/ghost/admin/app/components/announcement-settings/visibility.hbs index 230889e7fe..3574a25ff8 100644 --- a/ghost/admin/app/components/announcement-settings/visibility.hbs +++ b/ghost/admin/app/components/announcement-settings/visibility.hbs @@ -1,6 +1,6 @@
- - - -
- {{!-- - - {{svg-jar "arrow-down-small"}} - --}} + {{#if this.isPaidAvailable}} + + + {{else}} + + {{/if}} +
\ No newline at end of file diff --git a/ghost/admin/app/components/announcement-settings/visibility.js b/ghost/admin/app/components/announcement-settings/visibility.js index 4fce18dd85..34e67e4f67 100644 --- a/ghost/admin/app/components/announcement-settings/visibility.js +++ b/ghost/admin/app/components/announcement-settings/visibility.js @@ -4,24 +4,46 @@ import {inject as service} from '@ember/service'; export default class AnnouncementSettingsVisibilityComponent extends Component { @service settings; + @service membersUtils; - get visibility() { + visibilityOptions = { + freeMembers: 'free_members', + paidMembers: 'paid_members', + visitors: 'visitors' + }; + + get visibilitySettings() { return this.settings.announcementVisibility; } - get options() { - return [ - {value: 'public', label: 'Public'}, - {value: 'visitors', label: 'Visitors'}, - {value: 'members', label: 'Members'}, - {value: 'paid', label: 'Paid'} - ]; + get isPaidAvailable() { + return this.membersUtils.isStripeEnabled; + } + + get isFreeMembersChecked() { + return this.visibilitySettings.includes(this.visibilityOptions.freeMembers); + } + + get isPaidMembersChecked() { + return this.visibilitySettings.includes(this.visibilityOptions.paidMembers); + } + + get isVisitorsChecked() { + return this.visibilitySettings.includes(this.visibilityOptions.visitors); } @action - setVisibility(event) { - this.settings.announcementVisibility = event.target.value; + updateVisibility(event) { + let updatedVisibilityOptions = [...this.visibilitySettings]; + const value = event.target.value; + + if (event.target.checked) { + updatedVisibilityOptions.push(value); + } else { + updatedVisibilityOptions = updatedVisibilityOptions.filter(item => item !== value); + } + + this.settings.announcementVisibility = updatedVisibilityOptions; this.settings.save(); - this.args.onChange?.(); } } diff --git a/ghost/admin/app/components/gh-nav-menu/announcement-bar.hbs b/ghost/admin/app/components/gh-nav-menu/announcement-bar.hbs index d9bc633e10..40f67e88bc 100644 --- a/ghost/admin/app/components/gh-nav-menu/announcement-bar.hbs +++ b/ghost/admin/app/components/gh-nav-menu/announcement-bar.hbs @@ -8,9 +8,9 @@
- - - + + +
diff --git a/ghost/admin/app/components/gh-nav-menu/announcement-bar.js b/ghost/admin/app/components/gh-nav-menu/announcement-bar.js index 2d0934d0be..ee38935ef7 100644 --- a/ghost/admin/app/components/gh-nav-menu/announcement-bar.js +++ b/ghost/admin/app/components/gh-nav-menu/announcement-bar.js @@ -1,86 +1,15 @@ import Component from '@glimmer/component'; import {action} from '@ember/object'; -import {bind} from '@ember/runloop'; import {inject} from 'ghost-admin/decorators/inject'; -import {isEmpty} from '@ember/utils'; import {inject as service} from '@ember/service'; -import {tracked} from '@glimmer/tracking'; export default class AnnouncementBarMenuComponent extends Component { - @service customThemeSettings; - @service router; - @service settings; - @service store; @service themeManagement; @inject config; - @tracked openSection = null; - - themes = this.store.peekAll('theme'); - - constructor() { - super(...arguments); - - // fetch all themes in the background so we can show the active theme - this.store.findAll('theme'); - - if (this.router.currentRouteName === 'settings.announcement-bar.index') { - this.openDefaultSection(); - } - - this.routeDidChangeHandler = bind(this, this.handleRouteDidChange); - this.router.on('routeDidChange', this.routeDidChangeHandler); - } - - willDestroy() { - super.willDestroy(...arguments); - this.router.off('routeDidChange', this.routeDidChangeHandler); - } - - get activeTheme() { - return this.themes.findBy('active', true); - } - @action - toggleSection(section) { - if (this.openSection === section) { - this.openSection = null; - } else { - this.openSection = section; - - const group = this.customThemeSettings.KNOWN_GROUPS.findBy('key', section); - if (group && group.previewType) { - this.themeManagement.setPreviewType(group.previewType); - } else { - this.themeManagement.setPreviewType('homepage'); - } - } - } - - @action - transitionBackToIndex() { - if (this.router.currentRouteName !== 'settings.announcement-bar.index') { - this.router.transitionTo('settings.announcement-bar.index'); - } - } - - @action - closeAllSections() { - this.openSection = null; - } - - openDefaultSection() { - const noCustomSettings = isEmpty(this.customThemeSettings.settings); - - if (noCustomSettings) { - this.openSection = 'brand'; - } - } - - handleRouteDidChange(transition) { - if (!transition.isAborted && transition.to?.name === 'settings.announcement-bar.index') { - this.openDefaultSection(); - } + updatePreview() { + this.themeManagement.updatePreviewHtmlTask.perform(); } } diff --git a/ghost/admin/app/models/setting.js b/ghost/admin/app/models/setting.js index fcbcd1813c..43b2add759 100644 --- a/ghost/admin/app/models/setting.js +++ b/ghost/admin/app/models/setting.js @@ -52,7 +52,7 @@ export default Model.extend(ValidationEngine, { sharedViews: attr('string'), announcementContent: attr('string'), announcementBackground: attr('string'), - announcementVisibility: attr('string'), + announcementVisibility: attr('json-string'), /** * Analytics settings */