Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

Added Comment access dropdown to membership settings

Browse source
This commit is contained in:
Peter Zimon 2022-07-06 11:01:57 +02:00
parent 79f0c04828
commit ff7bb48b7e
6 changed files with 86 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
ghost/admin/app/components/settings/members-comment-access.hbs Normal file
View file

@ -0,0 +1,25 @@
<div class="gh-setting-richdd-container comment-access-dropdown" data-test-members-subscription-access>
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Commenting</h4>
<p class="gh-expandable-description">Who can comment on posts?</p>
</div>
</div>
<PowerSelect
@options={{this.options}}
@selected={{this.selectedOption}}
@onChange={{this.setCommentAccess}}
@triggerClass="gh-setting-dropdown"
@dropdownClass="gh-setting-dropdown-list"
as |option|
>
<div class="gh-setting-dropdown-content" data-test-members-subscription-option={{option.value}}>
{{svg-jar option.icon class=(concat "w8 h8 mr2 fill-" (or option.icon_color "green"))}}
<div class="gh-radio-label">
{{option.name}}<br>
<div class="gh-radio-desc">{{option.description}}</div>
</div>
</div>
</PowerSelect>
</div>

39
ghost/admin/app/components/settings/members-comment-access.js Normal file
View file

@ -0,0 +1,39 @@
import Component from '@glimmer/component';
import {action} from '@ember/object';
import {inject as service} from '@ember/service';
export default class SettingsMembersCommentAccess extends Component {
@service settings;
get options() {
return [{
name: 'Nobody',
description: 'Disable commenting completely',
value: 'off',
icon: 'no-members',
icon_color: 'midlightgrey-d2'
}, {
name: 'All members',
description: 'Logged-in members',
value: 'all',
icon: 'members-all',
icon_color: 'blue'
}, {
name: 'Paid-members only',
description: 'Only logged-in members with an active Stripe subscription',
value: 'paid',
icon: 'members-paid',
icon_color: 'pink'
}];
}
get selectedOption() {
return this.options.find(o => o.value === this.settings.get('commentsEnabled'));
}
@action
setCommentAccess(option) {
this.settings.set('commentsEnabled', option.value);
this.args.onChange?.(option.value);
}
}

2
ghost/admin/app/components/settings/members-default-post-access.hbs
View file

@ -1,4 +1,4 @@
<div class="mb4 gh-setting-large-dropdown" data-test-default-post-access>
<div class="gh-setting-richdd-container" data-test-default-post-access>
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Default post access</h4>

2
ghost/admin/app/services/settings.js
View file

@ -29,7 +29,7 @@ export default class SettingsService extends Service.extend(_ProxyMixin, Validat
_loadSettings() {
if (!this._loadingPromise) {
this._loadingPromise = this.store
.queryRecord('setting', {group: 'site,theme,private,members,portal,newsletter,email,amp,labs,slack,unsplash,views,firstpromoter,editor'})
.queryRecord('setting', {group: 'site,theme,private,members,portal,newsletter,email,amp,labs,slack,unsplash,views,firstpromoter,editor,comments'})
.then((settings) => {
this._loadingPromise = null;
return settings;

18
ghost/admin/app/styles/layouts/settings.css
View file

@ -2163,6 +2163,10 @@ p.theme-validation-details {
}
/* Membership */
.gh-setting-membership {
margin-bottom: 32px;
}
@media (max-width: 1140px) {
.gh-setting-members-canvas::before {
display: none;
@ -2173,12 +2177,12 @@ p.theme-validation-details {
display: flex;
flex-direction: column;
justify-content: space-between;
max-height: 680px;
}
.gh-setting-members-basicsform .intro {
margin: 0;
font-size: 1.6rem;
margin-bottom: 12px;
}
.gh-setting-members-portalcta {
@ -2206,10 +2210,6 @@ p.theme-validation-details {
line-height: 1.4;
}
.gh-setting-rich-dropdown {
margin-bottom: 30px;
}
.gh-setting-members-portalpreview {
justify-self: end;
font-size: 1.3rem;
@ -2252,7 +2252,7 @@ p.theme-validation-details {
.gh-setting-dropdown .gh-setting-dropdown-content {
display: flex;
align-items: center;
margin: 1.6rem 2.4rem 1.6rem 1rem;
margin: 1.2rem 2.4rem 1.2rem 0.8rem;
}
.gh-setting-dropdown-list {
@ -2277,7 +2277,7 @@ p.theme-validation-details {
}
.gh-setting-richdd-container {
margin: 36px 0;
margin: 36px 0 0;
}
.gh-expandable-content .gh-setting-richdd-container {
@ -2296,6 +2296,10 @@ p.theme-validation-details {
display: none;
}
.gh-setting-rich-dropdown {
margin-bottom: 32px;
}
.gh-setting-rich-dropdown .ember-power-select-status-icon {
right: 20px;
}

12
ghost/admin/app/templates/settings/membership.hbs
View file

@ -20,11 +20,14 @@
<section class="view-container settings-debug">
<div class="gh-main-layout content-preview">
<div class="gh-main-layout gh-setting-membership content-preview">
<div class="gh-setting-members-basicsform">
<p class="intro">Fund your work with subscription revenue. Connect your Stripe account and offer premium content to your audience. Our creators are already making over $12 million per year, while <strong>Ghost takes 0% payment fees</strong>.</p>
<hr>
<div>
{{#unless (feature 'comments')}}
<hr>
{{/unless}}
<div class="flex flex-column justify-between mt3">
<section class="gh-expandable gh-setting-members-portalcta">
<div class="gh-expandable-block">
<div class="gh-expandable-header">
@ -44,6 +47,9 @@
<div class="gh-setting-rich-dropdown">
<Settings::MembersSubscriptionAccess @onChange={{this.membersSubscriptionAccessChanged}} />
<Settings::MembersDefaultPostAccess />
{{#if (feature 'comments')}}
<Settings::MembersCommentAccess />
{{/if}}
</div>
</div>
</div>