TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 05:37:34 +03:00
Code Issues Projects Releases Wiki Activity

Added confirmation modal to onboarding skip button (#19956)

Browse Source 
closes https://linear.app/tryghost/issue/IPC-115/make-skip-onboarding-button-work

- show a confirmation modal when clicking the "Skip onboarding" button
- onboarding is only dismissed when confirm button is clicked in the modal
This commit is contained in:
Kevin Ansfield 2024-03-28 17:50:40 +00:00 committed by GitHub
parent dda9ba2462
commit 0cd8547e23
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 37 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin/app/components/dashboard/onboarding-checklist.hbs
View File

@ -71,6 +71,6 @@
<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>
<a href="#" class="gh-onboarding-skip" {{on "click" this.confirmDismiss}}>Skip onboarding</a>
{{/unless}}
</div>

20
ghost/admin/app/components/dashboard/onboarding-checklist.js
View File

@ -1,4 +1,5 @@
import Component from '@glimmer/component';
import DismissModal from './onboarding/dismiss-modal';
import ShareModal from './onboarding/share-modal';
import {action} from '@ember/object';
import {inject} from 'ghost-admin/decorators/inject';
@ -10,13 +11,13 @@ export default class OnboardingChecklist extends Component {
@inject config;
dismissModal = null;
shareModal = null;
willDestroy() {
super.willDestroy(...arguments);
if (this.shareModal) {
this.shareModal.close();
}
this.dismissModal?.close();
this.shareModal?.close();
}
get siteUrl() {
@ -28,4 +29,17 @@ export default class OnboardingChecklist extends Component {
this.onboarding.markStepCompleted('share-publication');
this.shareModal = this.modals.open(ShareModal);
}
@action
async confirmDismiss() {
this.dismissModal = this.modals.open(DismissModal);
const reallyDismiss = await this.dismissModal;
if (reallyDismiss === true) {
this.onboarding.dismissChecklist();
} else {
this.dismissModal = null;
}
}
}

19
ghost/admin/app/components/dashboard/onboarding/dismiss-modal.hbs Normal file
View File

@ -0,0 +1,19 @@
<div class="modal-content">
<header class="modal-header">
<h1>Are you sure you want to skip onboarding?</h1>
</header>
<button class="close" title="Close" type="button" {{on "click" @close}}>{{svg-jar "close"}}<span
class="hidden">Close</span></button>
<div class="modal-body">
<p>
We're here to guide you every step of the way, but if you're ready
to explore on your own, that's okay, too.
</p>
</div>
<div class="modal-footer">
<button class="gh-btn" type="button" {{on "click" @close}}><span>Cancel</span></button>
<button class="gh-btn gh-btn-black" type="button" {{on "click" (fn @close true)}}><span>Skip onboarding</span></button>
</div>
</div>