Ghost/ghost/admin/app/templates/settings/staff/index.hbs
Sanne de Vries 2c498ab193 Updated breadcrumb and title style across admin
Refs https://www.notion.so/ghost/Switch-breadcrumb-style-513a624c0e0d490ca39a2fdb97a6971a

- Separating out the breadcrumbs and the title makes it easier to navigate back on multiple levels for nested pages.
- Avoids very long titles, as it doesn't include breadcrumbs anymore
2022-10-04 12:35:29 +07:00

157 lines
7.6 KiB
Handlebars

<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
<div class="flex flex-column">
{{#unless this.session.user.isEditor}}
<div class="gh-canvas-breadcrumb">
<LinkTo @route="settings" data-test-breadcrumb>
Settings
</LinkTo>
{{svg-jar "arrow-right-small"}} Staff
</div>
{{/unless}}
<h2 class="gh-canvas-title" data-test-screen-title>
Staff
</h2>
</div>
{{!-- Do not show Invite user button to authors --}}
{{#unless this.currentUser.isAuthorOrContributor}}
<section class="view-actions">
{{#if (gh-user-can-admin this.session.user)}}
<span class="dropdown">
<GhDropdownButton
@dropdownName="staff-actions-menu"
@classNames="gh-btn gh-btn-icon icon-only gh-btn-action-icon"
@title="Staff Actions"
data-test-button="staff-actions"
>
<span>
{{svg-jar "settings"}}
<span class="hidden">Actions</span>
</span>
</GhDropdownButton>
<GhDropdown
@name="staff-actions-menu"
@tagName="ul"
@classNames="gh-member-actions-menu dropdown-menu dropdown-triangle-top-right"
>
<li>
<button type="button" {{on "click" this.toggleResetAllPasswordsModal}}>
<span>Reset all passwords</span>
</button>
</li>
</GhDropdown>
</span>
{{/if}}
<button class="gh-btn gh-btn-primary" data-test-button="invite-staff-user" type="button" {{on "click" this.toggleInviteUserModal}}><span>Invite people</span></button>
</section>
{{/unless}}
</GhCanvasHeader>
{{#if this.showInviteUserModal}}
<GhFullscreenModal @modal="invite-new-user"
@close={{this.toggleInviteUserModal}}
@modifier="action wide invite-user" />
{{/if}}
{{#if this.showResetAllPasswordsModal}}
<GhFullscreenModal @modal="reset-all-passwords"
@close={{this.toggleResetAllPasswordsModal}}
@modifier="action wide" />
{{/if}}
<section class="view-container gh-team">
{{!-- Show invited users to everyone except authors --}}
{{#unless this.currentUser.isAuthorOrContributor}}
{{#if this.invites}}
<section class="gh-main-section gh-invited-users apps-first-header" data-test-invited-users>
<h4 class="gh-main-section-header small">Invited users</h4>
<div class="apps-grid">
{{#each this.invites as |invite|}}
<GhUserInvited @invite={{invite}} @reload={{perform this.backgroundUpdateTask}} as |component|>
<div class="apps-grid-cell" data-test-invite-id="{{invite.id}}">
<article class="apps-card-app">
<div class="apps-card-left">
<span class="user-list-item-icon">{{svg-jar "email"}}ic</span>
<div class="apps-card-meta">
<h3 class="apps-card-app-title" data-test-email>{{invite.email}}</h3>
<p class="apps-card-app-desc">
{{#if invite.pending}}
<span class="description-error">
Invitation not sent - please try again
</span>
{{else}}
<span class="description" data-test-invite-description>
Invitation sent: {{component.createdAt}},
{{if component.isExpired "expired" "expires"}} {{component.expiresAt}}
</span>
{{/if}}
</p>
</div>
</div>
<div class="apps-card-right">
<div class="apps-configured">
{{#if component.isSending}}
<span>Sending Invite...</span>
{{else}}
<a class="apps-configured-action red-hover" href="#revoke" {{on "click" component.revoke}} data-test-revoke-button>
Revoke
</a>
<a class="apps-configured-action green-hover" href="#resend" {{on "click" component.resend}} data-test-resend-button>
Resend
</a>
<span class="apps-configured-action gh-badge {{invite.role.lowerCaseName}}" data-test-role-name>{{invite.role.name}}</span>
{{/if}}
</div>
</div>
</article>
</div>
</GhUserInvited>
{{/each}}
</div>
</section>
{{/if}}
{{/unless}}
<section class="gh-main-section gh-active-users {{unless this.invites "apps-first-header"}}" data-test-active-users>
<h4 class="gh-main-section-header small">Active users</h4>
<div class="apps-grid">
{{!-- For authors/contributors, only show their own user --}}
{{#if this.currentUser.isAuthorOrContributor}}
<GhUserActive @user={{this.currentUser}} as |component|>
<GhUserListItem @user={{this.currentUser}} @component={{component}} />
</GhUserActive>
{{else}}
{{#vertical-collection this.activeUsers
key="id"
containerSelector=".gh-main"
estimateHeight=75
as |user|
}}
<GhUserActive @user={{user}} as |component|>
<GhUserListItem @user={{user}} @component={{component}} />
</GhUserActive>
{{/vertical-collection}}
{{/if}}
</div>
</section>
</section>
{{!-- Don't show if we have no suspended users or logged in as an author --}}
{{#if (and this.suspendedUsers (not this.currentUser.isAuthorOrContributor))}}
<section class="apps-grid-container gh-active-users" data-test-suspended-users>
<span class="apps-grid-title">Suspended users</span>
<div class="apps-grid">
{{#each this.suspendedUsers key="id" as |user|}}
<GhUserActive @user={{user}} as |component|>
<GhUserListItem @user={{user}} @component={{component}} />
</GhUserActive>
{{/each}}
</div>
</section>
{{/if}}
</section>