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

feat(timetrav): implement bgs in avatar modal

Browse Source
This commit is contained in:
Sabe Jones
2020-01-09 10:26:36 -06:00
parent 0f4a5ebe6c
commit 59fb9f1c7a
5 changed files with 61 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
website/client/src/components/creatorIntro.vue
View File

@@ -166,7 +166,7 @@
v-if="!filterBackgrounds"
class="row text-center title-row"
>
<strong>{{ backgroundShopSets[0].text }}</strong>
<strong>{{ backgroundShopSets[1].text }}</strong>
</div>
<div
v-if="!filterBackgrounds"
@@ -174,14 +174,14 @@
>
<div
v-if="showPlainBackgroundBlurb(
backgroundShopSets[0].identifier, backgroundShopSets[0].items
backgroundShopSets[1].identifier, backgroundShopSets[1].items
)"
class="col-12"
>
{{ $t('incentiveBackgroundsUnlockedWithCheckins') }}
</div>
<div
v-for="bg in backgroundShopSets[0].items"
v-for="bg in backgroundShopSets[1].items"
:key="bg.key"
class="col-2"
:popover-title="bg.text"
@@ -197,6 +197,59 @@
</div>
</div>
</div>
<div
v-if="!filterBackgrounds"
class="row text-center title-row"
>
<strong>{{ backgroundShopSets[0].text }}</strong>
</div>
<div
v-if="!filterBackgrounds"
class="row title-row"
>
<div
v-for="bg in backgroundShopSets[0].items"
:key="bg.key"
class="col-4 text-center customize-option background-button"
:popover-title="bg.text"
:popover="bg.notes"
popover-trigger="mouseenter"
@click="!user.purchased.background[bg.key]
? backgroundSelected(bg) : unlock('background.' + bg.key)"
>
<div
class="background"
:class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"
></div>
<i
v-if="!user.purchased.background[bg.key]"
class="glyphicon glyphicon-lock"
></i>
<div
v-if="!user.purchased.background[bg.key]"
class="purchase-background single"
>
<div
class="svg-icon hourglass"
v-html="icons.hourglass"
></div>
<span class="price">1</span>
</div>
<span
v-if="!user.purchased.background[bg.key]"
class="badge badge-pill badge-item badge-svg"
:class="{
'item-selected-badge': isBackgroundPinned(bg),
'hide': !isBackgroundPinned(bg)}"
@click.prevent.stop="togglePinned(bg)"
>
<span
class="svg-icon inline icon-12 color"
v-html="icons.pin"
></span>
</span>
</div>
</div>
<sub-menu
class="text-center"
:items="bgSubMenuItems"
@@ -923,7 +976,7 @@
color: #24cc8f;
}
.gem, .coin {
.gem, .coin, .hourglass {
width: 16px;
}
@@ -944,7 +997,7 @@
}
}
.gem, .coin {
.gem, .coin, .hourglass {
margin: 0 .5em;
display: inline-block;
vertical-align: bottom;
@@ -1103,6 +1156,7 @@ import skinIcon from '@/assets/svg/skin.svg';
import hairIcon from '@/assets/svg/hair.svg';
import backgroundsIcon from '@/assets/svg/backgrounds.svg';
import gem from '@/assets/svg/gem.svg';
import hourglass from '@/assets/svg/hourglass.svg';
import gold from '@/assets/svg/gold.svg';
import pin from '@/assets/svg/pin.svg';
import arrowRight from '@/assets/svg/arrow_right.svg';
@@ -1143,6 +1197,7 @@ export default {
hairIcon,
backgroundsIcon,
gem,
hourglass,
pin,
gold,
arrowRight,