Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Onboarding & Network Tour #76

Open
wants to merge 44 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
195525b
Onboarding tour first iteraction
onmax Jan 17, 2022
ebde766
Removed useless async/await function
onmax Jan 19, 2022
de3dfb1
removed onBeforeMountedToFutureStep phase and adjusted timings
onmax Jan 20, 2022
60b70fd
renamed classes to attributes in functions names
onmax Jan 20, 2022
b62b795
added button to start onboarding tour from settings
onmax Jan 20, 2022
dea06d2
added store state for tour
onmax Jan 20, 2022
c41959a
suggestions by @sisou
onmax Jan 21, 2022
f4b777e
Refactoring of types, variable names
sisou Jan 24, 2022
17d7dd9
moved tour logic to /lib/tour
onmax Jan 24, 2022
4fb289f
reestructure steps and added tour in bigger screens
onmax Jan 26, 2022
3c40a1e
onboarding tour draft finished
onmax Jan 27, 2022
3f3b4a1
improved data communication between tour and manager
onmax Jan 27, 2022
9f7e47f
added all cases for the tour
onmax Jan 28, 2022
88a2f3d
removed old welcome modal and finished new one
onmax Jan 28, 2022
ca41a3a
add flash animation if user clicks outside tour
onmax Jan 28, 2022
04cd662
finished network tour
onmax Jan 31, 2022
2113ebf
steps are reactive
onmax Jan 31, 2022
8a8fd08
small tweaks and ui improvments
onmax Feb 2, 2022
4b875cb
lint errors fixed
onmax Feb 3, 2022
369584c
renamed tour interfaces and added icons in context
onmax Feb 3, 2022
c43a266
updated layout balance distribution
onmax Feb 4, 2022
f6f76b8
removed language flags
onmax Feb 4, 2022
2f9415c
added small fixes and improvments to the tour
onmax Feb 5, 2022
31b22ea
Fix Tour translations
mraveux Feb 4, 2022
af5ac54
Workaround for Tour translations
mraveux Feb 7, 2022
bfe20ec
added translations workaround to every tour text
onmax Feb 8, 2022
4cb04e7
improvments and ui fixes:
onmax Feb 8, 2022
eed2a01
updated composables:
onmax Feb 8, 2022
431ea7e
added in tour onResize event
onmax Feb 9, 2022
5e46bb5
small ui and ux fixes
onmax Feb 9, 2022
b9a3da5
changed tooltip arrow in tour
onmax Feb 9, 2022
51e432b
changed transition function to nimiq-ease
onmax Feb 9, 2022
d1a8761
small fixes for the tour:
onmax Feb 9, 2022
bac6717
documented tour logic
onmax Feb 10, 2022
e777de7
fixed bug for receive free nim in tour
onmax Feb 10, 2022
7d2bc2b
render arrow in slow devices
onmax Feb 11, 2022
37e26c0
allow user to save back up words from tour
onmax Feb 11, 2022
7576332
hamburguer icon highlights in onboarding tour
onmax Feb 12, 2022
ef86512
Updated tour with overnice feedback
onmax Feb 23, 2022
a072adc
updated text in step 2
onmax Mar 3, 2022
35e8301
improved some edge cases with overnice feedback
onmax Mar 4, 2022
287b2e7
added nimiqSelector and updated welcome modal
onmax Mar 5, 2022
f041efe
updated tour texts
onmax Mar 5, 2022
6131568
simplified duplication in tour manager when modal is open
onmax Mar 5, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .tx/config
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,3 @@ minimum_perc = 0
source_file = src/i18n/en.po
source_lang = en
type = PO

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
"vue-responsive-components": "^0.2.3",
"vue-router": "^3.1.6",
"vue-simple-markdown": "^1.1.4",
"vue-tour": "^2.0.0",
"vue-virtual-scroller": "https://github.com/sisou/vue-virtual-scroller#nimiq/build",
"webpack-i18n-tools": "https://github.com/nimiq/webpack-i18n-tools#master"
},
Expand Down
33 changes: 27 additions & 6 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<template>
<div id="app" :class="{'value-masked': amountsHidden}">
<transition v-if="showTour" name="delay">
<Tour/>
</transition>

<main :class="activeMobileColumn" ref="$main">
<Sidebar/>

Expand Down Expand Up @@ -44,7 +48,19 @@ export default defineComponent({

const { activeMobileColumn } = useActiveMobileColumn();

const { accountInfos } = useAccountStore();
const { accountInfos, state: accountState, setTour } = useAccountStore();
const path = context.root.$route.path as string || '';
const tourName = accountState.tour?.name || '';
if (
// if we are in onboarding tour and the path is NOT one of the path in the onboarding tour
// or if we are in network tour and the path is NOT one of the path in the network tour
// then remove tour state
(!['/', '/transactions', '/accounts'].includes(path) && tourName === 'onboarding')
|| (!['/network'].includes(path) && tourName === 'network')) {
setTour(null);
}
const showTour = computed(() => !!accountState.tour);

// Convert result of computation to boolean, to not trigger rerender when number of accounts changes above 0.
const hasAccounts = computed(() => Boolean(Object.keys(accountInfos.value).length));

Expand All @@ -53,7 +69,7 @@ export default defineComponent({
// Swiping
const $main = ref<HTMLDivElement>(null);
let $mobileTapArea: HTMLDivElement | null = null;
const { width, isMobile } = useWindowSize();
const { width, isSmallScreen } = useWindowSize();

async function updateSwipeRestPosition(
velocityDistance: number,
Expand Down Expand Up @@ -122,21 +138,22 @@ export default defineComponent({
excludeSelector: '.scroller, .scroller *',
});

watch([isMobile, swipingEnabled], ([isMobileNow, newSwiping], [wasMobile, oldSwiping]) => {
watch([isSmallScreen, swipingEnabled], ([isSmallScreenNow, newSwiping], [wasSmallScreen, oldSwiping]) => {
if (!$main.value) return;

if ((isMobileNow && !wasMobile) || (newSwiping === 1 && oldSwiping !== 1)) {
if ((isSmallScreenNow && !wasSmallScreen) || (newSwiping === 1 && oldSwiping !== 1)) {
attachSwipe();
} else if (!isMobileNow || newSwiping !== 1) {
} else if (!isSmallScreenNow || newSwiping !== 1) {
detachSwipe();
}
}, { lazy: true });

onMounted(() => {
if (isMobile.value && swipingEnabled.value === 1) attachSwipe();
if (isSmallScreen.value && swipingEnabled.value === 1) attachSwipe();
});

return {
showTour,
activeMobileColumn,
hasAccounts,
amountsHidden,
Expand All @@ -148,6 +165,9 @@ export default defineComponent({
SwapNotification,
UpdateNotification,
LoadingSpinner,

// lazy loading
Tour: () => import(/* webpackChunkName: "tour" */ './components/Tour.vue'),
},
});
</script>
Expand All @@ -157,6 +177,7 @@ export default defineComponent({
#app {
@include flex-full-height;
@include ios-flex;

overflow: hidden; // To prevent horizontal scrollbars during panel sliding
touch-action: pan-y;

Expand Down
1 change: 0 additions & 1 deletion src/assets/languages/de.svg

This file was deleted.

1 change: 0 additions & 1 deletion src/assets/languages/en.svg

This file was deleted.

1 change: 0 additions & 1 deletion src/assets/languages/es.svg

This file was deleted.

1 change: 0 additions & 1 deletion src/assets/languages/fr.svg

This file was deleted.

5 changes: 0 additions & 5 deletions src/assets/languages/nl.svg

This file was deleted.

1 change: 0 additions & 1 deletion src/assets/languages/ru.svg

This file was deleted.

4 changes: 0 additions & 4 deletions src/assets/languages/uk.svg

This file was deleted.

1 change: 0 additions & 1 deletion src/assets/languages/zh.svg

This file was deleted.

Binary file removed src/assets/slides/browser-network-half.png
Binary file not shown.
4 changes: 2 additions & 2 deletions src/components/AccountBalance.vue
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ export default defineComponent({
const $fiatAmountContainer = ref<HTMLDivElement>(null);
const $fiatAmount = ref<Vue>(null);

const { isFullDesktop } = useWindowSize();
const fiatAmountMaxSize = computed(() => isFullDesktop.value ? 7 : 5.5); // rem
const { isLargeScreen } = useWindowSize();
const fiatAmountMaxSize = computed(() => isLargeScreen.value ? 7 : 5.5); // rem
const fiatAmountFontSize = ref(fiatAmountMaxSize.value);

async function updateFontSize() {
Expand Down
1 change: 1 addition & 0 deletions src/components/AccountMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import { useAccountStore, AccountType } from '../stores/Account';
import { useAddressStore } from '../stores/Address';

export default defineComponent({
name: 'account-menu',
setup(props, context) {
const { activeAccountInfo } = useAccountStore();
const { state: addressState } = useAddressStore();
Expand Down
4 changes: 1 addition & 3 deletions src/components/BalanceDistribution.vue
Original file line number Diff line number Diff line change
Expand Up @@ -362,11 +362,9 @@ export default defineComponent({
margin-left: -0.375rem;
margin-right: -0.375rem;
line-height: 1;
width: min-content;

position: absolute;
z-index: 3;
top: 3rem;

transition: all 200ms var(--nimiq-ease);

&.exchange-is-close {
Expand Down
4 changes: 2 additions & 2 deletions src/components/BtcTransactionList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -150,8 +150,8 @@ export default defineComponent({
const scrollerBuffer = 300;

// Height of items in pixel
const { isMobile } = useWindowSize();
const itemSize = computed(() => isMobile.value ? 68 : 72); // mobile: 64px + 4px margin between items
const { isSmallScreen } = useWindowSize();
const itemSize = computed(() => isSmallScreen.value ? 68 : 72); // mobile: 64px + 4px margin between items

// Get all transactions for the active addresses
const txsForActiveAddress = computed(() => Object.values(btcTransactions$.transactions)
Expand Down
2 changes: 1 addition & 1 deletion src/components/CountrySelector.vue
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
<script lang="ts">
import { computed, defineComponent, ref, watch } from '@vue/composition-api';
// @ts-expect-error Could not find a declaration file for module 'v-click-outside'.
import vClickOutside from 'v-click-outside';
import vClickOutside from 'v-click-outside'; // This is useless, this could be removed and use useOutsideClick instead
import I18nDisplayNames from '../lib/I18nDisplayNames';
import CountryFlag from './CountryFlag.vue';
import { ALL_COUNTRY_CODES } from '../lib/Countries';
Expand Down
6 changes: 3 additions & 3 deletions src/components/MobileActionBar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default defineComponent({
const { activeAddressInfo, addressInfos } = useAddressStore();
const { activeCurrency, activeAccountInfo, hasBitcoinAddresses } = useAccountStore();
const { accountBalance } = useBtcAddressStore();
const { isMobile } = useWindowSize();
const { isSmallScreen } = useWindowSize();
const { activeMobileColumn } = useActiveMobileColumn();

function nimOrBtc<T>(nim: T, btc: T): T {
Expand All @@ -45,7 +45,7 @@ export default defineComponent({
addressInfos.value.filter(({ type }) => type === AddressType.BASIC).length > 1));

function receive() {
if (isMobile.value
if (isSmallScreen.value
&& activeMobileColumn.value !== ColumnType.ADDRESS
&& (hasMultipleReceivableAddresses.value || hasBitcoinAddresses.value)
) {
Expand All @@ -60,7 +60,7 @@ export default defineComponent({
activeAccountInfo.value && activeAccountInfo.value.addresses.length > 1);

function send() {
if (isMobile.value
if (isSmallScreen.value
&& activeMobileColumn.value !== ColumnType.ADDRESS
&& (hasMultipleSendableAddresses.value || hasBitcoinAddresses.value)
) {
Expand Down
1 change: 1 addition & 0 deletions src/components/NetworkMap.vue
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ import NetworkMap, {
} from '../lib/NetworkMap';

export default defineComponent({
name: 'network-map',
setup(props, context) {
const $container = ref<HTMLDivElement|null>(null);
const $network = ref<HTMLCanvasElement|null>(null);
Expand Down
Loading