mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-29 13:52:10 +03:00
Added benefits container to add/edit product (alpha)
This commit is contained in:
Peter Zimon
parent
c1841fd58b
commit
178733a521
@ -59,5 +59,5 @@
|
||||
}}
|
||||
@confirm={{this.confirmProductSave}}
|
||||
@close={{this.closeProductModal}}
|
||||
@modifier="action wide" />
|
||||
@modifier="edit-product action wide" />
|
||||
{{/if}}
|
||||
@ -6,80 +6,91 @@
|
||||
</button>
|
||||
|
||||
<form>
|
||||
<div class="modal-body">
|
||||
<div class="gh-main-section-block">
|
||||
<div class="gh-main-section-content grey gh-product-priceform-block">
|
||||
<GhFormGroup @errors={{this.errors}} @property="name">
|
||||
<label for="name" class="fw6">Name</label>
|
||||
<GhTextInput
|
||||
@value={{readonly this.product.name}}
|
||||
@input={{action (mut this.product.name) value="target.value"}}
|
||||
@name="name"
|
||||
@id="name"
|
||||
@class="gh-input" />
|
||||
<GhErrorMessage @errors={{this.errors}} @property="name" />
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @errors={{this.errors}} @property="description">
|
||||
<label for="description" class="fw6">Description</label>
|
||||
<GhTextInput
|
||||
@value={{readonly this.product.description}}
|
||||
@input={{action (mut this.product.description) value="target.value"}}
|
||||
@name="description"
|
||||
@id="description"
|
||||
@class="gh-input" />
|
||||
<GhErrorMessage @errors={{this.errors}} @property="description" />
|
||||
</GhFormGroup>
|
||||
<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 class="modal-body gh-form-edit-product">
|
||||
<div class="gh-main-section columns-3">
|
||||
<div class="gh-main-section-block span-2">
|
||||
<h4 class="gh-main-section-header small bn">Basic</h4>
|
||||
<div class="gh-main-section-content grey gh-product-priceform-block">
|
||||
<GhFormGroup @errors={{this.errors}} @property="name">
|
||||
<label for="name" class="fw6">Name</label>
|
||||
<GhTextInput
|
||||
@value={{readonly this.product.name}}
|
||||
@input={{action (mut this.product.name) value="target.value"}}
|
||||
@name="name"
|
||||
@id="name"
|
||||
@class="gh-input" />
|
||||
<GhErrorMessage @errors={{this.errors}} @property="name" />
|
||||
</GhFormGroup>
|
||||
<GhFormGroup @errors={{this.errors}} @property="description">
|
||||
<label for="description" class="fw6">Description</label>
|
||||
<GhTextInput
|
||||
@value={{readonly this.product.description}}
|
||||
@input={{action (mut this.product.description) value="target.value"}}
|
||||
@name="description"
|
||||
@id="description"
|
||||
@class="gh-input" />
|
||||
<GhErrorMessage @errors={{this.errors}} @property="description" />
|
||||
</GhFormGroup>
|
||||
<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>
|
||||
</div>
|
||||
<div class="gh-setting-members-prices">
|
||||
<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 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>
|
||||
{{#if this.stripePlanError}}
|
||||
<p class="response w-100"><span class="red">{{this.stripePlanError}}</span></p>
|
||||
{{/if}}
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-main-section-block">
|
||||
<h4 class="gh-main-section-header small bn">Benefits</h4>
|
||||
<div class="gh-main-section-content grey gh-product-form-benefits">
|
||||
<div class="gh-product-benefit">
|
||||
|
||||
</div>
|
||||
{{#if this.stripePlanError}}
|
||||
<p class="response w-100"><span class="red">{{this.stripePlanError}}</span></p>
|
||||
{{/if}}
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -99,7 +99,7 @@
|
||||
|
||||
.gh-product-price-container {
|
||||
display: flex;
|
||||
margin-left: 20px;
|
||||
margin: 0 40px 0 20px;
|
||||
}
|
||||
|
||||
.gh-product-card-price {
|
||||
@ -361,7 +361,22 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Price details */
|
||||
/* Add/edit product modal */
|
||||
.fullscreen-modal-edit-product {
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.gh-form-edit-product .gh-main-section-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.gh-form-edit-product .gh-main-section-content {
|
||||
padding-top: 16px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.gh-product-priceform-block {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
@ -375,3 +390,7 @@
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-gap: 20px;
|
||||
}
|
||||
|
||||
.gh-product-form-benefits {
|
||||
flex-grow: 1;
|
||||
}
|
||||
@ -1558,74 +1558,6 @@ p.theme-validation-details {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.gh-settings-members-pricelabelcont {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.gh-settings-members-pricelabelcont span {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.gh-settings-members-pricelabelcont span,
|
||||
.gh-settings-members-pricelabelcont div {
|
||||
display: inline-block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.gh-setting-members-currency {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gh-setting-members-currencylabel {
|
||||
position: absolute;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
top: 1px;
|
||||
left: 0px;
|
||||
background: var(--main-color-content-greybg);
|
||||
height: 20px;
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
color: var(--middarkgrey);
|
||||
text-transform: uppercase;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gh-setting-members-currencylabel span {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.gh-settings-members-pricelabelcont .gh-select svg {
|
||||
position: unset;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.gh-settings-members-pricelabelcont .gh-select {
|
||||
padding: 0;
|
||||
width: 60px;
|
||||
height: 16px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
.gh-settings-members-pricelabelcont .gh-select select {
|
||||
background: transparent;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
height: 16px;
|
||||
width: 46px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-setting-members-prices {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 20px;
|
||||
}
|
||||
|
||||
.gh-setting-members-portal-mock {
|
||||
display: flex;
|
||||
position: relative;
|
||||
@ -1680,6 +1612,75 @@ p.theme-validation-details {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.gh-settings-members-pricelabelcont {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.gh-settings-members-pricelabelcont span {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.gh-settings-members-pricelabelcont span,
|
||||
.gh-settings-members-pricelabelcont div {
|
||||
display: inline-block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.gh-settings-members-pricelabelcont .gh-select svg {
|
||||
position: unset;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.gh-settings-members-pricelabelcont .gh-select {
|
||||
padding: 0;
|
||||
width: 60px;
|
||||
height: 16px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
.gh-settings-members-pricelabelcont .gh-select select {
|
||||
background: transparent;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
height: 16px;
|
||||
width: 46px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gh-setting-members-prices {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 20px;
|
||||
}
|
||||
|
||||
.gh-setting-members-currency {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gh-setting-members-currencylabel {
|
||||
position: absolute;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
top: 1px;
|
||||
left: 0px;
|
||||
background: var(--main-color-content-greybg);
|
||||
height: 20px;
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
color: var(--middarkgrey);
|
||||
text-transform: uppercase;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.gh-setting-members-currencylabel span {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Stripe Connect modal */
|
||||
.fullscreen-modal-stripe-connect {
|
||||
max-width: 860px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user