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 @@
+
+div
+ h4.popover-content-title(v-once) {{ item.text() }}
+ .popover-content-text(v-once) {{ item.notes() }}
+ .popover-content-attr(v-for="attr in ATTRIBUTES", :key="attr", v-once)
+ span.popover-content-attr-key(v-once) {{ `${$t(attr)}: ` }}
+ span.popover-content-attr-val(v-once) {{ `+${item[attr]}` }}
+
+
+
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',