Fix Key Legend Scaling (qmk#724)

* fix object types of SCALE, KEY_X_SPACING and KEY_Y_SPACING

Need Numbers instead of Strings.

* use new key legend scaling

* linting

Co-authored-by: Yan-Fa Li <yanfali@gmail.com>

src/components/BaseKey.vue

@@ -109,11 +109,6 @@ export default {
       if (this.inSwap) {
         classes.push('swapme');
       }
-      if (this.meta && this.meta.name.length >= 2) {
-        classes.push('smaller');
-      } else {
-        classes.push('thicker');
-      }
       const { KEY_WIDTH, KEY_HEIGHT } = this.config;
       if (!isUndefined(this.meta) && !this.printable) {
         if (this.colorwayOverride && this.colorwayOverride[this.meta.code]) {
@@ -155,6 +150,13 @@ export default {
       if (this.x > 0) {
         styles.push(`left: ${this.x}px;`);
       }
+      if (this.meta && this.meta.name.length >= 2) {
+        let keySize = 0.61;
+        if (this.config.SCALE < 1) {
+          keySize *= (1 + this.config.SCALE) / 2;
+        }
+        styles.push(`font-size: ${keySize}rem;`);
+      }
       return styles.join('');
     }
   },

src/store/modules/keymap.js

@@ -315,7 +315,7 @@ const mutations = {
       KEY_X_SPACING,
       KEY_Y_SPACING
     } = state.config;
-    Vue.set(state.config, 'SCALE', (defaults.MAX_X / max.x).toFixed(3));
+    Vue.set(state.config, 'SCALE', (defaults.MAX_X / max.x).toFixed(3) * 1);
     Vue.set(state.config, 'KEY_WIDTH', (KEY_WIDTH *= state.config.SCALE));
     Vue.set(state.config, 'KEY_HEIGHT', (KEY_HEIGHT *= state.config.SCALE));
     Vue.set(
@@ -331,12 +331,12 @@ const mutations = {
     Vue.set(
       state.config,
       'KEY_X_SPACING',
-      (KEY_X_SPACING *= state.config.SCALE)
+      (KEY_X_SPACING *= state.config.SCALE).toFixed(3) * 1
     );
     Vue.set(
       state.config,
       'KEY_Y_SPACING',
-      (KEY_Y_SPACING *= state.config.SCALE)
+      (KEY_Y_SPACING *= state.config.SCALE).toFixed(3) * 1
     );
   },
   initKeymap(state, { layout, layer, code = 'KC_NO' }) {