sudoxreboot/habitica-self-host
1
0
Fork 0
mirror of https://github.com/sudoxnym/habitica-self-host.git synced 2026-07-13 17:52:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Client/stable fixes - part 1 (#8840)

Browse source 
* fixes: show ten pets in a row - show pet / no feeding progress if mount already owned

* fixes: disabled filter instead of hiding them

* fixes: don't hide special pets - same item style for mounts

* fixes: avatar changes of pet / mount

* fixes: unfocus first dropdown-item by css

* fixes: unfocus first dropdown-item by css (remove :focus style)- added "What does my pet like to eat?" popover
This commit is contained in:
negue 2017-07-01 17:46:24 +02:00 committed by Matteo Pagliazzi
parent 548cc2ceb0
commit 53c610236b
6 changed files with 129 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
website/client/assets/scss/dropdown.scss
View file

@ -38,9 +38,10 @@
&:focus {
outline: none;
background-color: inherit;
}
&:active, &:hover, &:focus, &.active {
&:active, &:hover, &.active {
background-color: rgba(#d5c8ff, 0.32);
color: $purple-200;
}

6
website/client/components/avatar.vue
View file

@ -1,7 +1,7 @@
<template lang="pug">
.avatar(:style="{width, height, paddingTop}", :class="backgroundClass")
.character-sprites
template(v-if="!avatarOnly" v-once)
template(v-if="!avatarOnly")
// Mount Body
span(v-if="member.items.currentMount", :class="'Mount_Body_' + member.items.currentMount")
@ -35,7 +35,7 @@
// Resting
span.zzz(v-if="member.preferences.sleep")
template(v-if="!avatarOnly" v-once)
template(v-if="!avatarOnly")
// Mount Head
span(v-if="member.items.currentMount", :class="'Mount_Head_' + member.items.currentMount")
// Pet
@ -168,4 +168,4 @@ export default {
},
},
};
</script>
</script>

91
website/client/components/inventory/stable/index.vue
View file

@ -21,22 +21,28 @@
.form-group
.form-check(
v-for="petGroup in petGroups",
v-if="viewOptions[petGroup.key].animalCount != 0",
:key="petGroup.key"
)
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="viewOptions[petGroup.key].selected")
input.custom-control-input(
type="checkbox",
v-model="viewOptions[petGroup.key].selected",
:disabled="viewOptions[petGroup.key].animalCount == 0"
)
span.custom-control-indicator
span.custom-control-description(v-once) {{ petGroup.label }}
h3(v-once) {{ $t('mounts') }}
.form-group
.form-check(
v-for="mountGroup in mountGroups",
v-if="viewOptions[mountGroup.key].animalCount != 0",
:key="mountGroup.key"
)
label.custom-control.custom-checkbox
input.custom-control-input(type="checkbox", v-model="viewOptions[mountGroup.key].selected")
input.custom-control-input(
type="checkbox",
v-model="viewOptions[mountGroup.key].selected",
:disabled="viewOptions[mountGroup.key].animalCount == 0"
)
span.custom-control-indicator
span.custom-control-description(v-once) {{ mountGroup.label }}
@ -81,6 +87,7 @@
v-drag.drop.food="pet.key",
@dragover="onDragOver($event, pet)",
@dropped="onDrop($event, pet)",
:class="pet.isLastInRow ? 'last' : ''"
)
petItem(
:item="pet",
@ -128,12 +135,14 @@
h4(v-if="viewOptions[mountGroup.key].animalCount != 0") {{ mountGroup.label }}
div.items
item(
mountItem(
v-for="mount in mounts(mountGroup, viewOptions[mountGroup.key].open, hideMissing, selectedSortBy, searchTextThrottled, availableContentWidth)",
:item="mount",
:itemContentClass="mount.isOwned() ? ('Mount_Icon_' + mount.key) : 'PixelPaw greyedOut'",
:itemContentClass="mount.isOwned() ? ('Mount_Icon_' + mount.key) : 'PixelPaw GreyedOut'",
:key="mount.key",
:popoverPosition="'top'"
:popoverPosition="'top'",
:emptyItem="!mount.isOwned()",
:showPopover="mount.isOwned()",
)
span(slot="popoverContent")
h4.popover-content-title {{ mount.name }}
@ -168,13 +177,15 @@
) {{ drawerTabs[1].label }}
b-popover(
:triggers="['hover']",
:triggers="['click']",
:placement="'top'"
)
span(slot="content")
.popover-content-text Test Popover
.popover-content-text(v-html="$t('petLikeToEatText')", v-once)
div.float-right What does my pet like to eat?
div.float-right(v-once)
| {{ $t('petLikeToEat') + ' ' }}
.svg-icon(v-html="icons.information")
drawer-slider(
@ -207,6 +218,10 @@
@import '~client/assets/scss/colors.scss';
.standard-page .clearfix .float-right {
margin-right: 24px;
}
.inventory-item-container {
padding: 20px;
border: 1px solid;
@ -267,6 +282,7 @@
.standard-page {
flex: 1;
padding-right:0;
}
.drawer-container {
@ -320,6 +336,19 @@
background-color: $purple-50;
opacity: 0.9;
}
.last {
margin-right: 0 !important;
}
.no-focus:focus {
background-color: inherit;
color: inherit;
}
.popover-content-text {
margin-bottom: 0;
}
</style>
<script>
@ -337,9 +366,11 @@
import _drop from 'lodash/drop';
import _flatMap from 'lodash/flatMap';
import _throttle from 'lodash/throttle';
import _last from 'lodash/last';
import Item from '../item';
import PetItem from './petItem';
import MountItem from './mountItem.vue';
import FoodItem from './foodItem';
import Drawer from 'client/components/inventory/drawer';
import toggleSwitch from 'client/components/ui/toggleSwitch';
@ -350,6 +381,8 @@
import ResizeDirective from 'client/directives/resize.directive';
import DragDropDirective from 'client/directives/dragdrop.directive';
import information from 'assets/svg/information.svg';
// TODO Normalize special pets and mounts
// import Store from 'client/store';
// import deepFreeze from 'client/libs/deepFreeze';
@ -360,6 +393,7 @@
PetItem,
Item,
FoodItem,
MountItem,
Drawer,
bDropdown,
bDropdownItem,
@ -391,6 +425,10 @@
'sortByHatchable',
],
icons: Object.freeze({
information,
}),
selectedDrawerTab: 0,
availableContentWidth: 0,
};
@ -443,7 +481,6 @@
petSource: {
special: this.content.specialPets,
},
alwaysHideMissing: true,
},
];
@ -490,7 +527,6 @@
petSource: {
special: this.content.specialMounts,
},
alwaysHideMissing: true,
},
];
@ -547,9 +583,15 @@
key: specialKey,
eggKey,
potionKey,
pet: this.content[`${type}Info`][specialKey].text(),
name: this.content[`${type}Info`][specialKey].text(),
isOwned () {
return [`${type}s`][this.key] > 0;
return userItems[`${type}s`][this.key] > 0;
},
mountOwned () {
return userItems.mounts[this.key] > 0;
},
isAllowedToFeed () {
return type === 'pet' && !this.mountOwned();
},
isHatchable () {
return false;
@ -574,6 +616,12 @@
isOwned () {
return userItems[`${type}s`][animalKey] > 0;
},
mountOwned () {
return userItems.mounts[this.key] > 0;
},
isAllowedToFeed () {
return type === 'pet' && !this.mountOwned();
},
isHatchable () {
return userItems.eggs[egg.key] > 0 && userItems.hatchingPotions[potion.key] > 0;
},
@ -594,7 +642,7 @@
let withProgress = isPetList && animalGroup.key !== 'specialPets';
// 1. Filter
if (hideMissing || animalGroup.alwaysHideMissing) {
if (hideMissing) {
animals = _filter(animals, (a) => {
return a.isOwned();
});
@ -630,7 +678,7 @@
let animalRows = [];
let itemsPerRow = Math.floor(availableSpace / (94 + 24));
let itemsPerRow = Math.floor(availableSpace / (94 + 20));
let rowsToShow = isOpen ? Math.ceil(animals.length / itemsPerRow) : 1;
@ -647,6 +695,11 @@
};
}) : row;
let lastRowItem = _last(rowWithProgressData);
if (lastRowItem) {
lastRowItem.isLastInRow = true;
}
animalRows.push(...rowWithProgressData);
}
@ -679,6 +732,10 @@
return `Pet Pet-${pet.key}`;
}
if (pet.mountOwned()) {
return `GreyedOut Pet Pet-${pet.key}`;
}
if (pet.isHatchable()) {
return 'PixelPaw';
}
@ -708,7 +765,7 @@
},
onDragOver (ev, pet) {
if (this.userItems.mounts[pet.key]) {
if (!pet.isAllowedToFeed()) {
ev.dropable = false;
}
},

45
website/client/components/inventory/stable/mountItem.vue Normal file
View file

@ -0,0 +1,45 @@
<template lang="pug">
b-popover(
:triggers="[showPopover?'hover':'']",
:placement="popoverPosition",
)
span(slot="content")
slot(name="popoverContent", :item="item")
.item-wrapper
.item(
:class="{'item-empty': emptyItem}",
)
slot(name="itemBadge", :item="item")
span.item-content(:class="itemContentClass")
</template>
<script>
import bPopover from 'bootstrap-vue/lib/components/popover';
export default {
components: {
bPopover,
},
props: {
item: {
type: Object,
},
itemContentClass: {
type: String,
},
emptyItem: {
type: Boolean,
default: false,
},
popoverPosition: {
type: String,
default: 'bottom',
},
showPopover: {
type: Boolean,
default: true,
},
},
};
</script>

8
website/client/components/inventory/stable/petItem.vue
View file

@ -15,7 +15,7 @@ b-popover(
)
slot(name="itemBadge", :item="item")
span.item-content(:class="itemContentClass")
span.pet-progress-background(v-if="progress > 0")
span.pet-progress-background(v-if="item.isAllowedToFeed() && progress > 0")
div.pet-progress-bar(v-bind:style="{width: 100 * progress/50 + '%' }")
span.pet-progress-background(v-if="holdProgress > 0")
div.pet-progress-bar.hold(v-bind:style="{width: 100 * holdProgress/5 + '%' }")
@ -44,7 +44,6 @@ b-popover(
<script>
import bPopover from 'bootstrap-vue/lib/components/popover';
import {mapState} from 'client/libs/store';
export default {
components: {
@ -82,11 +81,6 @@ b-popover(
holdProgress: -1,
};
},
computed: {
...mapState({
ATTRIBUTES: 'constants.ATTRIBUTES',
}),
},
methods: {
holdStart () {
let pet = this.item;

7
website/common/locales/en/newClient.json
View file

@ -35,9 +35,8 @@
"groupBy2": "Group By",
"quantity": "Quantity",
"AZ": "A-Z",
"costumeDisabled": "You have disabled your costume.",
"filterByStandard": "Standard",
"filterByMagicPotion": "Magin Potion",
"filterByMagicPotion": "Magic Potion",
"filterByQuest": "Quest",
"standard": "Standard",
"sortByColor": "Color",
@ -127,5 +126,7 @@
"noFoodAvailable": "You don't have any food.",
"gotIt": "Got it!",
"welcomeStable": "Welcome to the Stable!",
"welcomeStableText": "I'm Matt, the Beast Master. Starting at level 3, you can hatch Pets from Eggs by using Potions you find! When you hatch a Pet from your Inventory, it will appear here! Click a Pet's to add it to your avatar. Feed them with the Food you find in your Inventory after level 3, and they'll grow into hardy Mounts."
"welcomeStableText": "I'm Matt, the Beast Master. Starting at level 3, you can hatch Pets from Eggs by using Potions you find! When you hatch a Pet from your Inventory, it will appear here! Click a Pet's to add it to your avatar. Feed them with the Food you find in your Inventory after level 3, and they'll grow into hardy Mounts.",
"petLikeToEatText": "Pets will grow no matter what you feed them, but they'll grow faster if you feed them the one food that they like best. Experiment to find out the pattern, or see the answers here: <br/> <a href=\"http://habitica.wikia.com/wiki/Food_Preferences\" target=\"_blank\">http://habitica.wikia.com/wiki/Food_Preferences</a>",
"petLikeToEat": "What does my pet like to eat?"
}