Add ability to toggle between webfont & JS usage

Pictogrammers · Sep 27, 2019 · c68ec1a · c68ec1a
1 parent 1cb37b9
commit c68ec1a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/src/css/style.scss b/src/css/style.scss
@@ -395,7 +395,7 @@ header.header {
             background-color: darken(map-get($shades, "500"), 5);
         }
 
-        .switch.active {
+        .switch.boolean.active {
             background-color: rgba(map-get($shades, "500"), 0.3);
 
             .handle {

diff --git a/src/js/vue/IconsPicker.vue b/src/js/vue/IconsPicker.vue
@@ -34,19 +34,25 @@
                         <i class="mdi mdi-account-multiple-outline"></i>
                         Outline only
 
-                        <setting-switch :value="filters.outline === 'outline'" />
+                        <setting-switch :value="filters.outline === 'outline'" boolean />
                     </div>
                     <div @click="randomColors = !randomColors">
                         <i class="mdi mdi-palette"></i>
                         Random colors
 
-                        <setting-switch :value="randomColors" />
+                        <setting-switch :value="randomColors" boolean />
                     </div>
                     <div @click="darkTheme = !darkTheme">
                         <i class="mdi mdi-theme-light-dark"></i>
                         Dark theme
 
-                        <setting-switch :value="darkTheme" />
+                        <setting-switch :value="darkTheme" boolean />
+                    </div>
+                    <div @click="usage = usage === 'js' ? 'webfont' : 'js'">
+                        <i class="mdi mdi-format-font"></i>
+                        JS / webfont
+
+                        <setting-switch :value="usage === 'webfont'" />
                     </div>
                     <div class="overflow-footer">
                         MDI v{{ version && version.default }} / MDI light v{{ version && version.light }}<br />
@@ -141,8 +147,8 @@
                         </overflow-menu>
 
                         <div class="icon-name">{{ activeIcon && activeIcon.name }}</div>
-                        <div class="icon-usage">{{ activeIcon && activeIcon.class }}</div>
-                        <div class="icon-usage">
+                        <div class="icon-usage" v-if="usage === 'webfont'">{{ activeIcon && activeIcon.class }}</div>
+                        <div class="icon-usage" v-else>
                             <span style="color: #c084ba">import</span>
                             <span style="color: #ffffff">{</span>
                             <span style="color: #9ddcfc">mdi{{ activeIcon && activeIcon.name.split('-').map((name) => name.charAt(0).toUpperCase() + name.slice(1)).join('') }}</span>
@@ -185,6 +191,7 @@
         FLAVOUR: 'flavour',
         OUTLINE: 'outline',
         DARK: 'dark',
+        USAGE: 'usage',
     };
 
     const COLORS = [
@@ -225,6 +232,7 @@
 
             accentColor: localStorage.getItem(SETTINGS.ACCENT_COLOR) || 'primary',
             randomColors: JSON.parse(localStorage.getItem(SETTINGS.RANDOM_COLORS)) === true,
+            usage: localStorage.getItem(SETTINGS.USAGE) || 'js',
             activeIcon: null,
             isIconActive: false,
 
@@ -407,7 +415,10 @@
             },
             'filters.outline'() {
                 localStorage.setItem(SETTINGS.OUTLINE, this.filters.outline);
-            }
+            },
+            usage() {
+                localStorage.setItem(SETTINGS.USAGE, this.usage);
+            },
         },
     };
 </script>
diff --git a/src/js/vue/SettingSwitch.vue b/src/js/vue/SettingSwitch.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         class="switch"
-        :class="{active: value}"
+        :class="{active: value, boolean}"
     >
         <div class="handle"></div>
     </div>
@@ -19,6 +19,11 @@
                 type: Function,
                 required: false,
             },
+            boolean: {
+                type: Boolean,
+                required: false,
+                default: false,
+            }
         },
     }
 </script>