Skip to content

Commit

Permalink
extract more parts of onboarding-intro
Browse files Browse the repository at this point in the history
  • Loading branch information
@negue
negue committed Jul 24, 2019
1 parent 61ab9f4 commit 9acbc73
Show file tree
Hide file tree
Showing 7 changed files with 671 additions and 288 deletions.
49 changes: 29 additions & 20 deletions ...te/client/components/avatarModal/body.vue → .../components/avatarModal/body-settings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,25 @@
#body.section.customize-section
sub-menu.text-center(:items="items", :activeSubPage="activeSubPage", @changeSubPage="changeSubPage($event)")
.row(v-if='activeSubPage === "size"')
.col-12.customize-options.size-options
.option(v-for='option in ["slim", "broad"]', :class='{active: user.preferences.size === option}')
.sprite.customize-option(:class="`${option}_shirt_black`", @click='set({"preferences.size": option})')
customize-options.col-12(
:items="sizes",
propertyToChange="preferences.size",
:currentValue="user.preferences.size"
)
.row(v-if='activeSubPage === "shirt"')
customize-options.col-12(
:items="freeShirts",
propertyToChange="preferences.shirt",
:currentValue="user.preferences.shirt"
)
.col-12.customize-options(v-if='editing')
.option(v-for='item in specialShirts',
:class='{active: item.active, locked: item.locked}')
.sprite.customize-option(:class="`broad_shirt_${item.key}`", @click='item.click')
.gem-lock(v-if='item.locked')
.svg-icon.gem(v-html='icons.gem')
span 2
.col-12.text-center(v-if='!userOwnsSet("shirt", specialShirtKeys)')
.gem-lock
.svg-icon.gem(v-html='icons.gem')
span 5
button.btn.btn-secondary.purchase-all(@click='unlock(`shirt.${specialShirtKeys.join(",shirt.")}`)') {{ $t('purchaseAll') }}
customize-options.col-12(
v-if='editing',
:items='specialShirts',
propertyToChange="preferences.shirt",
:currentValue="user.preferences.shirt",
:fullSet='!userOwnsSet("shirt", specialShirtKeys)',
@unlock='unlock(`shirt.${specialShirtKeys.join(",shirt.")}`)'
)
</template>

<script>
Expand Down Expand Up @@ -53,10 +51,6 @@
],
data () {
return {
freeShirts: freeShirtKeys.map(s => ({
key: s,
class: `slim_shirt_${s}`,
})),
specialShirtKeys,
icons: Object.freeze({
gem,
Expand All @@ -74,11 +68,26 @@
};
},
computed: {
sizes () {
return ['slim', 'broad'].map(s => ({
key: s,
class: `${s}_shirt_black`,
}));
},
freeShirts () {
return freeShirtKeys.map(s => ({
key: s,
class: `${this.user.preferences.size}_shirt_${s}`,
}));
},
specialShirts () {
let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
let keys = this.specialShirtKeys;
let options = keys.map(key => {
return this.mapKeysToOption(key, 'shirt');
const option = this.mapKeysToOption(key, 'shirt');
option.class = `${this.user.preferences.size}_shirt_${key}`;
return option;
});
return options;
},
Expand Down
139 changes: 108 additions & 31 deletions website/client/components/avatarModal/customize-options.vue
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,30 @@
<template lang="pug">
.customize-options
.option(v-for='option in items',
.outer-option-background(
v-for='option in items',
:key='option.key',
:class='{active: currentValue === option.key, none: option.none}'
:class='{locked: option.locked, premium: Boolean(option.gem), active: currentValue === option.key, none: option.none }'
)
.sprite.customize-option(:class='option.class', @click='set({[propertyToChange]: option.key})')
.gem-lock(v-if='option.locked')
.svg-icon.gem(v-html='icons.gem')
span {{ option.gem }}
.redline-outer(v-if="option.none")
.redline
.option
.sprite.customize-option(:class='option.class', @click='option.gem && option.click ? option.click() : set({[propertyToChange]: option.key})')
.redline-outer(v-if="option.none")
.redline
.gem-lock(v-if='option.locked')
.svg-icon.gem(v-html='icons.gem')
span {{ option.gem }}
.col-12.text-center(v-if='fullSet')
.gem-lock
.svg-icon.gem(v-html='icons.gem')
span 5
button.btn.btn-secondary.purchase-all(@click='unlock()', v-once) {{ $t('purchaseAll') }}
</template>

<script>
import gem from 'assets/svg/gem.svg';
import {avatarEditorUtilies} from '../../mixins/avatarEditUtilities';
export default {
props: ['items', 'propertyToChange', 'currentValue'],
props: ['items', 'propertyToChange', 'currentValue', 'fullSet'],
mixins: [
avatarEditorUtilies,
],
Expand All @@ -28,24 +35,55 @@
}),
};
},
methods: {
unlock () {
this.$emit('unlock');
},
},
};
</script>

<style lang="scss" scoped>
@import '~client/assets/scss/colors.scss';
.option {
.customize-options {
}
.outer-option-background {
display: inline-block;
vertical-align: bottom;
//padding: .5em;
height: 64px;
width: 64px;
margin: 1em .5em .5em 0;
border: 4px solid $gray-700;
border-radius: 10px;
position: relative;
vertical-align: top;
&.none {
&.premium {
height: 112px;
width: 96px;
margin-left: 8px;
margin-right: 8px;
margin-bottom: 8px;
.option {
margin: 12px 16px;
}
}
&.locked {
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
background-color: $white;
.option {
border: none;
border-radius: 2px;
padding-left: 6px;
padding-top: 4px;
}
}
&.premium:not(.locked):not(.active) {
border-radius: 2px;
background-color: rgba(59, 202, 215, 0.1);
}
&.none .option {
.sprite {
opacity: 0.24;
}
Expand Down Expand Up @@ -73,33 +111,44 @@
}
}
&.locked {
border: none;
border-radius: 2px;
background-color: #ffffff;
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
margin-top: 0;
}
&.active {
&.active .option {
background: white;
border: solid 4px $purple-300;
}
&.premium:not(.active) .option {
border-radius: 8px;
background-color: rgba(59, 202, 215, 0.1);
}
}
.option {
vertical-align: bottom;
height: 64px;
width: 64px;
margin: 12px 8px;
border: 4px solid transparent;
border-radius: 10px;
position: relative;
&:hover {
cursor: pointer;
}
.sprite.customize-option {
// margin: 0 auto;
margin-left: -3px;
margin-top: -7px;
//margin-left: -3px;
//margin-top: -7px;
margin-top: 0;
margin-left: 0;
&.color-bangs {
margin-top: 3px;
}
&.skin {
margin-top: -3px;
margin-top: -4px;
margin-left: -4px;
}
&.chair {
margin-left: -2px;
Expand All @@ -108,4 +157,32 @@
}
}
.text-center {
.gem-lock, .gold-lock {
display: inline-block;
margin: 0 auto 8px;
vertical-align: bottom;
}
}
.gem-lock, .gold-lock {
.svg-icon {
width: 16px;
}
span {
font-weight: bold;
margin-left: .5em;
}
.svg-icon, span {
display: inline-block;
vertical-align: bottom;
}
}
.gem-lock span {
color: $green-10
}
</style>

0 comments on commit 9acbc73

Please sign in to comment.