-
-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: Add pop-up sheet component * feat: Add store to track open tutorials * feat: Add flag support to app state * refactor: Remove default tutorials * feat: Set store_restored flag if store was restored * feat: Add onboarding tutorial component * feat: Add tutorial view * feat: Use tutorial view on the timer page * refactor: Increase padding in onboarding tutorial * fix: Remove unused PWA installed tutorial reference * feat: Persist tutorials store * doc(tutorialView): Add explanation on enableComponent * feat: Add more pop to onboarding buttons * feat: Add translations to onboarding tutorial
- Loading branch information
Showing
8 changed files
with
257 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <template> | ||
| <transition | ||
| enter-class="!translate-y-full" | ||
| enter-active-class="transition-all duration-300" | ||
| leave-to-class="!translate-y-full" | ||
| leave-active-class="transition-all duration-300" | ||
| appear | ||
| > | ||
| <div v-show="open" class="bottom-0 left-0 right-0 z-20 mx-auto transition-all"> | ||
| <slot /> | ||
| </div> | ||
| </transition> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| props: { | ||
| open: { | ||
| type: Boolean, | ||
| default: false | ||
| } | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <template> | ||
| <div v-show="enableComponent" class="fixed top-0 left-0 z-40 w-screen h-screen transition"> | ||
| <transition leave-to-class="opacity-0" enter-class="opacity-0" appear @after-leave="enableComponent = false"> | ||
| <div v-show="currentTutorial !== null" class="fixed top-0 left-0 w-full h-full transition-all duration-500 bg-opacity-40 dark:bg-opacity-70 bg-slate-900" /> | ||
| </transition> | ||
|
|
||
| <!-- Tutorial component --> | ||
| <transition | ||
| mode="out-in" | ||
| enter-class="!translate-y-full" | ||
| enter-active-class="transition duration-500 ease-out" | ||
| leave-to-class="!translate-y-full" | ||
| leave-active-class="transition duration-300" | ||
| appear | ||
| > | ||
| <component :is="tutorial[tutorialId]" v-for="tutorialId in [currentTutorial]" :key="tutorialId" :open="isTutorialOpen(tutorialId)" @close="closeTutorial(tutorialId)" /> | ||
| </transition> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { mapActions, mapState } from 'pinia' | ||
| import tutorialOnboarding from './tutorialOnboarding.vue' | ||
| import { useTutorials } from '~/stores/tutorials' | ||
| import { useMain, flags } from '@/stores/index' | ||
| export default { | ||
| data () { | ||
| return { | ||
| tutorial: { | ||
| onboarding: tutorialOnboarding | ||
| }, | ||
| /** Controls whether the darkening backdrop is shown */ | ||
| enableComponent: false | ||
| } | ||
| }, | ||
| computed: { | ||
| ...mapState(useTutorials, ['currentTutorial', 'isTutorialOpen']), | ||
| ...mapState(useMain, ['isFlagActive']) | ||
| }, | ||
| watch: { | ||
| currentTutorial (newValue) { | ||
| // if a tutorial is to be shown, enable the backdrop | ||
| if (newValue !== null) { | ||
| this.enableComponent = true | ||
| } | ||
| } | ||
| }, | ||
| mounted () { | ||
| this.enableComponent = this.currentTutorial != null | ||
| if (!this.isFlagActive(flags.STORE_RESTORED)) { | ||
| this.openTutorial('onboarding') | ||
| } | ||
| }, | ||
| methods: { | ||
| ...mapActions(useTutorials, ['openTutorial', 'closeTutorial']) | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| <template> | ||
| <popup-sheet class="fixed w-full max-w-2xl md:p-4" open> | ||
| <div class="flex flex-col px-6 pt-6 pb-6 transition bg-white shadow-lg md:pb-3 rounded-t-2xl md:rounded-2xl"> | ||
| <transition enter-active-class="transition" enter-class="translate-x-4 opacity-0" leave-to-class="-translate-x-4 opacity-0" leave-active-class="transition" mode="out-in"> | ||
| <!-- Welcome screen --> | ||
| <div v-if="page === 0" key="page-index" class="flex flex-col"> | ||
| <div class="flex flex-col items-center gap-2 mb-2 text-center"> | ||
| <img src="/favicon.svg" class="p-3 bg-work bg-opacity-20 rounded-xl" width="72"> | ||
| <h2 class="mt-2 text-xl font-bold uppercase" v-text="$i18n.t('tutorials.onboarding.pages.0.title')" /> | ||
| <p v-text="$i18n.t('tutorials.onboarding.pages.0.text')" /> | ||
| </div> | ||
| </div> | ||
| <div v-if="page === 1" key="tutorial-1" class="flex flex-col items-center gap-2 text-center"> | ||
| <ClockIcon size="72" class="p-3 bg-work bg-opacity-20 rounded-xl" /> | ||
| <h2 class="mt-2 text-xl font-bold uppercase text-work" v-text="$i18n.t('tutorials.onboarding.pages.1.title')" /> | ||
| <p v-text="$i18n.t('tutorials.onboarding.pages.1.text')" /> | ||
| </div> | ||
| <div v-if="page === 2" key="tutorial-2" class="flex flex-col items-center gap-2 text-center"> | ||
| <MugIcon size="72" class="p-3 bg-shortpause bg-opacity-20 rounded-xl" /> | ||
| <h2 class="mt-2 text-xl font-bold uppercase text-shortpause" v-text="$i18n.t('tutorials.onboarding.pages.2.title')" /> | ||
| <p v-text="$i18n.t('tutorials.onboarding.pages.2.text')" /> | ||
| </div> | ||
| <div v-if="page === 3" key="tutorial-3" class="flex flex-col items-center gap-2 text-center"> | ||
| <SettingsIcon size="72" class="p-3 bg-longpause bg-opacity-20 rounded-xl" /> | ||
| <h2 class="mt-2 text-xl font-bold uppercase text-longpause" v-text="$i18n.t('tutorials.onboarding.pages.3.title')" /> | ||
| <p v-text="$i18n.t('tutorials.onboarding.pages.3.text')" /> | ||
| </div> | ||
| <div v-if="page === 4" key="tutorial-4" class="flex flex-col items-center gap-2 text-center"> | ||
| <HeartIcon size="72" class="p-3 text-black bg-amber-400 rounded-xl" /> | ||
| <h2 class="mt-2 text-xl font-bold uppercase text-amber-500" v-text="$i18n.t('tutorials.onboarding.pages.support.title')" /> | ||
| <p v-text="$i18n.t('tutorials.onboarding.pages.support.text')" /> | ||
| </div> | ||
| </transition> | ||
| <div class="flex-grow h-4" /> | ||
| <div class="flex flex-col gap-2 mt-4 md:flex-row"> | ||
| <button class="flex-grow w-full py-2 transition border-2 rounded-full text-work border-work hover:bg-work hover:text-white" @click="$emit('close')"> | ||
| Close | ||
| </button> | ||
| <button v-if="page === 0" class="flex-grow w-full py-2 text-white transition border-2 rounded-full border-work bg-work hover:scale-105 hover:shadow-md hover:shadow-red-200" @click="page = 1"> | ||
| Start tutorial | ||
| </button> | ||
| <button v-else-if="page < 4" class="flex-grow w-full py-2 text-white transition border-2 rounded-full border-work bg-work hover:shadow-md hover:shadow-red-200 hover:scale-105" @click="page += 1"> | ||
| Next | ||
| </button> | ||
| <a v-else-if="page === 4" href="https://www.buymeacoffee.com/imreg?utm_source=anotherpomodoro&utm_medium=cta&utm_campaign=onboarding" target="_blank" class="flex-grow w-full py-2 text-center text-black transition border-2 rounded-full border-amber-400 bg-amber-400 hover:scale-105 hover:shadow-md hover:shadow-amber-200"> | ||
| Support the project | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </popup-sheet> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { ClockIcon, MugIcon, SettingsIcon, HeartIcon } from 'vue-tabler-icons' | ||
| import PopupSheet from '@/components/base/popupSheet.vue' | ||
| export default { | ||
| components: { PopupSheet, ClockIcon, MugIcon, SettingsIcon, HeartIcon }, | ||
| data () { | ||
| return { | ||
| page: 0 | ||
| } | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,24 @@ | ||
| import { defineStore } from 'pinia' | ||
|
|
||
| export const flags = { | ||
| STORE_RESTORED: 'store_restored' | ||
| } | ||
|
|
||
| export const useMain = defineStore('main', { | ||
| state: () => ({ | ||
| version: process.env.PACKAGE_VERSION | ||
| }) | ||
| }) | ||
| version: process.env.PACKAGE_VERSION, | ||
| flags: [] | ||
| }), | ||
|
|
||
| // export const { | ||
| // state () { | ||
| // return { | ||
| // version: process.env.PACKAGE_VERSION | ||
| // } | ||
| // }, | ||
| // actions: { | ||
| // nuxtServerInit ({ commit }) { | ||
| // // initialize with 10 entries, no need for phantom entries then | ||
| // commit('schedule/initSchedule', 10) | ||
| // } | ||
| // } | ||
| // } | ||
| getters: { | ||
| isFlagActive: state => flag => state.flags.includes(flag) | ||
| }, | ||
|
|
||
| actions: { | ||
| registerFlag (flag) { | ||
| if (!this.flags.includes(flag)) { | ||
| this.flags.push(flag) | ||
| } | ||
| } | ||
| } | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import { defineStore } from 'pinia' | ||
|
|
||
| export const useTutorials = defineStore('tutorials', { | ||
| state: () => ({ | ||
| openTutorials: [] | ||
| }), | ||
|
|
||
| getters: { | ||
| isTutorialOpen: (state) => { | ||
| return tutorialId => state.openTutorials.indexOf(tutorialId) === 0 | ||
| }, | ||
|
|
||
| currentTutorial: state => state.openTutorials[0] ?? null | ||
| }, | ||
|
|
||
| actions: { | ||
| openTutorial (tutorialId) { | ||
| if (!this.openTutorials.includes(tutorialId)) { | ||
| this.openTutorials.push(tutorialId) | ||
| } | ||
| }, | ||
|
|
||
| closeTutorial (tutorialId) { | ||
| const tutorialIndex = this.openTutorials.indexOf(tutorialId) | ||
| if (tutorialIndex >= 0) { | ||
| this.openTutorials.splice(tutorialIndex, 1) | ||
| } | ||
| } | ||
| } | ||
| }) |