Kai/habitica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'release' into develop

Browse Source
This commit is contained in:
Sabe Jones
2021-04-16 11:13:19 -05:00
parent 3460e45ba6 e1521f9456
commit 7b4b4240cb
20 changed files with 405 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/client/src/components/shops/buyModal.vue
+6 -33
View File
@@ -161,16 +161,10 @@
</button>
</div>
</div>
<div
<countdown-banner
v-if="item.event && item.owned == null"
class="limitedTime"
>
<span
class="svg-icon inline icon-16 clock-icon"
v-html="icons.clock"
></span>
<span class="limitedString">{{ limitedString }}</span>
</div>
:endDate = "endDate"
/>
<div
v-if="item.key === 'rebirth_orb' && item.value > 0 && user.stats.lvl >= 100"
class="free-rebirth d-flex align-items-center"
@@ -324,27 +318,6 @@
opacity: 0.55;
}
.limitedTime {
height: 32px;
background-color: $purple-300;
width: calc(100% + 30px);
margin: 0 -15px; // the modal content has its own padding
font-size: 12px;
line-height: 1.33;
text-align: center;
color: $white;
display: flex;
align-items: center;
justify-content: center;
.limitedString {
height: 16px;
margin-left: 8px;
}
}
.attributesGrid {
margin-top: 8px;
border-radius: 2px;
@@ -399,6 +372,7 @@ import svgWhiteClock from '@/assets/svg/clock-white.svg';
import BalanceInfo from './balanceInfo.vue';
import PinBadge from '@/components/ui/pinBadge';
import CountdownBanner from './countdownBanner';
import currencyMixin from './_currencyMixin';
import notifications from '@/mixins/notifications';
import buyMixin from '@/mixins/buy';
@@ -432,6 +406,7 @@ export default {
Item,
Avatar,
PinBadge,
CountdownBanner,
},
mixins: [buyMixin, currencyMixin, notifications, numberInvalid, spellsMixin],
props: {
@@ -462,6 +437,7 @@ export default {
selectedAmountToBuy: 1,
isPinned: false,
endDate: seasonalShopConfig.dateRange.end,
};
},
computed: {
@@ -494,9 +470,6 @@ export default {
}
return this.item.notes;
},
limitedString () {
return this.$t('limitedOffer', { date: moment(seasonalShopConfig.dateRange.end).format('LL') });
},
gemsLeft () {
if (!this.user.purchased.plan) return 0;
return planGemLimits.convCap
website/client/src/components/shops/countdownBanner.vue
+105
View File
@@ -0,0 +1,105 @@
<template>
<div
class="limitedTime"
:class="availabilityClass"
>
<span
class="svg-icon inline icon-16"
v-html="availabilityClass === 'expired' ? icons.clockWhite : icons.clock"
></span>
<span class="limitedString"> {{ limitedString }} </span>
</div>
</template>
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
.limitedTime {
height: 32px;
width: calc(100% + 30px);
margin: 0 -15px; // the modal content has its own padding
font-size: 12px;
line-height: 1.33;
text-align: center;
color: $white;
display: flex;
align-items: center;
justify-content: center;
.limitedString {
height: 16px;
margin-left: 8px;
}
}
.available {
background-color: $purple-300;
}
.expired {
background-color: $gray-200;
}
</style>
<script>
import moment from 'moment';
import svgClock from '@/assets/svg/clock.svg';
import clockWhite from '@/assets/svg/clock-white.svg';
export default {
props: {
endDate: {
type: Object, // moment
},
},
data () {
return {
icons: Object.freeze({
clock: svgClock,
clockWhite,
}),
timer: '',
limitedString: '',
availabilityClass: 'available',
};
},
mounted () {
this.countdownString();
this.timer = setInterval(this.countdownString, 1000);
},
methods: {
countdownString () {
const diffDuration = moment.duration(moment(this.endDate).diff(moment()));
if (moment(this.endDate).isBefore()) {
this.limitedString = this.$t('noLongerAvailable');
this.availabilityClass = 'expired';
this.cancelAutoUpdate();
} else if (diffDuration.days() > 0) {
this.limitedString = this.$t('limitedAvailabilityDays', {
days: diffDuration.days(),
hours: diffDuration.hours(),
minutes: diffDuration.minutes(),
});
} else if (diffDuration.asMinutes() > 2) {
this.limitedString = this.$t('limitedAvailabilityHours', {
hours: diffDuration.hours(),
minutes: diffDuration.minutes(),
});
} else {
this.limitedString = this.$t('limitedAvailabilityMinutes', {
minutes: diffDuration.minutes(),
seconds: diffDuration.seconds(),
});
}
},
cancelAutoUpdate () {
clearInterval(this.timer);
},
},
beforeDestroy () {
this.cancelAutoUpdate();
},
};
</script>
website/client/src/components/shops/market/categoryRow.vue
+39 -3
View File
@@ -48,6 +48,12 @@ export default {
},
mixins: [pinUtils],
props: ['hideLocked', 'hidePinned', 'searchBy', 'sortBy', 'category'],
data () {
return {
timer: '',
limitedString: '',
};
},
computed: {
...mapState({
content: 'content',
@@ -60,9 +66,6 @@ export default {
return planGemLimits.convCap
+ this.user.purchased.plan.consecutive.gemCapExtra - this.user.purchased.plan.gemsBought;
},
limitedString () {
return this.$t('limitedOffer', { date: moment(seasonalShopConfig.dateRange.end).format('LL') });
},
sortedMarketItems () {
let result = _map(this.category.items, e => ({
...e,
@@ -103,10 +106,43 @@ export default {
return result;
},
},
mounted () {
this.countdownString();
this.timer = setInterval(this.countdownString, 1000);
},
methods: {
itemSelected (item) {
this.$root.$emit('buyModal::showItem', item);
},
countdownString () {
const diffDuration = moment.duration(moment(seasonalShopConfig.dateRange.end).diff(moment()));
if (diffDuration.asSeconds() <= 0) {
this.limitedString = this.$t('noLongerAvailable');
} else if (diffDuration.days() > 0) {
this.limitedString = this.$t('limitedAvailabilityDays', {
days: diffDuration.days(),
hours: diffDuration.hours(),
minutes: diffDuration.minutes(),
});
} else if (diffDuration.asMinutes() > 2) {
this.limitedString = this.$t('limitedAvailabilityHours', {
hours: diffDuration.hours(),
minutes: diffDuration.minutes(),
});
} else {
this.limitedString = this.$t('limitedAvailabilityMinutes', {
minutes: diffDuration.minutes(),
seconds: diffDuration.seconds(),
});
}
},
cancelAutoUpdate () {
clearInterval(this.timer);
},
},
beforeDestroy () {
this.cancelAutoUpdate();
},
};
</script>
website/client/src/components/shops/quests/buyQuestModal.vue
+6 -34
View File
@@ -84,16 +84,10 @@
>
<questDialogDrops :item="item" />
</div>
<div
<countdown-banner
v-if="item.event"
class="limitedTime"
>
<span
class="svg-icon inline icon-16 clock-icon"
v-html="icons.clock"
></span>
<span class="limitedString">{{ limitedString }}</span>
</div>
:endDate="endDate"
/>
<div
slot="modal-footer"
class="clearfix"
@@ -208,27 +202,6 @@
display: block;
}
.limitedTime {
height: 32px;
background-color: $purple-300;
width: calc(100% + 30px);
margin: 0 -15px; // the modal content has its own padding
font-size: 12px;
line-height: 1.33;
text-align: center;
color: $white;
display: flex;
align-items: center;
justify-content: center;
.limitedString {
height: 16px;
margin-left: 8px;
}
}
.notEnough {
pointer-events: none;
opacity: 0.55;
@@ -268,7 +241,6 @@
</style>
<script>
import moment from 'moment';
import { mapState } from '@/libs/store';
import seasonalShopConfig from '@/../../common/script/libs/shops-seasonal.config';
@@ -285,6 +257,7 @@ import notifications from '@/mixins/notifications';
import buyMixin from '@/mixins/buy';
import numberInvalid from '@/mixins/numberInvalid';
import PinBadge from '@/components/ui/pinBadge';
import CountdownBanner from '../countdownBanner';
import questDialogDrops from './questDialogDrops';
import questDialogContent from './questDialogContent';
@@ -295,6 +268,7 @@ export default {
PinBadge,
questDialogDrops,
questDialogContent,
CountdownBanner,
},
mixins: [buyMixin, currencyMixin, notifications, numberInvalid],
props: {
@@ -321,6 +295,7 @@ export default {
isPinned: false,
selectedAmountToBuy: 1,
endDate: seasonalShopConfig.dateRange.end,
};
},
computed: {
@@ -344,9 +319,6 @@ export default {
if (this.priceType === 'hourglasses') return this.icons.hourglass;
return this.icons.gem;
},
limitedString () {
return this.$t('limitedOffer', { date: moment(seasonalShopConfig.dateRange.end).format('LL') });
},
},
watch: {
item: function itemChanged () {
website/client/src/components/shops/quests/questInfo.vue
+36 -8
View File
@@ -36,7 +36,7 @@
</dd>
</div>
</div>
<div v-if="quest.event && popoverVersion">
<div v-if="quest.event">
{{ limitedString }}
</div>
</div>
@@ -131,10 +131,6 @@ export default {
quest: {
type: Object,
},
popoverVersion: {
type: Boolean,
default: false,
},
},
data () {
return {
@@ -143,6 +139,8 @@ export default {
starHalf: svgStarHalf,
starEmpty: svgStarEmpty,
}),
timer: '',
limitedString: '',
};
},
computed: {
@@ -153,9 +151,10 @@ export default {
return 1;
},
limitedString () {
return this.$t('limitedOffer', { date: moment(seasonalShopConfig.dateRange.end).format('LL') });
},
},
mounted () {
this.countdownString();
this.timer = setInterval(this.countdownString, 1000);
},
methods: {
stars () {
@@ -182,6 +181,35 @@ export default {
}
return collect.text;
},
countdownString () {
const diffDuration = moment.duration(moment(seasonalShopConfig.dateRange.end).diff(moment()));
if (diffDuration.asSeconds() <= 0) {
this.limitedString = this.$t('noLongerAvailable');
} else if (diffDuration.days() > 0) {
this.limitedString = this.$t('limitedAvailabilityDays', {
days: diffDuration.days(),
hours: diffDuration.hours(),
minutes: diffDuration.minutes(),
});
} else if (diffDuration.asMinutes() > 2) {
this.limitedString = this.$t('limitedAvailabilityHours', {
hours: diffDuration.hours(),
minutes: diffDuration.minutes(),
});
} else {
this.limitedString = this.$t('limitedAvailabilityMinutes', {
minutes: diffDuration.minutes(),
seconds: diffDuration.seconds(),
});
}
},
cancelAutoUpdate () {
clearInterval(this.timer);
},
},
beforeDestroy () {
this.cancelAutoUpdate();
},
};
</script>
website/client/src/components/shops/shopItem.vue
+40 -9
View File
@@ -107,7 +107,7 @@
</div>
</div>
<div
v-if="item.event"
v-if="item.event && item.purchaseType !== 'quests'"
:class="item.purchaseType === 'gear' ? 'mt-4' : 'mt-2'"
>
{{ limitedString }}
@@ -291,16 +291,18 @@ export default {
},
},
data () {
return Object.freeze({
return {
itemId: uuid(),
icons: {
icons: Object.freeze({
gems: svgGem,
gold: svgGold,
lock: svgLock,
hourglasses: svgHourglasses,
clock: svgClock,
},
});
}),
timer: '',
limitedString: '',
};
},
computed: {
showNotes () {
@@ -314,10 +316,10 @@ export default {
}
return 'gold';
},
limitedString () {
return this.item.owned === false ? ''
: this.$t('limitedOffer', { date: moment(seasonalShopConfig.dateRange.end).format('LL') });
},
},
mounted () {
this.countdownString();
this.timer = setInterval(this.countdownString, 1000);
},
methods: {
click () {
@@ -338,6 +340,35 @@ export default {
locked: this.item.locked,
};
},
countdownString () {
const diffDuration = moment.duration(moment(seasonalShopConfig.dateRange.end).diff(moment()));
if (diffDuration.asSeconds() <= 0) {
this.limitedString = this.$t('noLongerAvailable');
} else if (diffDuration.days() > 0) {
this.limitedString = this.$t('limitedAvailabilityDays', {
days: diffDuration.days(),
hours: diffDuration.hours(),
minutes: diffDuration.minutes(),
});
} else if (diffDuration.asMinutes() > 2) {
this.limitedString = this.$t('limitedAvailabilityHours', {
hours: diffDuration.hours(),
minutes: diffDuration.minutes(),
});
} else {
this.limitedString = this.$t('limitedAvailabilityMinutes', {
minutes: diffDuration.minutes(),
seconds: diffDuration.seconds(),
});
}
},
cancelAutoUpdate () {
clearInterval(this.timer);
},
},
beforeDestroy () {
this.cancelAutoUpdate();
},
};
</script>