refactor sizesetting into unitsetting allowing more unit types with i18n support

src/components/settings_modal/helpers/unit_setting.js

@@ -17,6 +17,10 @@ export default {
     units: {
       type: Array,
       default: () => allCssUnits
+    },
+    unitSet: {
+      type: String,
+      default: 'none'
     }
   },
   computed: {
@@ -30,6 +34,10 @@ export default {
   },
   methods: {
     ...Setting.methods,
+    getUnitString (value) {
+      if (this.unitSet === 'none') return value
+      return this.$t(['settings', 'units', this.unitSet, value].join('.'))
+    },
     updateValue (e) {
       this.configSink(this.path, parseInt(e.target.value) + this.stateUnit)
     },

src/components/settings_modal/helpers/unit_setting.vue

@@ -1,7 +1,7 @@
 <template>
   <span
     v-if="matchesExpertLevel"
-    class="SizeSetting"
+    class="UnitSetting"
   >
     <label
       :for="path"
@@ -23,7 +23,7 @@
       :id="path"
       :model-value="stateUnit"
       :disabled="disabled"
-      class="css-unit-input"
+      class="unit-input unstyled"
       @change="updateUnit"
     >
       <option
@@ -31,7 +31,7 @@
         :key="option"
         :value="option"
       >
-        {{ option }}
+        {{ getUnitString(option) }}
       </option>
     </Select>
     {{ ' ' }}
@@ -42,20 +42,19 @@
   </span>
 </template>
 
-<script src="./size_setting.js"></script>
+<script src="./unit_setting.js"></script>
 
 <style lang="scss">
-.SizeSetting {
+.UnitSetting {
   .number-input {
     max-width: 6.5em;
+    text-align: right;
   }
 
-  .css-unit-input,
-  .css-unit-input select {
-    margin-left: 0.5em;
-    width: 4em;
-    max-width: 4em;
+  .unit-input,
+  .unit-input select {
     min-width: 4em;
+    width: auto;
   }
 }