mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-24 14:43:08 +03:00
🐛 Fixed modal to invite staff users not scrolling in Safari & Chrome
Closes https://github.com/TryGhost/Ghost/issues/13975
This commit is contained in:
Sanne de Vries
parent
0f2faed20c
commit
23da2a57fe
@ -5,153 +5,153 @@
|
||||
<GhLoadingSpinner />
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="gh-radio {{if (eq @selected.name "Contributor") "active"}}" {{on "click" (fn this.setRole "Contributor")}} data-test-option="Contributor">
|
||||
<div class="gh-radio-button"></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Contributor</div>
|
||||
<div class="gh-radio-desc">Can create and edit their own posts, but cannot publish. An Editor needs to approve and publish for them.</div>
|
||||
</div>
|
||||
<div>
|
||||
{{!-- Inner container collapses height to the SVG so popover can align correctly --}}
|
||||
<div class="gh-radio {{if (eq @selected.name "Contributor") "active"}}" {{on "click" (fn this.setRole "Contributor")}} data-test-option="Contributor">
|
||||
<div class="gh-radio-button"></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Contributor</div>
|
||||
<div class="gh-radio-desc">Can create and edit their own posts, but cannot publish. An Editor needs to approve and publish for them.</div>
|
||||
</div>
|
||||
<div>
|
||||
{{svg-jar "info"}}
|
||||
<EmberPopover @tooltipClass="popover" @arrowClass="popover-arrow" @side="left">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="left">Settings</td>
|
||||
<td>View and edit own profile</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Posts</td>
|
||||
<td>Create and edit own draft posts</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</EmberPopover>
|
||||
{{!-- Inner container collapses height to the SVG so popover can align correctly --}}
|
||||
<div>
|
||||
{{svg-jar "info"}}
|
||||
<EmberPopover @tooltipClass="popover" @arrowClass="popover-arrow" @side="left">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="left">Settings</td>
|
||||
<td>View and edit own profile</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Posts</td>
|
||||
<td>Create and edit own draft posts</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</EmberPopover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gh-radio {{if (eq @selected.name "Author") "active"}}" {{on "click" (fn this.setRole "Author")}} data-test-option="Author">
|
||||
<div class="gh-radio-button"></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Author</div>
|
||||
<div class="gh-radio-desc">A trusted user who can create, edit and publish their own posts, but can’t modify others.</div>
|
||||
</div>
|
||||
<div>
|
||||
{{!-- Inner container collapses height to the SVG so popover can align correctly --}}
|
||||
<div class="gh-radio {{if (eq @selected.name "Author") "active"}}" {{on "click" (fn this.setRole "Author")}} data-test-option="Author">
|
||||
<div class="gh-radio-button"></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Author</div>
|
||||
<div class="gh-radio-desc">A trusted user who can create, edit and publish their own posts, but can’t modify others.</div>
|
||||
</div>
|
||||
<div>
|
||||
{{svg-jar "info"}}
|
||||
<EmberPopover @tooltipClass="popover" @arrowClass="popover-arrow" @side="left">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="left">Settings</td>
|
||||
<td>View and edit own profile</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Users</td>
|
||||
<td>Browse users</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Posts</td>
|
||||
<td>View, edit and publish own posts, generate slugs</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Tags</td>
|
||||
<td>Add tags</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</EmberPopover>
|
||||
{{!-- Inner container collapses height to the SVG so popover can align correctly --}}
|
||||
<div>
|
||||
{{svg-jar "info"}}
|
||||
<EmberPopover @tooltipClass="popover" @arrowClass="popover-arrow" @side="left">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="left">Settings</td>
|
||||
<td>View and edit own profile</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Users</td>
|
||||
<td>Browse users</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Posts</td>
|
||||
<td>View, edit and publish own posts, generate slugs</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Tags</td>
|
||||
<td>Add tags</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</EmberPopover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gh-radio {{if (eq @selected.name "Editor") "active"}}" {{on "click" (fn this.setRole "Editor")}} data-test-option="Editor">
|
||||
<div class="gh-radio-button"></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Editor</div>
|
||||
<div class="gh-radio-desc">Can invite and manage other Authors and Contributors, as well as edit and publish any posts on the site.</div>
|
||||
</div>
|
||||
<div>
|
||||
{{!-- Inner container collapses height to the SVG so popover can align correctly --}}
|
||||
<div class="gh-radio {{if (eq @selected.name "Editor") "active"}}" {{on "click" (fn this.setRole "Editor")}} data-test-option="Editor">
|
||||
<div class="gh-radio-button"></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Editor</div>
|
||||
<div class="gh-radio-desc">Can invite and manage other Authors and Contributors, as well as edit and publish any posts on the site.</div>
|
||||
</div>
|
||||
<div>
|
||||
{{svg-jar "info"}}
|
||||
<EmberPopover @tooltipClass="popover" @arrowClass="popover-arrow" @side="left">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="left">Settings</td>
|
||||
<td>View and edit own profile</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Users</td>
|
||||
<td>Browse users, manage authors and contributors (invite, revoke, delete)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Posts</td>
|
||||
<td>Create, publish, edit and delete all posts, generate slugs</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Tags</td>
|
||||
<td>Edit, add and delete tags</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</EmberPopover>
|
||||
{{!-- Inner container collapses height to the SVG so popover can align correctly --}}
|
||||
<div>
|
||||
{{svg-jar "info"}}
|
||||
<EmberPopover @tooltipClass="popover" @arrowClass="popover-arrow" @side="left">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="left">Settings</td>
|
||||
<td>View and edit own profile</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Users</td>
|
||||
<td>Browse users, manage authors and contributors (invite, revoke, delete)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Posts</td>
|
||||
<td>Create, publish, edit and delete all posts, generate slugs</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Tags</td>
|
||||
<td>Edit, add and delete tags</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</EmberPopover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gh-radio {{if (eq @selected.name "Administrator") "active"}}" {{on "click" (fn this.setRole "Administrator")}} data-test-option="Administrator">
|
||||
<div class="gh-radio-button"></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Administrator</div>
|
||||
<div class="gh-radio-desc">Trusted staff user who should be able to manage all content and users, as well as site settings and options.</div>
|
||||
</div>
|
||||
<div>
|
||||
{{!-- Inner container collapses height to the SVG so popover can align correctly --}}
|
||||
<div class="gh-radio {{if (eq @selected.name "Administrator") "active"}}" {{on "click" (fn this.setRole "Administrator")}} data-test-option="Administrator">
|
||||
<div class="gh-radio-button"></div>
|
||||
<div class="gh-radio-content">
|
||||
<div class="gh-radio-label">Administrator</div>
|
||||
<div class="gh-radio-desc">Trusted staff user who should be able to manage all content and users, as well as site settings and options.</div>
|
||||
</div>
|
||||
<div>
|
||||
{{svg-jar "info"}}
|
||||
<EmberPopover @tooltipClass="popover" @arrowClass="popover-arrow" @side="left">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="left">Settings</td>
|
||||
<td>Access all except Stripe settings</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Users</td>
|
||||
<td>Manage all users (invite, revoke, delete)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Posts</td>
|
||||
<td>Create, publish, edit and delete all posts, generate slugs</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Tags</td>
|
||||
<td>Edit, add and delete tags</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Database</td>
|
||||
<td>Import, export and delete all content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Email</td>
|
||||
<td>Send newsletters and test emails</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</EmberPopover>
|
||||
{{!-- Inner container collapses height to the SVG so popover can align correctly --}}
|
||||
<div>
|
||||
{{svg-jar "info"}}
|
||||
<EmberPopover @tooltipClass="popover" @arrowClass="popover-arrow" @side="left">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="left">Settings</td>
|
||||
<td>Access all except Stripe settings</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Users</td>
|
||||
<td>Manage all users (invite, revoke, delete)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Posts</td>
|
||||
<td>Create, publish, edit and delete all posts, generate slugs</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Tags</td>
|
||||
<td>Edit, add and delete tags</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Database</td>
|
||||
<td>Import, export and delete all content</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">Email</td>
|
||||
<td>Send newsletters and test emails</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</EmberPopover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="gh-content-box pa" hidden={{if this.limitErrorMessage false true}}>
|
||||
{{html-safe this.limitErrorMessage}} To use selected user role, upgrade to a different plan.
|
||||
</div>
|
||||
<div class="gh-content-box pa" hidden={{if this.limitErrorMessage false true}}>
|
||||
{{html-safe this.limitErrorMessage}} To use selected user role, upgrade to a different plan.
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
@ -1,57 +1,59 @@
|
||||
<header class="modal-header" data-test-modal="invite-staff-user">
|
||||
<h1>Invite a new staff user</h1>
|
||||
<p>Send an invitation for a new person to create a staff account on your site, and select a role that matches what you’d like them to be able to do.</p>
|
||||
</header>
|
||||
{{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
|
||||
<a class="close" href role="button" title="Close" {{action "closeModal"}} {{action (optional this.noop) on="mouseDown"}}>
|
||||
{{svg-jar "close"}}<span class="hidden">Close</span>
|
||||
</a>
|
||||
|
||||
<div class="modal-body">
|
||||
<fieldset>
|
||||
<GhFormGroup @errors={{this.errors}} @hasValidated={{this.hasValidated}} @property="email">
|
||||
<label for="new-user-email">Email address</label>
|
||||
<GhTextInput
|
||||
@class="email"
|
||||
@id="new-user-email"
|
||||
@type="email"
|
||||
@placeholder="youremail@example.com"
|
||||
@name="email"
|
||||
@shouldFocus={{true}}
|
||||
@autocapitalize="off"
|
||||
@autocorrect="off"
|
||||
@value={{readonly email}}
|
||||
@input={{action (mut email) value="target.value"}}
|
||||
@keyEvents={{hash
|
||||
Enter=(action "confirm")
|
||||
}}
|
||||
<div class="gh-modal-invite-user">
|
||||
<header class="modal-header" data-test-modal="invite-staff-user">
|
||||
<h1>Invite a new staff user</h1>
|
||||
<p>Send an invitation for a new person to create a staff account on your site, and select a role that matches what you’d like them to be able to do.</p>
|
||||
</header>
|
||||
|
||||
<div class="modal-body">
|
||||
<fieldset>
|
||||
<GhFormGroup @errors={{this.errors}} @hasValidated={{this.hasValidated}} @property="email">
|
||||
<label for="new-user-email">Email address</label>
|
||||
<GhTextInput
|
||||
@class="email"
|
||||
@id="new-user-email"
|
||||
@type="email"
|
||||
@placeholder="youremail@example.com"
|
||||
@name="email"
|
||||
@shouldFocus={{true}}
|
||||
@autocapitalize="off"
|
||||
@autocorrect="off"
|
||||
@value={{readonly email}}
|
||||
@input={{action (mut email) value="target.value"}}
|
||||
@keyEvents={{hash
|
||||
Enter=(action "confirm")
|
||||
}}
|
||||
/>
|
||||
<GhErrorMessage @errors={{this.errors}} @property="email" />
|
||||
</GhFormGroup>
|
||||
|
||||
<GhRoleSelection
|
||||
@selected={{this.role}}
|
||||
@setRole={{this.setRole}}
|
||||
@onValidationSuccess={{action "roleValidationSucceeded"}}
|
||||
@onValidationFailure={{action "roleValidationFailed"}}
|
||||
/>
|
||||
<GhErrorMessage @errors={{this.errors}} @property="email" />
|
||||
</GhFormGroup>
|
||||
|
||||
<GhRoleSelection
|
||||
@selected={{this.role}}
|
||||
@setRole={{this.setRole}}
|
||||
@onValidationSuccess={{action "roleValidationSucceeded"}}
|
||||
@onValidationFailure={{action "roleValidationFailed"}}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
{{#if this.limitErrorMessage}}
|
||||
<GhTaskButton @buttonText="Upgrade my plan →"
|
||||
@task={{this.transitionToBilling}}
|
||||
@class="gh-btn gh-btn-green gh-btn-icon"
|
||||
@disableMouseDown="true"
|
||||
data-test-button="upgrade-my-plan" />
|
||||
{{else}}
|
||||
<GhTaskButton @buttonText="Send invitation now →"
|
||||
@successText="Sent"
|
||||
@task={{this.sendInvitation}}
|
||||
@class="gh-btn gh-btn-black gh-btn-icon"
|
||||
@disabled={{this.fetchRoles.isRunning}}
|
||||
@disableMouseDown="true"
|
||||
data-test-button="send-user-invite" />
|
||||
{{/if}}
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{#if this.limitErrorMessage}}
|
||||
<GhTaskButton @buttonText="Upgrade my plan →"
|
||||
@task={{this.transitionToBilling}}
|
||||
@class="gh-btn gh-btn-green gh-btn-icon"
|
||||
@disableMouseDown="true"
|
||||
data-test-button="upgrade-my-plan" />
|
||||
{{else}}
|
||||
<GhTaskButton @buttonText="Send invitation now →"
|
||||
@successText="Sent"
|
||||
@task={{this.sendInvitation}}
|
||||
@class="gh-btn gh-btn-black gh-btn-icon"
|
||||
@disabled={{this.fetchRoles.isRunning}}
|
||||
@disableMouseDown="true"
|
||||
data-test-button="send-user-invite" />
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,184 +8,184 @@
|
||||
</header>
|
||||
|
||||
<form>
|
||||
<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">
|
||||
{{#if (not this.isFreeProduct)}}
|
||||
<GhFormGroup @errors={{this.errors}} @property="name">
|
||||
<label for="name" class="fw6">Name</label>
|
||||
<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">
|
||||
{{#if (not this.isFreeProduct)}}
|
||||
<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"
|
||||
@placeholder="Bronze"
|
||||
@id="name"
|
||||
@class="gh-input" />
|
||||
<GhErrorMessage @errors={{this.errors}} @property="name" />
|
||||
</GhFormGroup>
|
||||
{{/if}}
|
||||
<GhFormGroup @errors={{this.errors}} @property="description">
|
||||
<label for="description" class="fw6">Description</label>
|
||||
<GhTextInput
|
||||
@value={{readonly this.product.name}}
|
||||
@input={{action (mut this.product.name) value="target.value"}}
|
||||
@name="name"
|
||||
@placeholder="Bronze"
|
||||
@id="name"
|
||||
@value={{readonly this.product.description}}
|
||||
@input={{action (mut this.product.description) value="target.value"}}
|
||||
@name="description"
|
||||
@placeholder="Full access to premium content"
|
||||
@id="description"
|
||||
@class="gh-input" />
|
||||
<GhErrorMessage @errors={{this.errors}} @property="name" />
|
||||
<GhErrorMessage @errors={{this.errors}} @property="description" />
|
||||
</GhFormGroup>
|
||||
{{/if}}
|
||||
<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"
|
||||
@placeholder="Full access to premium content"
|
||||
@id="description"
|
||||
@class="gh-input" />
|
||||
<GhErrorMessage @errors={{this.errors}} @property="description" />
|
||||
</GhFormGroup>
|
||||
{{#if (not this.isFreeProduct)}}
|
||||
<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"}}
|
||||
{{#if (not this.isFreeProduct)}}
|
||||
<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 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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="gh-setting-members-prices">
|
||||
{{#if this.stripePlanError}}
|
||||
<p class="response w-100"><span class="red">{{this.stripePlanError}}</span></p>
|
||||
{{/if}}
|
||||
</GhFormGroup>
|
||||
{{/if}}
|
||||
</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>
|
||||
<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>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<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-benefits">
|
||||
<form id="product-benefits" class="gh-blognav" novalidate="novalidate">
|
||||
<SortableObjects
|
||||
@sortableObjectList={{this.benefits}}
|
||||
@useSwap={{false}}
|
||||
@sortEndAction={{action "reorderItems"}}
|
||||
>
|
||||
{{#each this.benefits as |benefitItem index|}}
|
||||
<DraggableObject @content={{benefitItem}} @dragHandle=".gh-blognav-grab" @isSortable={{true}}>
|
||||
<GhBenefitItem
|
||||
@benefitItem={{benefitItem}}
|
||||
@id={{index}}
|
||||
@addItem={{action "addBenefit"}}
|
||||
@focusItem={{action "focusItem"}}
|
||||
@deleteItem={{action "deleteBenefit"}}
|
||||
@updateLabel={{action "updateLabel"}}
|
||||
data-test-navitem={{index}} />
|
||||
</DraggableObject>
|
||||
{{/each}}
|
||||
</SortableObjects>
|
||||
<GhBenefitItem
|
||||
@benefitItem={{this.newBenefit}}
|
||||
@addItem={{action "addBenefit"}}
|
||||
@deleteItem={{action "deleteBenefit"}}
|
||||
@updateLabel={{action "updateLabel"}}
|
||||
data-test-navitem="new" />
|
||||
</form>
|
||||
<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-benefits">
|
||||
<form id="product-benefits" class="gh-blognav" novalidate="novalidate">
|
||||
<SortableObjects
|
||||
@sortableObjectList={{this.benefits}}
|
||||
@useSwap={{false}}
|
||||
@sortEndAction={{action "reorderItems"}}
|
||||
>
|
||||
{{#each this.benefits as |benefitItem index|}}
|
||||
<DraggableObject @content={{benefitItem}} @dragHandle=".gh-blognav-grab" @isSortable={{true}}>
|
||||
<GhBenefitItem
|
||||
@benefitItem={{benefitItem}}
|
||||
@id={{index}}
|
||||
@addItem={{action "addBenefit"}}
|
||||
@focusItem={{action "focusItem"}}
|
||||
@deleteItem={{action "deleteBenefit"}}
|
||||
@updateLabel={{action "updateLabel"}}
|
||||
data-test-navitem={{index}} />
|
||||
</DraggableObject>
|
||||
{{/each}}
|
||||
</SortableObjects>
|
||||
<GhBenefitItem
|
||||
@benefitItem={{this.newBenefit}}
|
||||
@addItem={{action "addBenefit"}}
|
||||
@deleteItem={{action "deleteBenefit"}}
|
||||
@updateLabel={{action "updateLabel"}}
|
||||
data-test-navitem="new" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-main-section-block gh-product-form-tierpreview">
|
||||
<div class="gh-product-form-tierpreview-content">
|
||||
<h4 class="gh-main-section-header small bn">Tier Preview</h4>
|
||||
<div class="gh-main-section-content" style="border-color: {{this.settings.accentColor}}">
|
||||
<span class="checkmark" style="background-color: {{this.settings.accentColor}}"></span>
|
||||
<div class="gh-main-section-block gh-product-form-tierpreview">
|
||||
<div class="gh-product-form-tierpreview-content">
|
||||
<h4 class="gh-main-section-header small bn">Tier Preview</h4>
|
||||
<div class="gh-main-section-content" style="border-color: {{this.settings.accentColor}}">
|
||||
<span class="checkmark" style="background-color: {{this.settings.accentColor}}"></span>
|
||||
|
||||
{{#if this.product.name}}
|
||||
<h4>{{this.product.name}}</h4>
|
||||
{{else}}
|
||||
<h4 class="placeholder">Bronze</h4>
|
||||
{{/if}}
|
||||
|
||||
{{#if this.product.description}}
|
||||
<p>{{this.product.description}}</p>
|
||||
{{else}}
|
||||
<p class="placeholder">Full access to premium content</p>
|
||||
{{/if}}
|
||||
|
||||
{{#if this.benefits}}
|
||||
<ul>
|
||||
{{#each this.benefits as |benefitItem index|}}
|
||||
<li>{{svg-jar "check-2"}} <span>{{benefitItem.name}}</span></li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{else}}
|
||||
<ul class="placeholder">
|
||||
<li>{{svg-jar "check-2"}} <span>Expert analysis</span></li>
|
||||
</ul>
|
||||
{{/if}}
|
||||
<div class="price">
|
||||
{{#if (not this.isFreeProduct)}}
|
||||
{{#if this.stripeMonthlyAmount}}
|
||||
<span class="monthly-price">
|
||||
<span class="currency">{{currency-symbol this.currency}}</span>
|
||||
{{format-number this.stripeMonthlyAmount}}
|
||||
<span class="period">/month</span>
|
||||
</span>
|
||||
{{else}}
|
||||
<span class="monthly-price placeholder">
|
||||
<span class="currency">{{currency-symbol this.currency}}</span>
|
||||
0
|
||||
<span class="period">/month</span>
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
{{#if this.stripeYearlyAmount}}
|
||||
<span class="yearly-price">{{currency-symbol this.currency}}{{format-number this.stripeYearlyAmount}}/year</span>
|
||||
{{else}}
|
||||
<span class="yearly-price placeholder">0<span class="currency">{{this.currency}}</span>/year</span>
|
||||
{{/if}}
|
||||
{{#if this.product.name}}
|
||||
<h4>{{this.product.name}}</h4>
|
||||
{{else}}
|
||||
<span class="monthly-price">
|
||||
<span class="currency">{{currency-symbol this.currency}}</span>
|
||||
0
|
||||
</span>
|
||||
<h4 class="placeholder">Bronze</h4>
|
||||
{{/if}}
|
||||
|
||||
{{#if this.product.description}}
|
||||
<p>{{this.product.description}}</p>
|
||||
{{else}}
|
||||
<p class="placeholder">Full access to premium content</p>
|
||||
{{/if}}
|
||||
|
||||
{{#if this.benefits}}
|
||||
<ul>
|
||||
{{#each this.benefits as |benefitItem index|}}
|
||||
<li>{{svg-jar "check-2"}} <span>{{benefitItem.name}}</span></li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{else}}
|
||||
<ul class="placeholder">
|
||||
<li>{{svg-jar "check-2"}} <span>Expert analysis</span></li>
|
||||
</ul>
|
||||
{{/if}}
|
||||
<div class="price">
|
||||
{{#if (not this.isFreeProduct)}}
|
||||
{{#if this.stripeMonthlyAmount}}
|
||||
<span class="monthly-price">
|
||||
<span class="currency">{{currency-symbol this.currency}}</span>
|
||||
{{format-number this.stripeMonthlyAmount}}
|
||||
<span class="period">/month</span>
|
||||
</span>
|
||||
{{else}}
|
||||
<span class="monthly-price placeholder">
|
||||
<span class="currency">{{currency-symbol this.currency}}</span>
|
||||
0
|
||||
<span class="period">/month</span>
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
{{#if this.stripeYearlyAmount}}
|
||||
<span class="yearly-price">{{currency-symbol this.currency}}{{format-number this.stripeYearlyAmount}}/year</span>
|
||||
{{else}}
|
||||
<span class="yearly-price placeholder">0<span class="currency">{{this.currency}}</span>/year</span>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<span class="monthly-price">
|
||||
<span class="currency">{{currency-symbol this.currency}}</span>
|
||||
0
|
||||
</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
@ -156,6 +156,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.gh-modal-invite-user {
|
||||
margin: -32px -32px 0;
|
||||
padding: 32px 32px 0;
|
||||
max-height: calc(100vh - 120px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.invite-new-user .modal-content {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
@ -197,11 +204,6 @@
|
||||
|
||||
.gh-roles-container .gh-radio:first-child {
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid var(--list-color-divider);
|
||||
}
|
||||
|
||||
.gh-roles-container .gh-radio:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gh-roles-container .gh-radio svg {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user