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

WIP(shops): start wiring up buy modals

Browse Source
This commit is contained in:
Sabe Jones
2024-03-11 16:09:16 -05:00
parent 0ead06937b
commit 0aa9d4d1d5
14 changed files with 28 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
website/client/src/assets/scss/button.scss
View File

@@ -218,13 +218,12 @@
.btn-show-more {
display: block;
width: 100%;
margin-top: 12px;
padding: 8px;
font-size: 14px;
line-height: 1.43;
font-weight: bold;
text-align: center;
background: $gray-600;
background: $gray-500;
color: $gray-200 !important; // Otherwise it gets ignored when used on an A element
box-shadow: none;

4
website/client/src/components/avatarModal/body-settings.vue
View File

@@ -35,7 +35,7 @@
import appearance from '@/../../common/script/content/appearance';
import { subPageMixin } from '../../mixins/subPage';
import { userStateMixin } from '../../mixins/userState';
import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
import subMenu from './sub-menu';
import customizeOptions from './customize-options';
import gem from '@/assets/svg/gem.svg';
@@ -51,7 +51,7 @@ export default {
mixins: [
subPageMixin,
userStateMixin,
avatarEditorUtilies,
avatarEditorUtilities,
],
props: [
'editing',

4
website/client/src/components/avatarModal/customize-options.vue
View File

@@ -67,11 +67,11 @@
<script>
import gem from '@/assets/svg/gem.svg';
import gold from '@/assets/svg/gold.svg';
import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
export default {
mixins: [
avatarEditorUtilies,
avatarEditorUtilities,
],
props: ['items', 'currentValue', 'fullSet'],
data () {

4
website/client/src/components/avatarModal/extra-settings.vue
View File

@@ -60,7 +60,7 @@
import appearance from '@/../../common/script/content/appearance';
import { subPageMixin } from '../../mixins/subPage';
import { userStateMixin } from '../../mixins/userState';
import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
import subMenu from './sub-menu';
import customizeOptions from './customize-options';
import gem from '@/assets/svg/gem.svg';
@@ -76,7 +76,7 @@ export default {
mixins: [
subPageMixin,
userStateMixin,
avatarEditorUtilies,
avatarEditorUtilities,
],
props: [
'editing',

4
website/client/src/components/avatarModal/hair-settings.vue
View File

@@ -81,7 +81,7 @@ import appearance from '@/../../common/script/content/appearance';
import appearanceSets from '@/../../common/script/content/appearance/sets';
import { subPageMixin } from '../../mixins/subPage';
import { userStateMixin } from '../../mixins/userState';
import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
import subMenu from './sub-menu';
import customizeOptions from './customize-options';
import gem from '@/assets/svg/gem.svg';
@@ -97,7 +97,7 @@ export default {
mixins: [
subPageMixin,
userStateMixin,
avatarEditorUtilies,
avatarEditorUtilities,
],
props: [
'editing',

4
website/client/src/components/avatarModal/skin-settings.vue
View File

@@ -36,7 +36,7 @@ import appearance from '@/../../common/script/content/appearance';
import appearanceSets from '@/../../common/script/content/appearance/sets';
import { subPageMixin } from '../../mixins/subPage';
import { userStateMixin } from '../../mixins/userState';
import { avatarEditorUtilies } from '../../mixins/avatarEditUtilities';
import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
import subMenu from './sub-menu';
import customizeOptions from './customize-options';
import gem from '@/assets/svg/gem.svg';
@@ -56,7 +56,7 @@ export default {
mixins: [
subPageMixin,
userStateMixin,
avatarEditorUtilies,
avatarEditorUtilities,
],
props: [
'editing',

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

@@ -1187,7 +1187,7 @@ import gold from '@/assets/svg/gold.svg';
import arrowRight from '@/assets/svg/arrow_right.svg';
import arrowLeft from '@/assets/svg/arrow_left.svg';
import svgClose from '@/assets/svg/close.svg';
import { avatarEditorUtilies } from '../mixins/avatarEditUtilities';
import { avatarEditorUtilities } from '../mixins/avatarEditUtilities';
export default {
components: {
@@ -1201,7 +1201,7 @@ export default {
toggleSwitch,
usernameForm,
},
mixins: [guide, notifications, avatarEditorUtilies],
mixins: [guide, notifications, avatarEditorUtilities],
data () {
const backgroundShopSets = shops.getBackgroundShopSets();

16
website/client/src/components/shops/buyModal.vue
View File

@@ -89,19 +89,19 @@
v-if="item.value > 0 && !(item.key === 'gem' && gemsLeft < 1)"
class="purchase-amount"
>
<!-- this is where the pretty item cost element lives -->
<div class="item-cost">
<div class="item-cost justify-content-center my-3">
<span
class="cost"
class="cost d-flex mx-auto"
:class="getPriceClass()"
>
<span
class="svg-icon inline icon-24"
class="svg-icon icon-24 my-auto mr-1"
aria-hidden="true"
v-html="icons[getPriceClass()]"
>
</span>
<span
class="my-auto"
:class="getPriceClass()"
>{{ item.value }}</span>
</span>
@@ -452,14 +452,11 @@
}
.item-cost {
display: inline-flex;
margin: 16px 0;
align-items: center;
height: 40px;
}
.cost {
display: inline-block;
width: fit-content;
font-family: sans-serif;
font-size: 1.25rem;
font-weight: bold;
@@ -470,19 +467,16 @@
&.gems {
color: $green-10;
background-color: rgba(36, 204, 143, 0.15);
align-items: center;
}
&.gold {
color: $yellow-5;
background-color: rgba(255, 190, 93, 0.15);
align-items: center;
}
&.hourglasses {
color: $hourglass-color;
background-color: rgba(41, 149, 205, 0.15);
align-items: center;
}
}

7
website/client/src/components/shops/customizations/index.vue
View File

@@ -38,7 +38,6 @@
<div class="p-4">
<h1
v-once
class="mb-4"
>
{{ $t('customizations') }}
</h1>
@@ -46,7 +45,7 @@
v-for="category in categories"
:key="category.identifier"
>
<h2 class="mb-3">
<h2 class="mb-3 mt-4">
{{ category.text }}
</h2>
<item-rows
@@ -67,6 +66,7 @@
:price-type="ctx.item.currency"
:empty-item="false"
:show-popover="Boolean(ctx.item.text)"
@click="selectItem(ctx.item)"
/>
</template>
</item-rows>
@@ -190,6 +190,9 @@ export default {
return category.items.filter(item => !searchBy
|| item.text.toLowerCase().includes(searchBy));
},
selectItem (item) {
this.$root.$emit('buyModal::showItem', item);
},
},
};
</script>

2
website/client/src/components/shops/shopItem.vue
View File

@@ -193,6 +193,7 @@
font-size: 12px;
font-weight: bold;
line-height: 1.33;
margin-bottom: 1px;
&.gems {
color: $green-1;
@@ -367,6 +368,7 @@ export default {
this.$emit('click', {});
},
blur () {
if (!this.$refs?.popover) return;
this.$refs.popover.$emit('enable');
},
getPrice () {

8
website/client/src/components/ui/itemRows.vue
View File

@@ -22,20 +22,12 @@
:show-all="showAll"
@click="toggleItemsToShow()"
/>
<div
v-else
class="fill-height"
></div>
</div>
</template>
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
.fill-height {
height: 38px; // button + margin + padding
}
.item-rows {
margin-right: -1.5rem;
}

2
website/client/src/components/ui/showMoreButton.vue
View File

@@ -1,6 +1,6 @@
<template>
<button
class="btn btn-flat btn-show-more mb-4"
class="btn btn-flat btn-show-more mt-2"
@click="$emit('click')"
>
<span class="button-text">

2
website/client/src/mixins/avatarEditUtilities.js
View File

@@ -9,7 +9,7 @@ import appearanceSets from '@/../../common/script/content/appearance/sets';
import { userStateMixin } from './userState';
export const avatarEditorUtilies = { // eslint-disable-line import/prefer-default-export
export const avatarEditorUtilities = { // eslint-disable-line import/prefer-default-export
mixins: [userStateMixin],
data () {
return {

2
website/common/script/libs/shops.js
View File

@@ -549,7 +549,7 @@ shops.getCustomizationsShopCategories = function getCustomizationsShopCategories
const officialPinnedItems = getOfficialPinnedItems();
const backgroundsCategory = {
identifier: 'backgrounds',
identifier: 'background',
text: i18n.t('backgrounds', language),
};
backgroundsCategory.items = values(content.backgroundsFlat)