[WIP] New Client - Shops/Market (#8884)

* initial market - routing - store - load market data * move drawer/drawerSlider / count/star badge to components/ui * filter market categories * shopItem with gem / gold * show count of purchable items * show count of purchable itemsshow drawer with currently owned items + DrawerHeaderTabs-Component * show featured gear * show Gear - filter by class - sort by (type, price, stats) - sort market items * Component: ItemRows - shows only the max items in one row (depending on the available width) * Sell Dialog + Balance Component * generic buy-dialog / attributes grid with highlight * buyItem - hide already owned gear * filter: hide locked/pinned - lock items if not enough gold * API: Sell multiple items * show avatar in buy-equipment-dialog with changed gear * market banner * misc fixes * filter by text * pin/unpin gear store actions * Sell API: amount as query-parameter * Update user.js * fixes * fix sell api amount test * add back stroke/fill currentColor * use scss variables
2017-07-27 19:41:23 +02:00
parent 18b04e713e
commit f72f71fd32
43 changed files with 1754 additions and 49 deletions
@@ -0,0 +1,33 @@
+<template lang="pug">
+span.badge.badge-pill.badge-item.badge-count(
+  v-if="show",
+) {{ count }}
+</template>
+
+<style lang="scss">
+@import '~client/assets/scss/colors.scss';
+
+.badge-count {
+  right: -9px;
+  color: $white;
+  background: $orange-100;
+  padding: 4.5px 6px;
+  min-width: 24px;
+  height: 24px;
+  box-shadow: 0 1px 1px 0 rgba($black, 0.12);
+}
+
+</style>
+
+<script>
+  export default {
+    props: {
+      show: {
+        type: Boolean,
+      },
+      count: {
+        type: Number,
+      },
+    },
+  };
+</script>
@@ -0,0 +1,165 @@
+<template lang="pug">
+.drawer-container
+  .drawer-title(@click="open = !open")
+    | {{title}}
+    .drawer-toggle-icon.svg-icon.icon-10(v-html="open ? icons.minimize : icons.expand", :class="{ closed: !open }")
+  transition(name="slide-up", @afterLeave="adjustPagePadding", @afterEnter="adjustPagePadding")
+    .drawer-content(v-show="open")
+      slot(name="drawer-header")
+      .drawer-slider
+        slot(name="drawer-slider")
+        div.message(v-if="errorMessage != null")
+          .content {{ errorMessage }}
+</template>
+
+<style lang="scss">
+@import '~client/assets/scss/colors.scss';
+
+.drawer-container {
+  z-index: 19;
+  position: fixed;
+  font-size: 12px;
+  font-weight: bold;
+  bottom: 0;
+  left: 19%;
+  right: 3%;
+  max-width: 80%;
+
+  @media screen and (min-width: 1241px) {
+    max-width: 968px;
+    // 16.67% is the width of the .col-2 sidebar
+    left: calc((100% + 16.67% - 968px) / 2);
+    right: 0%;
+  }
+}
+
+.drawer-toggle-icon {
+  float: right;
+  margin-right: 16px;
+  margin-top: 16px;
+
+  &.closed {
+    margin-top: 3px;
+  }
+}
+
+.drawer-title {
+  background-color: $gray-10;
+  box-shadow: 0 1px 2px 0 rgba($black, 0.2);
+  cursor: pointer;
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  text-align: center;
+  line-height: 1.67;
+  color: $white;
+  padding: 6px 0;
+}
+
+.drawer-content {
+  line-height: 1.33;
+  max-height: 300px;
+  background-color: $gray-50;
+  color: $gray-500;
+  box-shadow: 0 2px 16px 0 rgba($black, 0.3);
+  padding-top: 6px;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.drawer-tab {
+  &-container {
+    display: flex;
+    margin-left: 24px;
+
+    & > div {
+      flex: 1;
+    }
+  }
+
+  &-text {
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 1.67;
+    text-align: center;
+    color: $white;
+    border-bottom: 2px solid transparent;
+    padding: 0px 8px 8px 8px;
+
+    &-active {
+      border-color: $purple-400;
+    }
+  }
+}
+
+.drawer-slider {
+  padding: 12px 0 0 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+  position: relative;
+
+  & .message {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    top: calc(50% - 30px);
+    left: 24px;
+    right: 0;
+    position: absolute;
+
+    & .content {
+      background-color: rgba($gray-200, 0.5);
+      border-radius: 8px;
+      padding: 12px;
+    }
+  }
+}
+
+.slide-up-enter-active, .slide-up-leave-active {
+  transition-property: all;
+  transition-duration: 450ms;
+  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+}
+.slide-up-enter, .slide-up-leave-to {
+  max-height: 0;
+}
+</style>
+
+<script>
+import expandIcon from 'assets/svg/expand.svg';
+import minimizeIcon from 'assets/svg/minimize.svg';
+
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    errorMessage: {
+      type: String,
+    },
+  },
+  data () {
+    return {
+      open: true,
+      icons: Object.freeze({
+        expand: expandIcon,
+        minimize: minimizeIcon,
+      }),
+    };
+  },
+  methods: {
+    adjustPagePadding () {
+      let minPaddingBottom = 20;
+      let drawerHeight = this.$el.offsetHeight;
+      let standardPage = document.getElementsByClassName('standard-page')[0];
+      standardPage.style.paddingBottom = `${drawerHeight + minPaddingBottom}px`;
+    },
+  },
+  mounted () {
+    // Make sure the page has enough space so the drawer does not overlap content
+    this.adjustPagePadding();
+  },
+};
+</script>
@@ -0,0 +1,65 @@
+<template lang="pug">
+div.header-tabs
+  .drawer-tab-container
+    .drawer-tab(v-for="(tab, index) in tabs")
+      a.drawer-tab-text(
+        @click="changeTab(index)",
+        :class="{'drawer-tab-text-active': selectedTabPosition === index}",
+        :title="tab.label"
+      ) {{ tab.label }}
+
+  span.right-item
+    slot(name="right-item")
+</template>
+
+<style lang="scss" scoped>
+  .drawer-tab-text {
+    overflow-x: hidden;
+    display: block;
+    text-overflow: ellipsis;
+  }
+
+  .drawer-tab {
+    white-space: nowrap;
+    overflow-x: hidden;
+    flex: inherit;
+  }
+
+  .drawer-tab-container {
+    max-width: 50%;
+    margin: 0 auto;
+  }
+
+  .right-item {
+    position: absolute;
+    right: -11px;
+    top: -2px;
+  }
+
+  .header-tabs {
+    position: relative;
+    display: flex;
+  }
+</style>
+
+<script>
+  export default {
+    props: {
+      tabs: {
+        type: Array,
+        required: true,
+      },
+    },
+    data () {
+      return {
+        selectedTabPosition: 0,
+      };
+    },
+    methods: {
+      changeTab (newIndex) {
+        this.selectedTabPosition = newIndex;
+        this.$emit('changedPosition', newIndex);
+      },
+    },
+  };
+</script>
@@ -0,0 +1,174 @@
+<template lang="pug">
+  div.slider-root(
+    v-bind:class="{'scrollButtonsVisible': scrollButtonsVisible}",
+  )
+    div.slider-button-area.left-button(
+      v-if="scrollButtonsVisible",
+      @mousedown.left="lastPage"
+    )
+      a.slider-button
+        .svg-icon(v-html="icons.previous")
+    div.slider-button-area.right-button(
+      v-if="scrollButtonsVisible",
+      @mousedown.left="nextPage"
+    )
+      a.slider-button
+        .svg-icon(v-html="icons.next")
+
+    // 120 = width of the left/right buttons
+    div.sliding-content(v-resize="500", @resized="currentWidth = $event.width - 120")
+      .items.items-one-line
+        template(v-for="item in pages[currentPage]")
+          div.vertical-divider(v-if="item.ofNextPage")
+
+          slot(
+            name="item",
+            :item="item",
+          )
+</template>
+
+<style lang="scss">
+
+  @import '~client/assets/scss/colors.scss';
+
+  $buttonAreaWidth: 60;
+
+  .slider-root {
+    position: relative;
+  }
+
+  .slider-button {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #ffffff;
+    box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
+    position: absolute;
+    top: calc((100% - 40px) / 2);
+
+    .svg-icon {
+      color: #a5a1ac;
+      margin: auto 0;
+      position: absolute;
+      top: calc((100% - 12px) / 2);
+      width: 8px;
+      height: 16px;
+      right: 16px;
+    }
+  }
+
+  .scrollButtonsVisible {
+
+    .sliding-content {
+      overflow: hidden;
+    }
+  }
+
+  .slider-button-area {
+    width: $buttonAreaWidth+px;
+    height: 100%;
+    position: absolute;
+    z-index: 2;
+
+    &.left-button {
+      left: 0;
+    }
+
+    &.right-button {
+      right: 0;
+    }
+  }
+
+  .sliding-content .items {
+    padding-top: 10px;
+    margin-left: $buttonAreaWidth+ px;
+
+    & > div:last-of-type {
+      margin-right: $buttonAreaWidth + 20px;
+    }
+  }
+
+  .vertical-divider {
+    height: 92px;
+    width: 1px;
+    background: #34313a;
+    margin-bottom: 8px;
+  }
+
+</style>
+
+<script>
+  import previous from 'assets/svg/previous.svg';
+  import next from 'assets/svg/next.svg';
+  import ResizeDirective from 'client/directives/resize.directive';
+
+  import _chunk from 'lodash/chunk';
+
+  export default {
+    directives: {
+      resize: ResizeDirective,
+    },
+    data () {
+      return {
+        icons: Object.freeze({
+          previous,
+          next,
+        }),
+        currentWidth: 0,
+        currentPage: 0,
+      };
+    },
+    computed: {
+      pages () {
+        return _chunk(this.items, this.itemsPerPage() - 1).map((content, index, array) => {
+          let resultData = [...content];
+
+          if (array[index + 1]) {
+            resultData.push({
+              ...array[index + 1][0],
+              ofNextPage: true,
+            });
+          }
+
+          return resultData;
+        });
+      },
+    },
+    methods: {
+      lastPage () {
+        if (this.currentPage > 0) {
+          this.currentPage--;
+        } else {
+          this.currentPage = this.pages.length - 1;
+        }
+      },
+
+      nextPage () {
+        if (this.currentPage < this.pages.length - 1) {
+          this.currentPage++;
+        } else {
+          this.currentPage = 0;
+        }
+      },
+
+      itemsPerPage () {
+        return Math.floor(this.currentWidth / (this.itemWidth + this.itemMargin));
+      },
+    },
+    props: {
+      scrollButtonsVisible: {
+        type: Boolean,
+        default: true,
+      },
+      items: {
+        type: Array,
+      },
+      itemWidth: {
+        type: Number,
+      },
+      itemMargin: {
+        type: Number,
+      },
+    },
+  };
+</script>
@@ -0,0 +1,71 @@
+<template lang="pug">
+  .item-rows
+    div.items(v-resize="500", @resized="currentWidth = $event.width")
+      template(v-for="item in itemsToShow(showAll)")
+        slot(
+          name="item",
+          :item="item",
+        )
+
+    .btn.btn-show-more(
+      @click="showAll = !showAll",
+      v-if="items.length > itemsPerRow()"
+    ) {{ showAll ? showLessLabel : showAllLabel }}
+
+</template>
+
+<script>
+  import ResizeDirective from 'client/directives/resize.directive';
+
+  import _take from 'lodash/take';
+  import _drop from 'lodash/drop';
+
+  export default {
+    directives: {
+      resize: ResizeDirective,
+    },
+    data () {
+      return {
+        currentWidth: 0,
+        currentPage: 0,
+
+        showAll: false,
+      };
+    },
+    methods: {
+      itemsToShow (showAll) {
+        let itemsPerRow = this.itemsPerRow();
+        let rowsToShow = showAll ? Math.ceil(this.items.length / itemsPerRow) : 1;
+        let result = [];
+
+        for (let i = 0; i < rowsToShow; i++) {
+          let skipped = _drop(this.items, i * itemsPerRow);
+          let row = _take(skipped, itemsPerRow);
+          result = result.concat(row);
+        }
+
+        return result;
+      },
+      itemsPerRow () {
+        return Math.floor(this.currentWidth / (this.itemWidth + this.itemMargin));
+      },
+    },
+    props: {
+      items: {
+        type: Array,
+      },
+      itemWidth: {
+        type: Number,
+      },
+      itemMargin: {
+        type: Number,
+      },
+      showAllLabel: {
+        type: String,
+      },
+      showLessLabel: {
+        type: String,
+      },
+    },
+  };
+</script>
@@ -0,0 +1,48 @@
+<template lang="pug">
+span.badge.badge-pill.badge-item.badge-star(
+  :class="{'item-selected-badge': selected === true}",
+  @click="click",
+  v-if="show",
+) &#9733;
+</template>
+
+<style lang="scss">
+@import '~client/assets/scss/colors.scss';
+
+.badge-star {
+  cursor: pointer;
+  display: none;
+  left: -9px;
+  color: $gray-400;
+  background: $white;
+  padding: 4.5px 6px;
+
+  &.item-selected-badge {
+    display: block;
+    background: $teal-50;
+    color: $white;
+  }
+}
+
+.item:hover > .badge-star {
+  display: block;
+}
+</style>
+
+<script>
+  export default {
+    props: {
+      show: {
+        type: Boolean,
+      },
+      selected: {
+        type: Boolean,
+      },
+    },
+    methods: {
+      click () {
+        this.$emit('click');
+      },
+    },
+  };
+</script>