fix: update iconSets

siberfx · Aug 1, 2022 · 0d3034f · 0d3034f
1 parent e54159a
commit 0d3034f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 31 deletions.
diff --git a/src/pages/404-pages/VaPageNotFoundSearch.vue b/src/pages/404-pages/VaPageNotFoundSearch.vue
@@ -5,7 +5,7 @@
       placeholder="Search on the menu"
       :style="{ 'align-items': 'flex-start' }"
       class="va-page-not-found-search__input mb-4"
-      removable
+      clearable
     />
     <div class="row va-page-not-found-search__links">
       <ul

diff --git a/src/pages/admin/ui/icons/IconSet.vue b/src/pages/admin/ui/icons/IconSet.vue
@@ -1,38 +1,38 @@
 <template>
   <div class="icon-set">
-    <va-card class="icon-set__header mb-4 py-3 ma-0">
+    <va-card class="icon-set__header mb-4 pb-3">
       <va-card-title>
         <h2 class="my-0 ml-2" :style="{ color: theme.dark }">
           {{ iconSet.name }}
         </h2>
       </va-card-title>
       <va-card-content class="row">
-        <div class="flex md3 xs12">
+        <div class="flex md4 xs12 flex-center">
           <va-button outline :to="{ name: 'icon-sets' }">
             {{ t('icons.back') }}
           </va-button>
         </div>
 
-        <div class="flex md5 xs12 flex-center">
-          <va-input v-model="search" :label="t('icons.search')" class="mb-0" style="max-width: 300px" removable>
+        <div class="flex md4 xs12 flex-center">
+          <va-input v-model="search" :label="t('icons.search')" clearable>
             <template #prependInner>
               <va-icon class="icon-left input-icon" name="search" />
             </template>
           </va-input>
         </div>
 
-        <div class="flex md4 xs12 ma-0 flex-center content icon-set__header__size">
-          <span class="ma-2 pr-2 shrink icon-set__header__size--smaller" :style="{ color: theme.dark }"> A </span>
+        <div class="flex md4 xs12 flex-center content icon-set__header__size">
+          <span class="ma-2 pr-2 shrink icon-set__header__size--smaller" :style="{ color: theme.dark }">A</span>
           <va-slider
             v-model="iconSize"
             value-visible
-            style="max-width: 300px"
+            style="flex: 1"
             :label-value="`${iconSize}px`"
             :min="slider.min"
             :max="slider.max"
           >
           </va-slider>
-          <span class="ma-2 pl-2 shrink icon-set__header__size--bigger" :style="{ color: theme.dark }"> A </span>
+          <span class="ma-2 pl-2 shrink icon-set__header__size--bigger" :style="{ color: theme.dark }">A</span>
         </div>
       </va-card-content>
     </va-card>
@@ -52,7 +52,7 @@
           style="flex-direction: column"
         >
           <div class="vuestic-icon mb-3 pt-3">
-            <va-icon :class="iconClass(icon)" :size="iconSize">{{ iconData(icon) }}</va-icon>
+            <va-icon :name="iconName(icon)" :size="iconSize" />
           </div>
           <div class="icon-text">
             {{ icon }}
@@ -126,26 +126,12 @@
     ]
   })
 
-  function iconClass(icon: string) {
-    return iconSet.value.prefix === 'material-icons'
-      ? iconSet.value.prefix
-      : `${iconSet.value.prefix} ${iconSet.value.prefix}-${icon}`
-  }
-
-  function iconData(icon: string) {
-    return iconSet.value.prefix === 'material-icons' ? icon : ''
-  }
+  const iconName = (icon: string) => `${iconSet.value.prefix}-${icon}`
 </script>
 
 <style lang="scss">
   .icon-set {
     .icon-grid-container {
-      &:hover {
-        // color: $white;
-        // background-color: $brand-primary;
-        cursor: pointer;
-      }
-
       .icon-text {
         font-size: 0.6rem;
       }

diff --git a/src/pages/admin/ui/icons/SetsList.vue b/src/pages/admin/ui/icons/SetsList.vue
@@ -14,7 +14,7 @@
               <div v-if="filteredList.length !== 2" :key="i" class="row pa-3">
                 <div v-for="(icon, j) in filteredList" :key="j" class="flex xs2 flex-center">
                   <div class="sets-list__icon pa-3 flex-center vuestic-icon">
-                    <va-icon :name="iconClass(set, icon)"></va-icon>
+                    <va-icon :name="iconName(set, icon)" />
                   </div>
                 </div>
               </div>
@@ -26,13 +26,13 @@
               >
                 <div class="flex xs2 flex-center">
                   <div class="sets-list__icon pa-3 flex-center vuestic-icon">
-                    <va-icon :name="iconClass(set, filteredList[0])"></va-icon>
+                    <va-icon :name="iconName(set, filteredList[0])" />
                   </div>
                 </div>
                 <div class="flex xs8" />
                 <div class="flex xs2 flex-center">
                   <div class="sets-list__icon pa-3 flex-center vuestic-icon">
-                    <va-icon :name="iconClass(set, filteredList[1])"></va-icon>
+                    <va-icon :name="iconName(set, filteredList[1])" />
                   </div>
                 </div>
               </div>
@@ -51,9 +51,7 @@
     sets: IconSet[]
   }>()
 
-  function iconClass(set: IconSet, icon: string) {
-    return `${set.prefix}-${icon}`
-  }
+  const iconName = (set: IconSet, icon: string) => `${set.prefix}-${icon}`
 </script>
 
 <style lang="scss">