Ghost/ghost/admin/app/templates/dashboard.hbs
Simon Backx 81c4b46977
Grouped mentions from the same source (#16348)
fixes https://github.com/TryGhost/Team/issues/2625

- Adds an unique option to the mentions API. Enabling this will only
return the latest mention from each source.
- The frontend can fetch the related sources for each page by doing an
extra request to the mentions API.
2023-03-01 12:15:29 +01:00

164 lines
8.2 KiB
Handlebars

<section class="gh-canvas" {{scroll-top}}>
<div class="gh-dashboard">
{{#if (feature 'sourceAttribution')}}
<GhCanvasHeader class="gh-canvas-header sticky">
<h2 class="gh-canvas-title" data-test-screen-title>
Dashboard
</h2>
{{#unless this.isTotalMembersZero}}
<div class="gh-dashboard-select">
<div {{did-insert this.loadMentions}}>
{{#if (feature 'webmentions')}}
{{!-- Mentions widget using a GhBasicDropdown component --}}
<GhBasicDropdown @horizontalPosition="right" @verticalPosition="below" @onOpen={{this.markMentionsRead}} as |dropdown|>
<dropdown.Trigger class="outline-0 pointer">
<button type="button" class="gh-dashboard-mentions-icon">
{{#if this.hasNewMentions}}
{{svg-jar "notification-bell-indicator"}}
{{else}}
{{svg-jar "notification-bell"}}
{{/if}}
</button>
</dropdown.Trigger>
<dropdown.Content class="">
<div class="gh-dashboard-mentions">
<div class="gh-dashboard-mentions-header">
<h2 class="gh-dashboard-mentions-heading">Mentions</h2>
<LinkTo @route="mentions" class="gh-dashboard-mentions-see-all">View all mentions &rarr;</LinkTo>
</div>
<div>
{{#each this.mentions as |mention|}}
<a href="{{mention.source}}" class="gh-dashboard-mention" rel="noreferrer noopener" target="_blank">
<div class="gh-dashboard-mention-content">
<img src="{{ or mention.sourceFavicon 'assets/img/orb-squircle.png'}}" alt="{{mention.sourceSiteTitle}}" class="w5 h5 mr2 flex-shrink-0">
<span class="gh-dashboard-mention-title">{{or mention.sourceTitle mention.sourceSiteTitle}}</span>
<span>mentioned</span>
{{#if (gt mention.mentions.length 1) }}
<span class="gh-dashboard-mention-target">{{mention.mentions.length}} links</span>
{{else}}
<span class="gh-dashboard-mention-target">{{if mention.resource mention.resource.name 'a link'}}</span>
{{/if}}
</div>
<span class="gh-dashboard-mention-timestamp">{{moment-from-now mention.timestamp}}</span>
</a>
{{/each}}
</div>
</div>
</dropdown.Content>
</GhBasicDropdown>
{{/if}}
</div>
<PowerSelect
@selected={{this.selectedDaysOption}}
@options={{this.daysOptions}}
@searchEnabled={{false}}
@onChange={{this.onDaysChange}}
@triggerComponent={{component "gh-power-select/trigger"}}
@triggerClass="gh-contentfilter-menu-trigger"
@dropdownClass="gh-contentfilter-menu-dropdown is-narrow"
@matchTriggerWidth={{false}}
@horizontalPosition="right"
as |option|
>
{{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
</PowerSelect>
</div>
{{/unless}}
</GhCanvasHeader>
{{else}}
<div class="gh-dashboard-inner">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>
Dashboard
</h2>
</GhCanvasHeader>
</div>
{{/if}}
<section class="gh-dashboard-layout">
{{#if this.isLoading }}
<GhLoadingSpinner />
{{else}}
{{#if this.areMembersEnabled}}
{{#if this.hasPaidTiers}}
<Dashboard::Charts::Overview />
{{/if}}
<div class="gh-dashboard-group {{if this.isTotalMembersZero 'is-zero'}}">
{{#if (feature 'sourceAttribution')}}
<Dashboard::Charts::AnchorAttribution />
{{else}}
<Dashboard::Charts::Anchor />
{{/if}}
{{#if (feature 'sourceAttribution')}}
{{#if this.hasPaidTiers}}
<section class="gh-dashboard-section">
<article class="gh-dashboard-box gh-dashboard-minicharts-attribution">
<Dashboard::Charts::PaidBreakdown />
<Dashboard::Charts::PaidMix />
</article>
</section>
{{/if}}
{{#unless this.membersUtils.isMembersInviteOnly}}
<Dashboard::Charts::Attribution />
{{/unless}}
{{/if}}
{{#if this.areNewslettersEnabled}}
<Dashboard::Charts::Engagement />
{{/if}}
{{#if this.isTotalMembersZero}}
<Dashboard::Parts::Zero />
{{/if}}
</div>
{{/if}}
<div class="gh-dashboard-recents-mentions">
<Dashboard::Charts::Recents />
</div>
<div class="gh-dashboard-split gh-dashboard-box is-secondary">
<Dashboard::Resources::Resources />
<Dashboard::Resources::Newsletter />
</div>
<Dashboard::Resources::ExploreFeed />
<div class="gh-dashboard-split gh-dashboard-box no-boarder">
<Dashboard::Resources::Community />
<Dashboard::Resources::WhatsNew />
</div>
{{/if}}
{{#if (not (feature 'sourceAttribution'))}}
{{#unless this.isTotalMembersZero}}
<div class="gh-dashboard-select">
<PowerSelect
@selected={{this.selectedDaysOption}}
@options={{this.daysOptions}}
@searchEnabled={{false}}
@onChange={{this.onDaysChange}}
@triggerComponent={{component "gh-power-select/trigger"}}
@triggerClass="gh-contentfilter-menu-trigger"
@dropdownClass="gh-contentfilter-menu-dropdown is-narrow"
@matchTriggerWidth={{false}}
@horizontalPosition="right"
as |option|
>
{{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
</PowerSelect>
</div>
{{/unless}}
{{/if}}
</section>
{{#if (enable-developer-experiments)}}
<Dashboard::Prototype::ControlPanel />
{{/if}}
</div>
</section>