More Sprites (#15400)

* remove need for quest_ notif_ and inventory_quest_ in css

* fix test

gulp/gulp-sprites.js

@@ -64,6 +64,15 @@ function filterFile (file) {
   if (file.relative.indexOf('icon_background') === 0) {
     return false;
   }
+  if (file.relative.indexOf('notif_') === 0) {
+    return false;
+  }
+  if (file.relative.indexOf('quest_') === 0) {
+    return false;
+  }
+  if (file.relative.indexOf('inventory_quest_') === 0) {
+    return false;
+  }
   return true;
 }
 

website/client/src/components/achievements/levelUp.vue

@@ -48,7 +48,7 @@
         ></span>
       </div>
 
-      <div :class="questClass"></div>
+      <Sprite :image-name="questClass" />
     </section>
     <!-- @TODO: Keep this? .checkboxinput(type='checkbox', v-model=
 'user.preferences.suppressModals.levelUp', @change='changeLevelupSuppress()')
@@ -150,15 +150,12 @@ label(style='display:inline-block') {{ $t('dontShowAgain') }}
     section.greyed {
       padding-bottom: 17px
     }
-
-    .scroll {
-      margin: -11px auto 0;
-    }
   }
 </style>
 
 <script>
 import Avatar from '../avatar';
+import Sprite from '@/components/ui/sprite';
 import { mapState } from '@/libs/store';
 import starGroup from '@/assets/svg/star-group.svg';
 import sparkles from '@/assets/svg/sparkles-left.svg';
@@ -173,6 +170,7 @@ const levelQuests = {
 export default {
   components: {
     Avatar,
+    Sprite,
   },
   data () {
     return {
@@ -191,7 +189,9 @@ export default {
       return this.user.stats.lvl in levelQuests;
     },
     questClass () {
-      return `scroll inventory_quest_scroll_${levelQuests[this.user.stats.lvl]}`;
+      const questKey = levelQuests[this.user.stats.lvl];
+      if (questKey) return `inventory_quest_scroll_${questKey}`;
+      return '';
     },
   },
   methods: {

website/client/src/components/groups/questSidebarSection.vue

@@ -225,10 +225,9 @@
         </a>
       </div>
       <div class="quest-icon">
-        <div
+        <Sprite
           class="quest"
-          :class="`inventory_quest_scroll_${questData.key}`"
-        ></div>
+          :image-name="`inventory_quest_scroll_${questData.key}`" />
       </div>
     </div>
     <div

website/client/src/components/header/notifications/itemReceived.vue

@@ -12,20 +12,21 @@
       <strong> {{ notification.data.title }} </strong>
       <span> {{ notification.data.text }} </span>
     </div>
-    <div
+    <Sprite
       slot="icon"
       class="mt-3"
-      :class="notification.data.icon"
-    ></div>
+      :image-name="notification.data.icon" />
   </base-notification>
 </template>
 
 <script>
 import BaseNotification from './base';
+import Sprite from '@/components/ui/sprite.vue';
 
 export default {
   components: {
     BaseNotification,
+    Sprite,
   },
   props: {
     notification: {

website/client/src/components/header/notifications/newMysteryItems.vue

@@ -10,20 +10,21 @@
       slot="content"
       v-html="$t('newSubscriberItem')"
     ></div>
-    <div
+    <Sprite
       slot="icon"
-      :class="mysteryClass"
-    ></div>
+      :image-name="mysteryClass" />
   </base-notification>
 </template>
 
 <script>
 import moment from 'moment';
 import BaseNotification from './base';
+import Sprite from '@/components/ui/sprite.vue';
 
 export default {
   components: {
     BaseNotification,
+    Sprite,
   },
   props: ['notification', 'canRemove'],
   computed: {

website/client/src/components/modifyInventory.vue

@@ -692,7 +692,7 @@
                   <div class="form-inline clearfix">
                     <Sprite
                       class="pull-left"
-                      :class="'inventory_quest_scroll_' + item.key"
+                      :image-name="'inventory_quest_scroll_' + item.key"
                       style="margin-right: 10px"
                     />
                     <p>{{ item.text() }}</p>

website/client/tests/unit/components/achievements/levelUp.spec.js

@@ -72,7 +72,11 @@ describe('LevelUp', () => {
 
   it('generates the right test class for level 15', () => {
     const questClass = testFunction('questClass', 15);
+    expect(questClass()).to.equal('inventory_quest_scroll_atom1');
+  });
 
-    expect(questClass()).to.equal('scroll inventory_quest_scroll_atom1');
+  it('generates empty test class for level 14', () => {
+    const questClass = testFunction('questClass', 14);
+    expect(questClass()).to.equal('');
   });
 });