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

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.customize-menu(v-if='!filterBackgrounds' v-for='(sets, key) in backgroundShopSetsByYear')
-        .row(v-for='set in sets', v-if='activeSubPage === key')
+        .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")
-
+          .purchase-background.set(v-if='!ownsSet("background", set.items) && set.identifier !== "incentiveBackgrounds"' @click='unlock(setKeys("background", set.items))')
-          .col-12.text-center(v-if='!ownsSet("background", set.items) && set.identifier !== "incentiveBackgrounds"')
+            span.label Purchase Set
-            .gem-amount
+            .svg-icon.gem(v-html='icons.gem')
-              .svg-icon.gem(v-html='icons.gem')
+            span.price 15
-              span 15
+      .row.customize-menu(v-if='filterBackgrounds')
-            button.btn.btn-secondary(@click='unlock(setKeys("background", set.items))') Purchase Set
+        .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 {
+    .purchase-background {
-      width: 141px;
       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;
-        color: #24cc8f;
       }
 
+      span.price {
+        color: #24cc8f;
+      }
+      
       .gem {
         width: 16px;
       }
+
+      &.single {
+        width: 141px;
+      }
+
+      &.set {
+        width: 100%;
+
+        span {
+          font-size: 14px;
+        }
+      
+        .gem {
+          width: 20px;
+        }
+      }
     }
 
     .gem {
-      margin-right: .5em;
+      margin: 0 .5em;
       display: inline-block;
       vertical-align: bottom;
     }
 
-    .gem-amount {
+    .background-set {
-      margin-top: 1em;
+        width: 100%;
-      margin-bottom: 1em;
+        margin: 10px;
-
+        background-color: #edecee;
-      .gem {
+        border-radius: 2px;
-        width: 24px;
-      }
-
-      span {
-        font-weight: bold;
-        font-size: 20px;
-        color: #24cc8f;
-      }
     }
   }
 
@@ -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) {

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

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(
+          toggle-switch.float-right(
-            :label="''",
             :checked="hideMissing",
             @change="updateHideMissing"
           )

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(
+          toggle-switch.float-right(
-            :label="''",
             v-model="hideLocked",
           )
         div.form-group.clearfix
           h3.float-left(v-once) {{ $t('hidePinned') }}
-          toggle-switch.float-right.no-margin(
+          toggle-switch.float-right(
-            :label="''",
             v-model="hidePinned",
           )
     .standard-page

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(
+          toggle-switch.float-right(
-            :label="''",
             v-model="hideLocked",
           )
         div.form-group.clearfix
           h3.float-left(v-once) {{ $t('hidePinned') }}
-          toggle-switch.float-right.no-margin(
+          toggle-switch.float-right(
-            :label="''",
             v-model="hidePinned",
           )
     .standard-page

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(
+          toggle-switch.float-right(
-            :label="''",
             v-model="hidePinned",
           )
     .standard-page

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(
+          toggle-switch.float-right(
-            :label="''",
             v-model="hidePinned",
           )
     .standard-page

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"
             )

website/client/components/ui/toggleSwitch.vue

@@ -1,25 +1,30 @@
 <template lang="pug">
-.clearfix.toggle-switch-container
+.popover-box
-  .float-left.toggle-switch-description {{ label }}
+  .clearfix(:id="containerId")
-  .toggle-switch.float-left
+    .float-left.toggle-switch-description(v-if="label", :class="hoverText ? 'hasPopOver' : ''") {{ label }}
-    input.toggle-switch-checkbox(
+    .toggle-switch.float-left
-      type='checkbox', :id="id",
+      input.toggle-switch-checkbox(
-      @change="handleChange",
+        type='checkbox', :id="toggleId",
-      :checked="isChecked",
+        @change="handleChange",
-      :value="value",
+        :checked="isChecked",
-    )
+        :value="value",
-    label.toggle-switch-label(:for="id")
+      )
-      span.toggle-switch-inner
+      label.toggle-switch-label(:for="toggleId")
-      span.toggle-switch-switch
+        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,7 +34,10 @@
 
   .toggle-switch-description {
     height: 20px;
-    border-bottom: 1px dashed $gray-200;
+
+    &.hasPopOver {
+      border-bottom: 1px dashed $gray-200;
+    }
   }
 
   .toggle-switch-checkbox {
@@ -102,8 +110,10 @@
 export default {
   data () {
     return {
-      // A value is required for the required for the for and id attributes
+      // The toggle requires a unique id to link it to the label
-      id: Math.random(),
+      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>
+