diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-06-30 00:40:00 +1000 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-06-30 00:40:00 +1000 |
| commit | 7701acf50b6f2beeca9c1774cec157533fc4cd72 (patch) | |
| tree | 333f6e133143f2b2fa5f32c7680b7e2afc9ee38d | |
| parent | bffef15a6a29248a5e13262e210fa70a9b569523 (diff) | |
For tutorial, initially hide prev/next
The intent was to avoid the user initially clicking prev/next,
and not realise they could do the action to advance the tutorial.
| -rw-r--r-- | src/components/TutorialPane.vue | 13 |
1 files changed, 10 insertions, 3 deletions
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue index 263b290..b11544c 100644 --- a/src/components/TutorialPane.vue +++ b/src/components/TutorialPane.vue @@ -2,7 +2,7 @@ <div :style="styles" class="p-2 flex flex-col justify-between"> <div class="flex"> <h2 class="text-center mb-2 mx-auto"> - {{stage == 0 ? 'Welcome' : `Tutorial (${stage} / ${lastStage + 1})`}} + {{stage == 0 ? 'Welcome' : `Tutorial (${stage} / ${lastStage})`}} </h2> <close-icon @click.stop="onClose" class="block w-6 h-6 hover:cursor-pointer"/> @@ -49,10 +49,12 @@ </div> <!-- Buttons --> <div class="w-full flex justify-evenly mt-2"> - <s-button :disabled="stage == 1" :style="buttonStyles" @click="onPrevClick"> + <s-button v-if="hidNextPrevOnce || stage > 1" :disabled="stage == 1" + @click="onPrevClick" :style="buttonStyles"> Prev </s-button> - <s-button :style="buttonStyles" @click="(stage != lastStage) ? onNextClick() : onClose()"> + <s-button v-if="hidNextPrevOnce || stage > 1" + @click="stage != lastStage ? onNextClick() : onClose()" :style="buttonStyles"> {{stage != lastStage ? 'Next' : 'Finish'}} </s-button> </div> @@ -78,6 +80,7 @@ export default defineComponent({ stage: 0, // Indicates the current step of the tutorial (stage 0 is the welcome message) lastStage: 9, disabledOnce: false, // Set to true after disabling features at stage 1 + hidNextPrevOnce: false, // Used to hide prev/next buttons when initially at stage 1 stageActions: [ // Specifies, for stages 1+, what action to enable (can repeat an action to enable nothing new) 'expand', 'collapse', 'expandToView', 'unhideAncestor', @@ -122,6 +125,10 @@ export default defineComponent({ this.uiOpts.disabledActions.delete(this.stageActions[this.stage - 1]); // Notify of new trigger-action this.$emit('stage-chg', this.stageActions[this.stage - 1]); + // After stage 1, show prev/next buttons + if (newVal == 2){ + this.hidNextPrevOnce = true; + } }, // Called when a trigger-action is done, and advances to the next stage triggerFlag(){ |