Prettify background overview (#10078)

* Bring buy bg set button in line with title * Make background sets pretty * Add checkbox to filter backgrounds * Review: replace background filter checkbox with toggle * Remove dashed line from toggle-switch label * Test: add comma to make es-lint happy * Move toggle tooltip into toggle-switch template * Make toggle-switch label optional * Review: Remove toggle-switch margin
2025-12-14 21:27:23 +01:00 · 2018-03-24 17:07:37 +01:00
parent 347fe69667
commit 9b279563ea
9 changed files with 134 additions and 79 deletions
--- a/website/client/components/creatorIntro.vue
+++ b/website/client/components/creatorIntro.vue
@@ -238,9 +238,11 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
            popover-placement='right', popover-append-to-body='true',
            ng-click='user.items.gear.owned[item.key] ? equip(item.key) : purchase(item.type,item)')
    #backgrounds.section.container.customize-section(v-if='activeTopPage === "backgrounds"')
-      .row.text-center.set-title
+      .row.title-row
+        toggle-switch.backgroundFilterToggle(:label="'Hide locked backgrounds'", v-model='filterBackgrounds')
+      .row.text-center.title-row(v-if='!filterBackgrounds')
        strong {{backgroundShopSets[0].text}}
-      .row.incentive-background-row
+      .row.title-row(v-if='!filterBackgrounds')
        .col-12(v-if='showPlainBackgroundBlurb(backgroundShopSets[0].identifier, backgroundShopSets[0].items)') {{ $t('incentiveBackgroundsUnlockedWithCheckins') }}
        .col-2(v-for='bg in backgroundShopSets[0].items',
          @click='unlock("background." + bg.key)',
@@ -249,7 +251,7 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
          popover-trigger='mouseenter')
          .incentive-background(:class='[`background_${bg.key}`]')
            .small-rectangle
-      .row.sub-menu.col-10.offset-1
+      .row.sub-menu.col-10.offset-1(v-if='!filterBackgrounds')
        .col-3.text-center.sub-menu-item(@click='changeSubPage("2018")', :class='{active: activeSubPage === "2018"}')
          strong(v-once) 2018
        .col-3.text-center.sub-menu-item(@click='changeSubPage("2017")', :class='{active: activeSubPage === "2017"}')
@@ -260,8 +262,8 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
          strong(v-once) 2015
        .col-2.text-center.sub-menu-item(@click='changeSubPage("2014")', :class='{active: activeSubPage === "2014"}')
          strong(v-once) 2014
-      .row.customize-menu(v-for='(sets, key) in backgroundShopSetsByYear')
-        .row(v-for='set in sets', v-if='activeSubPage === key')
+      .row.customize-menu(v-if='!filterBackgrounds' v-for='(sets, key) in backgroundShopSetsByYear')
+        .row.background-set(v-for='set in sets', v-if='activeSubPage === key')
          .col-8.offset-2.text-center.set-title
            strong {{set.text}}
          .col-4.text-center.customize-option.background-button(v-for='bg in set.items',
@@ -271,21 +273,27 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
            popover-trigger='mouseenter')
            .background(:class='[`background_${bg.key}`, backgroundLockedStatus(bg.key)]')
            i.glyphicon.glyphicon-lock(v-if='!user.purchased.background[bg.key]')
-            .purchase-single(v-if='!user.purchased.background[bg.key]')
+            .purchase-background.single(v-if='!user.purchased.background[bg.key]')
              .svg-icon.gem(v-html='icons.gem')
-              span 7
+              span.price 7
            span.badge.badge-pill.badge-item.badge-svg(
              :class="{'item-selected-badge': isBackgroundPinned(bg), 'hide': !isBackgroundPinned(bg)}",
              @click.prevent.stop="togglePinned(bg)",
              v-if='!user.purchased.background[bg.key]'
            )
              span.svg-icon.inline.icon-12.color(v-html="icons.pin")
-
-          .col-12.text-center(v-if='!ownsSet("background", set.items) && set.identifier !== "incentiveBackgrounds"')
-            .gem-amount
+          .purchase-background.set(v-if='!ownsSet("background", set.items) && set.identifier !== "incentiveBackgrounds"' @click='unlock(setKeys("background", set.items))')
+            span.label Purchase Set
            .svg-icon.gem(v-html='icons.gem')
-              span 15
-            button.btn.btn-secondary(@click='unlock(setKeys("background", set.items))') Purchase Set
+            span.price 15
+      .row.customize-menu(v-if='filterBackgrounds')
+        .col-4.text-center.customize-option.background-button(v-for='(bg) in ownedBackgrounds'
+          @click='unlock("background." + bg.key)',
+          :popover-title='bg.text',
+          :popover='bg.notes',
+          popover-trigger='mouseenter')
+          .background(:class='[`background_${bg.key}`, backgroundLockedStatus(bg.key)]'
+          )

  .container.interests-section(v-if='modalPage === 3 && !editing')
    .section.row
@@ -609,6 +617,15 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
  }

  #backgrounds {
+    .title-row {
+      margin-bottom: 1em;
+    }
+
+    .backgroundFilterToggle {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
    .set-title {
      margin-top: 1em;
      margin-bottom: 1em;
@@ -624,10 +641,6 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
      margin: 0 auto;
    }

-    .incentive-background-row {
-      margin-bottom: 2em;
-    }
-
    .incentive-background {
      background-image: none;
      width: 68px;
@@ -679,44 +692,55 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
      cursor: pointer;
    }

-    .purchase-single {
-      width: 141px;
+    .purchase-background {
      margin: 0 auto;
      background: #fff;
      padding: 0.5em;
-      box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
      border-radius: 0 0 2px 2px;
+      box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+      cursor: pointer;

      span {
        font-weight: bold;
        font-size: 12px;
+      }
+
+      span.price {
        color: #24cc8f;
      }
      
      .gem {
        width: 16px;
      }
+
+      &.single {
+        width: 141px;
+      }
+
+      &.set {
+        width: 100%;
+
+        span {
+          font-size: 14px;
        }
      
        .gem {
-      margin-right: .5em;
+          width: 20px;
+        }
+      }
+    }
+
+    .gem {
+      margin: 0 .5em;
      display: inline-block;
      vertical-align: bottom;
    }

-    .gem-amount {
-      margin-top: 1em;
-      margin-bottom: 1em;
-
-      .gem {
-        width: 24px;
-      }
-
-      span {
-        font-weight: bold;
-        font-size: 20px;
-        color: #24cc8f;
-      }
+    .background-set {
+        width: 100%;
+        margin: 10px;
+        background-color: #edecee;
+        border-radius: 2px;
    }
  }

@@ -791,6 +815,10 @@ b-modal#avatar-modal(title="", :size='editing ? "lg" : "md"', :hide-header='true
    display: none;
  }

+  .background-button {
+      margin-bottom: 15px;
+  }
+
  .background-button:hover {
    span.badge.badge-pill.badge-item.badge-svg.hide {
      display: block;
@@ -812,6 +840,7 @@ import guide from 'client/mixins/guide';
 import notifications from 'client/mixins/notifications';
 import appearance from 'common/script/content/appearance';
 import appearanceSets from 'common/script/content/appearance/sets';
+import toggleSwitch from 'client/components/ui/toggleSwitch';

 import logoPurple from 'assets/svg/logo-purple.svg';
 import bodyIcon from 'assets/svg/body.svg';
@@ -959,6 +988,7 @@ export default {
  mixins: [guide, notifications],
  components: {
    avatar,
+    toggleSwitch,
  },
  mounted () {
    if (this.editing) this.modalPage = 2;
@@ -971,6 +1001,7 @@ export default {
      loading: false,
      backgroundShopSets,
      backgroundUpdate: new Date(),
+      filterBackgrounds: false,
      specialShirtKeys: ['convict', 'cross', 'fire', 'horizon', 'ocean', 'purple', 'rainbow', 'redblue', 'thunder', 'tropical', 'zombie'],
      rainbowSkinKeys: ['eb052b', 'f69922', 'f5d70f', '0ff591', '2b43f6', 'd7a9f7', '800ed0', 'rainbow'],
      animalSkinKeys: ['bear', 'cactus', 'fox', 'lion', 'panda', 'pig', 'tiger', 'wolf'],
@@ -1243,6 +1274,21 @@ export default {
      });
      return backgroundShopSetsByYear;
    },
+    ownedBackgrounds () {
+      let ownedBackgrounds = [];
+
+      // Hack to force update for now until we restructure the data
+      let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
+
+      this.backgroundShopSets.forEach((set) => {
+        set.items.forEach((bg) => {
+          if (this.user.purchased.background[bg.key]) {
+            ownedBackgrounds.push(bg);
+          }
+        });
+      });
+      return ownedBackgrounds;
+    },
  },
  methods: {
    hideSet (set) {
--- a/website/client/components/inventory/equipment/index.vue
+++ b/website/client/components/inventory/equipment/index.vue
@@ -54,18 +54,12 @@
                :class="{'drawer-tab-text-active': costume === true}",
              ) {{ $t('costume') }}

-            toggle-switch#costumePrefToggleSwitch.float-right(
+            toggle-switch.float-right.align-with-tab(
              :label="$t(costume ? 'useCostume' : 'autoEquipBattleGear')",
              :checked="user.preferences[drawerPreference]",
              @change="changeDrawerPreference",
+              :hoverText="$t(drawerPreference+'PopoverText')",
            )
-
-            b-popover(
-              target="costumePrefToggleSwitch"
-              triggers="hover",
-              placement="top"
-            )
-              .popover-content-text {{ $t(drawerPreference+'PopoverText') }}
      .items.items-one-line(slot="drawer-slider")
        item.pointer(
          v-for="(label, group) in gearTypesToStrings",
@@ -134,6 +128,14 @@
 .pointer {
  cursor: pointer;
 }
+
+.align-with-tab {
+  margin-top: 3px;
+}
+
+.drawer-tab-text {
+  display: inline-block;
+}
 </style>

 <script>
@@ -147,7 +149,6 @@ import _sortBy from 'lodash/sortBy';
 import _reverse from 'lodash/reverse';

 import toggleSwitch from 'client/components/ui/toggleSwitch';
-
 import Item from 'client/components/inventory/item';
 import ItemRows from 'client/components/ui/itemRows';
 import EquipmentAttributesPopover from 'client/components/inventory/equipment/attributesPopover';
--- a/website/client/components/inventory/stable/index.vue
+++ b/website/client/components/inventory/stable/index.vue
@@ -48,8 +48,7 @@

        div.form-group.clearfix
          h3.float-left Hide Missing
-          toggle-switch.float-right.no-margin(
-            :label="''",
+          toggle-switch.float-right(
            :checked="hideMissing",
            @change="updateHideMissing"
          )
--- a/website/client/components/shops/market/index.vue
+++ b/website/client/components/shops/market/index.vue
@@ -15,14 +15,12 @@
              label.custom-control-label(v-once, :for="`category-${category.identifier}`") {{ category.text }}
        div.form-group.clearfix
          h3.float-left(v-once) {{ $t('hideLocked') }}
-          toggle-switch.float-right.no-margin(
-            :label="''",
+          toggle-switch.float-right(
            v-model="hideLocked",
          )
        div.form-group.clearfix
          h3.float-left(v-once) {{ $t('hidePinned') }}
-          toggle-switch.float-right.no-margin(
-            :label="''",
+          toggle-switch.float-right(
            v-model="hidePinned",
          )
    .standard-page
--- a/website/client/components/shops/quests/index.vue
+++ b/website/client/components/shops/quests/index.vue
@@ -17,14 +17,12 @@

        div.form-group.clearfix
          h3.float-left(v-once) {{ $t('hideLocked') }}
-          toggle-switch.float-right.no-margin(
-            :label="''",
+          toggle-switch.float-right(
            v-model="hideLocked",
          )
        div.form-group.clearfix
          h3.float-left(v-once) {{ $t('hidePinned') }}
-          toggle-switch.float-right.no-margin(
-            :label="''",
+          toggle-switch.float-right(
            v-model="hidePinned",
          )
    .standard-page
--- a/website/client/components/shops/seasonal/index.vue
+++ b/website/client/components/shops/seasonal/index.vue
@@ -17,8 +17,7 @@

        div.form-group.clearfix
          h3.float-left(v-once) {{ $t('hidePinned') }}
-          toggle-switch.float-right.no-margin(
-            :label="''",
+          toggle-switch.float-right(
            v-model="hidePinned",
          )
    .standard-page
--- a/website/client/components/shops/timeTravelers/index.vue
+++ b/website/client/components/shops/timeTravelers/index.vue
@@ -17,8 +17,7 @@

        div.form-group.clearfix
          h3.float-left(v-once) {{ $t('hidePinned') }}
-          toggle-switch.float-right.no-margin(
-            :label="''",
+          toggle-switch.float-right(
            v-model="hidePinned",
          )
    .standard-page
--- a/website/client/components/tasks/taskModal.vue
+++ b/website/client/components/tasks/taskModal.vue
@@ -181,7 +181,6 @@
          .form-group
            label(v-once) {{ $t('approvalRequired') }}
            toggle-switch.d-inline-block(
-              label="",
              :checked="requiresApproval",
              @change="updateRequiresApproval"
            )
--- a/website/client/components/ui/toggleSwitch.vue
+++ b/website/client/components/ui/toggleSwitch.vue
@@ -1,25 +1,30 @@
 <template lang="pug">
-.clearfix.toggle-switch-container
-  .float-left.toggle-switch-description {{ label }}
+.popover-box
+  .clearfix(:id="containerId")
+    .float-left.toggle-switch-description(v-if="label", :class="hoverText ? 'hasPopOver' : ''") {{ label }}
    .toggle-switch.float-left
      input.toggle-switch-checkbox(
-      type='checkbox', :id="id",
+        type='checkbox', :id="toggleId",
        @change="handleChange",
        :checked="isChecked",
        :value="value",
      )
-    label.toggle-switch-label(:for="id")
+      label.toggle-switch-label(:for="toggleId")
        span.toggle-switch-inner
        span.toggle-switch-switch
+
+  b-popover(
+    v-if="hoverText"
+    :target="containerId"
+    triggers="hover",
+    placement="top"
+  )
+    .popover-content-text {{ hoverText }}
 </template>

 <style lang="scss" scoped>
  @import '~client/assets/scss/colors.scss';

-  .toggle-switch-container {
-    margin-top: 6px;
-  }
-
  .toggle-switch {
    position: relative;
    width: 40px;
@@ -29,8 +34,11 @@

  .toggle-switch-description {
    height: 20px;
+
+    &.hasPopOver {
      border-bottom: 1px dashed $gray-200;
    }
+  }

  .toggle-switch-checkbox {
    display: none;
@@ -102,8 +110,10 @@
 export default {
  data () {
    return {
-      // A value is required for the required for the for and id attributes
-      id: Math.random(),
+      // The toggle requires a unique id to link it to the label
+      toggleId: this.generateId(),
+      // The container requires a unique id to link it to the pop-over
+      containerId: this.generateId(),
    };
  },
  model: {
@@ -116,12 +126,14 @@ export default {
    },
    label: {
      type: String,
-      required: true,
    },
    checked: {
      type: Boolean,
      default: false,
    },
+    hoverText: {
+      type: String,
+    },
  },
  computed: {
    isChecked () {
@@ -132,6 +144,10 @@ export default {
    handleChange ({ target: { checked } }) {
      this.$emit('change', checked);
    },
+    generateId () {
+      return `id-${Math.random().toString(36).substr(2, 16)}`;
+    },
  },
 };
 </script>
+