WIP(shops): update avatar modal style

website/client/src/components/creatorIntro.vue

@@ -153,28 +153,29 @@
         id="backgrounds"
         class="section customize-section pt-4"
       >
-        <div class="row text-center title-row mb-1">
+        <div class="row justify-content-center title-row mb-3">
           <strong>{{ $t('incentiveBackgrounds') }}</strong>
         </div>
         <div
           v-if="standardBackgrounds.length < standardBackgroundMax"
-          class="row title-row mb-3"
+          class="row justify-content-center title-row mb-3"
         >
           <div>
             {{ $t('incentiveBackgroundsUnlockedWithCheckins') }}
           </div>
         </div>
-        <div class="row justify-content-center mb-4 pb-2">
+        <div class="row justify-content-center mb-4">
           <div
             v-for="bg in standardBackgrounds"
             :id="bg.key"
             :key="bg.key"
-            class="col-2"
+            class="background-item"
+            :class="{selected: bg.key === user.preferences.background}"
             @click="unlock('background.' + bg.key)"
           >
             <div
               class="incentive-background"
-              :class="[`background_${bg.key}`]"
+              :class="`background_${bg.key}`"
             >
               <div class="small-rectangle"></div>
             </div>
@@ -202,12 +203,13 @@
               v-for="bg in allBackgrounds.eventBackgrounds.items"
               :id="bg.key"
               :key="bg.key"
-              class="col-4 text-center customize-option background-button"
+              class="background-item"
+              :class="{selected: bg.key === user.preferences.background}"
               @click="unlock('background.' + bg.key)"
             >
               <div
                 class="background"
-                :class="`background_${bg.key}`"
+                :class="`icon_background_${bg.key}`"
               ></div>
               <b-popover
                 :target="bg.key"
@@ -232,36 +234,14 @@
               v-for="bg in timeTravelBackgrounds"
               :id="bg.key"
               :key="bg.key"
-              class="col-4 text-center customize-option background-button"
+              class="background-item"
+              :class="{selected: bg.key === user.preferences.background}"
               @click="unlock('background.' + bg.key)"
             >
               <div
                 class="background"
-                :class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"
+                :class="`icon_background_${bg.key}`"
               ></div>
-              <i
-                v-if="!user.purchased.background[bg.key]"
-                class="glyphicon glyphicon-lock"
-              ></i>
-              <div
-                v-if="!user.purchased.background[bg.key]"
-                class="purchase-background single d-flex align-items-center justify-content-center"
-              >
-                <div
-                  class="svg-icon hourglass"
-                  v-html="icons.hourglass"
-                ></div>
-                <span class="price">1</span>
-              </div>
-              <span
-                v-if="!user.purchased.background[bg.key]"
-                class="badge-top"
-                @click.stop.prevent="togglePinned(bg)"
-              >
-                <pin-badge
-                  :pinned="isBackgroundPinned(bg)"
-                />
-              </span>
               <b-popover
                 :target="bg.key"
                 triggers="hover focus"
@@ -274,21 +254,22 @@
         </div>
         <div v-if="monthlyBackgrounds.length > 0">
           <div
-            class="row text-center title-row mt-2"
+            class="row text-center title-row mb-3"
           >
             <strong>{{ $t('monthlyBackgrounds') }}</strong>
           </div>
-          <div class="row title-row">
+          <div class="row justify-content-center mb-4">
             <div
               v-for="(bg) in monthlyBackgrounds"
               :id="bg.key"
               :key="bg.key"
-              class="col-4 text-center customize-option background-button"
+              class="background-item"
+              :class="{selected: bg.key === user.preferences.background}"
               @click="unlock('background.' + bg.key)"
             >
               <div
                 class="background"
-                :class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"
+                :class="`icon_background_${bg.key}`"
               ></div>
               <b-popover
                 :target="bg.key"
@@ -300,7 +281,7 @@
             </div>
           </div>
         </div>
-        <customize-banner v-else class="padding-fix" />
+        <customize-banner class="padding-fix" />
       </div>
     </div>
     <div
@@ -791,39 +772,6 @@
       }
     }
 
-    .text-center {
-      .gem-lock, .gold-lock {
-        display: inline-block;
-        margin-right: 1em;
-        margin-bottom: 1.6em;
-        vertical-align: bottom;
-      }
-    }
-
-    .gem-lock, .gold-lock {
-      .svg-icon {
-        width: 16px;
-      }
-
-      span {
-        font-weight: bold;
-        margin-left: .5em;
-      }
-
-      .svg-icon, span {
-        display: inline-block;
-        vertical-align: bottom;
-      }
-    }
-
-    .gem-lock span {
-      color: $green-10
-    }
-
-    .gold-lock span {
-      color: $yellow-10
-    }
-
     .interests-section {
       margin-top: 3em;
       margin-bottom: 60px;
@@ -835,21 +783,29 @@
     }
 
     #backgrounds {
-      .backgroundFilterToggle {
+      .background-item {
-        display: flex;
+        outline: 4px solid transparent;
-        flex: 1;
-        justify-content: center;
-      }
 
-      .set-title {
+        .background {
-        margin-top: 1em;
+          border-radius: 4px;
-        margin-bottom: 1em;
+          width: 60px;
-      }
+          height: 60px;
+          background-position: -4px -4px;
+        }
 
-      .background {
+        &:not(:first-of-type) {
-        margin: 0 auto;
+          margin-left: 24px;
-        box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
+        }
-        border-radius: 2px;
+
+        &:hover {
+          outline: 4px solid rgba($purple-300, .25);
+          border-radius: 4px;
+          cursor: pointer;
+        }
+        &.selected {
+          border-radius: 4px;
+          outline: 4px solid $purple-300;
+        }
       }
 
       strong {
@@ -860,9 +816,8 @@
         background-image: none;
         width: 68px;
         height: 68px;
-        border-radius: 8px;
+        border-radius: 4px;
         background-color: #92b6bd;
-        margin: 0 auto;
         padding-top: .3em;
 
         .small-rectangle {
@@ -902,61 +857,6 @@
       .incentive-background:hover {
         cursor: pointer;
       }
-
-      .background:hover {
-        cursor: pointer;
-      }
-
-      .purchase-background {
-        margin: 0 auto;
-        background: #fff;
-        padding: 0.5em;
-        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, .coin, .hourglass {
-          width: 16px;
-        }
-
-        &.single {
-          width: 141px;
-        }
-
-        &.set {
-          width: 100%;
-
-          span {
-            font-size: 14px;
-          }
-
-          .gem, .coin {
-            width: 20px;
-          }
-        }
-      }
-
-      .gem, .coin, .hourglass {
-        margin: 0 .5em;
-        display: inline-block;
-        vertical-align: bottom;
-      }
-
-      .background-set {
-        width: 100%;
-        margin: 10px;
-        background-color: #edecee;
-        border-radius: 2px;
-      }
     }
 
     .footer {
@@ -1042,34 +942,19 @@
         }
       }
     }
-
-    .background-button {
-      margin-bottom: 15px;
-
-      .badge-pin:not(.pinned) {
-        display: none;
-      }
-
-      &:hover .badge-pin {
-        display: block;
-      }
-    }
   }
 </style>
 
 <script>
 import axios from 'axios';
-import map from 'lodash/map';
 import forEach from 'lodash/forEach';
 import orderBy from 'lodash/orderBy';
-import isPinned from '@/../../common/script/libs/isPinned';
 import content from '@/../../common/script/content/index';
 import { mapState } from '@/libs/store';
 import avatar from './avatar';
 import usernameForm from './settings/usernameForm';
 import guide from '@/mixins/guide';
 import notifications from '@/mixins/notifications';
-import PinBadge from '@/components/ui/pinBadge';
 import customizeBanner from './avatarModal/customize-banner';
 import bodySettings from './avatarModal/body-settings';
 import skinSettings from './avatarModal/skin-settings';
@@ -1097,7 +982,6 @@ export default {
     bodySettings,
     extraSettings,
     hairSettings,
-    PinBadge,
     skinSettings,
     usernameForm,
   },
@@ -1110,7 +994,6 @@ export default {
       standardBackgrounds: [],
       standardBackgroundMax: 0,
       timeTravelBackgrounds: [],
-      backgroundUpdate: new Date(),
 
       icons: Object.freeze({
         logoPurple,
@@ -1190,13 +1073,6 @@ export default {
     close () {
       this.$root.$emit('bv::hide::modal', 'avatar-modal');
     },
-    purchase (type, key) {
-      this.$store.dispatch('shops:purchase', {
-        type,
-        key,
-      });
-      this.backgroundUpdate = new Date();
-    },
     prev () {
       this.modalPage -= 1;
     },
@@ -1253,42 +1129,6 @@ export default {
         this.goto('intro', 0);
       }, 1000);
     },
-    ownsSet (type, set) {
-      let setOwnedByUser = false;
-
-      for (let key of Object.keys(set)) {
-        const value = set[key];
-        if (type === 'background') key = value.key;
-        if (this.user.purchased[type][key]) setOwnedByUser = true;
-      }
-
-      return setOwnedByUser;
-    },
-    setKeys (type, _set) {
-      return map(_set, (v, k) => {
-        if (type === 'background') k = v.key; // eslint-disable-line no-param-reassign
-        return `${type}.${k}`;
-      }).join(',');
-    },
-    backgroundLockedStatus (bgKey) {
-      let backgroundClass = 'background-locked';
-      if (this.user.purchased.background[bgKey]) backgroundClass = 'background-unlocked';
-      return backgroundClass;
-    },
-    isBackgroundPinned (bg) {
-      return isPinned(this.user, bg);
-    },
-    togglePinned (bg) {
-      if (!this.$store.dispatch('user:togglePinnedItem', { type: bg.pinType, path: bg.path })) {
-        this.text(this.$t('unpinnedItem', { item: bg.text }));
-      }
-    },
-    backgroundSelected (bg) {
-      this.$root.$emit('buyModal::showItem', bg);
-    },
-    backgroundPurchased () {
-      this.backgroundUpdate = new Date();
-    },
   },
 };
 </script>

website/client/src/components/shops/buyModal.vue

@@ -822,8 +822,10 @@ export default {
       }
 
       if (this.item.purchaseType === 'customization') {
-        await this.unlock(this.item.path);
+        const buySuccess = await this.unlock(this.item.path);
+        if (!buySuccess) return;
         this.sync();
+        this.purchased(this.item.text);
       } else {
         const shouldConfirmPurchase = this.item.currency === 'gems' || this.item.currency === 'hourglasses';
         if (

website/client/src/mixins/avatarEditUtilities.js

@@ -140,13 +140,9 @@ export const avatarEditorUtilities = { // eslint-disable-line import/prefer-defa
 
       if (loginIncentives.indexOf(path) === -1) {
         if (fullSet) {
-          if (window.confirm(this.$t('purchaseFor', { cost: cost * 4 })) !== true) return; // eslint-disable-line no-alert
+          if (window.confirm(this.$t('purchaseFor', { cost: cost * 4 })) !== true) return false; // eslint-disable-line no-alert
-          // @TODO: implement gem modal
-          // if (this.user.balance < cost) return $rootScope.openModal('buyGems');
         } else if (!get(this.user, `purchased.${path}`)) {
-          if (window.confirm(this.$t('purchaseFor', { cost: cost * 4 })) !== true) return; // eslint-disable-line no-alert
+          if (window.confirm(this.$t('purchaseFor', { cost: cost * 4 })) !== true) return false; // eslint-disable-line no-alert
-          // @TODO: implement gem modal
-          // if (this.user.balance < cost) return $rootScope.openModal('buyGems');
         }
       }
 
@@ -158,8 +154,10 @@ export const avatarEditorUtilities = { // eslint-disable-line import/prefer-defa
           },
         });
         this.backgroundUpdate = new Date();
+        return true;
       } catch (e) {
         window.alert(e.message); // eslint-disable-line no-alert
+        return false;
       }
     },
     async buy (item) {

website/common/locales/en/customizations.json

@@ -18,7 +18,7 @@
   "candycane": "Candy Cane",
   "candycorn": "Candy Corn",
   "clownfish": "Clownfish",
-  "convict": "Convict",
+  "convict": "Referee",
   "cross": "Cross",
   "curlyLong": "Curly Long",
   "curlyShort": "Curly Short",