TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-25 09:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Updated 'Add product' modal styles

Browse Source
This commit is contained in:
Peter Zimon 2021-06-04 14:27:33 +02:00
parent e9486a8e87
commit 49655fa451
5 changed files with 59 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ghost/admin/app/components/gh-membership-products-alpha.hbs
View File

@ -1,3 +1,4 @@
<label>Products</label>
<div class="gh-product-cards">
{{#each this.products as |product productIdx|}}
<div class="gh-product-card">

102
ghost/admin/app/components/modal-product.hbs
View File

@ -29,59 +29,57 @@
@class="gh-input" />
<GhErrorMessage @errors={{this.errors}} @property="description" />
</GhFormGroup>
<div class="">
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="prices">
<div class="gh-settings-members-pricelabelcont">
<label for="monthlyPrice">Prices</label>
<span>–</span>
<div>
<span class="gh-setting-members-currency gh-select">
<div class="gh-setting-members-currencylabel">
<span>{{this.currency}}</span>
{{svg-jar "arrow-down-small"}}
</div>
<OneWaySelect
@value={{this.selectedCurrency}}
id="currency"
name="currency"
@options={{readonly this.allCurrencies}}
@optionValuePath="value"
@optionLabelPath="label"
@update={{action "setCurrency"}}
/>
</span>
</div>
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="prices">
<div class="gh-settings-members-pricelabelcont">
<label for="monthlyPrice">Prices</label>
<span>–</span>
<div>
<span class="gh-setting-members-currency gh-select">
<div class="gh-setting-members-currencylabel">
<span>{{this.currency}}</span>
{{svg-jar "arrow-down-small"}}
</div>
<OneWaySelect
@value={{this.selectedCurrency}}
id="currency"
name="currency"
@options={{readonly this.allCurrencies}}
@optionValuePath="value"
@optionLabelPath="label"
@update={{action "setCurrency"}}
/>
</span>
</div>
<div class="gh-setting-members-prices">
</div>
<div class="gh-setting-members-prices">
<div class="gh-input-group">
<GhTextInput
@id="monthlyPrice"
@value={{readonly this.stripeMonthlyAmount}}
@type="number"
@input={{action (mut this.stripeMonthlyAmount) value="target.value"}}
@focus-out={{action "validateStripePlans"}}
/>
<span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/month</span>
</div>
<div class="gh-input-group">
<GhTextInput
@id="yearlyPrice"
@value={{readonly this.stripeYearlyAmount}}
@type="number"
@input={{action (mut this.stripeYearlyAmount) value="target.value"}}
@focus-out={{this.validateStripePlans}}
@placeholder=''
data-test-title-input={{true}}
/>
<span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/year</span>
</div>
<div class="gh-input-group">
<GhTextInput
@id="monthlyPrice"
@value={{readonly this.stripeMonthlyAmount}}
@type="number"
@input={{action (mut this.stripeMonthlyAmount) value="target.value"}}
@focus-out={{action "validateStripePlans"}}
/>
<span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/month</span>
</div>
{{#if this.stripePlanError}}
<p class="response w-100"><span class="red">{{this.stripePlanError}}</span></p>
{{/if}}
</GhFormGroup>
</div>
<div class="gh-input-group">
<GhTextInput
@id="yearlyPrice"
@value={{readonly this.stripeYearlyAmount}}
@type="number"
@input={{action (mut this.stripeYearlyAmount) value="target.value"}}
@focus-out={{this.validateStripePlans}}
@placeholder=''
data-test-title-input={{true}}
/>
<span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/year</span>
</div>
</div>
{{#if this.stripePlanError}}
<p class="response w-100"><span class="red">{{this.stripePlanError}}</span></p>
{{/if}}
</GhFormGroup>
</div>
</div>
</div>
@ -97,10 +95,10 @@
>
<span>Cancel</span>
</button>
<GhTaskButton @buttonText="Save"
<GhTaskButton @buttonText="{{if this.isExistingProduct "Save" "Add product"}}"
@successText={{this.successText}}
@task={{this.saveProduct}}
@idleClass="gh-btn-primary"
@class="gh-btn gh-btn-black gh-btn-icon"
@class="gh-btn {{if this.isExistingProduct "gh-btn-black" "gh-btn-green"}} gh-btn-icon"
data-test-button="save-product" />
</div>

2
ghost/admin/app/components/modal-product.js
View File

@ -54,7 +54,7 @@ export default class ModalProductPrice extends ModalBase {
get title() {
if (this.isExistingProduct) {
return `Product - ${this.product.name || 'No Name'}`;
return `Edit product`;
}
return 'New Product';
}

6
ghost/admin/app/styles/layouts/products.css
View File

@ -50,7 +50,7 @@
.gh-product-card-name {
font-size: 1.8rem;
font-weight: 500;
font-weight: 600;
margin: 0;
}
@ -308,6 +308,10 @@
margin-bottom: 32px;
}
.gh-product-priceform-block .form-group:last-of-type {
margin-bottom: 0;
}
.gh-product-priceform-pricecurrency {
display: grid;
grid-template-columns: 1fr 2fr;

3
ghost/admin/app/styles/patterns/forms.css
View File

@ -798,7 +798,8 @@ textarea {
}
.form-rich-radio .gh-radio-label .description h4 {
font-size: 1.4rem;
font-size: 1.5rem;
font-weight: 600;
margin: 0;
padding: 0;
line-height: 1.4em;