Skip to content
Snippets Groups Projects
Commit f3508d15 authored by syuilo's avatar syuilo
Browse files

Refactor

parent 0add4900
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/client/pages/index.home.tutorial.vue 0 → 100644
+ 127
− 0
View file @ f3508d15
<template>
<div class="_card tbkwesmv">
<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('_tutorial.title') }}</div>
<div class="_content" v-if="tutorial === 0">
<div>{{ $t('_tutorial.step1_1') }}</div>
<div>{{ $t('_tutorial.step1_2') }}</div>
<div>{{ $t('_tutorial.step1_3') }}</div>
</div>
<div class="_content" v-else-if="tutorial === 1">
<div>{{ $t('_tutorial.step2_1') }}</div>
<div>{{ $t('_tutorial.step2_2') }}</div>
<router-link class="_link" to="/my/settings">{{ $t('editProfile') }}</router-link>
</div>
<div class="_content" v-else-if="tutorial === 2">
<div>{{ $t('_tutorial.step3_1') }}</div>
<div>{{ $t('_tutorial.step3_2') }}</div>
<div>{{ $t('_tutorial.step3_3') }}</div>
<small>{{ $t('_tutorial.step3_4') }}</small>
</div>
<div class="_content" v-else-if="tutorial === 3">
<div>{{ $t('_tutorial.step4_1') }}</div>
<div>{{ $t('_tutorial.step4_2') }}</div>
</div>
<div class="_content" v-else-if="tutorial === 4">
<div>{{ $t('_tutorial.step5_1') }}</div>
<i18n path="_tutorial.step5_2" tag="div">
<router-link class="_link" place="featured" to="/featured">{{ $t('featured') }}</router-link>
<router-link class="_link" place="explore" to="/explore">{{ $t('explore') }}</router-link>
</i18n>
<div>{{ $t('_tutorial.step5_3') }}</div>
<small>{{ $t('_tutorial.step5_4') }}</small>
</div>
<div class="_content" v-else-if="tutorial === 5">
<div>{{ $t('_tutorial.step6_1') }}</div>
<div>{{ $t('_tutorial.step6_2') }}</div>
<div>{{ $t('_tutorial.step6_3') }}</div>
</div>
<div class="_content" v-else-if="tutorial === 6">
<div>{{ $t('_tutorial.step7_1') }}</div>
<i18n path="_tutorial.step7_2" tag="div">
<router-link class="_link" place="help" to="/docs">{{ $t('help') }}</router-link>
</i18n>
<div>{{ $t('_tutorial.step7_3') }}</div>
</div>
<div class="_footer navigation">
<div class="step">
<button class="arrow _button" @click="tutorial--" :disabled="tutorial === 0">
<fa :icon="faChevronLeft"/>
</button>
<span>{{ tutorial + 1 }} / 7</span>
<button class="arrow _button" @click="tutorial++" :disabled="tutorial === 6">
<fa :icon="faChevronRight"/>
</button>
</div>
<mk-button class="ok" @click="tutorial = -1" primary v-if="tutorial === 6"><fa :icon="faCheck"/> {{ $t('gotIt') }}</mk-button>
<mk-button class="ok" @click="tutorial++" primary v-else><fa :icon="faCheck"/> {{ $t('next') }}</mk-button>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { faInfoCircle, faChevronLeft, faChevronRight, faCheck } from '@fortawesome/free-solid-svg-icons'
import MkButton from '../components/ui/button.vue';
export default Vue.extend({
components: {
MkButton,
},
data() {
return {
faInfoCircle, faChevronLeft, faChevronRight, faCheck
}
},
computed: {
tutorial: {
get() { return this.$store.state.settings.tutorial || 0; },
set(value) { this.$store.dispatch('settings/set', { key: 'tutorial', value }); }
},
},
});
</script>
<style lang="scss" scoped>
.tbkwesmv {
> ._content {
> small {
opacity: 0.7;
}
}
> .navigation {
display: flex;
flex-direction: row;
align-items: baseline;
> .step {
> .arrow {
padding: 4px;
&:disabled {
opacity: 0.5;
}
&:first-child {
padding-right: 8px;
}
&:last-child {
padding-left: 8px;
}
}
> span {
margin: 0 4px;
}
}
> .ok {
margin-left: auto;
}
}
}
</style>
src/client/pages/index.home.vue
+ 6
− 92
View file @ f3508d15
......@@ -14,61 +14,7 @@
</button>
</portal>
<section class="_card tutorial" v-if="tutorial != -1">
<div class="_title">{{ $t('_tutorial.title') }}</div>
<div class="_content" v-if="tutorial === 0">
<div>{{ $t('_tutorial.step1_1') }}</div>
<div>{{ $t('_tutorial.step1_2') }}</div>
<div>{{ $t('_tutorial.step1_3') }}</div>
</div>
<div class="_content" v-else-if="tutorial === 1">
<div>{{ $t('_tutorial.step2_1') }}</div>
<div>{{ $t('_tutorial.step2_2') }}</div>
<router-link class="_link" to="/my/settings">{{ $t('editProfile') }}</router-link>
</div>
<div class="_content" v-else-if="tutorial === 2">
<div>{{ $t('_tutorial.step3_1') }}</div>
<div>{{ $t('_tutorial.step3_2') }}</div>
<div>{{ $t('_tutorial.step3_3') }}</div>
<small>{{ $t('_tutorial.step3_4') }}</small>
</div>
<div class="_content" v-else-if="tutorial === 3">
<div>{{ $t('_tutorial.step4_1') }}</div>
<div>{{ $t('_tutorial.step4_2') }}</div>
</div>
<div class="_content" v-else-if="tutorial === 4">
<div>{{ $t('_tutorial.step5_1') }}</div>
<i18n path="_tutorial.step5_2" tag="div">
<router-link class="_link" place="featured" to="/featured">{{ $t('featured') }}</router-link>
<router-link class="_link" place="explore" to="/explore">{{ $t('explore') }}</router-link>
</i18n>
<div>{{ $t('_tutorial.step5_3') }}</div>
<small>{{ $t('_tutorial.step5_4') }}</small>
</div>
<div class="_content" v-else-if="tutorial === 5">
<div>{{ $t('_tutorial.step6_1') }}</div>
<div>{{ $t('_tutorial.step6_2') }}</div>
<div>{{ $t('_tutorial.step6_3') }}</div>
</div>
<div class="_content" v-else-if="tutorial === 6">
<div>{{ $t('_tutorial.step7_1') }}</div>
<i18n path="_tutorial.step7_2" tag="div">
<router-link class="_link" place="help" to="/docs">{{ $t('help') }}</router-link>
</i18n>
<div>{{ $t('_tutorial.step7_3') }}</div>
</div>
<div class="_footer navigation">
<button class="arrow" @click="tutorial--" :disabled="tutorial === 0">
<fa :icon="faChevronLeft"/>
</button>
<span>{{ tutorial + 1 }} / 7</span>
<button class="arrow" @click="tutorial++" :disabled="tutorial === 6">
<fa :icon="faChevronRight"/>
</button>
<mk-button class="ok" @click="tutorial = -1" primary v-if="tutorial === 6"><fa :icon="faCheck"/> {{ $t('gotIt') }}</mk-button>
<mk-button class="ok" @click="tutorial++" primary v-else><fa :icon="faCheck"/> {{ $t('next') }}</mk-button>
</div>
</section>
<x-tutorial class="tutorial" v-if="$store.state.settings.tutorial != -1"/>
<x-timeline ref="tl" :key="src === 'list' ? `list:${list.id}` : src === 'antenna' ? `antenna:${antenna.id}` : src" :src="src" :list="list" :antenna="antenna" @before="before()" @after="after()"/>
</div>
......@@ -76,11 +22,11 @@
<script lang="ts">
import Vue from 'vue';
import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite, faCircle, faChevronLeft, faChevronRight, faCheck } from '@fortawesome/free-solid-svg-icons';
import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite, faCircle } from '@fortawesome/free-solid-svg-icons';
import { faComments } from '@fortawesome/free-regular-svg-icons';
import Progress from '../scripts/loading';
import XTimeline from '../components/timeline.vue';
import MkButton from '../components/ui/button.vue';
import XTutorial from './index.home.tutorial.vue';
export default Vue.extend({
metaInfo() {
......@@ -91,7 +37,7 @@ export default Vue.extend({
components: {
XTimeline,
MkButton,
XTutorial,
},
props: {
......@@ -107,7 +53,7 @@ export default Vue.extend({
list: null,
antenna: null,
menuOpened: false,
faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faComments, faListUl, faSatellite, faCircle, faChevronLeft, faChevronRight, faCheck
faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faComments, faListUl, faSatellite, faCircle
};
},
......@@ -117,10 +63,6 @@ export default Vue.extend({
't': this.focus
};
},
tutorial: {
get() { return this.$store.state.settings.tutorial || 0; },
set(value) { this.$store.dispatch('settings/set', { key: 'tutorial', value }); }
},
},
watch: {
......@@ -237,36 +179,8 @@ export default Vue.extend({
<style lang="scss" scoped>
.mk-home {
.tutorial {
> .tutorial {
margin-bottom: var(--margin);
> ._content {
> small {
opacity: 0.7;
}
}
> .navigation {
display: flex;
flex-direction: row;
align-items: baseline;
font-size: 18px;
> .arrow {
color: var(--fg);
background: none;
border: none;
font-size: inherit;
&:disabled {
opacity: 0.6;
}
}
> .ok {
margin-left: auto;
}
}
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment