1c219fdcb6
part of https://linear.app/tryghost/issue/IPC-92/add-logic-for-completing-steps part of https://linear.app/tryghost/issue/IPC-115/make-skip-onboarding-button-work - updated `onboarding` service to use the `user.accessibility` (poor naming, this is an old field used for general user settings) as it's backing store - added `onboarding.allStepsCompleted` to allow for "completion" state to be shown before the checklist is marked as completed - added `onboarding.{complete,dismiss}Checklist()` actions and wired those up to the template When testing, if you need to reset the checklist you can run this in DevTools console ``` Ember.Namespace.NAMESPACES_BY_ID['ghost-admin'].__container__.lookup('service:onboarding').startChecklist() ```
76 lines
3.8 KiB
Handlebars
76 lines
3.8 KiB
Handlebars
<div class="gh-onboarding-wrapper" data-test-dashboard="onboarding-checklist">
|
||
<div class="gh-onboarding-header">
|
||
<video width="80" height="80" loop autoplay muted playsinline preload="metadata" style="width: 80px; height: 80px; margin-bottom: 24px;">
|
||
<source src="assets/videos/logo-loader.mp4" type="video/mp4" />
|
||
</video>
|
||
<h2 class="gh-canvas-title">{{this.siteUrl}} is ready to go!</h2>
|
||
<p>Let’s set your brand new publication up for success.</p>
|
||
</div>
|
||
|
||
<div class="gh-onboarding-items">
|
||
<div>
|
||
{{!-- Step 1 --}}
|
||
<div class="gh-onboarding-item gh-onboarding-item--completed">
|
||
<Dashboard::Onboarding::Step
|
||
@icon="rocket"
|
||
@title="Start a new Ghost publication"
|
||
@complete={{true}}
|
||
/>
|
||
</div>
|
||
{{!-- Step 2 --}}
|
||
<LinkTo @route="settings-x.settings-x" @model="design/edit?ref=setup" class="gh-onboarding-item {{onboarding-step-class "customize-design"}}" {{on "click" (fn this.onboarding.markStepCompleted "customize-design")}}>
|
||
<Dashboard::Onboarding::Step
|
||
@icon="brush"
|
||
@title="Customize your publication"
|
||
@description="Match the look and feel to your style and make it yours."
|
||
@complete={{is-onboarding-step-completed "customize-design"}}
|
||
/>
|
||
</LinkTo>
|
||
{{!-- Step 3 --}}
|
||
<LinkTo @route="lexical-editor.new" @model="post" class="gh-onboarding-item {{onboarding-step-class "first-post"}}" {{on "click" (fn this.onboarding.markStepCompleted "first-post")}}>
|
||
<Dashboard::Onboarding::Step
|
||
@icon="writing"
|
||
@title="Create your first post"
|
||
@description="Explore the editor and tell your story."
|
||
@complete={{is-onboarding-step-completed "first-post"}}
|
||
/>
|
||
</LinkTo>
|
||
{{!-- Step 4 --}}
|
||
<LinkTo @route="members" class="gh-onboarding-item {{onboarding-step-class "build-audience"}}" {{on "click" (fn this.onboarding.markStepCompleted "build-audience")}}>
|
||
<Dashboard::Onboarding::Step
|
||
@icon="member-add"
|
||
@title="Build your audience"
|
||
@description="Add members and grow your readership."
|
||
@complete={{is-onboarding-step-completed "build-audience"}}
|
||
/>
|
||
</LinkTo>
|
||
{{!-- Step 5 --}}
|
||
<div role="button" {{on "click" (toggle-action "showShareModal" this)}} class="gh-onboarding-item {{onboarding-step-class "share-publication"}}">
|
||
<Dashboard::Onboarding::Step
|
||
@icon="megaphone"
|
||
@title="Share your publication"
|
||
@description="Share your publication on social media."
|
||
@complete={{is-onboarding-step-completed "share-publication"}}
|
||
role="presentation"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{#if this.onboarding.allStepsCompleted}}
|
||
<a href="#" class="gh-onboarding-explore-dashboard" {{on "click" this.onboarding.completeChecklist}}>Explore your dashboard</a>
|
||
{{/if}}
|
||
|
||
<p class="gh-onboarding-help">Need some more help? Check out our <a href="https://ghost.org/help?utm_source=admin&utm_campaign=onboarding" target="_blank" rel="noopener noreferrer">Help center</a></p>
|
||
|
||
{{#unless this.onboarding.allStepsCompleted}}
|
||
<a href="#" class="gh-onboarding-skip" {{on "click" this.onboarding.dismissChecklist}}>Skip onboarding</a>
|
||
{{/unless}}
|
||
</div>
|
||
|
||
{{#if this.showShareModal}}
|
||
<GhFullscreenModal @modal="share"
|
||
@close={{this.close}}
|
||
@modifier="action wide"
|
||
/>
|
||
{{/if}} |