Initial commit
This commit is contained in:
zhongjin
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<button
|
||||
class="button"
|
||||
:class="[{'not-visited': !(hasVisitedOnboarding || isFirstTimeViewingDashboard)}, isFirstTimeViewingDashboard ? 'button--cta' : 'button--ghost']"
|
||||
@click="openOnboarding()">
|
||||
{{ $t('Wizards.Distributor.cta') }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'OnboardingButton',
|
||||
props: {
|
||||
isFirstTimeViewingDashboard: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
hasVisitedOnboarding: false
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.hasVisitedOnboarding = this.setHasVisitedOnboarding();
|
||||
},
|
||||
methods: {
|
||||
openOnboarding () {
|
||||
this.updateHasVisitedOnboarding(true);
|
||||
this.$router.push({ name: 'onboarding' });
|
||||
},
|
||||
setHasVisitedOnboarding () {
|
||||
if (localStorage.hasOwnProperty('hasVisitedOnboarding')) {
|
||||
return JSON.parse(window.localStorage.getItem('hasVisitedOnboarding'));
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
updateHasVisitedOnboarding (visited) {
|
||||
this.hasVisitedOnboarding = visited;
|
||||
localStorage.hasVisitedOnboarding = JSON.stringify(visited);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
button.button--ghost {
|
||||
position: relative;
|
||||
|
||||
&.not-visited::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -12px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: $onboarding-notification;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<canvas id="congrats-confetti"></canvas>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'confetti-js';
|
||||
|
||||
export default {
|
||||
name: 'Confetti',
|
||||
mounted () {
|
||||
const canvasBoundingRect = this.$el.getBoundingClientRect();
|
||||
|
||||
const confettiSettings = {
|
||||
target: 'congrats-confetti',
|
||||
max: 250,
|
||||
size: 0.5,
|
||||
animate: true,
|
||||
props: ['square'],
|
||||
colors: [
|
||||
[41, 106, 166],
|
||||
[140, 193, 64],
|
||||
[219, 44, 111],
|
||||
[88, 178, 85],
|
||||
[56, 78, 144],
|
||||
[84, 189, 199],
|
||||
[59, 82, 147],
|
||||
[134, 191, 65],
|
||||
[89, 177, 70],
|
||||
[127, 72, 139],
|
||||
[241, 170, 73],
|
||||
[142, 194, 64],
|
||||
[63, 92, 154],
|
||||
[241, 170, 73],
|
||||
[90, 72, 139],
|
||||
[210, 34, 126],
|
||||
[209, 36, 42],
|
||||
[66, 187, 206],
|
||||
[211, 32, 122],
|
||||
[201, 215, 56],
|
||||
[212, 22, 124],
|
||||
[125, 42, 121],
|
||||
[252, 236, 38],
|
||||
[152, 122, 169]
|
||||
],
|
||||
clock: 35,
|
||||
rotate: true,
|
||||
width: canvasBoundingRect.width,
|
||||
height: canvasBoundingRect.height
|
||||
};
|
||||
|
||||
// confetti-js exports function to global scope 🤦♂️
|
||||
this.confetti = new window.ConfettiGenerator(confettiSettings);
|
||||
this.confetti.render();
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.confetti.clear();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
#congrats-confetti {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: $onboarding-congrats__height;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="footer">
|
||||
<div class="container u-flex u-flex__justify--end">
|
||||
<button class="button button--ghost js-prev" v-if="showPrevButton" @click="prev">
|
||||
{{ $t('Wizards.footer.back') }}
|
||||
</button>
|
||||
<button class="button is-primary js-next" v-if="showNextButton" @click="next">
|
||||
{{ $t('Wizards.footer.next', { nextStep: this.stepNames[this.currentStep] }) }}
|
||||
</button>
|
||||
<button class="button is-primary js-goToDashboard" v-if="!showNextButton" @click="goToDashboard">
|
||||
{{ $t('Wizards.footer.goToDashboard') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Footer',
|
||||
props: {
|
||||
stepNames: Array,
|
||||
currentStep: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
maxSteps () {
|
||||
return this.stepNames.length;
|
||||
},
|
||||
showNextButton () {
|
||||
return this.currentStep < this.maxSteps;
|
||||
},
|
||||
showPrevButton () {
|
||||
return this.currentStep > 1;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
prev () {
|
||||
this.$emit('goToStep', this.currentStep - 1);
|
||||
},
|
||||
next () {
|
||||
this.$emit('goToStep', this.currentStep + 1);
|
||||
},
|
||||
goToDashboard () {
|
||||
this.$router.push({ name: 'home' });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.footer {
|
||||
padding: 2em;
|
||||
background: $white;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<div class="container">
|
||||
<ul class="breadcrumbs" :class="[stepNames.length > 1 ? 'u-flex__justify--between' : 'u-flex__justify--center']">
|
||||
<li class="breadcrumbs__item"
|
||||
:class="{ 'current' : isCurrentStep(index) }"
|
||||
v-for="(stepName, index) in stepNames" :key="stepName">
|
||||
<a :class="stepClass(index)" href="javascript:void 0" @click="goToStep(index)">
|
||||
<span class="breadcrumbs__checkpoint" :class="{ 'current' : isCurrentStep(index) }">
|
||||
<span class="breadcrumbs__text u-hideMobile">{{ stepName }}</span>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Header',
|
||||
props: {
|
||||
stepNames: Array,
|
||||
currentStep: Number
|
||||
},
|
||||
methods: {
|
||||
isCurrentStep (index) {
|
||||
return index + 1 === this.currentStep;
|
||||
},
|
||||
goToStep (stepNumber) {
|
||||
this.$emit('goToStep', stepNumber + 1);
|
||||
},
|
||||
stepClass (stepNumber) {
|
||||
return `step-${stepNumber + 1}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
$timeline__border-width: 1px;
|
||||
$timeline__border-color: #DDD;
|
||||
$timeline__border-transition: 0.25s;
|
||||
$bullet__transition: 0.12s;
|
||||
$bullet__border-color: #D3E6FA;
|
||||
$transition__timing-function: cubic-bezier(0.4, 0.01, 0.165, 0.99);
|
||||
|
||||
.header {
|
||||
display: block;
|
||||
padding-top: 2.375em;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
max-width: 90%;
|
||||
margin: 0 auto 1.5em;
|
||||
|
||||
&__item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-top: $timeline__border-width solid $primary-color;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
width: 0;
|
||||
border-top: $timeline__border-width solid transparent;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -$timeline__border-width;
|
||||
right: 0;
|
||||
width: 0%;
|
||||
transition: width $timeline__border-transition $transition__timing-function;
|
||||
border-top: $timeline__border-width solid $timeline__border-color;
|
||||
}
|
||||
|
||||
&.current {
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -$timeline__border-width;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
transition: width $timeline__border-transition $transition__timing-function;
|
||||
border-top: $timeline__border-width solid $timeline__border-color;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
& ~ .breadcrumbs__item {
|
||||
border-color: $timeline__border-color;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -$timeline__border-width;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
transition: none;
|
||||
border-top: $timeline__border-width solid $timeline__border-color;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& ~ .breadcrumbs__item .breadcrumbs__checkpoint {
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: $timeline__border-color;
|
||||
}
|
||||
|
||||
& ~ .breadcrumbs__item .breadcrumbs__text {
|
||||
color: $text__color--secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: $text__color;
|
||||
font-size: 0.75em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__checkpoint {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
transition: all $bullet__transition $transition__timing-function;
|
||||
border-radius: 50%;
|
||||
background: $primary-color;
|
||||
|
||||
&.current {
|
||||
transition: all $bullet__transition $transition__timing-function;
|
||||
transition-delay: $timeline__border-transition;
|
||||
box-shadow: 0 0 0 6px $bullet__border-color;
|
||||
|
||||
.breadcrumbs__text {
|
||||
transition: all $bullet__transition $transition__timing-function;
|
||||
color: $text__color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div :class="{'container u-width--100 u-mt--64 u-mb--80': !fullWidth}" class="u-flex__grow--1">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'WizardStep',
|
||||
props: {
|
||||
fullWidth: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<h2 class="title is-body u-mb--24 u-flex u-flex__align--center">
|
||||
<span class="icon icon--large">
|
||||
<slot name="icon"></slot>
|
||||
</span>
|
||||
|
||||
{{title}}
|
||||
</h2>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'StepTitle',
|
||||
props: {
|
||||
title: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 16px;
|
||||
margin-left: -40px;
|
||||
}
|
||||
|
||||
.icon--large {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
</style>
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="u-flex card-container">
|
||||
<slot></slot>
|
||||
|
||||
<div class="u-flex u-ml--24 u-flex__direction--column u-flex__justify--between u-flex__grow--1">
|
||||
<div class="u-flex u-flex__direction--column">
|
||||
<h3 class="title is-caption u-mb--8">{{content.title}}</h3>
|
||||
<p class="text is-caption u-mb--8">{{content.subtitle}}</p>
|
||||
</div>
|
||||
|
||||
<div v-if="content.link && content.button" class="u-flex u-flex__justify--end">
|
||||
<a :href="content.link" target="_blank" class="button button--ghost button--outline">
|
||||
{{content.button}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TutorialCard',
|
||||
props: {
|
||||
content: Object
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.card-container {
|
||||
height: 180px;
|
||||
padding: 24px;
|
||||
border: 1px solid #DDD;
|
||||
}
|
||||
</style>
|
||||
+115
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<section class="onboarding-welcome">
|
||||
<Modal name="onboarding-welcome" :isOpen="true" @closeModal="closeModal">
|
||||
<div class="distributor gtm-onboarding">
|
||||
<div class="header">
|
||||
<div class="container">
|
||||
{{ $t('Wizards.Distributor.headerTitle') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container u-pt--36">
|
||||
<h1 class="u-pr--10 u-pl--10 u-mb--40 title is-body is-semibold">
|
||||
{{ $t('Wizards.Distributor.title') }}
|
||||
</h1>
|
||||
|
||||
<div class="grid u-flex__justify--between">
|
||||
<div class="grid-cell grid-cell--col4 grid-cell--col6--tablet grid-cell--col12--mobile">
|
||||
<Selector
|
||||
:title="$t('Wizards.cartovl.title')"
|
||||
:text="$t('Wizards.cartovl.subtitle')"
|
||||
:tags="$t('Wizards.cartovl.tags')"
|
||||
@click.native="openOnboarding('carto-vl')"
|
||||
iconModifier="map"></Selector>
|
||||
<Warning v-if="!hasEngine"></Warning>
|
||||
</div>
|
||||
|
||||
<div class="grid-cell grid-cell--col4 grid-cell--col6--tablet grid-cell--col12--mobile">
|
||||
<Selector
|
||||
:title="$t('Wizards.cartoframes.title')"
|
||||
:text="$t('Wizards.cartoframes.subtitle')"
|
||||
:tags="$t('Wizards.cartoframes.tags')"
|
||||
@click.native="openOnboarding('cartoframes')"
|
||||
iconModifier="notebook"></Selector>
|
||||
<Warning v-if="!hasEngine"></Warning>
|
||||
</div>
|
||||
|
||||
<div class="grid-cell grid-cell--col4 grid-cell--col6--tablet grid-cell--col12--mobile">
|
||||
<Selector
|
||||
:title="$t('Wizards.builder.title')"
|
||||
:text="$t('Wizards.builder.subtitle')"
|
||||
:tags="$t('Wizards.builder.tags')"
|
||||
@click.native="openOnboarding('builder')"
|
||||
iconModifier="window"></Selector>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<p class="grid-cell u-mt--48 is-small">{{ $t('Wizards.Distributor.feedback.text') }}
|
||||
<a href="https://docs.google.com/forms/d/e/1FAIpQLScBQUWd-TP3Qy514DOCNg-KoLrViHijUR5giLAMS-3jmDnrPg/viewform" target="_blank">
|
||||
{{ $t('Wizards.Distributor.feedback.link') }}</a>
|
||||
</p>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<router-view name="onboarding" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Selector from 'new-dashboard/components/Onboarding/distributor/Selector';
|
||||
import Warning from 'new-dashboard/components/Onboarding/distributor/Warning';
|
||||
import Modal from 'new-dashboard/components/Modal.vue';
|
||||
|
||||
export default {
|
||||
name: 'OnboardingWelcome',
|
||||
components: {
|
||||
Selector,
|
||||
Warning,
|
||||
Modal
|
||||
},
|
||||
computed: {
|
||||
hasEngine () {
|
||||
return this.$store.getters['user/hasEngine'];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openOnboarding (onboardingId) {
|
||||
this.$router.push({
|
||||
name: 'onboarding-open',
|
||||
params: { onboardingId },
|
||||
hash: '#step-1'
|
||||
});
|
||||
},
|
||||
closeModal () {
|
||||
this.$router.push({ name: 'home' });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.distributor {
|
||||
height: 100%;
|
||||
background-color: $onboarding__bg-color;
|
||||
color: $text__color;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 98px;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.button {
|
||||
&.button--ghost {
|
||||
margin-right: 36px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="selector" tabindex="0">
|
||||
<div>
|
||||
<h3 class="selector__title title is-body is-medium u-mb--8" :class="iconClass">
|
||||
{{ this.title }}
|
||||
</h3>
|
||||
|
||||
<p class="text is-caption">{{ this.text }}</p>
|
||||
</div>
|
||||
|
||||
<ul class="selector__tags">
|
||||
<li class="selector__tags-item title" v-for="tag in tags" :key="tag">{{ tag }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Selector',
|
||||
props: {
|
||||
title: String,
|
||||
text: String,
|
||||
tags: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
iconModifier: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconClass () {
|
||||
return (this.iconModifier ? `selector__title-icon selector__title-icon--${this.iconModifier}` : '');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.selector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
max-width: 460px;
|
||||
height: 340px;
|
||||
padding: 1.5em;
|
||||
border: 1px solid $border-color--dark;
|
||||
border-radius: 2px;
|
||||
background-color: $white;
|
||||
cursor: pointer;
|
||||
|
||||
&__title-icon {
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: relative;
|
||||
top: -16px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-top: 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&--map {
|
||||
&::before {
|
||||
content: '';
|
||||
height: 50px;
|
||||
background-image: url('../../../assets/icons/onboarding/locationmap.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&--notebook {
|
||||
&::before {
|
||||
content: '';
|
||||
background-image: url('../../../assets/icons/onboarding/notebook.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&--window {
|
||||
&::before {
|
||||
content: '';
|
||||
background-image: url('../../../assets/icons/onboarding/window.svg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__tags {
|
||||
&-item {
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
margin-right: 8px;
|
||||
padding: 6px 16px;
|
||||
border: 1px solid $onboarding-tags__border-color;
|
||||
border-radius: 18px;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: $card__shadow;
|
||||
|
||||
.selector__title {
|
||||
color: $primary-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="warning">
|
||||
<span class="text is-small">
|
||||
{{$t(`Wizards.Distributor.engineWarning.text`)}} <a target="_blank" class="warning__link" :href="$t(`Wizards.Distributor.engineWarning.link`)">{{$t(`Wizards.Distributor.engineWarning.linkText`)}}</a>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Warning'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.warning {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 460px;
|
||||
height: 34px;
|
||||
padding: 1.3em;
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
background-color: $primary-color;
|
||||
color: $white;
|
||||
|
||||
&__link {
|
||||
color: $white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+48
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="datasetcard u-width--100">
|
||||
<div class="u-flex u-flex__align--center">
|
||||
<div class="datasetcard-icon"></div>
|
||||
<div class="title-container">
|
||||
<h3 class="text is-caption is-txtGrey u-ellipsis" title="Populated places simple">{{content.title}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="u-flex u-flex__align--center">
|
||||
<span class="text is-small is-txtSoftGrey u-mr--24" :title="content.rows">{{content.rows}}</span>
|
||||
<span class="text is-small is-txtSoftGrey u-mr--48">{{content.size}}</span>
|
||||
<a download :href="content.link" class="button button--ghost button--outline">{{content.button}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'DatasetCard_21',
|
||||
props: {
|
||||
content: Object
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.datasetcard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
padding: 0 16px;
|
||||
background-color: $white;
|
||||
|
||||
.datasetcard-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-right: 16px;
|
||||
border-radius: 2px;
|
||||
background-color: #F2F6F9;
|
||||
background-image: url(../../../../assets/icons/datasets/data-types/dots.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.builder.step1.title`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<img class="u-width--100" src="../../../../assets/images/onboarding/builder_step1@2x.png"/>
|
||||
<p v-html="$t(`Wizards.builder.step1.text1`)" class="text is-body u-mb--16 u-mt--24"></p>
|
||||
<p v-html="$t(`Wizards.builder.step1.text2`)" class="text is-body u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step1',
|
||||
stepName: 'Intro',
|
||||
components: {
|
||||
StepTitle
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step2.summary.text`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step2.howto.instruction1`)" class="text is-caption u-mb--16 u-inlineflex"></p>
|
||||
<DatasetCard :content="$t(`Wizards.builder.step2.cards.dataset1`)"></DatasetCard>
|
||||
</li>
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step2.howto.instruction2`)" class="text is-caption u-mt--24 u-mb--24 u-inlineflex"></p>
|
||||
</li>
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step2.howto.instruction3`)" class="text is-caption u-mb--16 u-inlineflex"></p>
|
||||
<img class="u-width--100" src="../../../../assets/images/onboarding/builder_step2@2x.png" alt="Screenshot connect dataset modal in builder">
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step2.extras.resource1`)" class="text is-caption u-mb--16 u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
import DatasetCard from './DatasetCard_21.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step2',
|
||||
stepName: 'Import your data',
|
||||
components: {
|
||||
StepTitle,
|
||||
DatasetCard
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step3.summary.text`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step3.howto.instruction1`)" class="text is-caption u-mt--24 u-inline"></p>
|
||||
<img class="u-width--100 u-mt--16" src="../../../../assets/images/onboarding/builder_step3@2x.png" alt="Screenshot dataset preview in builder">
|
||||
</li>
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step3.howto.instruction2`)" class="text is-caption u-mb--24 u-mt--24 u-inlineflex"></p>
|
||||
</li>
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step3.howto.instruction3`)" class="text is-caption u-mb--24 u-inlineflex"></p>
|
||||
</li>
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.builder.step3.howto.instruction4`)" class="text is-caption u-inlineflex"></p>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="'Extras'" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step3.extras.resource1`)" class="text is-caption u-mb--16 u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step3',
|
||||
stepName: 'Explore the dataset',
|
||||
components: {
|
||||
StepTitle
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step4.summary.text`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li class="u-mt--24">
|
||||
<p v-html="$t(`Wizards.builder.step4.howto.instruction1`)" class="text is-caption u-inline"></p>
|
||||
</li>
|
||||
<li class="u-mt--24">
|
||||
<p v-html="$t(`Wizards.builder.step4.howto.instruction2`)" class="text is-caption u-inline"></p>
|
||||
<img class="u-width--100 u-mt--16" src="../../../../assets/images/onboarding/builder_step4@2x.png" alt="Screenshot map in builder">
|
||||
</li>
|
||||
<li class="u-mt--24">
|
||||
<p v-html="$t(`Wizards.builder.step4.howto.instruction3`)" class="text is-caption u-inline"></p>
|
||||
</li>
|
||||
<li class="u-mt--24">
|
||||
<p v-html="$t(`Wizards.builder.step4.howto.instruction4`)" class="text is-caption u-inline"></p>
|
||||
<img class="u-width--100 u-mt--16" src="../../../../assets/images/onboarding/builder_step4b@2x.png" alt="Screenshot styled map in builder">
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step4.extras.resource1`)" class="text is-caption"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step4',
|
||||
stepName: 'Create a map',
|
||||
components: {
|
||||
StepTitle
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step5.summary.text`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li class="u-mb--24">
|
||||
<p v-html="$t(`Wizards.builder.step5.howto.instruction1`)" class="text is-caption u-inline"></p>
|
||||
</li>
|
||||
<li class="u-mb--24">
|
||||
<p v-html="$t(`Wizards.builder.step5.howto.instruction2`)" class="text is-caption u-inline"></p>
|
||||
</li>
|
||||
<li class="u-mb--24">
|
||||
<p v-html="$t(`Wizards.builder.step5.howto.instruction3`)" class="text is-caption u-inline"></p>
|
||||
</li>
|
||||
<li class="u-mb--24">
|
||||
<p v-html="$t(`Wizards.builder.step5.howto.instruction4`)" class="text is-caption u-inline"></p>
|
||||
<img class="u-width--100 u-mt--16" src="../../../../assets/images/onboarding/builder_step5@2x.png" alt="Screenshot publish map page in builder">
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step5.extras.resource1`)" class="text is-caption"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step5',
|
||||
stepName: 'Publish your map',
|
||||
components: {
|
||||
StepTitle
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="congrats">
|
||||
<div class="congrats__hero">
|
||||
<Confetti></Confetti>
|
||||
<div class="congrats__hero-content">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/congrats.svg" alt="">
|
||||
<h2 class="title is-body u-mb--16 u-mt--24 ">{{ $t(`Wizards.builder.step6.congrats.title`) }}</h2>
|
||||
<p v-html="$t(`Wizards.builder.step6.congrats.message1`)" class="text is-caption"></p>
|
||||
<p v-html="$t(`Wizards.builder.step6.congrats.message2`, { url: downloadUrl })" class="text is-caption"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container u-mt--64 u-pb--80">
|
||||
<StepTitle :title="$t(`Wizards.builder.sections.learnmore`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/learn.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.builder.step6.extras.resource1`)" class="text is-caption u-mt--16 u-mb--24"></p>
|
||||
<TutorialCard :content="$t(`Wizards.builder.step6.cards.card1`)" class="u-mb--16">
|
||||
<img src="../../../../assets/images/onboarding/builder_card1.png" width="240" height="130" alt="Style features by category sample image"/>
|
||||
</TutorialCard>
|
||||
<TutorialCard :content="$t(`Wizards.builder.step6.cards.card2`)" class="u-mb--16">
|
||||
<img src="../../../../assets/images/onboarding/builder_card2.png" width="240" height="130" alt="Add hover popups sample image"/>
|
||||
</TutorialCard>
|
||||
<TutorialCard :content="$t(`Wizards.builder.step6.cards.card3`)">
|
||||
<img src="../../../../assets/images/onboarding/builder_card3.png" width="240" height="130" alt="Animate the features sample image"/>
|
||||
</TutorialCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
import TutorialCard from 'new-dashboard/components/Onboarding/components/TutorialCard.vue';
|
||||
import Confetti from 'new-dashboard/components/Onboarding/components/Confetti.vue';
|
||||
import { getAssetsBaseUrl } from 'new-dashboard/utils/assets-version';
|
||||
|
||||
export default {
|
||||
name: 'Step6',
|
||||
stepName: 'Download',
|
||||
components: {
|
||||
StepTitle,
|
||||
TutorialCard,
|
||||
Confetti
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
downloadUrl: getAssetsBaseUrl() + 'unversioned/onboarding/Myfirstmap.carto'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.congrats {
|
||||
background-color: $white;
|
||||
|
||||
&__hero {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $onboarding-congrats__height;
|
||||
background-color: $onboarding-congrats__bg-color;
|
||||
}
|
||||
|
||||
&__hero-content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
import { importFilesFrom } from 'new-dashboard/utils/dynamic-import';
|
||||
|
||||
const folderContext = require.context('./', true, /Step.*\.vue$/);
|
||||
|
||||
const wizardName = 'wizardBuilder';
|
||||
const steps = importFilesFrom(folderContext, /^\.\/(.*)\.vue$/);
|
||||
|
||||
export default { steps, wizardName };
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.step1.title`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
|
||||
<InjectableIframe :content="map" width="940" height="416"></InjectableIframe>
|
||||
|
||||
<p v-html="$t(`Wizards.cartovl.step1.text1`)" class="text is-body u-mb--16 u-mt--24"></p>
|
||||
<p v-html="$t(`Wizards.cartovl.step1.text2`)" class="text is-body u-mb--16 u-mt--24"></p>
|
||||
<p v-html="$t(`Wizards.cartovl.step1.text3`)" class="text is-body u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
import InjectableIframe from 'new-dashboard/components/InjectableIframe';
|
||||
import map from 'new-dashboard/assets/resources/onboarding/cartovl.html';
|
||||
|
||||
export default {
|
||||
name: 'Step1',
|
||||
stepName: 'Intro',
|
||||
components: {
|
||||
InjectableIframe,
|
||||
StepTitle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
map
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
+66
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step2.summary`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.cartovl.step2.howto.instruction1`)" class="text is-caption u-inlineflex"></p>
|
||||
<CodeBlock :code="codeBlock1" language="htmlmixed"></CodeBlock>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step2.extras.resource1`)" class="text is-caption u-mb--24"></p>
|
||||
<p v-html="$t(`Wizards.cartovl.step2.extras.resource2`)" class="text is-caption u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step2',
|
||||
stepName: 'Load CARTO VL',
|
||||
components: {
|
||||
CodeBlock,
|
||||
StepTitle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeBlock1
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const codeBlock1 =
|
||||
`<html>
|
||||
<head>
|
||||
<title>CARTO VL Example</title>
|
||||
<!-- Load CARTO VL JS -->
|
||||
<script src="https://libs.cartocdn.com/carto-vl/v1.2.4/carto-vl.min.js"><\/script>
|
||||
<!-- Load Mapbox GL -->
|
||||
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"><\/script>
|
||||
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet">
|
||||
|
||||
<!-- Your style will go here -->
|
||||
</head>
|
||||
<body>
|
||||
<!-- Your map will go here -->
|
||||
</body>
|
||||
</html>`;
|
||||
</script>
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step3.summary`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.cartovl.step3.howto.instruction1`)" class="text is-caption u-inline"></p>
|
||||
<CodeBlock :code="codeBlock1" language="htmlmixed" class="u-mt--16"></CodeBlock>
|
||||
</li>
|
||||
<li class="u-mt--36">
|
||||
<p v-html="$t(`Wizards.cartovl.step3.howto.instruction2`)" class="text is-caption u-inline"></p>
|
||||
<CodeBlock :code="codeBlock2" language="htmlmixed"></CodeBlock>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step3',
|
||||
stepName: 'Define container',
|
||||
components: {
|
||||
CodeBlock,
|
||||
StepTitle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeBlock1,
|
||||
codeBlock2
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const codeBlock1 = `<div id="map"><\/div>`;
|
||||
|
||||
const codeBlock2 =
|
||||
`<style>
|
||||
#map {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
<\/style>`;
|
||||
</script>
|
||||
+63
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step4.summary`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.cartovl.step4.howto.instruction1`)" class="text is-caption u-inline"></p>
|
||||
<CodeBlock :code="codeBlock1" language="htmlmixed"></CodeBlock>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step4.extras.resource1`)" class="text is-caption u-mb--16"></p>
|
||||
<div class="u-flex u-flex__justify--between u-mb--16 u-mb--64">
|
||||
<img src="../../../../assets/images/onboarding/voyager@2x.png" width="306" height="140" alt="Voyager basemap sample"/>
|
||||
<img src="../../../../assets/images/onboarding/positron@2x.png" width="306" height="140" alt="Positron basemap sample"/>
|
||||
<img src="../../../../assets/images/onboarding/darkmatter@2x.png" width="306" height="140" alt="Dark Matter basemap sample"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step4',
|
||||
stepName: 'Create map',
|
||||
components: {
|
||||
CodeBlock,
|
||||
StepTitle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeBlock1
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const codeBlock1 =
|
||||
`<script>
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
style: carto.basemaps.voyager,
|
||||
center: [0, 30],
|
||||
zoom: 2
|
||||
})
|
||||
<\/script>`;
|
||||
</script>
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step5.summary`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.cartovl.step5.howto.instruction1`)" class="text is-caption u-inline"></p>
|
||||
<CodeBlock :code="codeBlock1"></CodeBlock>
|
||||
</li>
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.cartovl.step5.howto.instruction2`)" class="text is-caption u-inline"></p>
|
||||
<CodeBlock :code="codeBlock2"></CodeBlock>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step5.extras.resource1`)" class="text is-caption u-mt--16 u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step5',
|
||||
stepName: 'Add data layer',
|
||||
components: {
|
||||
CodeBlock,
|
||||
StepTitle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeBlock1,
|
||||
codeBlock2
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// Code Blocks to be rendered in steps
|
||||
const codeBlock1 =
|
||||
`carto.setDefaultAuth({
|
||||
username: 'public',
|
||||
apiKey: 'default_public'
|
||||
})`;
|
||||
|
||||
const codeBlock2 =
|
||||
`const viz = new carto.Viz();
|
||||
const source = new carto.source.Dataset('world_ports')
|
||||
const layer = new carto.Layer('layer', source, viz);
|
||||
layer.addTo(map);`;
|
||||
</script>
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pr--10 u-pl--10">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step6.summary`)" class="text is-body u-mb--64"></p>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ol class="u-list__style--decimal u-list__position--inside">
|
||||
<li>
|
||||
<p v-html="$t(`Wizards.cartovl.step6.howto.instruction1`)" class="text is-caption u-inline"></p>
|
||||
<CodeBlock :code="codeBlock1"></CodeBlock>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.extras`)" class="u-mt--64">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/extras.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step6.extras.resource1`)" class="text is-caption u-mt--16 u-mb--64"></p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
|
||||
export default {
|
||||
name: 'Step6',
|
||||
stepName: 'Style features',
|
||||
components: {
|
||||
CodeBlock,
|
||||
StepTitle
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeBlock1
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// Code Blocks to be rendered in steps
|
||||
const codeBlock1 =
|
||||
`const viz= new carto.Viz(\`
|
||||
width: 4
|
||||
strokeWidth: 0.5
|
||||
strokeColor: black
|
||||
color: rgb(10,185,107)
|
||||
\`);`;
|
||||
</script>
|
||||
+77
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="congrats">
|
||||
<div class="congrats__hero">
|
||||
<Confetti></Confetti>
|
||||
<div class="congrats__hero-content">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/congrats.svg" alt="">
|
||||
<h2 class="title is-body u-mb--16 u-mt--24 ">{{ $t(`Wizards.cartovl.step7.congrats.title`) }}</h2>
|
||||
<p v-html="$t(`Wizards.cartovl.step7.congrats.message1`)" class="text is-caption"></p>
|
||||
<p v-html="$t(`Wizards.cartovl.step7.congrats.message2`, { url: downloadUrl })" class="text is-caption"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container u-mt--64 u-pb--80">
|
||||
<StepTitle :title="$t(`Wizards.cartovl.sections.learnmore`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/learn.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<p v-html="$t(`Wizards.cartovl.step7.extras.resource1`)" class="text is-caption u-mt--16 u-mb--64"></p>
|
||||
<TutorialCard :content="$t(`Wizards.cartovl.step7.cards.card1`)" class="u-mb--16">
|
||||
<img src="../../../../assets/images/onboarding/stylefeatures.png" width="240" height="130" alt="Style features by category sample image"/>
|
||||
</TutorialCard>
|
||||
<TutorialCard :content="$t(`Wizards.cartovl.step7.cards.card2`)" class="u-mb--16">
|
||||
<img src="../../../../assets/images/onboarding/hoverpopups.png" width="240" height="130" alt="Add hover popups sample image"/>
|
||||
</TutorialCard>
|
||||
<TutorialCard :content="$t(`Wizards.cartovl.step7.cards.card3`)">
|
||||
<img src="../../../../assets/images/onboarding/animatefeatures.png" width="240" height="130" alt="Animate the features sample image"/>
|
||||
</TutorialCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
import TutorialCard from 'new-dashboard/components/Onboarding/components/TutorialCard.vue';
|
||||
import Confetti from 'new-dashboard/components/Onboarding/components/Confetti.vue';
|
||||
import { getAssetsBaseUrl } from 'new-dashboard/utils/assets-version';
|
||||
|
||||
export default {
|
||||
name: 'Step7',
|
||||
stepName: 'Download',
|
||||
components: {
|
||||
StepTitle,
|
||||
TutorialCard,
|
||||
Confetti
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
downloadUrl: getAssetsBaseUrl() + 'unversioned/onboarding/cartovl.zip'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.congrats {
|
||||
background-color: $white;
|
||||
|
||||
&__hero {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $onboarding-congrats__height;
|
||||
background-color: $onboarding-congrats__bg-color;
|
||||
}
|
||||
|
||||
&__hero-content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
import { importFilesFrom } from 'new-dashboard/utils/dynamic-import';
|
||||
|
||||
const folderContext = require.context('./', true, /Step.*\.vue$/);
|
||||
|
||||
const wizardName = 'wizardCARTOVL';
|
||||
const steps = importFilesFrom(folderContext, /^\.\/(.*)\.vue$/);
|
||||
|
||||
export default { steps, wizardName };
|
||||
+203
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div class="u-width--100 u-pt--32 u-pr--10 u-pb--80 u-pl--10">
|
||||
<div class="circle"></div>
|
||||
<div class="placeholder">
|
||||
<div class="placeholder__img"></div>
|
||||
<div class="placeholder__shadow"></div>
|
||||
</div>
|
||||
|
||||
<ul class="tag__list">
|
||||
<li class="tag__item title">Python</li>
|
||||
<li class="tag__item title">CARTOframes</li>
|
||||
</ul>
|
||||
<h1 v-html="$t(`Wizards.cartoframes.step1.title`)" class="heading title is-subheader"></h1>
|
||||
|
||||
<div class="block">
|
||||
<StepTitle :title="$t(`Wizards.cartoframes.step1.sections.summary`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/summary.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<ul class="list">
|
||||
<li class="list__item text">
|
||||
<span>{{ $t(`Wizards.cartoframes.step1.text1`) }}</span>
|
||||
</li>
|
||||
<li class="list__item text">
|
||||
<span>{{ $t(`Wizards.cartoframes.step1.text2`) }}</span>
|
||||
</li>
|
||||
<li class="list__item text">
|
||||
<span>{{ $t(`Wizards.cartoframes.step1.text3`) }}</span><span class="u-ml--4 is-italic">{{ $t(`Wizards.cartoframes.step1.text4`) }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<StepTitle :title="$t(`Wizards.cartoframes.step1.sections.howto`)">
|
||||
<template slot="icon">
|
||||
<img svg-inline src="../../../../assets/icons/onboarding/howto.svg"/>
|
||||
</template>
|
||||
</StepTitle>
|
||||
<CodeBlock :code="codeBlock1" language="python" :lineNumbers="false" theme="default"></CodeBlock>
|
||||
<InjectableIframe :content="map" width="100%" height="436"></InjectableIframe>
|
||||
</div>
|
||||
|
||||
<div class="footer hangar">
|
||||
<button class="underlined-link title is-caption is-txtCartoframes" @click="goToDashboard">
|
||||
<span>{{ $t('Wizards.cartoframes.step1.footer.returnToDashboard') }}</span>
|
||||
</button>
|
||||
<a href="https://carto.com/developers/cartoframes/" class="button button--arrow is-cartoframes" target="_blank" @click="goToDashboard">
|
||||
<span>{{ $t('Wizards.cartoframes.step1.footer.learnMore') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StepTitle from 'new-dashboard/components/Onboarding/components/StepTitle.vue';
|
||||
import CodeBlock from 'new-dashboard/components/Code/CodeBlock.vue';
|
||||
import InjectableIframe from 'new-dashboard/components/InjectableIframe';
|
||||
import map from 'new-dashboard/assets/resources/onboarding/cartoframes.html';
|
||||
|
||||
export default {
|
||||
name: 'Step1',
|
||||
stepName: 'Add spatial data to your data science workflow',
|
||||
components: {
|
||||
StepTitle,
|
||||
CodeBlock,
|
||||
InjectableIframe
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
codeBlock1,
|
||||
map
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goToDashboard () {
|
||||
this.$router.push({ name: 'home' });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const codeBlock1 =
|
||||
`from cartoframes.auth import set_default_credentials
|
||||
from cartoframes.viz import Map
|
||||
from cartoframes.viz.helpers import color_bins_layer
|
||||
|
||||
set_default_credentials('johnsmith', '1a2b3c4d5e6f7g8h9i0j')
|
||||
|
||||
masters_map = Map(color_bins_layer(
|
||||
'higher_edu_by_county',
|
||||
'pct_higher_ed',
|
||||
'% Population with Masters degree')
|
||||
)
|
||||
|
||||
masters_map.publish('higher_edu_by_county_map')`;
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'new-dashboard/styles/variables';
|
||||
@import 'new-dashboard/styles/hangar/_variables';
|
||||
|
||||
.circle {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 120vw;
|
||||
height: 120vw;
|
||||
transform: translate(44vw, -71.5vw);
|
||||
border-radius: 50%;
|
||||
background-color: $cartoframes;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-70px, -10px);
|
||||
|
||||
&__img {
|
||||
width: 460px;
|
||||
height: 330px;
|
||||
border-radius: 4px;
|
||||
background-image: url('../../../../assets/images/onboarding/cartoframes@2x.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&__shadow {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
width: 412px;
|
||||
height: 326px;
|
||||
opacity: 0.24;
|
||||
background: $neutral--800;
|
||||
filter: blur(24px);
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
&__list {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-right: 16px;
|
||||
padding: 7px 16px;
|
||||
border-radius: 18px;
|
||||
background-color: rgba($cartoframes, 0.08);
|
||||
color: $cartoframes;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 18px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
max-width: 300px;
|
||||
margin-bottom: 150px;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding-left: 16px;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
line-height: 38px;
|
||||
|
||||
&::before {
|
||||
content: '\00b7';
|
||||
margin-right: 8px;
|
||||
font-size: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import { importFilesFrom } from 'new-dashboard/utils/dynamic-import';
|
||||
|
||||
const folderContext = require.context('./', true, /Step.*\.vue$/);
|
||||
|
||||
const wizardName = 'wizardCARTOframes';
|
||||
const showFooter = false;
|
||||
const steps = importFilesFrom(folderContext, /^\.\/(.*)\.vue$/);
|
||||
|
||||
export default { steps, showFooter, wizardName };
|
||||
@@ -0,0 +1,75 @@
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
step: 1,
|
||||
isModalOpen: true
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.setStepNumber();
|
||||
},
|
||||
watch: {
|
||||
$route () {
|
||||
this.setStepNumber();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
totalStepCount () {
|
||||
return this.stepNames.length;
|
||||
},
|
||||
stepComponent () {
|
||||
return `Step${this.step}`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goToStep (stepNum) {
|
||||
this.$router.push({
|
||||
hash: `#step-${stepNum}`
|
||||
});
|
||||
},
|
||||
isCurrentStep (stepNum) {
|
||||
return this.step === stepNum;
|
||||
},
|
||||
openModal () {
|
||||
this.isModalOpen = true;
|
||||
},
|
||||
closeModal () {
|
||||
this.isModalOpen = false;
|
||||
this.step = 1;
|
||||
this.$emit('closeModal');
|
||||
},
|
||||
setStepNumber () {
|
||||
const {stepNumber, isValid} = parseHashParameterWithNumber(this.$route.hash);
|
||||
|
||||
if (stepNumber > this.totalStepCount || !isValid) {
|
||||
return this.$router.push({ hash: '#step-1' });
|
||||
}
|
||||
|
||||
this.step = stepNumber;
|
||||
},
|
||||
getStepGTMString (stepNumber) {
|
||||
return `gtm-${this.wizardName}-step${stepNumber}`;
|
||||
}
|
||||
},
|
||||
updated () {
|
||||
if (this.$refs.wizard) {
|
||||
this.$refs.wizard.scrollTo({ top: 0, left: 0 });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function parseHashParameterWithNumber (hash, token = 'step-') {
|
||||
const stepIndex = hash.indexOf(token);
|
||||
const includesStep = stepIndex > -1;
|
||||
|
||||
if (!includesStep) {
|
||||
return;
|
||||
}
|
||||
|
||||
const stepNumber = +hash.substring(stepIndex + token.length);
|
||||
|
||||
return {
|
||||
isValid: Number.isInteger(stepNumber),
|
||||
stepNumber: stepNumber
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<component :is="componentName" @closeModal="closeModal"></component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createWizard } from '../wizard/createWizard';
|
||||
|
||||
// Wizards
|
||||
import CARTOVLWizard from '../tutorials/CARTOVL';
|
||||
import CARTOframesWizard from '../tutorials/CARTOframes';
|
||||
import BuilderWizard from '../tutorials/Builder';
|
||||
|
||||
export default {
|
||||
name: 'Wizard',
|
||||
components: {
|
||||
builder: createWizard(BuilderWizard.wizardName, BuilderWizard.steps),
|
||||
cartoframes: createWizard(CARTOframesWizard.wizardName, CARTOframesWizard.steps, CARTOframesWizard.showFooter),
|
||||
'carto-vl': createWizard(CARTOVLWizard.wizardName, CARTOVLWizard.steps)
|
||||
},
|
||||
computed: {
|
||||
componentName () {
|
||||
return this.$route.params.onboardingId;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeModal () {
|
||||
this.$router.push({ name: 'home' });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,83 @@
|
||||
import Step from 'new-dashboard/components/Onboarding/components/Step.vue';
|
||||
import Header from 'new-dashboard/components/Onboarding/components/Header.vue';
|
||||
import Footer from 'new-dashboard/components/Onboarding/components/Footer.vue';
|
||||
import Modal from 'new-dashboard/components/Modal.vue';
|
||||
|
||||
import mixin from '../tutorials/mixin';
|
||||
import template from './template.html';
|
||||
import './style.scss';
|
||||
|
||||
const defaultComponentConfiguration = {
|
||||
template,
|
||||
components: {
|
||||
Step,
|
||||
Header,
|
||||
Footer,
|
||||
Modal
|
||||
},
|
||||
mixins: [mixin]
|
||||
};
|
||||
|
||||
/**
|
||||
* Onboarding Wizard Creation
|
||||
*
|
||||
* Function to create a new wizard from a defined steps
|
||||
*
|
||||
* @param {string} name - Name for the generated wizard.
|
||||
* @param {array} steps - Wizard's steps definition.
|
||||
*
|
||||
* Each step within the array needs to follow this format:
|
||||
* { stepName: <String>, component: <ComponentObject> }
|
||||
*
|
||||
* stepName: Name that the step takes in the wizard
|
||||
* component: Vue component object definition for the Step
|
||||
*/
|
||||
|
||||
export function createWizard (name = '', steps = {}, showFooter = true) {
|
||||
const stepsLength = Object.keys(steps).length;
|
||||
|
||||
if (!steps || !stepsLength) {
|
||||
throw new Error('Steps components are needed to generate a Wizard');
|
||||
}
|
||||
|
||||
const wizardConfiguration = generateWizardConfiguration(name, steps, showFooter);
|
||||
|
||||
return {
|
||||
...defaultComponentConfiguration,
|
||||
...wizardConfiguration
|
||||
};
|
||||
}
|
||||
|
||||
function generateWizardConfiguration (name, steps, showFooter) {
|
||||
// Generate Wizard configuration
|
||||
const { components, stepNames } = parseSteps(steps);
|
||||
|
||||
const wizardComponents = {
|
||||
...defaultComponentConfiguration.components,
|
||||
...components
|
||||
};
|
||||
|
||||
return {
|
||||
name,
|
||||
components: wizardComponents,
|
||||
data () {
|
||||
return {
|
||||
wizardName: name,
|
||||
stepNames,
|
||||
showFooter
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function parseSteps (steps) {
|
||||
const components = {};
|
||||
const stepNames = [];
|
||||
|
||||
Object.values(steps).forEach(component => {
|
||||
components[component.name] = component;
|
||||
stepNames.push(component.stepName);
|
||||
});
|
||||
|
||||
return { components, stepNames };
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
@import 'new-dashboard/styles/variables';
|
||||
|
||||
.wizard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
overflow: hidden auto;
|
||||
background-color: $onboarding__bg-color;
|
||||
|
||||
// Fix for Safari Scrolling with GPU acceleration
|
||||
/* stylelint-disable */
|
||||
transform: translate3d(0, 0, 0);
|
||||
/* stylelint-enable */
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
<Modal :name="wizardName" :isOpen="isModalOpen" @closeModal="closeModal">
|
||||
<div ref="wizard" class="wizard">
|
||||
<Header :stepNames="stepNames" :currentStep="step" @goToStep="goToStep"></Header>
|
||||
|
||||
<template v-for="step in totalStepCount">
|
||||
<Step
|
||||
v-if="isCurrentStep(step)"
|
||||
:class="getStepGTMString(step)"
|
||||
:stepNum="step"
|
||||
:key="step"
|
||||
:fullWidth="step === stepNames.length && stepNames.length > 1">
|
||||
<component :is="stepComponent"></component>
|
||||
</Step>
|
||||
</template>
|
||||
|
||||
<Footer v-if="showFooter"
|
||||
:stepNames="stepNames"
|
||||
:currentStep="step"
|
||||
@goToStep="goToStep"
|
||||
@closeModal="closeModal"></Footer>
|
||||
</div>
|
||||
</Modal>
|
||||
Reference in New Issue
Block a user