krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-18 07:07:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Redesign: Subscribe/Buy Gems modal style (#9038)

Browse Source 
* feat(gems): User menu Gems prompt

* feat(purchases): Gems modal

* feat(purchasing): Subscription side of modal

* fix(modals): analytics and dropdown styling
This commit is contained in:
Sabe Jones
2017-09-15 13:11:58 -05:00
committed by GitHub
parent 79b3b26ab2
commit 5c5e117da0
15 changed files with 729 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
website/client/components/appMenu.vue
View File

@@ -56,7 +56,7 @@ div
.svg-icon(v-html="icons.hourglasses")
span {{ userHourglasses }}
.item-with-icon
.svg-icon.gem(v-html="icons.gem", @click='showBuyGemsModal()')
.svg-icon.gem(v-html="icons.gem", @click='showBuyGemsModal("gems")')
span {{userGems | roundBigNumber}}
.item-with-icon
.svg-icon(v-html="icons.gold")
@@ -68,15 +68,22 @@ div
a.dropdown-item.edit-avatar.dropdown-separated(@click='showAvatar()')
h3 {{ user.profile.name }}
span.small-text {{ $t('editAvatar') }}
a.nav-link.dropdown-item(@click.prevent='showInbox()')
a.nav-link.dropdown-item.dropdown-separated(@click.prevent='showInbox()')
| {{ $t('messages') }}
span.message-count(v-if='user.inbox.newMessages > 0') {{user.inbox.newMessages}}
a.dropdown-item(@click='showAvatar("backgrounds", "2017")') {{ $t('backgrounds') }}
a.dropdown-item(@click='showProfile("stats")') {{ $t('stats') }}
a.dropdown-item(@click='showProfile("achievements")') {{ $t('achievements') }}
a.dropdown-item(@click='showProfile("profile")') {{ $t('profile') }}
router-link.dropdown-item(:to="{name: 'site'}") {{ $t('settings') }}
a.nav-link.dropdown-item(to="/", @click.prevent='logout()') {{ $t('logout') }}
a.dropdown-item.dropdown-separated(@click='showProfile("profile")') {{ $t('profile') }}
router-link.dropdown-item.dropdown-separated(:to="{name: 'site'}") {{ $t('settings') }}
a.nav-link.dropdown-item.dropdown-separated(to="/", @click.prevent='logout()') {{ $t('logout') }}
li(v-if='!this.user.purchased.plan.customerId', @click='showBuyGemsModal("subscribe")')
.dropdown-item.text-center
h3.purple {{ $t('needMoreGems') }}
span.small-text {{ $t('needMoreGemsInfo') }}
img.float-left.align-self-end(src='~assets/images/gem-rain.png')
button.btn.btn-primary.btn-lg.learn-button Learn More
img.float-right.align-self-end(src='~assets/images/gold-rain.png')
b-nav-toggle(target='nav_collapse')
</template>
@@ -179,6 +186,25 @@ div
border-bottom: 1px solid $gray-500;
}
.user-dropdown {
width: 14.75em;
}
.learn-button {
margin: 0.75em 0.75em 0.75em 1em;
}
.purple {
color: $purple-200;
}
.small-text {
color: $gray-200;
font-style: normal;
display: block;
white-space: normal;
}
.dropdown-menu:not(.user-dropdown) {
background: $purple-200;
border-radius: 0px;
@@ -250,12 +276,6 @@ div
margin-bottom: 0px;
}
.small-text {
color: $gray-200;
font-style: normal;
display: block;
}
padding-top: 16px;
padding-bottom: 16px;
}
@@ -353,14 +373,17 @@ export default {
openPartyModal () {
this.$root.$emit('show::modal', 'create-party-modal');
},
showBuyGemsModal () {
showBuyGemsModal (startingPage) {
this.$store.state.gemModalOptions.startingPage = startingPage;
Analytics.track({
hitType: 'event',
eventCategory: 'button',
eventAction: 'click',
eventLabel: 'Gems > Toolbar',
});
this.$root.$emit('show::modal', 'buy-gems');
this.$root.$emit('show::modal', 'buy-gems', {alreadyTracked: true});
},
},
};