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

Added mock product assignment modal

Browse Source 
Created modal for adding products to members with mock data
This commit is contained in:
Peter Zimon 2021-04-19 14:45:14 +02:00
parent 5af33b3f21
commit 6986c4f424
11 changed files with 148 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ghost/admin/app/components/gh-member-product-prices.hbs Normal file
View File

@ -0,0 +1,9 @@
<span class="gh-select">
<OneWaySelect
@options={{this.availablePrices}}
@optionValuePath="price"
@optionLabelPath="label"
@optionTargetPath="price"
/>
{{svg-jar "arrow-down-small"}}
</span>

13
ghost/admin/app/components/gh-member-product-prices.js Normal file
View File

@ -0,0 +1,13 @@
import Component from '@ember/component';
const PRICES = [
{label: '$4/month', id: '1'},
{label: '$40/year', id: '2'}
];
export default Component.extend({
init() {
this._super(...arguments);
this.availablePrices = PRICES;
}
});

9
ghost/admin/app/components/gh-member-product-products.hbs Normal file
View File

@ -0,0 +1,9 @@
<span class="gh-select">
<OneWaySelect
@options={{this.availableProducts}}
@optionValuePath="product"
@optionLabelPath="label"
@optionTargetPath="product"
/>
{{svg-jar "arrow-down-small"}}
</span>

13
ghost/admin/app/components/gh-member-product-products.js Normal file
View File

@ -0,0 +1,13 @@
import Component from '@ember/component';
const PRODUCTS = [
{label: 'Basic', id: '1'},
{label: 'Advanced', id: '2'}
];
export default Component.extend({
init() {
this._super(...arguments);
this.availableProducts = PRODUCTS;
}
});

20
ghost/admin/app/components/gh-member-settings-form-cp.hbs
View File

@ -222,17 +222,12 @@
</li>
<tr class="gh-list-row gh-memberproduct-add-product">
<td colspan="2" class="gh-list-data">
<LinkTo @route="members" data-test-link="add-webhook">
{{svg-jar "add"}}
<span>Add product</span>
</LinkTo>
<button type="button" class="gh-btn gh-btn-text green gh-btn-icon" {{action (toggle "showMemberProductModal" this)}}>
<span>{{svg-jar "add"}} Add product</span>
</button>
</td>
</tr>
</ol>
{{!-- <button type="button" class="gh-btn gh-btn-green" {{action (toggle "showPriceModal" this)}}>
<span>New price</span>
</button> --}}
</div>
</div>
<div class="gh-main-section-block">
@ -259,4 +254,11 @@
</div>
</section>
</div>
</div>
{{#if this.showMemberProductModal}}
<GhFullscreenModal @modal="member-product"
@model={{this.member}}
@close={{this.closeMemberProductModal}}
@modifier="action wide member-product" />
{{/if}}

6
ghost/admin/app/components/gh-member-settings-form-cp.js
View File

@ -103,5 +103,9 @@ export default Component.extend({
this.store.pushPayload('member', response);
return response;
}).drop()
}).drop(),
closeMemberProductModal: action(function () {
this.set('showMemberProductModal', false);
})
});

9
ghost/admin/app/components/gh-products-price-billingperiod.js
View File

@ -1,15 +1,8 @@
import Component from '@ember/component';
const PERIODS = [
{label: 'Daily', period: 'daily'},
{label: 'Weekly', period: 'members'},
{label: 'Monthly', period: 'monthly'},
{label: 'Every 3 months', period: '3-months'},
{label: 'Every 6 months', period: '6-months'},
{label: 'Yearly', period: 'yearly'},
{label: 'Custom', period: 'custom'},
{label: 'One time', period: 'one-time'},
{label: 'Unbilled', period: 'unbilled'}
{label: 'Yearly', period: 'yearly'}
];
export default Component.extend({

55
ghost/admin/app/components/modal-member-product.hbs Normal file
View File

@ -0,0 +1,55 @@
{{!-- <header class="modal-header" data-test-modal="webhook-form">
<h1 data-test-text="title">Add product</h1>
</header> --}}
<button class="close" href title="Close" {{action "closeModal"}} {{action (optional this.noop) on="mouseDown"}}>
{{svg-jar "close"}}
</button>
<form>
<div class="modal-body">
<div class="gh-main-section-block">
<div class="gh-main-section-content gh-member-product-memberdetails">
<GhMemberAvatar
@member={{this.member}}
@sizeClass={{if this.member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-headline fw4 lh-zero tracked-1'}}
@containerClass="w20 h20 mr4 gh-member-detail-avatar"
/>
<h3>{{or this.member.name this.member.email}}</h3>
{{#if (and this.member.name this.member.email)}}
<p>
{{this.member.email}}
</p>
{{/if}}
</div>
<div class="gh-main-section-content grey gh-member-product-form-block">
<GhFormGroup @errors={{this.price.errors}} @hasValidated={{this.price.hasValidated}} @property="product">
<label for="product" class="fw6">Product</label>
<GhMemberProductProducts @triggerId="product-input" />
</GhFormGroup>
<GhFormGroup @errors={{this.price.errors}} @hasValidated={{this.price.hasValidated}} @property="price">
<label for="price" class="fw6">Price</label>
<GhMemberProductPrices @triggerId="price-input" />
</GhFormGroup>
</div>
</div>
</div>
</form>
<div class="modal-footer">
<button
class="gh-btn"
{{action "closeModal"}}
{{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
{{action (optional this.noop) on="mouseDown"}}
data-test-button="cancel-webhook"
>
<span>Cancel</span>
</button>
<GhTaskButton @buttonText="Add product to member"
@successText={{this.successText}}
{{!-- @task={{this.saveWebhook}} --}}
@class="gh-btn gh-btn-black gh-btn-icon"
data-test-button="save-webhook" />
</div>

6
ghost/admin/app/components/modal-member-product.js Normal file
View File

@ -0,0 +1,6 @@
import ModalComponent from 'ghost-admin/components/modal-base';
import {alias} from '@ember/object/computed';
export default ModalComponent.extend({
member: alias('model')
});

34
ghost/admin/app/styles/layouts/members.css
View File

@ -1648,17 +1648,27 @@ p.gh-members-import-errordetail:first-of-type {
padding: 12px 0;
}
.gh-memberproduct-add-product .gh-list-data a {
display: flex;
align-items: center;
}
.gh-memberproduct-add-product .gh-list-data a svg {
width: 16px;
height: 16px;
margin-right: 4px;
}
.gh-memberproduct-add-product .gh-list-data a svg path {
.gh-memberproduct-add-product .gh-btn svg path {
fill: var(--green);
}
.gh-member-product-memberdetails {
display: flex;
flex-direction: column;
align-items: center;
margin: 12px 0 24px;
}
.gh-member-product-memberdetails .gh-member-gravatar {
margin: 0;
}
.gh-member-product-memberdetails h3 {
margin: 12px 0 0;
font-size: 1.9rem;
line-height: 1;
}
.gh-member-product-memberdetails p {
margin: 0;
}

4
ghost/admin/app/styles/patterns/buttons.css
View File

@ -331,6 +331,10 @@ svg.gh-btn-icon-right {
color: color-mod(var(--yellow) l(-10%));
}
.gh-btn-text.green span {
color: var(--green);
}
.gh-btn-textfield-group span {
height: 36px;
line-height: 36px;