🌐 Adds localisation for Settings, Config and Theme maker

src/assets/locales/en-GB.json

@@ -49,6 +49,29 @@
     "css-note-l2": "Styles overrides are only stored locally, so it is recommended to make a copy of your CSS.",
     "css-note-l3": "To remove all custom styles, delete the contents and hit Save Changes"
   },
+  "settings": {
+    "theme-label": "Theme",
+    "layout-label": "Layout",
+    "layout-auto": "Auto",
+    "layout-horizontal": "Horizontal",
+    "layout-vertical": "Vertical",
+    "item-size-label": "Item Size",
+    "item-size-small": "Small",
+    "item-size-medium": "Medium",
+    "item-size-large": "Large",
+    "config-launcher-label": "Config"
+  },
+  "theme-maker": {
+    "title": "Theme Configurator",
+    "export-button": "Export Custom Variables",
+    "reset-button": "Reset Styles for",
+    "show-all-button": "Show All Variables",
+    "save-button": "Save",
+    "cancel-button": "Cancel",
+    "saved-toast": "{theme} Updated Successfully",
+    "copied-toast": "Theme data for {theme} copied to clipboard",
+    "reset-toast": "Custom Colors for {theme} Removed"
+  },
   "config-editor": {
     "save-location-label": "Save Location",
     "location-local-label": "Apply Locally",

src/components/Settings/ConfigLauncher.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="config-options">
     <!-- Button and label -->
-    <span>Config</span>
+    <span>{{ $t('settings.config-launcher-label') }}</span>
     <div class="config-buttons">
       <IconSpanner @click="showEditor()" tabindex="-2"
-        v-tooltip="tooltip('Update configuration locally')" />
+        v-tooltip="tooltip('Update configuration')" />
       <IconCloud @click="showCloudModal()" tabindex="-2"
         v-tooltip="tooltip('Backup / restore cloud config')" />
     </div>

src/components/Settings/CustomThemeMaker.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="`theme-configurator-wrapper ${showingAllVars ? 'showing-all' : ''}`">
-    <h3 class="configurator-title">Theme Configurator</h3>
+    <h3 class="configurator-title">{{ $t('theme-maker.title') }}</h3>
     <div class="color-row-container">
     <div class="color-row" v-for="colorName in Object.keys(customColors)" :key="colorName">
       <label :for="`color-input-${colorName}`" class="color-name">
@@ -33,17 +33,21 @@
     </div> <!-- End of color list -->
     </div>
     <p @click="exportToClipboard" class="action-text-btn">
-      Export Custom Variables
+      {{ $t('theme-maker.export-button') }}
     </p>
     <p @click="resetAndSave" class="action-text-btn show-all-vars-btn">
-      Reset Styles for '{{ themeToEdit }}'
+       {{ $t('theme-maker.reset-button') }} '{{ themeToEdit }}'
     </p>
     <p @click="findAllVariableNames" class="action-text-btn">
-      Show All Variables
+       {{ $t('theme-maker.show-all-button') }}
     </p>
     <div class="action-buttons">
-      <Button :click="saveChanges"><SaveIcon />Save</Button>
+      <Button :click="saveChanges">
-      <Button :click="resetUnsavedColors"><CancelIcon />Cancel</Button>
+        <SaveIcon /> {{ $t('theme-maker.save-button') }}
+      </Button>
+      <Button :click="resetUnsavedColors">
+        <CancelIcon /> {{ $t('theme-maker.cancel-button') }}
+      </Button>
     </div>
   </div>
 </template>
@@ -89,7 +93,7 @@ export default {
       const priorSettings = JSON.parse(localStorage[localStorageKeys.CUSTOM_COLORS] || '{}');
       priorSettings[this.themeToEdit] = this.customColors;
       localStorage.setItem(localStorageKeys.CUSTOM_COLORS, JSON.stringify(priorSettings));
-      this.$toasted.show('Theme Updates Succesfully');
+      this.$toasted.show(this.$t('theme-maker.saved-toast', { theme: this.themeToEdit }));
       this.$emit('closeThemeConfigurator');
     },
     /* Itterates over available variables, removing them from the DOM */
@@ -107,7 +111,7 @@ export default {
       delete priorSettings[this.themeToEdit];
       localStorage.setItem(localStorageKeys.CUSTOM_COLORS, JSON.stringify(priorSettings));
       this.resetUnsavedColors();
-      this.$toasted.show(`Custom Colors for ${this.themeToEdit} Removed`);
+      this.$toasted.show(this.$t('theme-maker.reset-toast', { theme: this.themeToEdit }));
     },
     /* Generates CSS for the currently applied variables, and copys to users clipboard */
     exportToClipboard() {
@@ -117,7 +121,7 @@ export default {
         clipboardText += (`--${customVar}: ${this.customColors[customVar]};\n`);
       });
       navigator.clipboard.writeText(clipboardText);
-      this.$toasted.show(`Theme data for ${themeName} copied to clipboard`);
+      this.$toasted.show(this.$t('theme-maker.copied-toast', { theme: themeName }));
     },
     /* Returns a JSON object, with the variable name as key, and color as value */
     makeInitialData(variableArray) {

src/components/Settings/ItemSizeSelector.vue

@@ -1,13 +1,25 @@
 <template>
   <div>
-    <span class="options-label">Icon Size</span>
+    <span class="options-label">{{ $t('settings.item-size-label') }}</span>
     <div class="display-options">
-      <IconSmall @click="updateIconSize('small')" v-tooltip="tooltip('Small')"
+      <IconSmall
-        :class="`layout-icon ${iconSize === 'small' ? 'selected' : ''}`" tabindex="-2" />
+        @click="updateIconSize('small')"
-      <IconMedium @click="updateIconSize('medium')" v-tooltip="tooltip('Medium')"
+        v-tooltip="tooltip($t('settings.item-size-small'))"
-        :class="`layout-icon ${iconSize === 'medium' ? 'selected' : ''}`" tabindex="-2" />
+        :class="`layout-icon ${iconSize === 'small' ? 'selected' : ''}`"
-      <IconLarge @click="updateIconSize('large')" v-tooltip="tooltip('Large')"
+        tabindex="-2"
-        :class="`layout-icon ${iconSize === 'large' ? 'selected' : ''}`" tabindex="-2" />
+      />
+      <IconMedium
+        @click="updateIconSize('medium')"
+        v-tooltip="tooltip($t('settings.item-size-medium'))"
+        :class="`layout-icon ${iconSize === 'medium' ? 'selected' : ''}`"
+        tabindex="-2"
+      />
+      <IconLarge
+        @click="updateIconSize('large')"
+        v-tooltip="tooltip($t('settings.item-size-large'))"
+        :class="`layout-icon ${iconSize === 'large' ? 'selected' : ''}`"
+        tabindex="-2"
+      />
     </div>
   </div>
 </template>

src/components/Settings/LayoutSelector.vue

@@ -1,13 +1,25 @@
 <template>
   <div>
-    <span class="options-label">Layout</span>
+    <span class="options-label">{{ $t('settings.layout-label') }}</span>
     <div class="display-options">
-      <IconDeafault @click="updateDisplayLayout('auto')" v-tooltip="tooltip('Auto')"
+      <IconDeafault
-        :class="`layout-icon ${displayLayout === 'auto' ? 'selected' : ''}`" tabindex="-2" />
+        @click="updateDisplayLayout('auto')"
-      <IconHorizontal @click="updateDisplayLayout('horizontal')" v-tooltip="tooltip('Horizontal')"
+        v-tooltip="tooltip($t('settings.layout-auto'))"
-        :class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`" tabindex="-2" />
+        :class="`layout-icon ${displayLayout === 'auto' ? 'selected' : ''}`"
-      <IconVertical @click="updateDisplayLayout('vertical')" v-tooltip="tooltip('Vertical')"
+        tabindex="-2"
-        :class="`layout-icon ${displayLayout === 'vertical' ? 'selected' : ''}`" tabindex="-2" />
+      />
+      <IconHorizontal
+        @click="updateDisplayLayout('horizontal')"
+        v-tooltip="tooltip($t('settings.layout-horizontal'))"
+        :class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`"
+        tabindex="-2"
+      />
+      <IconVertical
+        @click="updateDisplayLayout('vertical')"
+        v-tooltip="tooltip($t('settings.layout-vertical'))"
+        :class="`layout-icon ${displayLayout === 'vertical' ? 'selected' : ''}`"
+        tabindex="-2"
+      />
     </div>
   </div>
 </template>

src/components/Settings/ThemeSelector.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="theme-selector-section" v-click-outside="closeThemeConfigurator">
     <div>
-    <span class="theme-label">Theme</span>
+    <span class="theme-label">{{ $t('settings.theme-label') }}</span>
     <v-select
       :options="themeNames"
       v-model="selectedTheme"