mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 09:03:12 +03:00
Updated design for Labs/Members configuration
no issue
This commit is contained in:
Peter Zimon
parent
4a3fd90017
commit
a29e687da6
@ -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
|
||||
|
||||
@ -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
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
@ -129,106 +129,93 @@
|
||||
<div class="gh-setting-title">Members</div>
|
||||
<div class="gh-setting-desc">Enable free or paid member registration.</div>
|
||||
|
||||
{{#liquid-if feature.labs.members class="nr20"}}
|
||||
{{#liquid-if feature.labs.members class="nr25"}}
|
||||
|
||||
<button type="button" class="gh-btn gh-btn-labs-toggle" {{action "toggleMemberConfig" ""}}>
|
||||
{{#if showMemberConfig}}
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
{{else}}
|
||||
{{svg-jar "arrow-right-small"}}
|
||||
{{/if}}
|
||||
Configure
|
||||
</button>
|
||||
<div class="flex ba br4 b--whitegrey pa5 pt4 mt5">
|
||||
<section class="gh-visibility-menu-content w-50">
|
||||
<label class="dib f8 fw6 mb4">Default post access</label>
|
||||
|
||||
{{#liquid-if showMemberConfig}}
|
||||
<div>Default post access</div>
|
||||
<section class="gh-visibility-menu-content">
|
||||
<div class="gh-publishmenu-radio {{if (eq settings.defaultContentVisibility "public") "active"}}" {{action "setDefaultContentVisibility" "public" on="click"}}>
|
||||
<div class="gh-publishmenu-radio-button" data-test-publishmenu-unpublished-option></div>
|
||||
<div class="gh-publishmenu-radio-content">
|
||||
<div class="gh-publishmenu-radio-label">Public</div>
|
||||
<div class="gh-radio {{if (eq settings.defaultContentVisibility "public") "active"}}"
|
||||
{{action "setDefaultContentVisibility" "public" on="click"}}>
|
||||
<div class="gh-radio-button" data-test-publishmenu-unpublished-option></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Public</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gh-publishmenu-radio {{if (eq settings.defaultContentVisibility "members") "active"}}" {{action "setDefaultContentVisibility" "members" on="click"}}>
|
||||
<div class="gh-publishmenu-radio-button" data-test-publishmenu-published-option></div>
|
||||
<div class="gh-publishmenu-radio-content">
|
||||
<div class="gh-publishmenu-radio-label">Free and paying members</div>
|
||||
|
||||
<div class="gh-radio {{if (eq settings.defaultContentVisibility "members") "active"}}"
|
||||
{{action "setDefaultContentVisibility" "members" on="click"}}>
|
||||
<div class="gh-radio-button" data-test-publishmenu-published-option></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Free and paying members</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gh-publishmenu-radio {{if (eq settings.defaultContentVisibility "paid") "active"}}"
|
||||
|
||||
<div class="gh-radio {{if (eq settings.defaultContentVisibility "paid") "active"}}"
|
||||
{{action "setDefaultContentVisibility" "paid" on="click"}}>
|
||||
<div class="gh-publishmenu-radio-button" data-test-publishmenu-published-option></div>
|
||||
<div class="gh-publishmenu-radio-content">
|
||||
<div class="gh-publishmenu-radio-label">Only paying members</div>
|
||||
<div class="gh-radio-button" data-test-publishmenu-published-option></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Only paying members</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="ba br4 b--whitegrey pa5 mt5">
|
||||
<div>Stripe setup</div>
|
||||
<div class="flex flex-column">
|
||||
<div class="flex">
|
||||
<div class="w-50 mr2">
|
||||
<label class="fw6">Stripe publishable API key</label>
|
||||
{{gh-text-input
|
||||
value=(readonly subscriptionSettings.stripeConfig.public_token)
|
||||
input=(action "setSubscriptionSettings" "public_token")
|
||||
class="mt1"
|
||||
placeholder="pk_..."
|
||||
}}
|
||||
<section class="flex flex-column ml5">
|
||||
<label class="fw6 f8">Stripe publishable API key</label>
|
||||
{{gh-text-input
|
||||
value=(readonly subscriptionSettings.stripeConfig.public_token)
|
||||
input=(action "setSubscriptionSettings" "public_token")
|
||||
class="mt1"
|
||||
}}
|
||||
|
||||
<label class="fw6 f8 mt4">Stripe secret API key</label>
|
||||
{{gh-text-input
|
||||
value=(readonly subscriptionSettings.stripeConfig.secret_token)
|
||||
input=(action "setSubscriptionSettings" "secret_token")
|
||||
class="mt1"
|
||||
}}
|
||||
<a href="https://dashboard.stripe.com/account/apikeys" target="_blank" class="mt1 fw4 f8">Where to find Stripe
|
||||
API keys</a>
|
||||
|
||||
<div class="mt5 flex nb5">
|
||||
<div class="w-50 mr3">
|
||||
{{#gh-form-group}}
|
||||
<label class="fw6 f8">Monthly price</label>
|
||||
<div class="mt1 relative gh-labs-price-label gh-labs-monthly-price">
|
||||
{{gh-text-input
|
||||
value=(readonly subscriptionSettings.stripeConfig.plans.monthly.dollarAmount)
|
||||
type="number"
|
||||
input=(action "setSubscriptionSettings" "month")
|
||||
}}
|
||||
</div>
|
||||
{{/gh-form-group}}
|
||||
</div>
|
||||
<div class="w-50 ml2">
|
||||
<label class="fw6">Stripe secret API key</label>
|
||||
{{gh-text-input
|
||||
value=(readonly subscriptionSettings.stripeConfig.secret_token)
|
||||
input=(action "setSubscriptionSettings" "secret_token")
|
||||
class="mt1"
|
||||
placeholder="sk_..."
|
||||
}}
|
||||
{{#gh-form-group class="description-container"}}
|
||||
<label class="fw6 f8">Yearly price</label>
|
||||
<div class="mt1 relative gh-labs-price-label gh-labs-yearly-price">
|
||||
{{gh-text-input
|
||||
value=(readonly subscriptionSettings.stripeConfig.plans.yearly.dollarAmount)
|
||||
type="number"
|
||||
input=(action "setSubscriptionSettings" "year")
|
||||
}}
|
||||
</div>
|
||||
{{/gh-form-group}}
|
||||
</div>
|
||||
</div>
|
||||
<a href="https://dashboard.stripe.com/account/apikeys" target="_blank" class="mt1 self-end fw4">Where to find Stripe API keys</a>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="mt4 flex nb5">
|
||||
<div class="w-50 mr2">
|
||||
{{#gh-form-group}}
|
||||
<label class="fw6">Monthly price</label>
|
||||
<div class="mt1 relative gh-labs-price-label gh-labs-monthly-price">
|
||||
{{gh-text-input
|
||||
value=(readonly subscriptionSettings.stripeConfig.plans.monthly.dollarAmount)
|
||||
type="number"
|
||||
input=(action "setSubscriptionSettings" "month")
|
||||
}}
|
||||
</div>
|
||||
{{/gh-form-group}}
|
||||
</div>
|
||||
<div class="w-50 ml2">
|
||||
{{#gh-form-group class="description-container"}}
|
||||
<label class="fw6">Yearly price</label>
|
||||
<div class="mt1 relative gh-labs-price-label gh-labs-yearly-price">
|
||||
{{gh-text-input
|
||||
value=(readonly subscriptionSettings.stripeConfig.plans.yearly.dollarAmount)
|
||||
type="number"
|
||||
input=(action "setSubscriptionSettings" "year")
|
||||
}}
|
||||
</div>
|
||||
{{/gh-form-group}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb5 mt5">
|
||||
{{gh-task-button "Save members settings"
|
||||
task=saveSettings
|
||||
successText="Saved"
|
||||
runningText="Saving"
|
||||
class="gh-btn gh-btn-blue gh-btn-icon"
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div class="mb5 mt5">
|
||||
{{gh-task-button "Save"
|
||||
task=saveSettings
|
||||
successText="Saved"
|
||||
runningText="Saving"
|
||||
class="gh-btn gh-btn-blue gh-btn-icon"
|
||||
}}
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
<div class="gh-setting-action">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user