Show EquipGearModal on Item-Click - misc fixes

website/client/assets/scss/modal.scss

@@ -22,7 +22,6 @@
     line-height: 1.2;
     text-align: center;
     color: $gray-50;
-    display: inline-block;
   }
 
   .text {

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

@@ -0,0 +1,172 @@
+<template lang="pug">
+  b-modal#equipgear-modal(
+    :visible="true",
+    v-if="item != null",
+    :hide-header="true",
+    @change="onChange($event)"
+  )
+    div.close
+      span.svg-icon.inline.icon-10(aria-hidden="true", v-html="icons.close", @click="hideDialog()")
+
+    div.content(v-if="item != null")
+
+      div.inner-content
+        avatar(
+          :member="user",
+          :avatarOnly="true",
+          :withBackground="true",
+          :overrideAvatarGear="memberOverrideAvatarGear(item)"
+        )
+
+        h4.title {{ itemText }}
+        div.text(v-html="itemNotes")
+
+        equipmentAttributesGrid.bordered(
+          :item="item",
+          v-if="attributesGridVisible"
+        )
+
+        button.btn.btn-primary(@click="equipItem()") {{ $t(isEquipped ? 'unequip' : 'equip') }}
+
+    div.clearfix(slot="modal-footer")
+
+
+</template>
+<style lang="scss">
+
+  @import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/modal.scss';
+
+  #equipgear-modal {
+    @include centeredModal();
+
+    .content {
+      text-align: center;
+    }
+
+    .item-wrapper {
+      margin-bottom: 0 !important;
+    }
+
+    .inner-content {
+      margin: 33px auto auto;
+      width: 282px;
+    }
+
+    .bordered {
+      border-radius: 2px;
+      background-color: #f9f9f9;
+      margin-bottom: 24px;
+      padding: 24px 24px 10px;
+    }
+
+    .avatar {
+      display: inline-block;
+      cursor: inherit;
+    }
+
+    .content-text {
+      font-family: 'Roboto', sans-serif;
+      font-size: 14px;
+      font-weight: normal;
+      line-height: 1.43;
+
+      width: 400px;
+    }
+
+    button.btn.btn-primary {
+      margin-top: 24px;
+      margin-bottom: 24px;
+    }
+  }
+</style>
+
+<script>
+  import { mapState } from 'client/libs/store';
+  import bModal from 'bootstrap-vue/lib/components/modal';
+
+  import svgClose from 'assets/svg/close.svg';
+
+  import Avatar from 'client/components/avatar';
+  import EquipmentAttributesGrid from 'client/components/shops/market/equipmentAttributesGrid.vue';
+
+  export default {
+    components: {
+      bModal,
+      Avatar,
+      EquipmentAttributesGrid,
+    },
+    data () {
+      return {
+        icons: Object.freeze({
+          close: svgClose,
+        }),
+      };
+    },
+    computed: {
+      ...mapState({
+        content: 'content',
+        user: 'user.data',
+      }),
+      itemText () {
+        if (this.item.text instanceof Function) {
+          return this.item.text();
+        } else {
+          return this.item.text;
+        }
+      },
+      itemNotes () {
+        if (this.item.notes instanceof Function) {
+          return this.item.notes();
+        } else {
+          return this.item.notes;
+        }
+      },
+      attributesGridVisible () {
+        if (this.costumeMode) {
+          return false;
+        }
+
+        if (this.item.str === 0
+          && this.item.int === 0
+          && this.item.per === 0
+          && this.item.con === 0) {
+          return false;
+        }
+
+        return true;
+      }
+    },
+    methods: {
+      onChange ($event) {
+        this.$emit('change', $event);
+      },
+      equipItem () {
+        this.$emit('equipItem', this.item);
+        this.hideDialog();
+      },
+      hideDialog () {
+        this.$root.$emit('hide::modal', 'equipgear-modal');
+      },
+      memberOverrideAvatarGear (gear) {
+        return {
+          [gear.type]: gear.key,
+        };
+      },
+    },
+    props: {
+      item: {
+        type: Object,
+      },
+      priceType: {
+        type: String,
+      },
+      costumeMode: {
+        type: Boolean,
+      },
+      isEquipped: {
+        type: Boolean,
+      },
+    },
+  };
+</script>

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

@@ -88,6 +88,7 @@
     )
       h2
        | {{ group.label }}
+       |
        span.badge.badge-pill.badge-default {{items[group.key].length}}
 
       itemRows(
@@ -102,22 +103,25 @@
             :itemContentClass="'shop_' + context.item.key",
             :emptyItem="!context.item || context.item.key.indexOf('_base_0') !== -1",
             :key="context.item.key",
+            @click="openEquipDialog(context.item)"
           )
             template(slot="itemBadge", scope="context")
               starBadge(
                 :selected="activeItems[context.item.type] === context.item.key",
                 :show="!costume || user.preferences.costume",
-                @click="equip(context.item)",
+                @click="openEquipDialog(context.item)",
               )
             template(slot="popoverContent", scope="context")
               equipmentAttributesPopover(:item="context.item")
-</template>
 
-<style lang="scss" scoped>
-h2 {
-  margin-top: 24px;
-}
-</style>
+  equipGearModal(
+    :item="gearToEquip",
+    @equipItem="equipItem($event)",
+    @change="changeModalState($event)",
+    :costumeMode="costume",
+    :isEquipped="gearToEquip == null ? false : activeItems[gearToEquip.type] === gearToEquip.key"
+  )
+</template>
 
 <script>
 import { mapState } from 'client/libs/store';
@@ -138,6 +142,8 @@ import Drawer from 'client/components/ui/drawer';
 
 import i18n from 'common/script/i18n';
 
+import EquipGearModal from './equipGearModal';
+
 export default {
   name: 'Equipment',
   components: {
@@ -150,6 +156,7 @@ export default {
     bDropdownItem,
     bPopover,
     toggleSwitch,
+    EquipGearModal,
   },
   data () {
     return {
@@ -178,6 +185,7 @@ export default {
         armoire: i18n.t('armoireText'),
       }),
       viewOptions: {},
+      gearToEquip: null,
     };
   },
   watch: {
@@ -186,8 +194,17 @@ export default {
     }, 250),
   },
   methods: {
-    equip (item) {
+    openEquipDialog (item) {
+      this.gearToEquip = item;
+    },
+    changeModalState (visible) {
+      if (!visible) {
+        this.gearToEquip = null;
+      }
+    },
+    equipItem (item) {
       this.$store.dispatch('common:equip', {key: item.key, type: this.costume ? 'costume' : 'equipped'});
+      this.gearToEquip = null;
     },
     changeDrawerPreference (newVal) {
       this.$store.dispatch('user:set', {

website/client/components/ui/drawer.vue

@@ -92,7 +92,7 @@
 }
 
 .drawer-slider {
-  padding: 12px 0 0 0;
+  padding: 12px 0 0 8px;
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;

website/common/locales/en/newClient.json

@@ -274,5 +274,7 @@
   "self_improvement": "Self-Improvement",
   "spirituality": "Spirituality",
   "time_management": "Time-Management + Accountability",
-  "recovery_support_groups": "Recovery + Support Groups"
+  "recovery_support_groups": "Recovery + Support Groups",
+  "equip": "Equip",
+  "unequip": "Unequip"
 }