Skip to content

Commit

Permalink
renamed tour interfaces and added icons in context
Browse files Browse the repository at this point in the history
  • Loading branch information
onmax committed Feb 3, 2022
1 parent 0e81b58 commit 4b17f53
Show file tree
Hide file tree
Showing 25 changed files with 574 additions and 527 deletions.
28 changes: 24 additions & 4 deletions src/components/Tour.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
:steps="steps.map((s) => s.tooltip)"
:options="tourOptions"
>
<template slot-scope="tour">
<template v-slot="tour">
<transition name="fade">
<v-step
class="tooltip"
Expand All @@ -24,7 +24,22 @@
<div slot="content" class="content">
<div v-for="(content, i) in tour.steps[tour.currentStep].content" :key="i">
<PartyConfettiIcon v-if="currentStep === nSteps - 1 && i === 0" />
<hr v-if="content === 'HR'" />
<hr v-if="content === ContentSpecialItem.HR" />
<i18n v-else-if="content.includes(ContentSpecialItem.ICON_NETWORK_WORLD)"
:path="content" tag="p">
<template v-slot:network)icon>
<WorldCheckIcon />
</template>
<template v-slot:account_icon>
<svg width="14" height="21" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity=".7">
<rect x=".75" y=".75" width="12.5" height="19.5"
rx="2.5" stroke="#fff" stroke-width="1.5"/>
<circle cx="7" cy="7" r="2" fill="#fff"/>
</g>
</svg>
</template>
</i18n>
<p v-else-if="typeof content === 'string'" v-html="$t(content)"></p>
<ul v-else-if="content.length">
<li v-for="(item, i) in content" :key="i">
Expand All @@ -51,6 +66,7 @@
class="right" v-if="tour.steps[tour.currentStep].button && !isLoading"
@click="() => tour.steps[tour.currentStep].button.fn(endTour)"
>
<!-- TODO Move $t to logic -->
{{ $t(tour.steps[tour.currentStep].button.text) }}
</button>
<button
Expand Down Expand Up @@ -116,13 +132,15 @@ import Vue from 'vue';
import VueTour from 'vue-tour';
import { useWindowSize } from '../composables/useWindowSize';
import {
ContentSpecialItem,
getFakeTx,
getTour,
MountedReturnFn, TourBroadcast, TourStep,
TourStepIndex,
} from '../lib/tour';
import PartyConfettiIcon from './icons/PartyConfettiIcon.vue';
import TourPreviousLeftArrowIcon from './icons/TourPreviousLeftArrowIcon.vue';
import WorldCheckIcon from './icons/WorldCheckIcon.vue';
Vue.use(VueTour);
Expand Down Expand Up @@ -155,7 +173,7 @@ export default defineComponent({
// Initial state
const isLoading = ref(true);
const currentStep: Ref<TourStepIndex> = ref(0);
const currentStep: Ref<TourStepIndex> = ref(7);
const nSteps: Ref<number> = ref(0);
const disableNextStep = ref(true);
Expand Down Expand Up @@ -523,6 +541,7 @@ export default defineComponent({
isSmallScreen,
isMediumScreen,
isLargeScreen,
ContentSpecialItem,
// tour
tourOptions,
Expand All @@ -549,6 +568,7 @@ export default defineComponent({
TourPreviousLeftArrowIcon,
PartyConfettiIcon,
CircleSpinner,
WorldCheckIcon,
},
});
</script>
Expand Down Expand Up @@ -597,7 +617,7 @@ export default defineComponent({
position: absolute;
width: 100vw;
height: 100vh;
height: 100%;
pointer-events: none;
> * {
Expand Down
4 changes: 3 additions & 1 deletion src/components/UpdateNotification.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<script lang="ts">
import { defineComponent, ref, watch } from '@vue/composition-api';
import { BottomOverlay, CircleSpinner } from '@nimiq/vue-components';
import { useAccountStore } from '@/stores/Account';
import { useSettingsStore } from '../stores/Settings';
import { updateServiceWorker } from '../registerServiceWorker';
Expand All @@ -26,8 +27,9 @@ export default defineComponent({
const isShown = ref(false);
const { updateAvailable } = useSettingsStore();
const { state } = useAccountStore();
watch(updateAvailable, (isAvailable) => {
if (isAvailable) isShown.value = true;
isShown.value = isAvailable && state.tour !== null; // Only show if the user is not in the tour
});
const applyingWalletUpdate = ref(false);
Expand Down
2 changes: 1 addition & 1 deletion src/components/icons/TourPreviousLeftArrowIcon.vue
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<template>
<template functional>
<svg width="12" height="9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5 8.125 1 4.625l3.5-3.5M2.25 4.593h8.499" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Expand Down
4 changes: 2 additions & 2 deletions src/lib/tour/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import { Transaction } from '@/stores/Transactions';
import { SetupContext } from '@vue/composition-api';
import { getNetworkTourSteps } from './network';
import { getOnboardingTourSteps } from './onboarding';
import { NetworkTourStep, OnboardingTourStep, TourName, TourSteps } from './types';
import { NetworkTourStep, OnboardingTourStep, TourName, ITourSteps } from './types';

export function getTour(tour: TourName | undefined, context: SetupContext)
: TourSteps<OnboardingTourStep> | TourSteps<NetworkTourStep> {
: ITourSteps<OnboardingTourStep> | ITourSteps<NetworkTourStep> {
switch (tour) {
case 'onboarding':
return getOnboardingTourSteps(context);
Expand Down
32 changes: 16 additions & 16 deletions src/lib/tour/network/01_YourLocationStep.ts
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
import { SCALING_FACTOR } from '@/lib/NetworkMap';
import { NetworkGetStepFnArgs, NetworkTourStep, TourStep, WalletHTMLElements } from '..';
import { INetworkGetStepFnArgs, NetworkTourStep, ITourStep, IWalletHTMLElements } from '..';
import { getNetworkTexts } from './NetworkTourTexts';

export function getYourLocationStep({ nodes, scrollIntoView, sleep, selfNodeIndex }: NetworkGetStepFnArgs): TourStep {
export function getYourLocationStep({ nodes, scrollIntoView, sleep, selfNodeIndex }: INetworkGetStepFnArgs): ITourStep {
return {
path: '/network',
tooltip: {
target: `${WalletHTMLElements.NETWORK_NODES} span:nth-child(${selfNodeIndex + 1})`,
content: getNetworkTexts(NetworkTourStep.YOUR_LOCATION),
target: `${IWalletHTMLElements.NETWORK_NODES} span:nth-child(${selfNodeIndex + 1})`,
content: getNetworkTexts(NetworkTourStep.YOUR_LOCATION).default,
params: {
// TODO On mobile phones if the node is in the south, the tooltip might break the web
placement: 'bottom',
},
},
ui: {
fadedElements: [
WalletHTMLElements.SIDEBAR_TESTNET,
WalletHTMLElements.SIDEBAR_LOGO,
WalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
WalletHTMLElements.SIDEBAR_PRICE_CHARTS,
WalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
WalletHTMLElements.SIDEBAR_NETWORK,
WalletHTMLElements.SIDEBAR_SETTINGS,
WalletHTMLElements.NETWORK_STATS,
IWalletHTMLElements.SIDEBAR_TESTNET,
IWalletHTMLElements.SIDEBAR_LOGO,
IWalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
IWalletHTMLElements.SIDEBAR_PRICE_CHARTS,
IWalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
IWalletHTMLElements.SIDEBAR_NETWORK,
IWalletHTMLElements.SIDEBAR_SETTINGS,
IWalletHTMLElements.NETWORK_STATS,
],
disabledElements: [
WalletHTMLElements.NETWORK_TABLET_MENU_BAR,
WalletHTMLElements.NETWORK_MAP,
IWalletHTMLElements.NETWORK_TABLET_MENU_BAR,
IWalletHTMLElements.NETWORK_MAP,
],
disabledButtons: [WalletHTMLElements.BUTTON_SIDEBAR_BUY, WalletHTMLElements.BUTTON_SIDEBAR_SELL],
disabledButtons: [IWalletHTMLElements.BUTTON_SIDEBAR_BUY, IWalletHTMLElements.BUTTON_SIDEBAR_SELL],
},
lifecycle: {
created: (async ({ goingForward }) => {
Expand All @@ -38,5 +38,5 @@ export function getYourLocationStep({ nodes, scrollIntoView, sleep, selfNodeInde
}
}),
},
} as TourStep;
} as ITourStep;
}
32 changes: 16 additions & 16 deletions src/lib/tour/network/02_BackboneNodeStep.ts
Original file line number Diff line number Diff line change
@@ -1,39 +1,39 @@
import { SCALING_FACTOR } from '@/lib/NetworkMap';
import { ref } from '@vue/composition-api';
import { NetworkGetStepFnArgs, NetworkTourStep, TourStep, WalletHTMLElements } from '..';
import { INetworkGetStepFnArgs, NetworkTourStep, ITourStep, IWalletHTMLElements } from '..';
import { getNetworkTexts } from './NetworkTourTexts';

export function getBackboneNodeStep(
{ nodes, selfNodeIndex, isLargeScreen, scrollIntoView, sleep }: NetworkGetStepFnArgs): TourStep {
{ nodes, selfNodeIndex, isLargeScreen, scrollIntoView, sleep }: INetworkGetStepFnArgs): ITourStep {
const selectedNode = ref(-1);
return {
path: '/network',
tooltip: {
get target() {
return `${WalletHTMLElements.NETWORK_NODES} span:nth-child(${selectedNode.value + 1})`;
return `${IWalletHTMLElements.NETWORK_NODES} span:nth-child(${selectedNode.value + 1})`;
},
content: getNetworkTexts(NetworkTourStep.BACKBONE_NODE),
content: getNetworkTexts(NetworkTourStep.BACKBONE_NODE).default,
params: {
// TODO On mobile phones if the node is in the south, the tooltip might break the web
placement: isLargeScreen.value ? 'right' : 'bottom',
},
},
ui: {
fadedElements: [
WalletHTMLElements.SIDEBAR_TESTNET,
WalletHTMLElements.SIDEBAR_LOGO,
WalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
WalletHTMLElements.SIDEBAR_PRICE_CHARTS,
WalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
WalletHTMLElements.SIDEBAR_NETWORK,
WalletHTMLElements.SIDEBAR_SETTINGS,
WalletHTMLElements.NETWORK_STATS,
IWalletHTMLElements.SIDEBAR_TESTNET,
IWalletHTMLElements.SIDEBAR_LOGO,
IWalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
IWalletHTMLElements.SIDEBAR_PRICE_CHARTS,
IWalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
IWalletHTMLElements.SIDEBAR_NETWORK,
IWalletHTMLElements.SIDEBAR_SETTINGS,
IWalletHTMLElements.NETWORK_STATS,
],
disabledElements: [
WalletHTMLElements.NETWORK_TABLET_MENU_BAR,
WalletHTMLElements.NETWORK_MAP,
IWalletHTMLElements.NETWORK_TABLET_MENU_BAR,
IWalletHTMLElements.NETWORK_MAP,
],
disabledButtons: [WalletHTMLElements.BUTTON_SIDEBAR_BUY, WalletHTMLElements.BUTTON_SIDEBAR_SELL],
disabledButtons: [IWalletHTMLElements.BUTTON_SIDEBAR_BUY, IWalletHTMLElements.BUTTON_SIDEBAR_SELL],
},
lifecycle: {
created: (async () => {
Expand All @@ -53,5 +53,5 @@ export function getBackboneNodeStep(
await sleep(500);
}),
},
} as TourStep;
} as ITourStep;
}
32 changes: 16 additions & 16 deletions src/lib/tour/network/03_NetworkMetricsStep.ts
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
import { NetworkTourStep, TourStep, WalletHTMLElements } from '..';
import { NetworkTourStep, ITourStep, IWalletHTMLElements } from '..';
import { getNetworkTexts } from './NetworkTourTexts';

export function getNetworkMetricsStep(): TourStep {
export function getNetworkMetricsStep(): ITourStep {
return {
path: '/network',
tooltip: {
target: WalletHTMLElements.NETWORK_STATS,
content: getNetworkTexts(NetworkTourStep.METRICS),
target: IWalletHTMLElements.NETWORK_STATS,
content: getNetworkTexts(NetworkTourStep.METRICS).default,
params: {
placement: 'top',
},
},
ui: {
fadedElements: [
WalletHTMLElements.SIDEBAR_TESTNET,
WalletHTMLElements.SIDEBAR_LOGO,
WalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
WalletHTMLElements.SIDEBAR_PRICE_CHARTS,
WalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
WalletHTMLElements.SIDEBAR_NETWORK,
WalletHTMLElements.SIDEBAR_SETTINGS,
IWalletHTMLElements.SIDEBAR_TESTNET,
IWalletHTMLElements.SIDEBAR_LOGO,
IWalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
IWalletHTMLElements.SIDEBAR_PRICE_CHARTS,
IWalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
IWalletHTMLElements.SIDEBAR_NETWORK,
IWalletHTMLElements.SIDEBAR_SETTINGS,
],
disabledElements: [
WalletHTMLElements.NETWORK_TABLET_MENU_BAR,
WalletHTMLElements.NETWORK_MAP,
WalletHTMLElements.NETWORK_STATS,
IWalletHTMLElements.NETWORK_TABLET_MENU_BAR,
IWalletHTMLElements.NETWORK_MAP,
IWalletHTMLElements.NETWORK_STATS,
],
disabledButtons: [WalletHTMLElements.BUTTON_SIDEBAR_BUY, WalletHTMLElements.BUTTON_SIDEBAR_SELL],
disabledButtons: [IWalletHTMLElements.BUTTON_SIDEBAR_BUY, IWalletHTMLElements.BUTTON_SIDEBAR_SELL],
},
} as TourStep;
} as ITourStep;
}
35 changes: 18 additions & 17 deletions src/lib/tour/network/04_NetworkCompletedStep.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import { NetworkGetStepFnArgs, NetworkTourStep, TourStep, WalletHTMLElements } from '..';
import { INetworkGetStepFnArgs, NetworkTourStep, ITourStep, IWalletHTMLElements } from '..';
import { getNetworkTexts } from './NetworkTourTexts';

export function getNetworkCompletedStep({ isLargeScreen }: NetworkGetStepFnArgs): TourStep {
export function getNetworkCompletedStep({ isLargeScreen }: INetworkGetStepFnArgs): ITourStep {
return {
path: '/network',
tooltip: {
get target() {
return isLargeScreen.value
? WalletHTMLElements.SIDEBAR_ACCOUNT_MENU
: `${WalletHTMLElements.NETWORK_TABLET_MENU_BAR} .account-button`;
? IWalletHTMLElements.SIDEBAR_ACCOUNT_MENU
: `${IWalletHTMLElements.NETWORK_TABLET_MENU_BAR} .account-button`;
},
content: getNetworkTexts(NetworkTourStep.NETWORK_COMPLETED, isLargeScreen.value),
content: getNetworkTexts(NetworkTourStep.NETWORK_COMPLETED)[
isLargeScreen.value ? 'alternative' : 'default'],
params: {
get placement() {
return isLargeScreen.value ? 'right' : 'top';
Expand All @@ -27,20 +28,20 @@ export function getNetworkCompletedStep({ isLargeScreen }: NetworkGetStepFnArgs)
},
ui: {
fadedElements: [
WalletHTMLElements.SIDEBAR_TESTNET,
WalletHTMLElements.SIDEBAR_LOGO,
WalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
WalletHTMLElements.SIDEBAR_PRICE_CHARTS,
WalletHTMLElements.SIDEBAR_NETWORK,
WalletHTMLElements.SIDEBAR_SETTINGS,
IWalletHTMLElements.SIDEBAR_TESTNET,
IWalletHTMLElements.SIDEBAR_LOGO,
IWalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
IWalletHTMLElements.SIDEBAR_PRICE_CHARTS,
IWalletHTMLElements.SIDEBAR_NETWORK,
IWalletHTMLElements.SIDEBAR_SETTINGS,
],
disabledElements: [
WalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
WalletHTMLElements.NETWORK_TABLET_MENU_BAR,
WalletHTMLElements.NETWORK_MAP,
WalletHTMLElements.NETWORK_STATS,
IWalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
IWalletHTMLElements.NETWORK_TABLET_MENU_BAR,
IWalletHTMLElements.NETWORK_MAP,
IWalletHTMLElements.NETWORK_STATS,
],
disabledButtons: [WalletHTMLElements.BUTTON_SIDEBAR_BUY, WalletHTMLElements.BUTTON_SIDEBAR_SELL],
disabledButtons: [IWalletHTMLElements.BUTTON_SIDEBAR_BUY, IWalletHTMLElements.BUTTON_SIDEBAR_SELL],
},
} as TourStep;
} as ITourStep;
}
Loading

0 comments on commit 4b17f53

Please sign in to comment.