Ghost/ghost/admin/app/templates/subscribers.hbs
Peter Zimon c51bce7358 🎨 Updated admin area design and usability (#1232)
refs. https://github.com/TryGhost/Team/issues/205

Major update to Ghost Admin UI including:
- improved general consistency (typography, colors and contrast, UI components, icons)
- new design for post and pages lists, improved discoverability of filters 
- search moved to modal
- account menu is decoupled from ghost logo
- further usability fixes
2019-06-18 11:47:20 +01:00

101 lines
4.9 KiB
Handlebars

<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>
Subscribers
<span style="font-weight:200;margin-left:10px;display:inline-block;" data-test-total-subscribers>
{{#if this.fetchSubscribers.lastSuccessful}}
({{this.filteredSubscribers.length}})
{{else}}
(Loading...)
{{/if}}
</span>
</h2>
<div class="view-actions">
{{#link-to "subscribers.import" class="gh-btn gh-btn-white mr2" data-test-link="import-csv"}}<span>Import CSV</span>{{/link-to}}
<a href="#" {{action 'exportData'}} class="gh-btn gh-btn-white mr2"><span>Export CSV</span></a>
{{#link-to "subscribers.new" class="gh-btn gh-btn-green" data-test-link="add-subscriber"}}<span>Add Subscriber</span>{{/link-to}}
</div>
</GhCanvasHeader>
<section class="view-container">
<div class="subscribers-table bg-grouped-table br4 shadow-1 pl5 pb2 pt2">
<table>
<thead>
<tr>
<th class="gh-subscribers-table-email-cell">
{{#link-to class="inline-flex items-center darkgrey" params=(subscribers-query-params "email" this.order this.direction)}}
{{subscribers-sort-icon "email" this.order this.direction}}
Email Address
{{/link-to}}
</th>
<th class="gh-subscribers-table-date-cell">
{{#link-to class="inline-flex items-center darkgrey" params=(subscribers-query-params "created_at" this.order this.direction)}}
{{subscribers-sort-icon "created_at" this.order this.direction}}
Subscription Date
{{/link-to}}
</th>
<th class="gh-subscribers-table-status-cell">
{{#link-to class="inline-flex items-center darkgrey" params=(subscribers-query-params "status" this.order this.direction)}}
{{subscribers-sort-icon "status" this.order this.direction}}
Status
{{/link-to}}
</th>
<th class="gh-subscribers-table-delete-cell"></th>
</tr>
</thead>
</table>
<table>
<tbody>
{{#if this.sortedSubscribers}}
<VerticalCollection
@items={{this.sortedSubscribers}}
@key="id"
@containerSelector=".gh-main"
@estimateHeight=34
@bufferSize=30
as |subscriber|
>
<tr>
<td class="gh-subscribers-table-email-cell">
{{subscriber.email}}
</td>
<td class="gh-subscribers-table-date-cell">
{{moment-format subscriber.createdAtUTC 'MMMM DD, YYYY'}}
</td>
<td class="gh-subscribers-table-status-cell">
{{subscriber.status}}
</td>
<td class="gh-subscribers-table-delete-cell">
<button class="gh-btn gh-btn-link gh-btn-sm" {{action "deleteSubscriber" subscriber}}><span>{{svg-jar "trash"}}</span></button>
</td>
</tr>
</VerticalCollection>
{{else}}
<tr>
<td colspan="4">
{{#if this.fetchSubscribers.isRunning}}
<div class="relative h50"><GhLoadingSpinner /></div>
{{else}}
{{!-- match height to delete button height for consistent spacing --}}
<span class="dib" style="line-height: 33px">No subscribers found.</span>
{{/if}}
</td>
</tr>
{{/if}}
</tbody>
</table>
</div>
</section>
</section>
{{#if this.subscriberToDelete}}
<GhFullscreenModal
@modal="delete-subscriber"
@model={{this.subscriberToDelete}}
@confirm={{action "confirmDeleteSubscriber"}}
@close={{action "cancelDeleteSubscriber"}}
@modifier="action wide" />
{{/if}}
{{outlet}}