mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-23 22:11:09 +03:00
Updated Tips & donations settings design (#17591)
refs https://github.com/TryGhost/Product/issues/3667 - Moved Tips&Donations out of `SignupFormEmbed` component and into its own component - Removed the enable/disable toggle for Tips&Donations and added Expand/Close button instead
This commit is contained in:
Djordje Vlaisavljevic
GitHub
parent
7f6de07b1e
commit
be7a2d0aec
@ -1,102 +1,12 @@
|
||||
<section class="gh-main-section">
|
||||
<h4 class="gh-main-section-header small bn">Growth</h4>
|
||||
<div class="gh-expandable">
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Embeddable signup form</h4>
|
||||
<p class="gh-expandable-description">Grow your audience from anywhere on the web</p>
|
||||
</div>
|
||||
<button type="button" class="gh-btn" {{on "click" this.open}} disabled={{not (eq this.settings.membersSignupAccess "all")}}>
|
||||
<span>Embed</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if (feature "tipsAndDonations")}}
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Enable tips & donations</h4>
|
||||
<p class="gh-expandable-description">Give your audience a one-time way to support your work</p>
|
||||
</div>
|
||||
<div class="for-switch">
|
||||
<label class="switch" for="tips-and-donations" data-test-label="tips-and-donations">
|
||||
<input
|
||||
id="tips-and-donations"
|
||||
type="checkbox"
|
||||
checked={{true}}
|
||||
data-test-checkbox="tips-and-donations"
|
||||
>
|
||||
<span class="input-toggle-component"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-expandable-content">
|
||||
{{#liquid-if true}}
|
||||
<div class="gh-setting-content-extended">
|
||||
<GhFormGroup>
|
||||
<div class="flex items-center">
|
||||
<div class="gh-tips-and-donations-suggested-amount">
|
||||
<label for="tips-and-donations-amount" class="fw6 mb1">Suggested amount</label>
|
||||
<div class="flex flex-row items-start">
|
||||
<GhFormGroup class="no-margin">
|
||||
<div class="percentage">
|
||||
<input
|
||||
type="number"
|
||||
id="tips-and-donations-amount"
|
||||
class="gh-input"
|
||||
name="amount"
|
||||
value="0"
|
||||
/>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
<div class="gh-tips-and-donations-currency" style="width: 120px;">
|
||||
<GhFormGroup class="no-margin">
|
||||
<span class="gh-select">
|
||||
<OneWaySelect
|
||||
@value={{this.currency}}
|
||||
@options={{this.allCurrencies}}
|
||||
id="currency"
|
||||
name="currency"
|
||||
@optionValuePath="value"
|
||||
@optionLabelPath="label"
|
||||
>
|
||||
<option value="">USD</option>
|
||||
</OneWaySelect>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<GhFormGroup class="no-margin">
|
||||
<label for="tips-and-donations-link" class="fw6 mb1">Your link</label>
|
||||
<div class="gh-input-group">
|
||||
<GhTextInput
|
||||
data-test-input="tips-and-donations-link"
|
||||
@id="tips-and-donations-link"
|
||||
@name="tips-and-donations-link"
|
||||
@disabled={{true}}
|
||||
@value="https://publication.com/portal/support"
|
||||
@placeholder="https://publication.com/portal/support"
|
||||
/>
|
||||
<GhTaskButton
|
||||
data-test-button="tips-and-donations-copy-link"
|
||||
@buttonText="Copy link"
|
||||
@task={{this.copyTipsAndDonationsLink}}
|
||||
@successText="Copied"
|
||||
@class="gh-btn gh-btn-black gh-btn-icon" />
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<p>Use this link to send your audience to your Stripe checkout page</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Embeddable signup form</h4>
|
||||
<p class="gh-expandable-description">Grow your audience from anywhere on the web</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
<button type="button" class="gh-btn" {{on "click" this.open}} disabled={{not (eq this.settings.membersSignupAccess "all")}}>
|
||||
<span>Embed</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@ -2,24 +2,13 @@ import Component from '@glimmer/component';
|
||||
import SignupFormEmbedModal from '../../components/modals/settings/signup-form-embed';
|
||||
import {action} from '@ember/object';
|
||||
import {inject as service} from '@ember/service';
|
||||
import {task, timeout} from 'ember-concurrency';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
export default class SignupFormEmbed extends Component {
|
||||
@service modals;
|
||||
@service settings;
|
||||
|
||||
@tracked currency = 'USD';
|
||||
@tracked allCurrencies = ['USD', 'RSD'];
|
||||
|
||||
@action
|
||||
open() {
|
||||
this.modals.open(SignupFormEmbedModal, {}, {});
|
||||
}
|
||||
|
||||
@task
|
||||
*copyTipsAndDonationsLink() {
|
||||
yield timeout(10);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
75
ghost/admin/app/components/settings/tips-and-donations.hbs
Normal file
75
ghost/admin/app/components/settings/tips-and-donations.hbs
Normal file
@ -0,0 +1,75 @@
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Tips & donations</h4>
|
||||
<p class="gh-expandable-description">Give your audience a one-time way to support your work</p>
|
||||
</div>
|
||||
<button type="button" class="gh-btn" {{on "click" (toggle-action "tipsAndDonationsOpen" this)}}>
|
||||
<span>{{if this.tipsAndDonationsOpen "Close" "Expand"}}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="gh-expandable-content">
|
||||
{{#liquid-if this.tipsAndDonationsOpen}}
|
||||
<div class="gh-setting-content-extended">
|
||||
<GhFormGroup>
|
||||
<div class="flex items-center">
|
||||
<div class="gh-tips-and-donations-suggested-amount">
|
||||
<label for="tips-and-donations-amount" class="fw6 mb1">Suggested amount</label>
|
||||
<div class="flex flex-row items-start">
|
||||
<GhFormGroup class="no-margin">
|
||||
<div class="percentage">
|
||||
<input
|
||||
type="number"
|
||||
id="tips-and-donations-amount"
|
||||
class="gh-input"
|
||||
name="amount"
|
||||
value="0"
|
||||
/>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
<div class="gh-tips-and-donations-currency">
|
||||
<GhFormGroup class="no-margin">
|
||||
<span class="gh-select">
|
||||
<OneWaySelect
|
||||
@value={{this.currency}}
|
||||
@options={{this.allCurrencies}}
|
||||
id="currency"
|
||||
name="currency"
|
||||
@optionValuePath="value"
|
||||
@optionLabelPath="label"
|
||||
>
|
||||
<option value="">USD</option>
|
||||
</OneWaySelect>
|
||||
{{svg-jar "arrow-down-small"}}
|
||||
</span>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<GhFormGroup class="no-margin">
|
||||
<label for="tips-and-donations-link" class="fw6 mb1">Your link</label>
|
||||
<div class="gh-input-group">
|
||||
<GhTextInput
|
||||
data-test-input="tips-and-donations-link"
|
||||
@id="tips-and-donations-link"
|
||||
@name="tips-and-donations-link"
|
||||
@disabled={{true}}
|
||||
@value="https://publication.com/portal/support"
|
||||
@placeholder="https://publication.com/portal/support"
|
||||
/>
|
||||
<GhTaskButton
|
||||
data-test-button="tips-and-donations-copy-link"
|
||||
@buttonText="Copy link"
|
||||
@task={{this.copyTipsAndDonationsLink}}
|
||||
@successText="Copied"
|
||||
@class="gh-btn gh-btn-black gh-btn-icon" />
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
<p>Use this link to send your audience to your Stripe checkout page</p>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
</div>
|
||||
</div>
|
||||
17
ghost/admin/app/components/settings/tips-and-donations.js
Normal file
17
ghost/admin/app/components/settings/tips-and-donations.js
Normal file
@ -0,0 +1,17 @@
|
||||
import Component from '@glimmer/component';
|
||||
import {inject as service} from '@ember/service';
|
||||
import {task, timeout} from 'ember-concurrency';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
export default class TipsAndDonations extends Component {
|
||||
@service settings;
|
||||
|
||||
@tracked currency = 'USD';
|
||||
@tracked allCurrencies = ['USD', 'RSD'];
|
||||
|
||||
@task
|
||||
*copyTipsAndDonationsLink() {
|
||||
yield timeout(10);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@ -171,7 +171,16 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Settings::SignupFormEmbed />
|
||||
|
||||
<section class="gh-main-section">
|
||||
<h4 class="gh-main-section-header small bn">Growth</h4>
|
||||
<div class="gh-expandable">
|
||||
<Settings::SignupFormEmbed />
|
||||
{{#if (feature "tipsAndDonations")}}
|
||||
<Settings::TipsAndDonations />
|
||||
{{/if}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{#if this.showPortalSettings}}
|
||||
<GhFullscreenModal
|
||||
|
||||
Loading…
Reference in New Issue
Block a user