Ghost/ghost/admin/app/components/gh-role-selection.hbs
Kevin Ansfield 824953d162 Fixed initial role selection and layout shift in <GhRoleSelection>
no issue

- initial role was always being set to Contributor due to incorrect argument being used when checking if the default role should be applied
- there was considerable layout shift of the `<GhRoleSelection>` container after role loading was finished, quick-fix applied by specifying a width and height to the loading spinner container that matches the final width/height
2021-04-12 11:27:37 +01:00

157 lines
7.2 KiB
Handlebars
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="gh-roles-container" {{did-insert (perform this.fetchRolesTask)}}>
{{#if this.fetchRolesTask.isRunning}}
{{!-- width and height are needed to avoid layout shift after roles have loaded --}}
<div style="width: 486px; height: 268px">
<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>
{{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 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 cant modify others.</div>
</div>
<div>
{{!-- 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 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>
{{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 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>
{{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 class="gh-content-box pa" hidden={{if this.limitErrorMessage false true}}>
{{html-safe this.limitErrorMessage}}
</div>
{{/if}}
</div>