OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refined complimentary for multiple products (alpha)

Browse Source
This commit is contained in:
Peter Zimon 2021-06-18 16:57:52 +02:00
parent 9b228659da
commit 821c087871
5 changed files with 151 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -135,71 +135,119 @@
{{/unless}}
{{#each this.products as |product|}}
<div class="gh-main-section-content bordered">
<div class="gh-cp-memberproduct {{if (not (eq product.subscriptions.length 1)) "multiple-subs" ""}}">
<div class="gh-member-product-container">
<div class="gh-cp-memberproduct {{if (gt product.subscriptions.length 1) "multiple-subs" ""}}">
<h3 class="gh-memberproduct-name">
{{product.name}}
{{#unless (eq product.subscriptions.length 1)}}
{{#if (gt product.subscriptions.length 1)}}
<span class="gh-memberproduct-subcount">{{product.subscriptions.length}} subscriptions</span>
{{/unless}}
{{/if}}
</h3>
{{#each product.subscriptions as |sub|}}
<div class="gh-memberproduct-subscription">
<div>
<span class="gh-cp-memberproduct-pricelabel">{{sub.price.nickname}}</span>
&ndash;
<span class="gh-cp-memberproduct-price">{{sub.price.currencySymbol}}{{sub.price.nonDecimalAmount}}/{{sub.price.interval}}</span>
&ndash;
{{#if sub.cancel_at_period_end}}
<span class="gh-cp-memberproduct-renewal">Has access until {{sub.validUntil}}</span>
<span class="gh-badge archived">Cancelled</span>
{{else}}
<span class="gh-cp-memberproduct-renewal">Renews {{sub.validUntil}}</span>
<span class="gh-badge active">Active</span>
{{/if}}
</div>
{{#if sub.cancellationReason}}
<div class="gh-memberproduct-cancelreason"><span class="fw6">Cancellation reason:</span> {{sub.cancellationReason}}</div>
{{/if}}
<div class="gh-memberproduct-created">Created on {{sub.startDate}}</div>
<span class="action-menu">
<GhDropdownButton @dropdownName="subscription-menu-{{sub.id}}" @classNames="gh-btn gh-btn-outline gh-btn-icon gh-btn-subscription-action only-has-icon" @title="User Actions">
<span>
{{svg-jar "dotdotdot"}}
<span class="hidden">Subscription menu</span>
</span>
</GhDropdownButton>
<GhDropdown @name="subscription-menu-{{sub.id}}" @tagName="ul" @classNames="product-actions-menu dropdown-menu dropdown-align-right">
<li>
<a href="https://dashboard.stripe.com/customers/{{sub.customer.id}}" target="_blank" rel="noopener">
View Stripe customer
</a>
</li>
<li class="divider"></li>
<li>
<a href="https://dashboard.stripe.com/subscriptions/{{sub.id}}" target="_blank" rel="noopener">
View Stripe subscription
</a>
</li>
<li>
<div>
<span class="gh-cp-memberproduct-pricelabel">{{sub.price.nickname}}</span>
&ndash;
{{#if sub.cancel_at_period_end}}
<button {{action "continueSubscription" sub.id}}>
<span>Continue subscription</span>
</button>
<span class="gh-cp-memberproduct-renewal">Has access until {{sub.validUntil}}</span>
<span class="gh-badge archived">Cancelled</span>
{{else}}
<button {{action "cancelSubscription" sub.id}}>
<span class="red">Cancel subscription</span>
</button>
<span class="gh-cp-memberproduct-renewal">Renews {{sub.validUntil}}</span>
<span class="gh-badge active">Active</span>
{{/if}}
</li>
</GhDropdown>
</span>
</div>
{{#if sub.cancellationReason}}
<div class="gh-memberproduct-cancelreason"><span class="fw6">Cancellation reason:</span> {{sub.cancellationReason}}</div>
{{/if}}
<div class="gh-memberproduct-created">Created on {{sub.startDate}}</div>
</div>
<div class="flex items-center">
<div class="gh-product-card-price">
<div class="flex items-start">
<span class="currency-symbol">{{sub.price.currencySymbol}}</span>
<span class="amount">{{sub.price.nonDecimalAmount}}</span>
</div>
<div class="period">{{if (eq sub.price.interval "year") "yearly" "monthly"}}</div>
</div>
<span class="action-menu">
<GhDropdownButton @dropdownName="subscription-menu-{{sub.id}}" @classNames="gh-btn gh-btn-outline gh-btn-icon gh-btn-subscription-action only-has-icon" @title="Actions">
<span>
{{svg-jar "dotdotdot"}}
<span class="hidden">Subscription menu</span>
</span>
</GhDropdownButton>
<GhDropdown @name="subscription-menu-{{sub.id}}" @tagName="ul" @classNames="product-actions-menu dropdown-menu dropdown-align-right">
<li>
<a href="https://dashboard.stripe.com/customers/{{sub.customer.id}}" target="_blank" rel="noopener">
View Stripe customer
</a>
</li>
<li class="divider"></li>
<li>
<a href="https://dashboard.stripe.com/subscriptions/{{sub.id}}" target="_blank" rel="noopener">
View Stripe subscription
</a>
</li>
<li>
{{#if sub.cancel_at_period_end}}
<button {{action "continueSubscription" sub.id}}>
<span>Continue subscription</span>
</button>
{{else}}
<button {{action "cancelSubscription" sub.id}}>
<span class="red">Cancel subscription</span>
</button>
{{/if}}
</li>
</GhDropdown>
</span>
</div>
</div>
{{/each}}
{{#if (and (feature "multipleProducts") (eq product.subscriptions.length 0))}}
<div class="gh-memberproduct-subscription">
<div>
<div>
<span class="gh-cp-memberproduct-pricelabel">Complimentary</span>
<span class="gh-badge active">Active</span>
</div>
<div class="gh-memberproduct-created">Created on</div>
</div>
<div class="flex items-center">
<div class="gh-product-card-price">
<div class="flex items-start">
<span class="currency-symbol">$</span>
<span class="amount">0</span>
</div>
<div class="period">yearly</div>
</div>
<span class="action-menu">
<GhDropdownButton @dropdownName="subscription-menu-complimentary" @classNames="gh-btn gh-btn-outline gh-btn-icon gh-btn-subscription-action only-has-icon" @title="Actions">
<span>
{{svg-jar "dotdotdot"}}
<span class="hidden">Subscription menu</span>
</span>
</GhDropdownButton>
<GhDropdown @name="subscription-menu-complimentary" @tagName="ul" @classNames="product-actions-menu dropdown-menu dropdown-align-right">
<li>
<button>
<span class="red">Remove complimentary subscription</span>
</button>
</li>
</GhDropdown>
</span>
</div>
</div>
{{/if}}
{{#if (not (feature "multipleProducts"))}}
{{#if this.isAddComplimentaryAllowed}}
<div class="gh-memberproduct-list-footer {{if this.isCreatingComplimentary "min-height" ""}}">
<div class="gh-memberproduct-list-footer bt b--whitegrey pt2 {{if this.isCreatingComplimentary "min-height" ""}}">
{{#if this.isCreatingComplimentary}}
<GhLoadingSpinner />
{{else}}

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

@ -1634,12 +1634,19 @@ p.gh-members-import-errordetail:first-of-type {
}
/* Member's product list */
.gh-member-product-container {
border: 1px solid var(--whitegrey);
border-radius: 3px;
margin-bottom: 20px;
padding: 24px;
}
.gh-memberproduct-name {
display: flex;
justify-content: space-between;
font-size: 1.65rem !important;
font-weight: 600;
margin-bottom: 4px !important;
margin-bottom: 2px !important;
}
.gh-cp-memberproduct.multiple-subs .gh-memberproduct-name {
@ -1673,7 +1680,6 @@ p.gh-members-import-errordetail:first-of-type {
}
.gh-memberproduct-created {
margin-top: 1px;
color: var(--midgrey);
}
@ -1685,8 +1691,6 @@ p.gh-members-import-errordetail:first-of-type {
position:relative;
margin-top: 12px;
margin-bottom: -8px;
padding-top: 12px;
border-top: 1px solid var(--whitegrey);
}
.gh-memberproduct-list-footer.min-height {
@ -1755,25 +1759,46 @@ p.gh-members-import-errordetail:first-of-type {
.gh-memberproduct-subscription {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.gh-memberproduct-subscription .action-menu {
position: absolute;
top: -4px;
right: 0;
.gh-cp-memberproduct .gh-product-card-price {
padding: 10px 18px;
}
.gh-memberproduct-subscription .action-menu .gh-btn-subscription-action {
opacity: 0;
.gh-cp-memberproduct:not(.multiple-subs) .gh-product-card-price {
margin-top: -19px;
padding: 15px 18px;
}
.product-actions-menu {
top: calc(100% - 16px);
right: 0px;
left: auto;
}
.gh-cp-memberproduct.multiple-subs .product-actions-menu {
top: calc(100% + 6px);
}
.gh-cp-memberproduct .gh-memberproduct-subscription .action-menu {
margin-left: 3vw;
}
.gh-cp-memberproduct:not(.multiple-subs) .gh-memberproduct-subscription .action-menu {
margin-top: -28px;
}
.gh-memberproduct-subscription .action-menu .gh-btn-subscription-action:not(:hover) {
border-color: var(--main-bg-color);
box-shadow: none;
}
.gh-memberproduct-subscription:hover .action-menu .gh-btn-subscription-action,
.gh-memberproduct-subscription .action-menu .gh-btn-subscription-action.open {
opacity: 1;
}
.gh-cp-memberproduct.multiple-subs .gh-memberproduct-subscription .action-menu {
top: 20px;
border: 1px solid var(--lightgrey-l1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.gh-memberproduct-subscription .action-menu > .gh-btn span {

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

@ -115,12 +115,17 @@
min-width: 90px;
}
.gh-product-card-price .currency-symbol,
.gh-product-card-price .amount,
.gh-product-card-price .currency {
font-weight: 600;
color: var(--darkgrey);
}
.gh-product-card-price .currency-symbol {
margin-top: -3px;
}
.gh-product-card-price .amount {
font-size: 2.1rem;
letter-spacing: -0.2px;
@ -346,12 +351,6 @@
color: var(--midgrey);
}
.product-actions-menu {
top: calc(100% + 6px);
right: 10px;
left: auto;
}
.gh-btn-archive-toggle {
width: 80px;
}

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

@ -792,10 +792,8 @@ textarea {
}
.form-rich-radio .gh-radio-label {
padding: 12px 12px 12px 14px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding: 12px 40px 12px 14px;
}
.form-rich-radio .gh-radio-label .description h4 {
@ -815,6 +813,9 @@ textarea {
}
.form-rich-radio .check {
position: absolute;
top: calc(50% - 7px);
right: 12px;
color: var(--darkgrey);
width: 14px;
height: 14px;

2
ghost/admin/public/assets/icons/dotdotdot.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>circle{fill:currentColor;}</style></defs><title>navigation-menu-horizontal</title><circle cx="3.25" cy="12" r="3.25"/><circle cx="12" cy="12" r="3.25"/><circle cx="20.75" cy="12" r="3.25"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>circle{fill:currentColor;}</style></defs><title>navigation-menu-horizontal</title><circle cx="3.25" cy="12" r="2.6"/><circle cx="12" cy="12" r="2.6"/><circle cx="20.75" cy="12" r="2.6"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 268 B

After

Width:  |  Height:  |  Size: 265 B