Ghost/ghost/admin/app/templates/dashboard.hbs
Kevin Ansfield 696fca0f9e Hid members graphs in dashboard until get-started block dismissed or members added
refs https://github.com/TryGhost/Team/issues/1406

- added fetch of a single member to the dashboard initialisation if we don't already have some members loaded in memory
- added `showMembersGraphs` getter used in the conditional for rendering the members graphs block component
  - if `improvedOnboarding` flag is disabled, return `showMemberData` so existing functionality is retained
  - will return `false` if until the single-member fetch has completed if we don't already have any members in memory
  - returns `true` if any members exist or the "get started" dashboard resources block has been dismissed
2022-03-07 13:26:52 +00:00

240 lines
14 KiB
Handlebars
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<section class="gh-canvas" {{scroll-top}}>
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>
Dashboard
</h2>
</GhCanvasHeader>
<div class="view-container gh-dashboard">
{{#if (and this.session.user.isAdmin (not (feature "dashboardHideGettingStarted")) (feature "improvedOnboarding"))}}
<section class="gh-dashboard-area lw-banner" {{css-transition "gh-dashboard-area"}} data-test-dashboard-getting-started>
<div class="gh-lw-banner" style="background-image:url(assets/img/launch-wizard-bg.png);">
<h1>Not sure where to start? We got you.</h1>
<p>
Dive into our tutorials and guides for people who are new to Ghost and setting
up a brand new publication. Find out how to customize your site, publish your
first post, send email newsletters and setup vour memberships.
</p>
<a class="gh-btn gh-btn-green" href="https://ghost.org/resources/building/" target="_blank" rel="noopener noreferrer"><span>View resources</span></a>
<div class="gh-dashboard-dismiss">
<GhDropdownButton
@dropdownName="getting-started-dismiss"
@classNames="gh-btn gh-btn-icon icon-only gh-dashboard-dismissbutton dark"
>
<span>
{{svg-jar "dotdotdot"}}
</span>
</GhDropdownButton>
<GhDropdown
@name="getting-started-dismiss"
@classNames="gh-dashboard-dismiss-dropdown dropdown-menu dropdown-triangle-top-right"
>
<button class="gh-btn" type="button" {{on "click" (toggle-feature "dashboardHideGettingStarted")}}><span>Dismiss</span></button>
</GhDropdown>
</div>
</div>
</section>
{{/if}}
{{#if (and this.session.user.isOwnerOnly (not this.settings.editorIsLaunchComplete) (not (feature "improvedOnboarding")))}}
<section class="gh-dashboard-area lw-banner">
<div class="gh-lw-banner" style="background-image:url(assets/img/launch-wizard-bg.png);">
<h1>Select your publication style</h1>
<p>Customize your brand and connect to Stripe to get your membership site ready to be shown to the world.</p>
<LinkTo class="gh-btn gh-btn-green" @route="launch"><span>Start setup guide</span></LinkTo>
<div class="gh-dashboard-dismiss">
<GhDropdownButton @dropdownName="launch-wizard-dismiss"
@classNames="gh-btn gh-btn-icon icon-only gh-dashboard-dismissbutton dark">
<span>
{{svg-jar "dotdotdot"}}
</span>
</GhDropdownButton>
<GhDropdown @name="launch-wizard-dismiss" @classNames="gh-dashboard-dismiss-dropdown dropdown-menu dropdown-triangle-top-right">
<button class="gh-btn" type="button" {{on "click" this.dismissLaunchBanner}}><span>Dismiss</span></button>
</GhDropdown>
</div>
</div>
</section>
{{else if this.showMembersGraphs}}
<Dashboard::MembersGraphs />
{{/if}}
<section class="gh-dashboard-area mixed">
{{#unless this.settings.editorIsLaunchComplete}}
<div class="gh-dashboard-container start-contents">
<div class="gh-dashboard-box blogpost">
<h2>Start creating content</h2>
{{#if this.showMembersData}}
<LinkTo @route="members">
<span class="icon">{{svg-jar "members"}}</span>
<div>
<h4>Create your first member</h4>
<p>Add yourself or import members from CSV</p>
</div>
</LinkTo>
{{/if}}
<LinkTo @route="editor.new" @model="post">
<span class="icon green">{{svg-jar "posts"}}</span>
<div>
<h4>Publish a post</h4>
<p>Get familiar with the Ghost editor and start creating</p>
</div>
</LinkTo>
</div>
</div>
{{/unless}}
<div class="gh-dashboard-container col-2">
<div class="gh-dashboard-box">
<div class="content">
<h2>Customize your site</h2>
<p>Stand out from the crowd. Ghost lets you customize everything so you can create a publication that doesnt just look the same as what everyone else has.</p>
</div>
<div class="footer">
<LinkTo class="gh-btn gh-btn-outline mt2 mr2" @route="settings.design"><span>Design</span></LinkTo>
<LinkTo class="gh-btn gh-btn-outline mt2" @route="settings.members-email"><span>Email</span></LinkTo>
</div>
</div>
<div class="gh-dashboard-box">
<div class="content">
<h2>Looking for help with Ghost features?</h2>
<p>Our product knowledgebase is packed full of guides, tutorials, answers to frequently asked questions, tips for dealing with common errors, and much more. </p>
</div>
<div class="footer">
<a class="gh-btn gh-btn-outline mt2" href="https://ghost.org/help/" target="_blank" rel="noopener noreferrer"><span>Visit the help center &rarr;</span></a>
</div>
</div>
</div>
<a class="gh-dashboard-container" href="https://ghost.org/blog/types-of-newsletters/?utm_source=dashboard" target="_blank" rel="noopener noreferrer">
<div class="gh-dashboard-box blogpost">
<div class="content">
<h2>6 types of newsletters you can start today</h2>
<p>Choosing one of these newsletter types for your publication will help you create better content at a faster pace with less work.</p>
<p class="green">Get some inspiration &rarr;</p>
<div class="read-time">5 MIN READ</div>
</div>
<div class="thumbnail" style="background-image: url(assets/img/dashboard/bp1.jpg);"></div>
</div>
</a>
<a class="gh-dashboard-container" href="https://careers.ghost.org?utm_source=dashboard" target="_blank" rel="noopener noreferrer">
<div class="gh-dashboard-box grey gh-dashboard-careers">
<div class="summary">
<h2>We're hiring! Join the team that makes Ghost.</h2>
<p>The creator economy is growing faster than ever, and so are we! 📈 Join a team that's determined to make decentralised, open technology the heart and soul of new media 🌺</p>
</div>
<div class="gh-dashboard-careers-cta">
<span class="gh-btn gh-btn-primary"><span>See open roles &rarr;</span></span>
</div>
</div>
</a>
<a class="gh-dashboard-container reverse" href="https://ghost.org/blog/content-strategy-creator-funnel/?utm_source=dashboard" target="_blank" rel="noopener noreferrer">
<div class="gh-dashboard-box blogpost">
<div class="thumbnail" style="background-image: url(assets/img/dashboard/bp2.jpg);"></div>
<div class="content">
<h2>How to grow your audience, starting from 0</h2>
<p>Starting from zero is hard. Thankfully, successful creators have given us clues on how to grow an audience by using something called a content funnel.</p>
<p class="green">Here's how it works &rarr;</p>
<div class="read-time">9 MIN READ</div>
</div>
</div>
</a>
<div class="gh-dashboard-join-community" style="background-image: url(assets/img/dashboard/join-community.jpg)">
<div>
<h2>Join the Ghost creator community.</h2>
<p>Meet other people building both free &amp; paid publications with Ghost. Talk strategy, get advice, or just hang out.</p>
<a class="gh-btn gh-btn-white gh-dashboard-btn" href="https://community.ghost.org" target="_blank" rel="noopener noreferrer"><span>Share the journey</span></a>
</div>
<a class="footer-link" href="https://community.ghost.org" target="_blank" rel="noopener noreferrer">community.ghost.org</a>
</div>
</section>
<section class="gh-dashboard-area members-activity">
{{#if this.showMembersData}}
{{#if (not (feature "membersActivityFeed"))}}
{{#if this.topMembersData}}
<div class="gh-dashboard-box grey top-members">
<div class="gh-dashboard-header-container">
<h4 class="gh-dashboard-header">Top members</h4>
{{#if this.topMembersDataHasOpenRates}}
<h4 class="gh-dashboard-header secondary">Open rate</h4>
{{else}}
<h4 class="gh-dashboard-header secondary">Member since</h4>
{{/if}}
</div>
<div class="gh-dashboard-list">
{{#if this.topMembersLoading}}
Loading...
{{else}}
{{#if this.topMembersError}}
<p class="tc">
There was an error loading member events.
<code class="hidden">{{this.events.error.message}}</code>
</p>
{{else}}
<ul class="gh-dashboard-top-members">
{{#each this.topMembersData as |member|}}
<li class="gh-dashboard-top-member">
<LinkTo class="member-details" @route="member" @model="{{member.id}}">
<GhMemberAvatar @member={{member}} @containerClass="w9 h9 mr3 flex-shrink-0" />
{{#if member.name}}
<span class="name">{{member.name}}</span>
{{else}}
<span class="email">{{member.email}}</span>
{{/if}}
</LinkTo>
{{#if member.emailOpenRate}}
<span class="open-rate">{{member.emailOpenRate}}%</span>
{{else}}
<span class="open-rate">
{{moment-format member.createdAtUTC "D MMM YYYY"}}
</span>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
{{/if}}
<div class="gh-dashboard-top-members-footer">
<LinkTo @route="members">See all members {{svg-jar "arrow-right"}}</LinkTo>
</div>
</div>
</div>
{{/if}}
{{/if}}
<Dashboard::LatestMemberActivity />
{{/if}}
{{#if (not (or this.whatsNewEntriesLoading this.whatsNewEntriesError))}}
<div class="gh-dashboard-box whats-new {{if this.whatsNew.hasNew "has-new"}}">
<div class="gh-dashboard-header-container">
<h4 class="gh-dashboard-header">What's new?</h4>
{{svg-jar "gift"}}
</div>
<div class="content">
{{#each this.whatsNewEntries as |entry|}}
<LinkTo @route="whatsnew" @query={{hash entry=entry.slug}}>
<h2>{{entry.title}}</h2>
<span class="wn-date">{{moment-format entry.published_at "D MMM YYYY"}}</span>
{{#if entry.custom_excerpt}}
<p>{{entry.custom_excerpt}}</p>
{{/if}}
</LinkTo>
{{/each}}
</div>
<div class="footer">
<LinkTo @route="whatsnew" @query={{hash entry=null}} class="green">See more &rarr;</LinkTo>
</div>
</div>
{{/if}}
</section>
</div>
</section>