mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
9234c8f695
No issue - Added resources to help and inspire people get started with members, which will be hidden after 6+ members are added
223 lines
11 KiB
Handlebars
223 lines
11 KiB
Handlebars
<section class="gh-canvas">
|
|
<GhCanvasHeader class="gh-canvas-header break tablet members-header">
|
|
<h2 class="gh-canvas-title" data-test-screen-title>Members</h2>
|
|
<section class="view-actions">
|
|
<div class="view-actions-bottom-row {{if this.members.length "" "hidden"}}">
|
|
<div class="relative gh-members-header-search">
|
|
{{svg-jar "search" class="gh-input-search-icon"}}
|
|
<GhTextInput
|
|
placeholder="Search members..."
|
|
@value={{this.searchText}}
|
|
@input={{this.search}}
|
|
class="gh-members-list-searchfield {{if this.searchText "active"}}" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="view-actions-top-row">
|
|
<GhMembersFilterLabs
|
|
@isFiltered={{this.isFiltered}}
|
|
@onApplyFilter={{this.applyFilter}}
|
|
@defaultFilterParam={{this.filterParam}}
|
|
@onApplySoftFilter={{this.applySoftFilter}}
|
|
@onResetSoftFilter={{this.resetSoftFilter}}
|
|
@onResetFilter={{this.resetFilter}}
|
|
@onLabelEdit={{this.editLabel}}
|
|
/>
|
|
<span class="dropdown">
|
|
<GhDropdownButton
|
|
@dropdownName="members-actions-menu"
|
|
@classNames="gh-btn gh-btn-icon icon-only gh-btn-action-icon"
|
|
@title="Members Actions"
|
|
data-test-button="members-actions"
|
|
>
|
|
<span>
|
|
{{svg-jar "settings"}}
|
|
<span class="hidden">Actions</span>
|
|
</span>
|
|
</GhDropdownButton>
|
|
<GhDropdown
|
|
@name="members-actions-menu"
|
|
@tagName="ul"
|
|
@classNames="gh-member-actions-menu dropdown-menu dropdown-triangle-top-right"
|
|
>
|
|
<li>
|
|
<LinkTo @route="members.import" class="mr2" data-test-link="import-csv">
|
|
<span>Import members</span>
|
|
</LinkTo>
|
|
</li>
|
|
<li class="{{if this.members.length "" "disabled"}}">
|
|
{{#if this.members.length}}
|
|
<button class="mr2" type="button" {{on "click" this.exportData}}>
|
|
{{#if this.showingAll}}
|
|
<span>Export all members</span>
|
|
{{else}}
|
|
<span>Export selected members ({{this.members.length}})</span>
|
|
{{/if}}
|
|
</button>
|
|
{{else}}
|
|
<button class="mr2" disabled="true" type="button">
|
|
<span>Export selected members (0)</span>
|
|
</button>
|
|
{{/if}}
|
|
</li>
|
|
{{#if (and this.members.length this.isFiltered)}}
|
|
<li class="divider"></li>
|
|
<li>
|
|
<button class="mr2" data-test-button="add-label-selected" type="button" {{on "click" this.toggleAddMembersLabelModal}}>
|
|
<span>Add label for selected members ({{this.members.length}})</span>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button class="mr2" data-test-button="remove-label-selected" type="button" {{on "click" this.toggleRemoveMembersLabelModal}}>
|
|
<span>Remove label from selected members ({{this.members.length}})</span>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button class="mr2" data-test-button="remove-label-selected" type="button" {{on "click" this.toggleUnsubscribeMembersModal}}>
|
|
<span>Unsubscribe selected members ({{this.members.length}})</span>
|
|
</button>
|
|
</li>
|
|
<li class="divider"></li>
|
|
<li>
|
|
<button class="mr2" data-test-button="delete-selected" type="button" {{on "click" this.toggleDeleteMembersModal}}>
|
|
<span class="red">Delete selected members ({{this.members.length}})</span>
|
|
</button>
|
|
</li>
|
|
{{/if}}
|
|
</GhDropdown>
|
|
</span>
|
|
<LinkTo @route="member.new" class="gh-btn gh-btn-primary" data-test-new-member-button="true"><span>New member</span></LinkTo>
|
|
</div>
|
|
</section>
|
|
</GhCanvasHeader>
|
|
|
|
{{#unless this.members.loading}}
|
|
<section class="view-container">
|
|
{{#if this.members}}
|
|
<div class="gh-list-scrolling {{if (lt this.members.length 6) "gh-list-with-helpsection"}}">
|
|
<table class="gh-list">
|
|
<thead>
|
|
<tr>
|
|
<th>{{this.listHeader}}</th>
|
|
{{#if (not-eq this.settings.editorDefaultEmailRecipients "disabled")}}
|
|
<th>Open rate</th>
|
|
{{/if}}
|
|
<th>Location</th>
|
|
<th>Created</th>
|
|
{{#each this.filterColumnLabels as |filterColumn|}}
|
|
<th>{{filterColumn}}</th>
|
|
{{/each}}
|
|
</tr>
|
|
</thead>
|
|
<VerticalCollection @tagName="tbody" @items={{this.members}} @key="id" @containerSelector=".gh-list-scrolling" @estimateHeight={{69}} @staticHeight={{true}} @bufferSize={{20}} as |member|>
|
|
<GhMembersListItem @newsletterEnabled={{not-eq this.settings.editorDefaultEmailRecipients "disabled"}}
|
|
@member={{member}}
|
|
@filterColumns={{this.filterColumns}}
|
|
data-test-member={{member.id}}
|
|
/>
|
|
</VerticalCollection>
|
|
</table>
|
|
</div>
|
|
{{else}}
|
|
{{#if this.showingAll}}
|
|
<GhMembersNoMembers @afterCreate={{this.refreshData}} @members={{this.members}} />
|
|
{{else}}
|
|
<div class="gh-members-empty">
|
|
{{svg-jar "members-placeholder" class="gh-members-placeholder"}}
|
|
<h4>No members match the current filter</h4>
|
|
<LinkTo @route="members" @query={{hash filter=null}} class="gh-btn mt4">
|
|
<span>Show all members</span>
|
|
</LinkTo>
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
{{#if (lt this.members.length 6)}}
|
|
<div class="gh-main-section gh-members-help">
|
|
<h2 class="gh-main-section-header small bn">Get the most out of offers</h2>
|
|
<div class="gh-main-section-block">
|
|
<div class="gh-main-section-content grey">
|
|
<a href="https://ghost.org/resources/build-audience-subscriber-signups/" target="_blank" class="gh-members-help-card" rel="noopener noreferrer">
|
|
<div class="gh-members-help-content">
|
|
<div class="thumbnail" style="background-image: url(assets/img/marketing/members-1.jpg);"></div>
|
|
<div class="text">
|
|
<h3>Building your audience with subscriber signups</h3>
|
|
<p>Learn how to turn anonymous visitors into logged-in members with memberships in Ghost.</p>
|
|
<div class="gh-btn gh-btn-link">Start building →</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="https://ghost.org/resources/first-100-email-subscribers/" target="_blank" class="gh-members-help-card" rel="noopener noreferrer">
|
|
<div class="gh-members-help-content">
|
|
<div class="thumbnail right" style="background-image: url(assets/img/marketing/members-2.jpg);"></div>
|
|
<div class="text">
|
|
<h3>Get your first 100 email subscribers</h3>
|
|
<p>Starting from zero? Use this guide to find your founding audience members.</p>
|
|
<div class="gh-btn gh-btn-link">Become an expert →</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
</section>
|
|
{{else}}
|
|
<div class="gh-content">
|
|
<GhLoadingSpinner />
|
|
</div>
|
|
{{/unless}}
|
|
</section>
|
|
|
|
{{outlet}}
|
|
|
|
{{#if this.showAddMembersLabelModal}}
|
|
<GhFullscreenModal
|
|
@modal="add-label-members"
|
|
@model={{hash memberCount=this.members.length}}
|
|
@confirm={{this.addLabelToMembers}}
|
|
@close={{this.toggleAddMembersLabelModal}}
|
|
@modifier="action wide"
|
|
/>
|
|
{{/if}}
|
|
|
|
{{#if this.showRemoveMembersLabelModal}}
|
|
<GhFullscreenModal
|
|
@modal="remove-label-members"
|
|
@model={{hash memberCount=this.members.length}}
|
|
@confirm={{this.removeLabelFromMembers}}
|
|
@close={{this.toggleRemoveMembersLabelModal}}
|
|
@modifier="action wide"
|
|
/>
|
|
{{/if}}
|
|
|
|
{{#if this.showUnsubscribeMembersModal}}
|
|
<GhFullscreenModal
|
|
@modal="unsubscribe-members"
|
|
@model={{hash memberCount=this.members.length}}
|
|
@confirm={{this.unsubscribeMembers}}
|
|
@close={{this.toggleUnsubscribeMembersModal}}
|
|
@modifier="action wide"
|
|
/>
|
|
{{/if}}
|
|
|
|
{{#if this.showDeleteMembersModal}}
|
|
<GhFullscreenModal
|
|
@modal="delete-members"
|
|
@model={{hash memberCount=this.members.length}}
|
|
@confirm={{this.deleteMembers}}
|
|
@close={{this.toggleDeleteMembersModal}}
|
|
@modifier="action wide"
|
|
/>
|
|
{{/if}}
|
|
|
|
{{#if this.showLabelModal}}
|
|
<GhFullscreenModal
|
|
@modal="members-label-form"
|
|
@model={{this.labelModalData}}
|
|
@close={{this.toggleLabelModal}}
|
|
@modifier="action wide"
|
|
/>
|
|
{{/if}}
|