sep 25 fixes (#9075)

* on class change: remove owned gear from pinned items

* move dragging item-info closer to the cursor (food / hatching potion)

* remove v-once at attributesPopover (if the parent component is recycled the old data stays active)

* prevent popover to show data of an item that was removed - but the popover stays opened

website/client/components/inventory/equipment/attributesPopover.vue

@@ -2,7 +2,7 @@
 div
   h4.popover-content-title {{ itemText }}
   .popover-content-text {{ itemNotes }}
-  .popover-content-attr(v-for="attr in ATTRIBUTES", :key="attr", v-once)
+  .popover-content-attr(v-for="attr in ATTRIBUTES", :key="attr")
     span.popover-content-attr-key {{ `${$t(attr)}: ` }}
     span.popover-content-attr-val {{ `+${item[attr]}` }}
 </template>

website/client/components/inventory/equipment/index.vue

@@ -68,12 +68,13 @@
       .items.items-one-line(slot="drawer-slider")
         item.pointer(
           v-for="(label, group) in gearTypesToStrings",
-          :key="group",
+          :key="flatGear[activeItems[group]] ? flatGear[activeItems[group]].key : group",
           :item="flatGear[activeItems[group]]",
           :itemContentClass="flatGear[activeItems[group]] ? 'shop_' + flatGear[activeItems[group]].key : null",
           :emptyItem="!flatGear[activeItems[group]] || flatGear[activeItems[group]].key.indexOf('_base_0') !== -1",
           :label="label",
           :popoverPosition="'top'",
+          :showPopover="flatGear[activeItems[group]] && Boolean(flatGear[activeItems[group]].text)",
           @click="equipItem(flatGear[activeItems[group]])",
         )
           template(slot="popoverContent", scope="context")

website/client/components/inventory/items/index.vue

@@ -201,6 +201,7 @@ import QuestInfo from '../../shops/quests/questInfo.vue';
 import moment from 'moment';
 
 const allowedSpecialItems = ['snowball', 'spookySparkles', 'shinySeed', 'seafoam'];
+
 import notifications from 'client/mixins/notifications';
 import DragDropDirective from 'client/directives/dragdrop.directive';
 import MouseMoveDirective from 'client/directives/mouseposition.directive';
@@ -444,8 +445,9 @@ export default {
 
     mouseMoved ($event) {
       if (this.potionClickMode) {
-        this.$refs.clickPotionInfo.style.left = `${$event.x + 20}px`;
-        this.$refs.clickPotionInfo.style.top = `${$event.y + 20}px`;
+        // dragging potioninfo is 180px wide (90 would be centered)
+        this.$refs.clickPotionInfo.style.left = `${$event.x - 70}px`;
+        this.$refs.clickPotionInfo.style.top = `${$event.y}px`;
       } else {
         lastMouseMoveEvent = $event;
       }

website/client/components/inventory/stable/index.vue

@@ -451,7 +451,7 @@
 
     .popover {
       position: inherit;
-      width: 100px;
+      width: 180px;
     }
 
     .popover-content {
@@ -971,8 +971,8 @@
 
       mouseMoved ($event) {
         if (this.foodClickMode) {
-          this.$refs.clickFoodInfo.style.left = `${$event.x + 20}px`;
-          this.$refs.clickFoodInfo.style.top = `${$event.y + 20}px`;
+          this.$refs.clickFoodInfo.style.left = `${$event.x - 70}px`;
+          this.$refs.clickFoodInfo.style.top = `${$event.y}px`;
         } else {
           lastMouseMoveEvent = $event;
         }