fix: restore QMK icon (#1319)

- the build process wasn't able to resolve the css path for the build icon. The quickest fix was to just move the icon file to public, this ensures it's always copied when making the dist. - fixed some warnings in App.vue about ordering of tags - moved the relevant CSS in App.vue - removed unused file - updated caniuse db
qmk · Oct 28, 2023 · b10afe3 · b10afe3
1 parent ffa905b
commit b10afe3
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 52 deletions.
diff --git a/assets/qmk_icon_36.png → public/qmk_icon_36.png b/assets/qmk_icon_36.png → public/qmk_icon_36.png
diff --git a/assets/qmk_icon_512.png → public/qmk_icon_512.png b/assets/qmk_icon_512.png → public/qmk_icon_512.png
diff --git a/src/App.vue b/src/App.vue
@@ -6,7 +6,7 @@
         <p class="random-potato">{{ potatoFact }}</p>
       </header>
       <router-view />
-      <spinner :isVisible="showSpinner" :status="spinnerMsg" />
+      <spinner :is-visible="showSpinner" :status="spinnerMsg" />
       <InfoBar :msg="message" />
     </div>
     <slideout-panel></slideout-panel>
@@ -18,8 +18,8 @@
     <div
       class="help"
       :class="helpClasses"
-      @click="toggleTutorial"
       :title="$t('help.label')"
+      @click="toggleTutorial"
       @mouseenter="
         setMessage($t('help.label'));
         hover = true;
@@ -36,9 +36,9 @@
         size="3x"
       />
       <img
+        v-show="snowflakes && !tutorialEnabled"
         class="santa-hat"
         src="../assets/Santa_hat.svg"
-        v-show="snowflakes && !tutorialEnabled"
         alt="Santa Hat by Theresa Knott [Public domain], via Wikimedia Commons"
       />
       <font-awesome-icon
@@ -48,9 +48,9 @@
         size="3x"
       />
       <img
+        v-show="snowflakes && tutorialEnabled"
         class="jinglebell"
         src="../assets/jinglebell.svg"
-        v-show="snowflakes && tutorialEnabled"
         alt="Jingle Bell SVG Icon made from Icon Fonts is licensed by CC BY 3.0"
       />
     </div>
@@ -97,6 +97,26 @@ export default {
       hover: false
     };
   },
+  computed: {
+    ...mapGetters('keymap', ['isDirty']),
+    ...mapState([
+      'showSpinner',
+      'spinnerMsg',
+      'message',
+      'tutorialEnabled',
+      'snowflakes'
+    ]),
+    showInfoBar() {
+      return this.message !== '';
+    },
+    helpClasses() {
+      var classes = [];
+      if (this.hover) {
+        classes.push('faa-tada', 'animated-hover');
+      }
+      return classes.join(' ');
+    }
+  },
   async beforeMount() {
     await this.appLoad();
     this.randomPotatoFact();
@@ -122,26 +142,6 @@ export default {
     // remove event listener
     window.removeEventListener('beforeunload', this.showConfirmationPrompt);
   },
-  computed: {
-    ...mapGetters('keymap', ['isDirty']),
-    ...mapState([
-      'showSpinner',
-      'spinnerMsg',
-      'message',
-      'tutorialEnabled',
-      'snowflakes'
-    ]),
-    showInfoBar() {
-      return this.message !== '';
-    },
-    helpClasses() {
-      var classes = [];
-      if (this.hover) {
-        classes.push('faa-tada', 'animated-hover');
-      }
-      return classes.join(' ');
-    }
-  },
   methods: {
     ...mapMutations([
       'setShowSpinner',
@@ -236,6 +236,15 @@ export default {
   transform: rotate(-9deg);
 }
 
+.qmk-logo {
+  grid-column: qmk-logo;
+  background-image: url('/qmk_icon_36.png');
+  width: 36px;
+  height: 36px;
+  transform: scale(0.777777);
+  margin-top: 2px;
+}
+
 /* TADA - from https://l-lin.github.io/font-awesome-animation/ */
 @keyframes tada {
   0% {

diff --git a/src/scss/status-bar.scss b/src/scss/status-bar.scss
@@ -18,14 +18,6 @@
   grid-template: 1fr / [qmk-logo] auto [qmk-app-name] auto [api-version];
 }
 
-.qmk-logo {
-  grid-column: qmk-logo;
-  background-image: url('../assets/qmk_icon_36.png');
-  width: 36px;
-  height: 36px;
-  transform: scale(0.777777);
-  margin-top: 2px;
-}
 .qmk-app-name {
   grid-column: qmk-app-name;
   color: #fff;

diff --git a/vue.config.js.old b/vue.config.js.old
diff --git a/yarn.lock b/yarn.lock
@@ -2873,9 +2873,9 @@ camelcase@^6.0.0:
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
 caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30001286, caniuse-lite@^1.0.30001297:
-  version "1.0.30001383"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001383.tgz"
-  integrity sha512-swMpEoTp5vDoGBZsYZX7L7nXHe6dsHxi9o6/LKf/f0LukVtnrxly5GVb/fWdCDTqi/yw6Km6tiJ0pmBacm0gbg==
+  version "1.0.30001555"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001555.tgz"
+  integrity sha512-NzbUFKUnJ3DTcq6YyZB6+qqhfD112uR3uoEnkmfzm2wVzUNsFkU7AwBjKQ654Sp5cau0JxhFyRSn/tQZ+XfygA==
 
 caseless@~0.12.0:
   version "0.12.0"