Drop Cap Notification, Modal and A/B Test (#12651)
* add drop cap notification * add drop cap notification * add dismissible notification * fix(notification): correct remove icon positioning * track events * add modal * add back files * fix links and add missing analytics * fix rounded borders and hide sub info for subscribers * a/b test * fix comparison * Translated using Weblate (Spanish) Currently translated at 98.2% (55 of 56 strings) Translation: Habitica/Messages Translate-URL: https://translate.habitica.com/projects/habitica/messages/es/ Translated using Weblate (Spanish) Currently translated at 99.4% (179 of 180 strings) Translation: Habitica/Settings Translate-URL: https://translate.habitica.com/projects/habitica/settings/es/ Merge branch 'origin/develop' into Weblate. Translated using Weblate (Spanish) Currently translated at 99.4% (175 of 176 strings) Translation: Habitica/Subscriber Translate-URL: https://translate.habitica.com/projects/habitica/subscriber/es/ Translated using Weblate (Spanish (Latin America)) Currently translated at 98.6% (359 of 364 strings) Translation: Habitica/Groups Translate-URL: https://translate.habitica.com/projects/habitica/groups/es_419/ Translated using Weblate (Spanish) Currently translated at 85.7% (151 of 176 strings) Translation: Habitica/Subscriber Translate-URL: https://translate.habitica.com/projects/habitica/subscriber/es/ Translated using Weblate (Spanish) Currently translated at 95.3% (538 of 564 strings) Translation: Habitica/Backgrounds Translate-URL: https://translate.habitica.com/projects/habitica/backgrounds/es/ Translated using Weblate (Spanish (Latin America)) Currently translated at 98.6% (359 of 364 strings) Translation: Habitica/Groups Translate-URL: https://translate.habitica.com/projects/habitica/groups/es_419/ Translated using Weblate (French) Currently translated at 100.0% (56 of 56 strings) Translation: Habitica/Messages Translate-URL: https://translate.habitica.com/projects/habitica/messages/fr/ Translated using Weblate (German) Currently translated at 100.0% (56 of 56 strings) Translation: Habitica/Messages Translate-URL: https://translate.habitica.com/projects/habitica/messages/de/ Translated using Weblate (French) Currently translated at 100.0% (718 of 718 strings) Translation: Habitica/Questscontent Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/fr/ Translated using Weblate (German) Currently translated at 100.0% (718 of 718 strings) Translation: Habitica/Questscontent Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/de/ Translated using Weblate (Czech) Currently translated at 100.0% (56 of 56 strings) Translation: Habitica/Spells Translate-URL: https://translate.habitica.com/projects/habitica/spells/cs/ Translated using Weblate (Japanese) Currently translated at 100.0% (175 of 175 strings) Translation: Habitica/Subscriber Translate-URL: https://translate.habitica.com/projects/habitica/subscriber/ja/ Translated using Weblate (Italian) Currently translated at 100.0% (56 of 56 strings) Translation: Habitica/Messages Translate-URL: https://translate.habitica.com/projects/habitica/messages/it/ Translated using Weblate (Italian) Currently translated at 100.0% (718 of 718 strings) Translation: Habitica/Questscontent Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/it/ Translated using Weblate (Czech) Currently translated at 100.0% (180 of 180 strings) Translation: Habitica/Settings Translate-URL: https://translate.habitica.com/projects/habitica/settings/cs/ Translated using Weblate (Basque) Currently translated at 100.0% (2 of 2 strings) Translation: Habitica/Noscript Translate-URL: https://translate.habitica.com/projects/habitica/noscript/eu/ Translated using Weblate (Basque) Currently translated at 6.5% (8 of 123 strings) Translation: Habitica/Communityguidelines Translate-URL: https://translate.habitica.com/projects/habitica/communityguidelines/eu/ Translated using Weblate (Chinese (Simplified)) Currently translated at 100.0% (56 of 56 strings) Translation: Habitica/Messages Translate-URL: https://translate.habitica.com/projects/habitica/messages/zh_Hans/ Translated using Weblate (Japanese) Currently translated at 100.0% (56 of 56 strings) Translation: Habitica/Messages Translate-URL: https://translate.habitica.com/projects/habitica/messages/ja/ Translated using Weblate (Chinese (Simplified)) Currently translated at 100.0% (718 of 718 strings) Translation: Habitica/Questscontent Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/zh_Hans/ Translated using Weblate (Portuguese (Brazil)) Currently translated at 100.0% (718 of 718 strings) Translation: Habitica/Questscontent Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/pt_BR/ Translated using Weblate (Portuguese (Brazil)) Currently translated at 99.8% (717 of 718 strings) Translation: Habitica/Questscontent Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/pt_BR/ * clarify a/b test values * add tests * refactor user dropdown * fix hover state * fix user dropdown * fix user menu hierarchy * restore i18n files to release version Co-authored-by: Melior <admin@habitica.com>
This commit is contained in:
Matteo Pagliazzi
@@ -10,7 +10,7 @@
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
.message-count {
|
||||
background-color: $blue-50;
|
||||
background-color: $red-50;
|
||||
border-radius: 50%;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
@@ -31,7 +31,6 @@
|
||||
right: 0.3em;
|
||||
top: -0.8em;
|
||||
padding: 0.2em;
|
||||
background-color: $red-50;
|
||||
}
|
||||
|
||||
.message-count.top-count-gray {
|
||||
|
||||
@@ -118,11 +118,11 @@
|
||||
}
|
||||
|
||||
.notification-remove {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding: 4px;
|
||||
right: 24px;
|
||||
position: relative;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
right: 0px;
|
||||
top: 10.5px;
|
||||
|
||||
.svg-icon {
|
||||
width: 10px;
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<base-notification
|
||||
:can-remove="canRemove"
|
||||
:has-icon="false"
|
||||
:notification="notification"
|
||||
:read-after-click="true"
|
||||
@click="action"
|
||||
>
|
||||
<div
|
||||
slot="content"
|
||||
class="notification-bold-blue"
|
||||
>
|
||||
{{ $t('dropCapReached') }}
|
||||
</div>
|
||||
</base-notification>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseNotification from './base';
|
||||
import * as Analytics from '@/libs/analytics';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BaseNotification,
|
||||
},
|
||||
props: {
|
||||
notification: { type: Object, required: true },
|
||||
canRemove: { type: Boolean, required: true },
|
||||
},
|
||||
methods: {
|
||||
action () {
|
||||
this.$root.$emit('habitica:drop-cap-reached', this.notification);
|
||||
|
||||
Analytics.track({
|
||||
hitType: 'event',
|
||||
eventCategory: 'drop-cap-reached',
|
||||
eventAction: 'click',
|
||||
eventLabel: 'Drop Cap Reached > Notification Click',
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -149,6 +149,7 @@ import ACHIEVEMENT_MIND_OVER_MATTER from './notifications/mindOverMatter';
|
||||
import ONBOARDING_COMPLETE from './notifications/onboardingComplete';
|
||||
import GIFT_ONE_GET_ONE from './notifications/g1g1';
|
||||
import OnboardingGuide from './onboardingGuide';
|
||||
import DROP_CAP_REACHED from './notifications/dropCapReached';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -178,6 +179,7 @@ export default {
|
||||
OnboardingGuide,
|
||||
ONBOARDING_COMPLETE,
|
||||
GIFT_ONE_GET_ONE,
|
||||
DROP_CAP_REACHED,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@@ -203,7 +205,7 @@ export default {
|
||||
'GROUP_TASK_CLAIMED', 'NEW_MYSTERY_ITEMS', 'CARD_RECEIVED',
|
||||
'NEW_INBOX_MESSAGE', 'NEW_CHAT_MESSAGE', 'UNALLOCATED_STATS_POINTS',
|
||||
'ACHIEVEMENT_JUST_ADD_WATER', 'ACHIEVEMENT_LOST_MASTERCLASSER', 'ACHIEVEMENT_MIND_OVER_MATTER',
|
||||
'VERIFY_USERNAME', 'ONBOARDING_COMPLETE',
|
||||
'VERIFY_USERNAME', 'ONBOARDING_COMPLETE', 'DROP_CAP_REACHED',
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
@@ -23,13 +23,6 @@
|
||||
slot="dropdown-content"
|
||||
class="user-dropdown"
|
||||
>
|
||||
<a
|
||||
class="topbar-dropdown-item dropdown-item edit-avatar dropdown-separated"
|
||||
@click="showAvatar('body', 'size')"
|
||||
>
|
||||
<h3>{{ user.profile.name }}</h3>
|
||||
<span class="small-text">{{ $t('editAvatar') }}</span>
|
||||
</a>
|
||||
<a
|
||||
class="topbar-dropdown-item nav-link dropdown-item
|
||||
dropdown-separated d-flex justify-content-between align-items-center"
|
||||
@@ -43,20 +36,20 @@
|
||||
</a>
|
||||
<a
|
||||
class="topbar-dropdown-item dropdown-item"
|
||||
@click="showAvatar('backgrounds', '2020')"
|
||||
>{{ $t('backgrounds') }}</a>
|
||||
@click="showAvatar('body', 'size')"
|
||||
>{{ $t('editAvatar') }}</a>
|
||||
<a
|
||||
class="topbar-dropdown-item dropdown-item"
|
||||
@click="showProfile('profile')"
|
||||
>{{ $t('profile') }}</a>
|
||||
<a
|
||||
class="topbar-dropdown-item dropdown-item"
|
||||
@click="showProfile('stats')"
|
||||
>{{ $t('stats') }}</a>
|
||||
<a
|
||||
class="topbar-dropdown-item dropdown-item"
|
||||
class="topbar-dropdown-item dropdown-item dropdown-separated"
|
||||
@click="showProfile('achievements')"
|
||||
>{{ $t('achievements') }}</a>
|
||||
<a
|
||||
class="topbar-dropdown-item dropdown-item dropdown-separated"
|
||||
@click="showProfile('profile')"
|
||||
>{{ $t('profile') }}</a>
|
||||
<router-link
|
||||
class="topbar-dropdown-item dropdown-item"
|
||||
:to="{name: 'site'}"
|
||||
@@ -75,19 +68,36 @@
|
||||
>{{ $t('logout') }}</a>
|
||||
<li
|
||||
v-if="!user.purchased.plan.customerId"
|
||||
@click="showBuyGemsModal()"
|
||||
class="topbar-dropdown-item dropdown-item dropdown-separated
|
||||
d-flex flex-column justify-content-center align-items-center dropdown-inactive subs-info"
|
||||
>
|
||||
<div class="topbar-dropdown-item dropdown-item text-center">
|
||||
<h3 class="purple">
|
||||
{{ $t('needMoreGems') }}
|
||||
</h3>
|
||||
<span class="small-text">{{ $t('needMoreGemsInfo') }}</span>
|
||||
</div>
|
||||
<div class="learn-background py-2 text-center">
|
||||
<button class="btn btn-primary btn-lg learn-button">
|
||||
{{ $t('learnMore') }}
|
||||
</button>
|
||||
</div>
|
||||
<span
|
||||
v-once
|
||||
class="purple d-block font-weight-bold mb-3"
|
||||
>
|
||||
{{ $t('lookingForMoreItems') }}
|
||||
</span>
|
||||
<img
|
||||
class="swords mb-3"
|
||||
srcset="
|
||||
~@/assets/images/swords.png,
|
||||
~@/assets/images/swords@2x.png 2x,
|
||||
~@/assets/images/swords@3x.png 3x"
|
||||
src="~@/assets/images/swords.png"
|
||||
>
|
||||
<p
|
||||
v-once
|
||||
class="subs-benefits mb-3"
|
||||
>
|
||||
{{ $t('dropCapSubs') }}
|
||||
</p>
|
||||
<button
|
||||
v-once
|
||||
class="btn btn-primary mb-4"
|
||||
@click="$router.push({name: 'subscription'})"
|
||||
>
|
||||
{{ $t('learnMore') }}
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</menu-dropdown>
|
||||
@@ -96,39 +106,30 @@
|
||||
<style lang='scss' scoped>
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
.edit-avatar {
|
||||
h3 {
|
||||
color: $gray-10;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.user-dropdown {
|
||||
width: 14.75em;
|
||||
}
|
||||
|
||||
.learn-background {
|
||||
background: url('~@/assets/images/gem-rain.png') bottom left no-repeat,
|
||||
url('~@/assets/images/gold-rain.png') bottom right no-repeat;
|
||||
}
|
||||
|
||||
.learn-button {
|
||||
margin: 0.75em 0.75em 0.75em 1em;
|
||||
}
|
||||
|
||||
.purple {
|
||||
color: $purple-200;
|
||||
color: $purple-300;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
color: $gray-200;
|
||||
.subs-info {
|
||||
padding-top: 1.438rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.subs-benefits {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
font-style: normal;
|
||||
display: block;
|
||||
white-space: normal;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.swords {
|
||||
width: 7rem;
|
||||
height: 3rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user