Ghost/ghost/admin/app/components/posts/links-table.hbs
James Morris 11bea8d9f0 Better matching the pagination styles across modules for post analytics
- Careful of flags, having different paginations depending on those
- Little stylistic adjustment to how pagination is shown on engagement bar
- Quite a few feature flag checks to make sure the right style is showing

refs https://github.com/TryGhost/Team/issues/2136
2022-10-21 14:53:09 +01:00

159 lines
8.6 KiB
Handlebars

{{#if (not (feature "audienceFeedback"))}}
<h4 class="gh-main-section-header small bn">
Newsletter clicks
</h4>
{{/if}}
<div class="gh-post-analytics-box column gh-post-analytics-newsletter-clicks">
{{#if (feature "audienceFeedback")}}<h3 class="gh-newsletter-clicks-header">Newsletter clicks</h3>{{/if}}
<div class="gh-links-list">
<div class="gh-links-list-header">
{{#if (and this.showPagination (feature "fixNewsletterLinks")) }}
<div class="gh-links-pagination-progress">
Showing {{this.startOffset}}-{{this.endOffset}} of {{this.totalLinks}}
</div>
{{else}}
<div class="gh-links-list-title">
{{#if (not (feature "audienceFeedback"))}}Link{{/if}}
</div>
{{/if}}
<div class="gh-links-list-title">
No. of Members
</div>
</div>
<div class="gh-links-list-items">
{{#each this.visibleLinks as |link|}}
<div class="gh-links-list-item {{if (eq this.editingLink link.link.link_id) "gh-links-list-item-edit-mode"}}">
{{#if (feature "fixNewsletterLinks")}}
<div class="gh-links-list-url">
{{#if (eq this.editingLink link.link.link_id)}}
<div class="gh-links-list-input-container {{if (eq this.showError link.link.link_id) "error"}}">
<div class="gh-input-group">
<input
aria-label="Link"
type="text"
class="gh-input"
placeholder={{link.link.to}}
value={{link.link.to}}
maxlength="300"
{{on "input" this.updateLinkValue}}
{{on "blur" this.handleBlur}}
{{on-key "Enter" this.setLink}}
{{on-key "Escape" this.cancelEdit}}
{{autofocus}}
data-prevent-escape-close-modal="true"
/>
{{#if (eq this.showError link.link.link_id)}}
<button
class="gh-btn gh-btn-red gh-btn-icon gh-links-list-item-update-button"
type="button"
{{on "mouseup" this.setLink}}
data-test-button="cancel-webhook"
>
<span>Retry</span>
</button>
{{else}}
<button
class="gh-btn gh-btn-green gh-btn-icon gh-links-list-item-update-button"
type="button"
{{on "mouseup" this.setLink}}
data-test-button="cancel-webhook"
>
<span>Update</span>
</button>
{{/if}}
</div>
<span class="gh-links-list-item-error">Please enter a valid link</span>
</div>
{{else}}
<button type="button" class="gh-btn gh-btn-action-icon gh-btn-icon gh-btn-outline gh-links-list-item-edit icon-only" aria-label="Edit link" {{on "click" (fn this.editLink link.link.link_id)}}>
<span>
{{svg-jar "pen"}}
</span>
</button>
<a href="{{link.link.to}}" target="_blank" rel="noopener noreferrer">
{{link.link.title}}
</a>
<span class="gh-links-list-item-edited {{if link.link.edited "gh-links-list-item-edited-show"}}">&nbsp;(edited)</span>
<span class="gh-links-list-item-success {{if (eq @showSuccess link.link.link_id) "gh-links-list-item-success-show"}}">{{svg-jar "check-circle"}}</span>
{{/if}}
</div>
{{else}}
<a href="{{link.link.to}}" target="_blank" rel="noopener noreferrer">{{link.link.title}}</a>
{{/if}}
<p class="gh-links-list-clicks">{{link.count.clicks}}</p>
</div>
{{/each}}
</div>
{{#if (or this.showPagination (feature "fixNewsletterLinks")) }}
<div class="gh-links-pagination">
{{#if (feature "fixNewsletterLinks")}}
<span class="gh-links-info">{{svg-jar "arrow-right-tail"}} Sent a broken link? You can update it!</span>
{{#if (not (feature "audienceFeedback"))}}
<div class="gh-links-pagination-actions">
<button type="button" class="gh-links-pagination-action gh-links-pagination-prev {{if this.disablePreviousPage "gh-links-pagination-disabled"}}" {{on "click" this.openPreviousPage}} disabled={{this.disablePreviousPage}}>
{{svg-jar "arrow-left-pagination"}}
Previous
</button>
<button type="button" class="gh-links-pagination-action gh-links-pagination-next {{if this.disableNextPage "gh-links-pagination-disabled"}}" {{on "click" this.openNextPage}} disabled={{this.disableNextPage}}>
Next
{{svg-jar "arrow-right-pagination"}}
</button>
</div>
{{/if}}
{{/if}}
{{#if (and (not (feature "fixNewsletterLinks")) (not (feature "audienceFeedback")))}}
<div class="gh-links-pagination-progress">
Showing {{this.startOffset}}-{{this.endOffset}} of {{this.totalLinks}}
</div>
{{#if this.showPagination}}
<div class="gh-links-pagination-actions">
<button type="button" class="gh-links-pagination-action gh-links-pagination-prev {{if this.disablePreviousPage "gh-links-pagination-disabled"}}" {{on "click" this.openPreviousPage}} disabled={{this.disablePreviousPage}}>
{{svg-jar "arrow-left-pagination"}}
Previous
</button>
<button type="button" class="gh-links-pagination-action gh-links-pagination-next {{if this.disableNextPage "gh-links-pagination-disabled"}}" {{on "click" this.openNextPage}} disabled={{this.disableNextPage}}>
Next
{{svg-jar "arrow-right-pagination"}}
</button>
</div>
{{/if}}
{{/if}}
{{#if (feature "audienceFeedback")}}
<div class="gh-post-activity-feed-pagination">
{{#if (feature "fixNewsletterLinks")}}
Showing {{this.startOffset}}-{{this.endOffset}} of {{this.totalLinks}}
{{/if}}
<div class="gh-post-activity-feed-pagination-group">
<button
class="gh-post-activity-feed-pagination-button gh-post-activity-feed-prev-button"
type="button"
title="Previous page"
disabled={{this.disablePreviousPage}}
{{on "click" this.openPreviousPage}}
>
{{svg-jar "arrow-left-pagination"}}
</button>
<button
class="gh-post-activity-feed-pagination-button gh-post-activity-feed-next-button"
type="button"
title="Next page"
disabled={{this.disableNextPage}}
{{on "click" this.openNextPage}}
>
{{svg-jar "arrow-right-pagination"}}
</button>
</div>
{{#if (not (feature "fixNewsletterLinks"))}}
Showing {{this.startOffset}}-{{this.endOffset}} of {{this.totalLinks}}
{{/if}}
</div>
{{/if}}
</div>
{{/if}}
</div>
</div>