Updated tour with overnice feedback

- Save tour index, so if user reloads page, can keep going from the last step - Fixed UI and UX errors
nimiq · Feb 23, 2022 · ef86512 · ef86512
1 parent 7576332
commit ef86512
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 16 deletions.
diff --git a/src/components/Tour.vue b/src/components/Tour.vue
@@ -217,7 +217,7 @@ export default defineComponent({
  setTourAsArray();
 
  const isLoading = ref(true);
- const currentStep: Ref<TourStepIndex> = ref(0);
+ const currentStep: Ref<TourStepIndex> = ref(accountStore.tour?.step || 0);
  const nSteps: Ref<number> = ref(steps.value.length);
  const disableNextStep = ref(true);
  const showTour = ref(false);
@@ -379,6 +379,8 @@ export default defineComponent({
  nSteps: nSteps.value,
  },
  });
+
+ accountStore.tour!.step = currentStep.value;
  }
 
  function _broadcast(data: ITourBroadcast) {
@@ -522,14 +524,15 @@ export default defineComponent({
  showTour.value = false; // This way, we can trigger the animation as v-step will be removed
  }
 
+ // Update UI
+ _toggleDisabledButtons(steps.value[currentStep.value].ui.disabledButtons, false);
+ _removeUIFromOldStep(currentStep.value);
+
  if (!soft) {
  // wait until longest leave transition finishes
  await sleep(1150);
  }
 
- // Update UI
- _removeUIFromOldStep(currentStep.value);
-
  if (!soft) {
  setTour(null);
  }
@@ -664,8 +667,7 @@ export default defineComponent({
  cursor: not-allowed;
 }
 
-#app[data-tour-active] [data-scroll-locked],
-#app[data-tour-active] [data-scroll-locked] * {
+#app[data-tour-active] [data-scroll-locked] {
  overflow: hidden;
 }
 

diff --git a/src/components/layouts/Settings.vue b/src/components/layouts/Settings.vue
@@ -377,7 +377,7 @@ export default defineComponent({
  }
 
  function goToOnboardingTour() {
- useAccountStore().setTour({ name: TourName.ONBOARDING, startedFrom: ITourOrigin.SETTINGS });
+ useAccountStore().setTour({ name: TourName.ONBOARDING, startedFrom: ITourOrigin.SETTINGS, step: 0 });
  context.root.$router.push('/');
  }
 

diff --git a/src/components/modals/DiscoverTheNimiqWalletModal.vue b/src/components/modals/DiscoverTheNimiqWalletModal.vue
@@ -49,7 +49,7 @@ export default defineComponent({
  const { setTour } = useAccountStore();
 
  function startTour() {
- setTour({ name: TourName.ONBOARDING, startedFrom: ITourOrigin.WELCOME_MODAL });
+ setTour({ name: TourName.ONBOARDING, startedFrom: ITourOrigin.WELCOME_MODAL, step: 0 });
  context.root.$router.push('/');
  }
 

diff --git a/src/components/modals/NetworkInfoModal.vue b/src/components/modals/NetworkInfoModal.vue
@@ -56,7 +56,7 @@ export default defineComponent({
  }
 
  function goToNetworkTour() {
- useAccountStore().setTour({ name: TourName.NETWORK });
+ useAccountStore().setTour({ name: TourName.NETWORK, step: 0 });
  context.emit('close');
  }
 

diff --git a/src/lib/tour/onboarding/02_TransactionListStep.ts b/src/lib/tour/onboarding/02_TransactionListStep.ts
@@ -41,7 +41,7 @@ export function getTransactionListStep(
  txsLen.value === 0 ? '' : IWalletHTMLElements.BUTTON_ADDRESS_OVERVIEW_BUY,
  ],
  scrollLockedElements: [
- `${IWalletHTMLElements.ACCOUNT_OVERVIEW_ADDRESS_LIST} .vue-recycle-scroller`,
+ IWalletHTMLElements.ACCOUNT_OVERVIEW_ADDRESS_LIST,
  `${IWalletHTMLElements.ADDRESS_OVERVIEW_TRANSACTIONS} .vue-recycle-scroller`,
  ],
  explicitInteractableElements: [
@@ -98,10 +98,11 @@ export function getTransactionListStep(
  });
 
  // Add hightlight effect to 'Get Free NIM' button
- toggleHighlightButton(IWalletHTMLElements.ADDRESS_OVERVIEW_ACTIONS, true, 'green');
+ toggleHighlightButton(IWalletHTMLElements.BUTTON_ADDRESS_OVERVIEW_RECEIVE_FREE_NIM, true, 'green');
  return () => {
  unwatch();
- return toggleHighlightButton(IWalletHTMLElements.ADDRESS_OVERVIEW_ACTIONS, false, 'green');
+ return toggleHighlightButton(
+ IWalletHTMLElements.BUTTON_ADDRESS_OVERVIEW_RECEIVE_FREE_NIM, false, 'green');
  };
  },
  },

diff --git a/src/stores/Account.ts b/src/stores/Account.ts
@@ -1,14 +1,17 @@
-import { createStore } from 'pinia';
+import { ITourOrigin, TourName, TourStepIndex } from '@/lib/tour';
 import { Account } from '@nimiq/hub-api';
-import { TourName, ITourOrigin } from '@/lib/tour';
-import { useAddressStore } from './Address';
+import { createStore } from 'pinia';
 import { CryptoCurrency } from '../lib/Constants';
+import { useAddressStore } from './Address';
 
 export type AccountState = {
  accountInfos: {[id: string]: AccountInfo},
  activeAccountId: string | null,
  activeCurrency: CryptoCurrency,
- tour: { name: TourName.NETWORK } | { name: TourName.ONBOARDING, startedFrom: ITourOrigin } | null,
+ tour:
+ { name: TourName.NETWORK, step: TourStepIndex } |
+ { name: TourName.ONBOARDING, step: TourStepIndex, startedFrom: ITourOrigin } |
+ null,
 }
 
 // Mirror of Hub WalletType, which is not exported