mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 03:44:29 +03:00
Updated mentions dashboard widget design
refs https://github.com/TryGhost/Team/issues/2481
This commit is contained in:
Djordje Vlaisavljevic
parent
1545d4fb5b
commit
a439631d3c
26
ghost/admin/app/components/dashboard/charts/mentions.hbs
Normal file
26
ghost/admin/app/components/dashboard/charts/mentions.hbs
Normal file
@ -0,0 +1,26 @@
|
||||
<section class="gh-dashboard-section gh-dashboard-mentions" {{did-insert this.loadData}}>
|
||||
<article class="gh-dashboard-box">
|
||||
{{#if (feature 'webmentions')}}
|
||||
{{!-- Recent mentions --}}
|
||||
<h3 class="gh-dashboard-mentions-header">Mentions</h3>
|
||||
<div class="gh-dashboard-mentions-list">
|
||||
{{#if this.mentions}}
|
||||
{{#each this.mentions as |mention|}}
|
||||
<a href="{{mention.source}}" class="gh-dashboard-mention" rel="noreferrer noopener" target="_blank">
|
||||
<img src="{{mention.sourceFavicon}}" alt="{{mention.sourceSiteTitle}}" class="w5 h5 mr2 flex-shrink-0" />
|
||||
<span class="gh-dashboard-mention-title">{{if mention.sourceTitle mention.sourceTitle mention.source}}</span>
|
||||
<span class="gh-dashboard-mention-timestamp">{{moment-from-now mention.timestamp}}</span>
|
||||
</a>
|
||||
{{/each}}
|
||||
{{else}}
|
||||
<div>
|
||||
<p>No mentions yet.</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="gh-dashboard-list-footer">
|
||||
<LinkTo @route="mentions">View all mentions →</LinkTo>
|
||||
</div>
|
||||
{{/if}}
|
||||
</article>
|
||||
</section>
|
||||
16
ghost/admin/app/components/dashboard/charts/mentions.js
Normal file
16
ghost/admin/app/components/dashboard/charts/mentions.js
Normal file
@ -0,0 +1,16 @@
|
||||
import Component from '@glimmer/component';
|
||||
import {action} from '@ember/object';
|
||||
import {inject as service} from '@ember/service';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
export default class Recents extends Component {
|
||||
@service store;
|
||||
@service dashboardStats;
|
||||
|
||||
@tracked mentions = [];
|
||||
|
||||
@action
|
||||
async loadData() {
|
||||
this.mentions = await this.store.query('mention', {limit: 4, order: 'created_at desc'});
|
||||
}
|
||||
}
|
||||
@ -11,12 +11,6 @@
|
||||
@label="Member activity" />
|
||||
</button>
|
||||
{{/if}}
|
||||
{{#if (feature 'webmentions')}}
|
||||
<button type="button" class="gh-dashboard-tab {{if this.mentionsTabSelected 'is-selected'}}" {{on "click" this.changeTabToMentions}}>
|
||||
<Dashboard::Parts::Metric
|
||||
@label="Mentions" />
|
||||
</button>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if this.postsTabSelected}}
|
||||
<div class="gh-dashboard-recents-posts gh-dashboard-list {{unless this.areNewslettersEnabled 'is-single'}}">
|
||||
@ -138,48 +132,6 @@
|
||||
<LinkTo @route="members-activity" @query={{reset-query-params "members-activity"}}>View all member activity →</LinkTo>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
{{#if (feature 'webmentions')}}
|
||||
{{!-- Recent mentions --}}
|
||||
<div class="gh-dashboard-recents-mentions gh-dashboard-list">
|
||||
<div class="gh-dashboard-list-header">
|
||||
<div class="gh-dashboard-list-title">Publication</div>
|
||||
<div class="gh-dashboard-list-title">Mentioned</div>
|
||||
<div class="gh-dashboard-list-title">Time</div>
|
||||
</div>
|
||||
<div class="gh-dashboard-list-body">
|
||||
{{#if this.mentions}}
|
||||
{{#each this.mentions as |mention|}}
|
||||
<a href="#" class="gh-dashboard-list-item permalink">
|
||||
<div class="gh-dashboard-list-item-sub">
|
||||
<img src="{{mention.sourceFavicon}}" alt="{{mention.sourceSiteTitle}}" class="w5 h5 mr2 flex-shrink-0" />
|
||||
<span class="gh-dashboard-list-text">{{if mention.sourceSiteTitle mention.sourceSiteTitle mention.source}}</span>
|
||||
</div>
|
||||
<div class="gh-dashboard-list-item-sub">
|
||||
<span class="gh-dashboard-list-subtext gh-dashboard-recent-mentioned">
|
||||
{{#if mention.resource}}
|
||||
{{mention.resource.name}}
|
||||
{{else}}
|
||||
{{mention.target}}
|
||||
{{/if}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="gh-dashboard-list-item-sub gh-dashboard-list gh-dashboard-list-item-date">
|
||||
<span class="gh-dashboard-list-subtext" title={{gh-format-post-time mention.timestamp}}>{{moment-from-now mention.timestamp}}</span>
|
||||
</div>
|
||||
</a>
|
||||
{{/each}}
|
||||
{{else}}
|
||||
<div class="gh-dashboard-list-empty">
|
||||
<p>No mentions yet.</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="gh-dashboard-list-footer">
|
||||
<LinkTo @route="mentions">View all mentions →</LinkTo>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</article>
|
||||
</section>
|
||||
|
||||
@ -2561,3 +2561,63 @@ Dashboard No Data */
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 46px;
|
||||
}
|
||||
|
||||
/* ---------------------------------
|
||||
Dashboard Mentions */
|
||||
|
||||
.gh-dashboard-mentions {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gh-dashboard-mentions-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.gh-dashboard-mentions-header {
|
||||
font-size: 1.55rem;
|
||||
font-weight: 700;
|
||||
line-height: 1em;
|
||||
margin: 0 0 8px;
|
||||
padding: 0;
|
||||
color: var(--darkgrey);
|
||||
white-space: nowrap;
|
||||
letter-spacing: -.3px;
|
||||
}
|
||||
|
||||
.gh-dashboard-mention {
|
||||
display: grid;
|
||||
grid-template-columns: 20px auto;
|
||||
grid-template-rows: 20px auto;
|
||||
grid-column-gap: 8px;
|
||||
padding: 4px 0;
|
||||
flex-direction: column;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.gh-dashboard-mention-title {
|
||||
color: var(--darkgrey);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.gh-dashboard-mention-timestamp {
|
||||
color: var(--midlightgrey);
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
padding-left: 28px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.gh-dashboard-mentions .gh-dashboard-list-footer {
|
||||
margin-top: auto;
|
||||
}
|
||||
@ -71,7 +71,10 @@
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="{{if (feature 'webmentions') "gh-dashboard-split"}}">
|
||||
<Dashboard::Charts::Recents />
|
||||
<Dashboard::Charts::Mentions />
|
||||
</div>
|
||||
|
||||
<div class="gh-dashboard-split gh-dashboard-box is-secondary">
|
||||
<Dashboard::Resources::Resources />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user