diff --git a/website/client/assets/scss/item.scss b/website/client/assets/scss/item.scss index fed6a06ffe..39baee16e1 100644 --- a/website/client/assets/scss/item.scss +++ b/website/client/assets/scss/item.scss @@ -86,4 +86,4 @@ .item:hover > .badge { display: block; -} \ No newline at end of file +} diff --git a/website/client/components/inventory/equipment.vue b/website/client/components/inventory/equipment.vue index 7c055f612b..fa0785048b 100644 --- a/website/client/components/inventory/equipment.vue +++ b/website/client/components/inventory/equipment.vue @@ -30,7 +30,7 @@ b-dropdown-item(@click="groupBy = 'class'", :class="{'dropdown-item-active': groupBy === 'class'}") {{ $t('class') }} drawer( - :title="$t('equipment')", + :title="$t('equipment')", :errorMessage="(costume && !user.preferences.costume) ? $t('costumeDisabled') : null", ) div(slot="drawer-header") @@ -65,12 +65,17 @@ v-for="(label, group) in gearTypesToStrings", :key="group", :item="flatGear[activeItems[group]]", + :itemContentClass="'shop_' + flatGear[activeItems[group]].key", + :showPopover="flatGear[activeItems[group]] && flatGear[activeItems[group]].key.indexOf('_base_0') === -1", :label="$t(label)", :selected="true", :popoverPosition="'top'", :starVisible="!costume || user.preferences.costume", @click="equip", ) + template(slot="popoverContent", scope="ctx") + equipmentAttributesPopover(:item="ctx.item") + div( v-for="group in itemsGroups", v-if="viewOptions[group.key].selected", @@ -86,11 +91,15 @@ v-for="(item, index) in items[group.key]", v-if="viewOptions[group.key].open || index < itemsPerLine", :item="item", + :itemContentClass="'shop_' + item.key", + :showPopover="item && item.key.indexOf('_base_0') === -1", :key="item.key", :selected="activeItems[item.type] === item.key", :starVisible="!costume || user.preferences.costume", @click="equip", ) + template(slot="popoverContent", scope="ctx") + equipmentAttributesPopover(:item="ctx.item") div(v-if="items[group.key].length === 0") p(v-once) {{ $t('noGearItemsOfType', { type: $t(group.label) }) }} a.btn.btn-show-more( @@ -117,11 +126,13 @@ import bPopover from 'bootstrap-vue/lib/components/popover'; import toggleSwitch from 'client/components/ui/toggleSwitch'; import Item from 'client/components/inventory/item'; +import EquipmentAttributesPopover from 'client/components/inventory/equipmentAttributesPopover'; import Drawer from 'client/components/inventory/drawer'; export default { components: { Item, + EquipmentAttributesPopover, Drawer, bDropdown, bDropdownItem, diff --git a/website/client/components/inventory/equipmentAttributesPopover.vue b/website/client/components/inventory/equipmentAttributesPopover.vue new file mode 100644 index 0000000000..e44a5d168e --- /dev/null +++ b/website/client/components/inventory/equipmentAttributesPopover.vue @@ -0,0 +1,25 @@ + + + diff --git a/website/client/components/inventory/item.vue b/website/client/components/inventory/item.vue index 51e51a0b67..eccae17dc6 100644 --- a/website/client/components/inventory/item.vue +++ b/website/client/components/inventory/item.vue @@ -2,14 +2,10 @@ b-popover( :triggers="['hover']", :placement="popoverPosition", - v-if="item && item.key.indexOf('_base_0') === -1", + v-if="showPopover", ) span(slot="content") - h4.popover-content-title {{ item.text() }} - .popover-content-text {{ item.notes() }} - .popover-content-attr(v-for="attr in ATTRIBUTES") - span.popover-content-attr-key {{ `${$t(attr)}: ` }} - span.popover-content-attr-val {{ `+${item[attr]}` }} + slot(name="popoverContent", :item="item") .item-wrapper .item @@ -18,7 +14,7 @@ b-popover( @click="click", v-if="starVisible" ) ★ - span.item-content(:class="'shop_' + item.key") + span.item-content(:class="itemContentClass") span.item-label(v-if="label") {{ label }} div(v-else) .item-wrapper @@ -40,6 +36,9 @@ export default { item: { type: Object, }, + itemContentClass: { + type: String + }, selected: { type: Boolean, }, @@ -49,6 +48,10 @@ export default { label: { type: String, }, + showPopover: { + type: Boolean, + default: true, + }, popoverPosition: { type: String, default: 'bottom',