Client/item content (#8738)

* extract item popover-content as component

# Conflicts:
#	website/client/components/inventory/item.vue

* extract item-content as slot

* scoped context to pass the item

* itemContentClass instead of itemContent-slot

website/client/assets/scss/item.scss

@@ -86,4 +86,4 @@
 
 .item:hover > .badge {
   display: block;
-}
+}

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,

website/client/components/inventory/equipmentAttributesPopover.vue

@@ -0,0 +1,25 @@
+<template lang="pug">
+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]}` }}
+</template>
+
+<script>
+  import { mapState } from 'client/libs/store';
+
+  export default {
+    props: {
+      item: {
+        type: Object,
+      },
+    },
+    computed: {
+      ...mapState({
+        ATTRIBUTES: 'constants.ATTRIBUTES',
+      }),
+    },
+  };
+</script>

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',