Skip to content

Commit 26c2fbd

Browse files
onmaxonmax
committed
renamed tour interfaces and added icons in context
1 parent 0e81b58 commit 26c2fbd

25 files changed

+574
-527
lines changed

‎src/components/Tour.vue‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
:steps="steps.map((s) => s.tooltip)"
66
:options="tourOptions"
77
>
8-
<template slot-scope="tour">
8+
<template v-slot="tour">
99
<transition name="fade">
1010
<v-step
1111
class="tooltip"
@@ -24,7 +24,22 @@
2424
<div slot="content" class="content">
2525
<div v-for="(content, i) in tour.steps[tour.currentStep].content" :key="i">
2626
<PartyConfettiIcon v-if="currentStep === nSteps - 1 && i === 0" />
27-
<hr v-if="content === 'HR'" />
27+
<hr v-if="content === ContentSpecialItem.HR" />
28+
<i18n v-else-if="content.includes(ContentSpecialItem.ICON_NETWORK_WORLD)"
29+
:path="content" tag="p">
30+
<template v-slot:network)icon>
31+
<WorldCheckIcon />
32+
</template>
33+
<template v-slot:account_icon>
34+
<svg width="14" height="21" fill="none" xmlns="http://www.w3.org/2000/svg">
35+
<g opacity=".7">
36+
<rect x=".75" y=".75" width="12.5" height="19.5"
37+
rx="2.5" stroke="#fff" stroke-width="1.5"/>
38+
<circle cx="7" cy="7" r="2" fill="#fff"/>
39+
</g>
40+
</svg>
41+
</template>
42+
</i18n>
2843
<p v-else-if="typeof content === 'string'" v-html="$t(content)"></p>
2944
<ul v-else-if="content.length">
3045
<li v-for="(item, i) in content" :key="i">
@@ -51,6 +66,7 @@
5166
class="right" v-if="tour.steps[tour.currentStep].button && !isLoading"
5267
@click="() => tour.steps[tour.currentStep].button.fn(endTour)"
5368
>
69+
<!-- TODO Move $t to logic -->
5470
{{ $t(tour.steps[tour.currentStep].button.text) }}
5571
</button>
5672
<button
@@ -116,13 +132,15 @@ import Vue from 'vue';
116132
import VueTour from 'vue-tour';
117133
import { useWindowSize } from '../composables/useWindowSize';
118134
import {
135+
ContentSpecialItem,
119136
getFakeTx,
120137
getTour,
121138
MountedReturnFn, TourBroadcast, TourStep,
122139
TourStepIndex,
123140
} from '../lib/tour';
124141
import PartyConfettiIcon from './icons/PartyConfettiIcon.vue';
125142
import TourPreviousLeftArrowIcon from './icons/TourPreviousLeftArrowIcon.vue';
143+
import WorldCheckIcon from './icons/WorldCheckIcon.vue';
126144
127145
Vue.use(VueTour);
128146
@@ -155,7 +173,7 @@ export default defineComponent({
155173
156174
// Initial state
157175
const isLoading = ref(true);
158-
const currentStep: Ref<TourStepIndex> = ref(0);
176+
const currentStep: Ref<TourStepIndex> = ref(7);
159177
const nSteps: Ref<number> = ref(0);
160178
const disableNextStep = ref(true);
161179
@@ -523,6 +541,7 @@ export default defineComponent({
523541
isSmallScreen,
524542
isMediumScreen,
525543
isLargeScreen,
544+
ContentSpecialItem,
526545
527546
// tour
528547
tourOptions,
@@ -549,6 +568,7 @@ export default defineComponent({
549568
TourPreviousLeftArrowIcon,
550569
PartyConfettiIcon,
551570
CircleSpinner,
571+
WorldCheckIcon,
552572
},
553573
});
554574
</script>
@@ -597,7 +617,7 @@ export default defineComponent({
597617
598618
position: absolute;
599619
width: 100vw;
600-
height: 100vh;
620+
height: 100%;
601621
pointer-events: none;
602622
603623
> * {

‎src/components/UpdateNotification.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<script lang="ts">
1919
import { defineComponent, ref, watch } from '@vue/composition-api';
2020
import { BottomOverlay, CircleSpinner } from '@nimiq/vue-components';
21+
import { useAccountStore } from '@/stores/Account';
2122
import { useSettingsStore } from '../stores/Settings';
2223
import { updateServiceWorker } from '../registerServiceWorker';
2324
@@ -26,8 +27,9 @@ export default defineComponent({
2627
const isShown = ref(false);
2728
2829
const { updateAvailable } = useSettingsStore();
30+
const { state } = useAccountStore();
2931
watch(updateAvailable, (isAvailable) => {
30-
if (isAvailable) isShown.value = true;
32+
if (isAvailable) isShown.value = state.tour !== null; // Only show if the user is not in the tour
3133
});
3234
3335
const applyingWalletUpdate = ref(false);

‎src/components/icons/TourPreviousLeftArrowIcon.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<template>
1+
<template functional>
22
<svg width="12" height="9" fill="none" xmlns="http://www.w3.org/2000/svg">
33
<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"/>
44
</svg>

‎src/lib/tour/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { Transaction } from '@/stores/Transactions';
33
import { SetupContext } from '@vue/composition-api';
44
import { getNetworkTourSteps } from './network';
55
import { getOnboardingTourSteps } from './onboarding';
6-
import { NetworkTourStep, OnboardingTourStep, TourName, TourSteps } from './types';
6+
import { NetworkTourStep, OnboardingTourStep, TourName, ITourSteps } from './types';
77

88
export function getTour(tour: TourName | undefined, context: SetupContext)
9-
: TourSteps<OnboardingTourStep> | TourSteps<NetworkTourStep> {
9+
: ITourSteps<OnboardingTourStep> | ITourSteps<NetworkTourStep> {
1010
switch (tour) {
1111
case 'onboarding':
1212
return getOnboardingTourSteps(context);

‎src/lib/tour/network/01_YourLocationStep.ts‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
11
import { SCALING_FACTOR } from '@/lib/NetworkMap';
2-
import { NetworkGetStepFnArgs, NetworkTourStep, TourStep, WalletHTMLElements } from '..';
2+
import { INetworkGetStepFnArgs, NetworkTourStep, ITourStep, IWalletHTMLElements } from '..';
33
import { getNetworkTexts } from './NetworkTourTexts';
44

5-
export function getYourLocationStep({ nodes, scrollIntoView, sleep, selfNodeIndex }: NetworkGetStepFnArgs): TourStep {
5+
export function getYourLocationStep({ nodes, scrollIntoView, sleep, selfNodeIndex }: INetworkGetStepFnArgs): ITourStep {
66
return {
77
path: '/network',
88
tooltip: {
9-
target: `${WalletHTMLElements.NETWORK_NODES} span:nth-child(${selfNodeIndex + 1})`,
10-
content: getNetworkTexts(NetworkTourStep.YOUR_LOCATION),
9+
target: `${IWalletHTMLElements.NETWORK_NODES} span:nth-child(${selfNodeIndex + 1})`,
10+
content: getNetworkTexts(NetworkTourStep.YOUR_LOCATION).default,
1111
params: {
1212
// TODO On mobile phones if the node is in the south, the tooltip might break the web
1313
placement: 'bottom',
1414
},
1515
},
1616
ui: {
1717
fadedElements: [
18-
WalletHTMLElements.SIDEBAR_TESTNET,
19-
WalletHTMLElements.SIDEBAR_LOGO,
20-
WalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
21-
WalletHTMLElements.SIDEBAR_PRICE_CHARTS,
22-
WalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
23-
WalletHTMLElements.SIDEBAR_NETWORK,
24-
WalletHTMLElements.SIDEBAR_SETTINGS,
25-
WalletHTMLElements.NETWORK_STATS,
18+
IWalletHTMLElements.SIDEBAR_TESTNET,
19+
IWalletHTMLElements.SIDEBAR_LOGO,
20+
IWalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
21+
IWalletHTMLElements.SIDEBAR_PRICE_CHARTS,
22+
IWalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
23+
IWalletHTMLElements.SIDEBAR_NETWORK,
24+
IWalletHTMLElements.SIDEBAR_SETTINGS,
25+
IWalletHTMLElements.NETWORK_STATS,
2626
],
2727
disabledElements: [
28-
WalletHTMLElements.NETWORK_TABLET_MENU_BAR,
29-
WalletHTMLElements.NETWORK_MAP,
28+
IWalletHTMLElements.NETWORK_TABLET_MENU_BAR,
29+
IWalletHTMLElements.NETWORK_MAP,
3030
],
31-
disabledButtons: [WalletHTMLElements.BUTTON_SIDEBAR_BUY, WalletHTMLElements.BUTTON_SIDEBAR_SELL],
31+
disabledButtons: [IWalletHTMLElements.BUTTON_SIDEBAR_BUY, IWalletHTMLElements.BUTTON_SIDEBAR_SELL],
3232
},
3333
lifecycle: {
3434
created: (async ({ goingForward }) => {
@@ -38,5 +38,5 @@ export function getYourLocationStep({ nodes, scrollIntoView, sleep, selfNodeInde
3838
}
3939
}),
4040
},
41-
} as TourStep;
41+
} as ITourStep;
4242
}

‎src/lib/tour/network/02_BackboneNodeStep.ts‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,39 @@
11
import { SCALING_FACTOR } from '@/lib/NetworkMap';
22
import { ref } from '@vue/composition-api';
3-
import { NetworkGetStepFnArgs, NetworkTourStep, TourStep, WalletHTMLElements } from '..';
3+
import { INetworkGetStepFnArgs, NetworkTourStep, ITourStep, IWalletHTMLElements } from '..';
44
import { getNetworkTexts } from './NetworkTourTexts';
55

66
export function getBackboneNodeStep(
7-
{ nodes, selfNodeIndex, isLargeScreen, scrollIntoView, sleep }: NetworkGetStepFnArgs): TourStep {
7+
{ nodes, selfNodeIndex, isLargeScreen, scrollIntoView, sleep }: INetworkGetStepFnArgs): ITourStep {
88
const selectedNode = ref(-1);
99
return {
1010
path: '/network',
1111
tooltip: {
1212
get target() {
13-
return `${WalletHTMLElements.NETWORK_NODES} span:nth-child(${selectedNode.value + 1})`;
13+
return `${IWalletHTMLElements.NETWORK_NODES} span:nth-child(${selectedNode.value + 1})`;
1414
},
15-
content: getNetworkTexts(NetworkTourStep.BACKBONE_NODE),
15+
content: getNetworkTexts(NetworkTourStep.BACKBONE_NODE).default,
1616
params: {
1717
// TODO On mobile phones if the node is in the south, the tooltip might break the web
1818
placement: isLargeScreen.value ? 'right' : 'bottom',
1919
},
2020
},
2121
ui: {
2222
fadedElements: [
23-
WalletHTMLElements.SIDEBAR_TESTNET,
24-
WalletHTMLElements.SIDEBAR_LOGO,
25-
WalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
26-
WalletHTMLElements.SIDEBAR_PRICE_CHARTS,
27-
WalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
28-
WalletHTMLElements.SIDEBAR_NETWORK,
29-
WalletHTMLElements.SIDEBAR_SETTINGS,
30-
WalletHTMLElements.NETWORK_STATS,
23+
IWalletHTMLElements.SIDEBAR_TESTNET,
24+
IWalletHTMLElements.SIDEBAR_LOGO,
25+
IWalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
26+
IWalletHTMLElements.SIDEBAR_PRICE_CHARTS,
27+
IWalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
28+
IWalletHTMLElements.SIDEBAR_NETWORK,
29+
IWalletHTMLElements.SIDEBAR_SETTINGS,
30+
IWalletHTMLElements.NETWORK_STATS,
3131
],
3232
disabledElements: [
33-
WalletHTMLElements.NETWORK_TABLET_MENU_BAR,
34-
WalletHTMLElements.NETWORK_MAP,
33+
IWalletHTMLElements.NETWORK_TABLET_MENU_BAR,
34+
IWalletHTMLElements.NETWORK_MAP,
3535
],
36-
disabledButtons: [WalletHTMLElements.BUTTON_SIDEBAR_BUY, WalletHTMLElements.BUTTON_SIDEBAR_SELL],
36+
disabledButtons: [IWalletHTMLElements.BUTTON_SIDEBAR_BUY, IWalletHTMLElements.BUTTON_SIDEBAR_SELL],
3737
},
3838
lifecycle: {
3939
created: (async () => {
@@ -53,5 +53,5 @@ export function getBackboneNodeStep(
5353
await sleep(500);
5454
}),
5555
},
56-
} as TourStep;
56+
} as ITourStep;
5757
}

‎src/lib/tour/network/03_NetworkMetricsStep.ts‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
import { NetworkTourStep, TourStep, WalletHTMLElements } from '..';
1+
import { NetworkTourStep, ITourStep, IWalletHTMLElements } from '..';
22
import { getNetworkTexts } from './NetworkTourTexts';
33

4-
export function getNetworkMetricsStep(): TourStep {
4+
export function getNetworkMetricsStep(): ITourStep {
55
return {
66
path: '/network',
77
tooltip: {
8-
target: WalletHTMLElements.NETWORK_STATS,
9-
content: getNetworkTexts(NetworkTourStep.METRICS),
8+
target: IWalletHTMLElements.NETWORK_STATS,
9+
content: getNetworkTexts(NetworkTourStep.METRICS).default,
1010
params: {
1111
placement: 'top',
1212
},
1313
},
1414
ui: {
1515
fadedElements: [
16-
WalletHTMLElements.SIDEBAR_TESTNET,
17-
WalletHTMLElements.SIDEBAR_LOGO,
18-
WalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
19-
WalletHTMLElements.SIDEBAR_PRICE_CHARTS,
20-
WalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
21-
WalletHTMLElements.SIDEBAR_NETWORK,
22-
WalletHTMLElements.SIDEBAR_SETTINGS,
16+
IWalletHTMLElements.SIDEBAR_TESTNET,
17+
IWalletHTMLElements.SIDEBAR_LOGO,
18+
IWalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
19+
IWalletHTMLElements.SIDEBAR_PRICE_CHARTS,
20+
IWalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
21+
IWalletHTMLElements.SIDEBAR_NETWORK,
22+
IWalletHTMLElements.SIDEBAR_SETTINGS,
2323
],
2424
disabledElements: [
25-
WalletHTMLElements.NETWORK_TABLET_MENU_BAR,
26-
WalletHTMLElements.NETWORK_MAP,
27-
WalletHTMLElements.NETWORK_STATS,
25+
IWalletHTMLElements.NETWORK_TABLET_MENU_BAR,
26+
IWalletHTMLElements.NETWORK_MAP,
27+
IWalletHTMLElements.NETWORK_STATS,
2828
],
29-
disabledButtons: [WalletHTMLElements.BUTTON_SIDEBAR_BUY, WalletHTMLElements.BUTTON_SIDEBAR_SELL],
29+
disabledButtons: [IWalletHTMLElements.BUTTON_SIDEBAR_BUY, IWalletHTMLElements.BUTTON_SIDEBAR_SELL],
3030
},
31-
} as TourStep;
31+
} as ITourStep;
3232
}

‎src/lib/tour/network/04_NetworkCompletedStep.ts‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1-
import { NetworkGetStepFnArgs, NetworkTourStep, TourStep, WalletHTMLElements } from '..';
1+
import { INetworkGetStepFnArgs, NetworkTourStep, ITourStep, IWalletHTMLElements } from '..';
22
import { getNetworkTexts } from './NetworkTourTexts';
33

4-
export function getNetworkCompletedStep({ isLargeScreen }: NetworkGetStepFnArgs): TourStep {
4+
export function getNetworkCompletedStep({ isLargeScreen }: INetworkGetStepFnArgs): ITourStep {
55
return {
66
path: '/network',
77
tooltip: {
88
get target() {
99
return isLargeScreen.value
10-
? WalletHTMLElements.SIDEBAR_ACCOUNT_MENU
11-
: `${WalletHTMLElements.NETWORK_TABLET_MENU_BAR} .account-button`;
10+
? IWalletHTMLElements.SIDEBAR_ACCOUNT_MENU
11+
: `${IWalletHTMLElements.NETWORK_TABLET_MENU_BAR} .account-button`;
1212
},
13-
content: getNetworkTexts(NetworkTourStep.NETWORK_COMPLETED, isLargeScreen.value),
13+
content: getNetworkTexts(NetworkTourStep.NETWORK_COMPLETED)[
14+
isLargeScreen.value ? 'alternative' : 'default'],
1415
params: {
1516
get placement() {
1617
return isLargeScreen.value ? 'right' : 'top';
@@ -27,20 +28,20 @@ export function getNetworkCompletedStep({ isLargeScreen }: NetworkGetStepFnArgs)
2728
},
2829
ui: {
2930
fadedElements: [
30-
WalletHTMLElements.SIDEBAR_TESTNET,
31-
WalletHTMLElements.SIDEBAR_LOGO,
32-
WalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
33-
WalletHTMLElements.SIDEBAR_PRICE_CHARTS,
34-
WalletHTMLElements.SIDEBAR_NETWORK,
35-
WalletHTMLElements.SIDEBAR_SETTINGS,
31+
IWalletHTMLElements.SIDEBAR_TESTNET,
32+
IWalletHTMLElements.SIDEBAR_LOGO,
33+
IWalletHTMLElements.SIDEBAR_ANNOUNCMENT_BOX,
34+
IWalletHTMLElements.SIDEBAR_PRICE_CHARTS,
35+
IWalletHTMLElements.SIDEBAR_NETWORK,
36+
IWalletHTMLElements.SIDEBAR_SETTINGS,
3637
],
3738
disabledElements: [
38-
WalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
39-
WalletHTMLElements.NETWORK_TABLET_MENU_BAR,
40-
WalletHTMLElements.NETWORK_MAP,
41-
WalletHTMLElements.NETWORK_STATS,
39+
IWalletHTMLElements.SIDEBAR_ACCOUNT_MENU,
40+
IWalletHTMLElements.NETWORK_TABLET_MENU_BAR,
41+
IWalletHTMLElements.NETWORK_MAP,
42+
IWalletHTMLElements.NETWORK_STATS,
4243
],
43-
disabledButtons: [WalletHTMLElements.BUTTON_SIDEBAR_BUY, WalletHTMLElements.BUTTON_SIDEBAR_SELL],
44+
disabledButtons: [IWalletHTMLElements.BUTTON_SIDEBAR_BUY, IWalletHTMLElements.BUTTON_SIDEBAR_SELL],
4445
},
45-
} as TourStep;
46+
} as ITourStep;
4647
}

0 commit comments

Comments
 (0)