mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 14:03:48 +03:00
Updated Tips & donations membership settings design (#17579)
refs https://github.com/TryGhost/Product/issues/3667 - Added static design for Tips & Donations settings with feature toggle, default amount, currency and link
This commit is contained in:
Djordje Vlaisavljevic
GitHub
parent
c539417e89
commit
423607872c
@ -12,6 +12,7 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{#if (feature "tipsAndDonations")}}
|
{{#if (feature "tipsAndDonations")}}
|
||||||
<div class="gh-expandable-block">
|
<div class="gh-expandable-block">
|
||||||
<div class="gh-expandable-header">
|
<div class="gh-expandable-header">
|
||||||
@ -19,12 +20,112 @@
|
|||||||
<h4 class="gh-expandable-title">Tips & donations</h4>
|
<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>
|
<p class="gh-expandable-description">Give your audience a one-time way to support your work</p>
|
||||||
</div>
|
</div>
|
||||||
<GhTaskButton @buttonText="Copy link" @successText="Link copied" @task={{this.copyTipsAndDonationsLink}} @class="gh-btn gh-btn-icon"/>
|
<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">
|
||||||
|
{{!-- Option 1 --}}
|
||||||
|
{{!-- <GhFormGroup>
|
||||||
|
<div class="gh-settings-members-pricelabelcont free-trial-enabled">
|
||||||
|
<label for="monthlyPrice" class="fw6">Suggest an amount</label>
|
||||||
|
<div>
|
||||||
|
<span class="gh-setting-members-currency gh-select">
|
||||||
|
<div class="gh-setting-members-currencylabel">
|
||||||
|
<span>USD</span>
|
||||||
|
{{svg-jar "arrow-down-small"}}
|
||||||
|
</div>
|
||||||
|
<OneWaySelect
|
||||||
|
@value="USD"
|
||||||
|
@options="USD"
|
||||||
|
id="currency"
|
||||||
|
name="currency"
|
||||||
|
@optionValuePath="value"
|
||||||
|
@optionLabelPath="label"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-input-group">
|
||||||
|
<GhTextInput
|
||||||
|
@id="tips-and-donations-default-amount"
|
||||||
|
@value="0"
|
||||||
|
@type="number"
|
||||||
|
data-test-input="tips-and-donations-default-amount"
|
||||||
|
/>
|
||||||
|
<span class="gh-input-append"><span class="ttu">USD</span></span>
|
||||||
|
</div>
|
||||||
|
</GhFormGroup> --}}
|
||||||
|
|
||||||
|
{{!-- Option 2 --}}
|
||||||
|
<div class="gh-offer-discount">
|
||||||
|
<label for="tips-and-donations-amount" class="fw6 mb1">Suggest an amount</label>
|
||||||
|
<div class="flex items-start" style="max-width: 620px;">
|
||||||
|
<GhFormGroup>
|
||||||
|
<div class="gh-offer-value percentage">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
id="tips-and-donations-amount"
|
||||||
|
class="gh-input"
|
||||||
|
name="amount"
|
||||||
|
value="0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</GhFormGroup>
|
||||||
|
<div class="gh-offer-type">
|
||||||
|
<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>
|
||||||
|
<label for="tips-and-donations-link" class="fw6 mb1">Your personalized 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="Link copied"
|
||||||
|
@class="gh-btn gh-btn-black gh-btn-icon" />
|
||||||
|
</div>
|
||||||
|
<p>You can add the link to any of your posts or pages</p>
|
||||||
|
</GhFormGroup>
|
||||||
|
</div>
|
||||||
|
{{/liquid-if}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -3,11 +3,15 @@ import SignupFormEmbedModal from '../../components/modals/settings/signup-form-e
|
|||||||
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 {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, {}, {});
|
||||||
|
|||||||
@ -1431,7 +1431,8 @@
|
|||||||
|
|
||||||
.gh-expandable-content input:not(:focus),
|
.gh-expandable-content input:not(:focus),
|
||||||
.gh-expandable-content .gh-input:not(:focus),
|
.gh-expandable-content .gh-input:not(:focus),
|
||||||
.gh-expandable-content .ember-power-select-multiple-trigger {
|
.gh-expandable-content .ember-power-select-multiple-trigger,
|
||||||
|
.gh-expandable-content select:not(:focus) {
|
||||||
border-color: var(--whitegrey-d1);
|
border-color: var(--whitegrey-d1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user