Initial commit
This commit is contained in:
zhongjin
+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>
|
||||
Reference in New Issue
Block a user