diff --git a/ghost/admin/app/controllers/settings/labs.js b/ghost/admin/app/controllers/settings/labs.js index 5261819a6f..1a8b710148 100644 --- a/ghost/admin/app/controllers/settings/labs.js +++ b/ghost/admin/app/controllers/settings/labs.js @@ -46,7 +46,6 @@ export default Controller.extend({ importErrors: null, importSuccessful: false, showDeleteAllModal: false, - showMemberConfig: false, submitting: false, uploadButtonText: 'Import', @@ -71,8 +70,8 @@ export default Controller.extend({ }); let monthlyPlan = stripeProcessor.config.plans.find(plan => plan.interval === 'month'); let yearlyPlan = stripeProcessor.config.plans.find(plan => plan.interval === 'year'); - monthlyPlan.dollarAmount = (monthlyPlan.amount / 100); - yearlyPlan.dollarAmount = (yearlyPlan.amount / 100); + monthlyPlan.dollarAmount = monthlyPlan.amount ? (monthlyPlan.amount / 100) : ''; + yearlyPlan.dollarAmount = yearlyPlan.amount ? (yearlyPlan.amount / 100) : ''; stripeProcessor.config.plans = { monthly: monthlyPlan, yearly: yearlyPlan @@ -161,10 +160,6 @@ export default Controller.extend({ this.toggleProperty('showDeleteAllModal'); }, - toggleMemberConfig() { - this.toggleProperty('showMemberConfig'); - }, - /** * Opens a file selection dialog - Triggered by "Upload x" buttons, * searches for the hidden file input within the .gh-setting element diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css index d9faa30dfb..5245f62337 100644 --- a/ghost/admin/app/styles/patterns/forms.css +++ b/ghost/admin/app/styles/patterns/forms.css @@ -285,6 +285,64 @@ textarea { opacity: 1; } +.gh-radio { + display: flex; + margin: 0 0 20px; +} + +.gh-radio-button { + flex-shrink: 0; + position: relative; + width: 15px; + height: 15px; + border: color-mod(var(--lightgrey) l(-10%)) 1px solid; + border-radius: 100%; + background: #fff; +} + +.gh-radio-content { + display: flex; + flex-direction: column; + margin: 0 0 0 15px; + width: 100%; +} + +.gh-radio-label { + font-size: 1.4rem; + line-height: 1.2em; + font-weight: 400; +} + +.gh-radio-desc { + font-size: 1.3rem; + line-height: 1.4em; + font-weight: 200; + color: color-mod(var(--midgrey) l(+10%)); +} + +.gh-radio-label:hover, +.gh-radio-button:hover { + cursor: pointer; +} + +.gh-radio.active .gh-radio-button { + border-color: color-mod(var(--blue) l(-12%)); + background: var(--blue); +} + +.gh-radio.active .gh-radio-button:before { + display: block; + content: ""; + position: absolute; + top: 3px; + left: 3px; + width: 7px; + height: 7px; + background: #fff; + border-radius: 100%; + box-shadow: rgba(0,0,0,0.25) 0 1px 3px; +} + /* Switch /* ---------------------------------------------------------- */ diff --git a/ghost/admin/app/templates/settings/labs.hbs b/ghost/admin/app/templates/settings/labs.hbs index c8fb868504..6d1d314aef 100644 --- a/ghost/admin/app/templates/settings/labs.hbs +++ b/ghost/admin/app/templates/settings/labs.hbs @@ -129,106 +129,93 @@
Members
Enable free or paid member registration.
- {{#liquid-if feature.labs.members class="nr20"}} + {{#liquid-if feature.labs.members class="nr25"}} - +
+
+ - {{#liquid-if showMemberConfig}} -
Default post access
-
-
-
-
-
Public
+
+
+
+
Public
- -
-
-
-
Free and paying members
+ +
+
+
+
Free and paying members
- -
-
-
-
Only paying members
+
+
+
Only paying members
-
-
Stripe setup
-
-
-
- - {{gh-text-input - value=(readonly subscriptionSettings.stripeConfig.public_token) - input=(action "setSubscriptionSettings" "public_token") - class="mt1" - placeholder="pk_..." - }} +
+ + {{gh-text-input + value=(readonly subscriptionSettings.stripeConfig.public_token) + input=(action "setSubscriptionSettings" "public_token") + class="mt1" + }} + + + {{gh-text-input + value=(readonly subscriptionSettings.stripeConfig.secret_token) + input=(action "setSubscriptionSettings" "secret_token") + class="mt1" + }} + Where to find Stripe + API keys + +
+
+ {{#gh-form-group}} + +
+ {{gh-text-input + value=(readonly subscriptionSettings.stripeConfig.plans.monthly.dollarAmount) + type="number" + input=(action "setSubscriptionSettings" "month") + }} +
+ {{/gh-form-group}}
- - {{gh-text-input - value=(readonly subscriptionSettings.stripeConfig.secret_token) - input=(action "setSubscriptionSettings" "secret_token") - class="mt1" - placeholder="sk_..." - }} + {{#gh-form-group class="description-container"}} + +
+ {{gh-text-input + value=(readonly subscriptionSettings.stripeConfig.plans.yearly.dollarAmount) + type="number" + input=(action "setSubscriptionSettings" "year") + }} +
+ {{/gh-form-group}}
- Where to find Stripe API keys -
+ +
+
-
-
- {{#gh-form-group}} - -
- {{gh-text-input - value=(readonly subscriptionSettings.stripeConfig.plans.monthly.dollarAmount) - type="number" - input=(action "setSubscriptionSettings" "month") - }} -
- {{/gh-form-group}} -
-
- {{#gh-form-group class="description-container"}} - -
- {{gh-text-input - value=(readonly subscriptionSettings.stripeConfig.plans.yearly.dollarAmount) - type="number" - input=(action "setSubscriptionSettings" "year") - }} -
- {{/gh-form-group}} -
-
- +
+ {{gh-task-button "Save members settings" + task=saveSettings + successText="Saved" + runningText="Saving" + class="gh-btn gh-btn-blue gh-btn-icon" + }} +
-
- {{gh-task-button "Save" - task=saveSettings - successText="Saved" - runningText="Saving" - class="gh-btn gh-btn-blue gh-btn-icon" - }} -
- {{/liquid-if}} {{/liquid-if}}