mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-14 13:17:24 +01:00
multiplefixes quest (#8964)
* add hourglass to header * multiple quest fixes - show quest info in popover/modal * pin backgrounds * unpin gem-purchable items / change pinType of quest to quests * check if hatching potion is allowed on egg - wide hatching info * fix (perf): items - request text()/notes() only once * change items margin to 23px * list cards + open modal to choose a target + add space between market items * buy card from task-list * fix tests - unpin items on purchasing eggs / hatchingPotions
This commit is contained in:
@@ -157,7 +157,7 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
|
||||
.col-6.offset-3.text-center.set-title
|
||||
strong {{set.text}}
|
||||
.col-12(v-if='showPlainBackgroundBlurb(set.identifier, set.items)') {{ $t('incentiveBackgroundsUnlockedWithCheckins') }}
|
||||
.col-4.text-center.customize-option(v-for='bg in set.items',
|
||||
.col-4.text-center.customize-option.background-button(v-for='bg in set.items',
|
||||
@click='unlock("background." + bg.key)',
|
||||
:popover-title='bg.text',
|
||||
:popover='bg.notes',
|
||||
@@ -167,6 +167,11 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
|
||||
.purchase-single(v-if='!user.purchased.background[bg.key]')
|
||||
.svg-icon.gem(v-html='icons.gem')
|
||||
span 7
|
||||
span.badge.badge-pill.badge-item.badge-svg(
|
||||
:class="{'item-selected-badge': isBackgroundPinned(bg), 'hide': !isBackgroundPinned(bg)}",
|
||||
@click.prevent.stop="togglePinned(bg)"
|
||||
)
|
||||
span.svg-icon.inline.icon-12.color(v-html="icons.pin")
|
||||
.col-12.text-center(v-if='!ownsSet("background", set.items) && set.identifier !== "incentiveBackgrounds"')
|
||||
.gem-amount
|
||||
.svg-icon.gem(v-html='icons.gem')
|
||||
@@ -488,6 +493,39 @@ b-modal#avatar-modal(title="", size='lg', :hide-header='true', :hide-footer='tru
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.badge-svg {
|
||||
left: calc((100% - 18px) / 2);
|
||||
cursor: pointer;
|
||||
color: $gray-400;
|
||||
background: $white;
|
||||
padding: 4.5px 6px;
|
||||
|
||||
&.item-selected-badge {
|
||||
background: $purple-300;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-12 {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
span.badge.badge-pill.badge-item.badge-svg:not(.item-selected-badge) {
|
||||
color: #a5a1ac;
|
||||
}
|
||||
|
||||
span.badge.badge-pill.badge-item.badge-svg.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.background-button:hover {
|
||||
span.badge.badge-pill.badge-item.badge-svg.hide {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@@ -499,6 +537,7 @@ import avatar from './avatar';
|
||||
import { getBackgroundShopSets } from '../../common/script/libs/shops';
|
||||
import unlock from '../../common/script/ops/unlock';
|
||||
import guide from 'client/mixins/guide';
|
||||
import notifications from 'client/mixins/notifications';
|
||||
|
||||
import bModal from 'bootstrap-vue/lib/components/modal';
|
||||
|
||||
@@ -509,9 +548,12 @@ 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 pin from 'assets/svg/pin.svg';
|
||||
import _isPinned from './shops/_isPinned';
|
||||
|
||||
|
||||
export default {
|
||||
mixins: [guide],
|
||||
mixins: [guide, notifications],
|
||||
components: {
|
||||
avatar,
|
||||
bModal,
|
||||
@@ -546,6 +588,7 @@ export default {
|
||||
hairIcon,
|
||||
backgroundsIcon,
|
||||
gem,
|
||||
pin,
|
||||
}),
|
||||
modalPage: 1,
|
||||
activeTopPage: 'body',
|
||||
@@ -674,6 +717,14 @@ export default {
|
||||
if (this.user.purchased.background[bgKey]) backgroundClass = 'background-unlocked';
|
||||
return backgroundClass;
|
||||
},
|
||||
isBackgroundPinned (bg) {
|
||||
return _isPinned(this.user, bg);
|
||||
},
|
||||
togglePinned (bg) {
|
||||
if (!this.$store.dispatch('user:togglePinnedItem', {type: bg.pinType, path: bg.path})) {
|
||||
this.text(this.$t('unpinnedItem', {item: bg.text}));
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user