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,7 +1,5 @@
|
|||||||
<section class="gh-main-section">
|
|
||||||
<h4 class="gh-main-section-header small bn">Growth</h4>
|
<div class="gh-expandable-block">
|
||||||
<div class="gh-expandable">
|
|
||||||
<div class="gh-expandable-block">
|
|
||||||
<div class="gh-expandable-header">
|
<div class="gh-expandable-header">
|
||||||
<div>
|
<div>
|
||||||
<h4 class="gh-expandable-title">Embeddable signup form</h4>
|
<h4 class="gh-expandable-title">Embeddable signup form</h4>
|
||||||
@ -11,92 +9,4 @@
|
|||||||
<span>Embed</span>
|
<span>Embed</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -2,24 +2,13 @@ import Component from '@glimmer/component';
|
|||||||
import SignupFormEmbedModal from '../../components/modals/settings/signup-form-embed';
|
import SignupFormEmbedModal from '../../components/modals/settings/signup-form-embed';
|
||||||
import {action} from '@ember/object';
|
import {action} from '@ember/object';
|
||||||
import {inject as service} from '@ember/service';
|
import {inject as service} from '@ember/service';
|
||||||
import {task, timeout} from 'ember-concurrency';
|
|
||||||
import {tracked} from '@glimmer/tracking';
|
|
||||||
|
|
||||||
export default class SignupFormEmbed extends Component {
|
export default class SignupFormEmbed extends Component {
|
||||||
@service modals;
|
@service modals;
|
||||||
@service settings;
|
@service settings;
|
||||||
|
|
||||||
@tracked currency = 'USD';
|
|
||||||
@tracked allCurrencies = ['USD', 'RSD'];
|
|
||||||
|
|
||||||
@action
|
@action
|
||||||
open() {
|
open() {
|
||||||
this.modals.open(SignupFormEmbedModal, {}, {});
|
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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<section class="gh-main-section">
|
||||||
|
<h4 class="gh-main-section-header small bn">Growth</h4>
|
||||||
|
<div class="gh-expandable">
|
||||||
<Settings::SignupFormEmbed />
|
<Settings::SignupFormEmbed />
|
||||||
|
{{#if (feature "tipsAndDonations")}}
|
||||||
|
<Settings::TipsAndDonations />
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
{{#if this.showPortalSettings}}
|
{{#if this.showPortalSettings}}
|
||||||
<GhFullscreenModal
|
<GhFullscreenModal
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user