mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Updated design for Labs/Members configuration
no issue
This commit is contained in:
Peter Zimon
parent
4a3fd90017
commit
a29e687da6
3 changed files with 130 additions and 90 deletions
|
|
@ -46,7 +46,6 @@ export default Controller.extend({
|
||||||
importErrors: null,
|
importErrors: null,
|
||||||
importSuccessful: false,
|
importSuccessful: false,
|
||||||
showDeleteAllModal: false,
|
showDeleteAllModal: false,
|
||||||
showMemberConfig: false,
|
|
||||||
submitting: false,
|
submitting: false,
|
||||||
uploadButtonText: 'Import',
|
uploadButtonText: 'Import',
|
||||||
|
|
||||||
|
|
@ -71,8 +70,8 @@ export default Controller.extend({
|
||||||
});
|
});
|
||||||
let monthlyPlan = stripeProcessor.config.plans.find(plan => plan.interval === 'month');
|
let monthlyPlan = stripeProcessor.config.plans.find(plan => plan.interval === 'month');
|
||||||
let yearlyPlan = stripeProcessor.config.plans.find(plan => plan.interval === 'year');
|
let yearlyPlan = stripeProcessor.config.plans.find(plan => plan.interval === 'year');
|
||||||
monthlyPlan.dollarAmount = (monthlyPlan.amount / 100);
|
monthlyPlan.dollarAmount = monthlyPlan.amount ? (monthlyPlan.amount / 100) : '';
|
||||||
yearlyPlan.dollarAmount = (yearlyPlan.amount / 100);
|
yearlyPlan.dollarAmount = yearlyPlan.amount ? (yearlyPlan.amount / 100) : '';
|
||||||
stripeProcessor.config.plans = {
|
stripeProcessor.config.plans = {
|
||||||
monthly: monthlyPlan,
|
monthly: monthlyPlan,
|
||||||
yearly: yearlyPlan
|
yearly: yearlyPlan
|
||||||
|
|
@ -161,10 +160,6 @@ export default Controller.extend({
|
||||||
this.toggleProperty('showDeleteAllModal');
|
this.toggleProperty('showDeleteAllModal');
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleMemberConfig() {
|
|
||||||
this.toggleProperty('showMemberConfig');
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Opens a file selection dialog - Triggered by "Upload x" buttons,
|
* Opens a file selection dialog - Triggered by "Upload x" buttons,
|
||||||
* searches for the hidden file input within the .gh-setting element
|
* searches for the hidden file input within the .gh-setting element
|
||||||
|
|
|
||||||
|
|
@ -285,6 +285,64 @@ textarea {
|
||||||
opacity: 1;
|
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
|
/* Switch
|
||||||
/* ---------------------------------------------------------- */
|
/* ---------------------------------------------------------- */
|
||||||
|
|
|
||||||
|
|
@ -129,73 +129,58 @@
|
||||||
<div class="gh-setting-title">Members</div>
|
<div class="gh-setting-title">Members</div>
|
||||||
<div class="gh-setting-desc">Enable free or paid member registration.</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" ""}}>
|
<div class="flex ba br4 b--whitegrey pa5 pt4 mt5">
|
||||||
{{#if showMemberConfig}}
|
<section class="gh-visibility-menu-content w-50">
|
||||||
{{svg-jar "arrow-down-small"}}
|
<label class="dib f8 fw6 mb4">Default post access</label>
|
||||||
{{else}}
|
|
||||||
{{svg-jar "arrow-right-small"}}
|
|
||||||
{{/if}}
|
|
||||||
Configure
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{{#liquid-if showMemberConfig}}
|
<div class="gh-radio {{if (eq settings.defaultContentVisibility "public") "active"}}"
|
||||||
<div>Default post access</div>
|
{{action "setDefaultContentVisibility" "public" on="click"}}>
|
||||||
<section class="gh-visibility-menu-content">
|
<div class="gh-radio-button" data-test-publishmenu-unpublished-option></div>
|
||||||
<div class="gh-publishmenu-radio {{if (eq settings.defaultContentVisibility "public") "active"}}" {{action "setDefaultContentVisibility" "public" on="click"}}>
|
<div class="gh-radio-content">
|
||||||
<div class="gh-publishmenu-radio-button" data-test-publishmenu-unpublished-option></div>
|
<div class="gh-radio-label">Public</div>
|
||||||
<div class="gh-publishmenu-radio-content">
|
|
||||||
<div class="gh-publishmenu-radio-label">Public</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="gh-publishmenu-radio {{if (eq settings.defaultContentVisibility "members") "active"}}" {{action "setDefaultContentVisibility" "members" on="click"}}>
|
<div class="gh-radio {{if (eq settings.defaultContentVisibility "members") "active"}}"
|
||||||
<div class="gh-publishmenu-radio-button" data-test-publishmenu-published-option></div>
|
{{action "setDefaultContentVisibility" "members" on="click"}}>
|
||||||
<div class="gh-publishmenu-radio-content">
|
<div class="gh-radio-button" data-test-publishmenu-published-option></div>
|
||||||
<div class="gh-publishmenu-radio-label">Free and paying members</div>
|
<div class="gh-radio-content">
|
||||||
|
<div class="gh-radio-label">Free and paying members</div>
|
||||||
</div>
|
</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"}}>
|
{{action "setDefaultContentVisibility" "paid" on="click"}}>
|
||||||
<div class="gh-publishmenu-radio-button" data-test-publishmenu-published-option></div>
|
<div class="gh-radio-button" data-test-publishmenu-published-option></div>
|
||||||
<div class="gh-publishmenu-radio-content">
|
<div class="gh-radio-content">
|
||||||
<div class="gh-publishmenu-radio-label">Only paying members</div>
|
<div class="gh-radio-label">Only paying members</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="ba br4 b--whitegrey pa5 mt5">
|
<section class="flex flex-column ml5">
|
||||||
<div>Stripe setup</div>
|
<label class="fw6 f8">Stripe publishable API key</label>
|
||||||
<div class="flex flex-column">
|
|
||||||
<div class="flex">
|
|
||||||
<div class="w-50 mr2">
|
|
||||||
<label class="fw6">Stripe publishable API key</label>
|
|
||||||
{{gh-text-input
|
{{gh-text-input
|
||||||
value=(readonly subscriptionSettings.stripeConfig.public_token)
|
value=(readonly subscriptionSettings.stripeConfig.public_token)
|
||||||
input=(action "setSubscriptionSettings" "public_token")
|
input=(action "setSubscriptionSettings" "public_token")
|
||||||
class="mt1"
|
class="mt1"
|
||||||
placeholder="pk_..."
|
|
||||||
}}
|
}}
|
||||||
</div>
|
|
||||||
<div class="w-50 ml2">
|
<label class="fw6 f8 mt4">Stripe secret API key</label>
|
||||||
<label class="fw6">Stripe secret API key</label>
|
|
||||||
{{gh-text-input
|
{{gh-text-input
|
||||||
value=(readonly subscriptionSettings.stripeConfig.secret_token)
|
value=(readonly subscriptionSettings.stripeConfig.secret_token)
|
||||||
input=(action "setSubscriptionSettings" "secret_token")
|
input=(action "setSubscriptionSettings" "secret_token")
|
||||||
class="mt1"
|
class="mt1"
|
||||||
placeholder="sk_..."
|
|
||||||
}}
|
}}
|
||||||
</div>
|
<a href="https://dashboard.stripe.com/account/apikeys" target="_blank" class="mt1 fw4 f8">Where to find Stripe
|
||||||
</div>
|
API keys</a>
|
||||||
<a href="https://dashboard.stripe.com/account/apikeys" target="_blank" class="mt1 self-end fw4">Where to find Stripe API keys</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt4 flex nb5">
|
<div class="mt5 flex nb5">
|
||||||
<div class="w-50 mr2">
|
<div class="w-50 mr3">
|
||||||
{{#gh-form-group}}
|
{{#gh-form-group}}
|
||||||
<label class="fw6">Monthly price</label>
|
<label class="fw6 f8">Monthly price</label>
|
||||||
<div class="mt1 relative gh-labs-price-label gh-labs-monthly-price">
|
<div class="mt1 relative gh-labs-price-label gh-labs-monthly-price">
|
||||||
{{gh-text-input
|
{{gh-text-input
|
||||||
value=(readonly subscriptionSettings.stripeConfig.plans.monthly.dollarAmount)
|
value=(readonly subscriptionSettings.stripeConfig.plans.monthly.dollarAmount)
|
||||||
|
|
@ -207,7 +192,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="w-50 ml2">
|
<div class="w-50 ml2">
|
||||||
{{#gh-form-group class="description-container"}}
|
{{#gh-form-group class="description-container"}}
|
||||||
<label class="fw6">Yearly price</label>
|
<label class="fw6 f8">Yearly price</label>
|
||||||
<div class="mt1 relative gh-labs-price-label gh-labs-yearly-price">
|
<div class="mt1 relative gh-labs-price-label gh-labs-yearly-price">
|
||||||
{{gh-text-input
|
{{gh-text-input
|
||||||
value=(readonly subscriptionSettings.stripeConfig.plans.yearly.dollarAmount)
|
value=(readonly subscriptionSettings.stripeConfig.plans.yearly.dollarAmount)
|
||||||
|
|
@ -218,17 +203,19 @@
|
||||||
{{/gh-form-group}}
|
{{/gh-form-group}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mb5 mt5">
|
<div class="mb5 mt5">
|
||||||
{{gh-task-button "Save"
|
{{gh-task-button "Save members settings"
|
||||||
task=saveSettings
|
task=saveSettings
|
||||||
successText="Saved"
|
successText="Saved"
|
||||||
runningText="Saving"
|
runningText="Saving"
|
||||||
class="gh-btn gh-btn-blue gh-btn-icon"
|
class="gh-btn gh-btn-blue gh-btn-icon"
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
{{/liquid-if}}
|
|
||||||
{{/liquid-if}}
|
{{/liquid-if}}
|
||||||
</div>
|
</div>
|
||||||
<div class="gh-setting-action">
|
<div class="gh-setting-action">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue