Add support for intl key legends based on the host keyboard layout

src/components/SettingsPanel.vue

@@ -91,6 +91,28 @@
           </option>
         </select>
       </div>
+      <div>
+        <label
+          class="settings-panel--text"
+          @mouseover="help('osKeyboardLayout')"
+          :title="$t('settingsPanel.osKeyboardLayout.title')"
+          >{{ $t('settingsPanel.osKeyboardLayout.title') }}</label
+        >
+      </div>
+      <div>
+        <select
+          id="setting-panel-os-keyboard-layout"
+          v-model="osKeyboardLayout"
+        >
+          <option
+            v-for="osLayout in sortedOSKeyboardLayouts"
+            :key="osLayout"
+            :value="osLayout"
+          >
+            {{ $t(`settingsPanel.osKeyboardLayout.label.${osLayout}`) }}
+          </option>
+        </select>
+      </div>
       <div>
         <label
           class="settings-panel--clear-keymap"
@@ -109,24 +131,6 @@
           />
         </div>
       </div>
-      <div>
-        <label
-          class="settings-panel--text"
-          @mouseover="help('iso')"
-          :title="$t('settingsPanel.iso.label')"
-          >{{ $t('settingsPanel.iso.label') }}</label
-        >
-      </div>
-      <div>
-        <toggle-button
-          id="setting-toggle-iso"
-          :value="configuratorSettings.iso"
-          :width="defaultWidth"
-          :sync="true"
-          :labels="labels"
-          @change="iso"
-        />
-      </div>
     </div>
     <div v-if="helpText" class="settings-panel--help-text">{{ helpText }}</div>
   </div>
@@ -157,15 +161,44 @@ export default {
     ...mapState('app', [
       'tutorialEnabled',
       'configuratorSettings',
-      'languages'
+      'languages',
+      'osKeyboardLayouts'
     ]),
     language: {
       get() {
         return this.configuratorSettings.language;
       },
       async set(value) {
-        await this.changeLanguage(value);
+        try {
+          await this.changeLanguage(value);
+        } catch (error) {
+          console.error('Setting a new value for the language failed!');
+          console.errror(error);
+        }
+      }
+    },
+    osKeyboardLayout: {
+      get() {
+        return this.configuratorSettings.osKeyboardLayout;
+      },
+      async set(value) {
+        try {
+          await this.changeOSKeyboardLayout(value);
+        } catch (error) {
+          console.error(
+            'Setting a new value for the OS keyboard layout failed!'
+          );
+          console.errror(error);
+        }
       }
+    },
+    sortedOSKeyboardLayouts: function () {
+      // Locale-aware sort of the OS keyboard layouts by their labels.
+      const translatedLayoutName = (osLayout) =>
+        this.$t(`settingsPanel.osKeyboardLayout.label.${osLayout}`);
+      return [...this.osKeyboardLayouts].sort((a, b) =>
+        translatedLayoutName(a).localeCompare(translatedLayoutName(b))
+      );
     }
   },
   methods: {
@@ -174,6 +207,7 @@ export default {
     ...mapActions('app', [
       'toggleDarkMode',
       'changeLanguage',
+      'changeOSKeyboardLayout',
       'toggleClearLayerDefault',
       'toggleIso'
     ]),
@@ -203,12 +237,15 @@ export default {
         case 'language':
           this.helpText = this.$t('settingsPanel.language.help');
           break;
-        case 'clearLayer':
-          this.helpText = this.$t('settingsPanel.clearLayer.help');
+        case 'osKeyboardLayout':
+          this.helpText = this.$t('settingsPanel.osKeyboardLayout.help');
           break;
         case 'iso':
           this.helpText = this.$t('settingsPanel.iso.help');
           break;
+        case 'clearLayer':
+          this.helpText = this.$t('settingsPanel.clearLayer.help');
+          break;
       }
 
       if (this.clearTextTimer) {

src/components/VisualTesterKeymap.vue

@@ -1,6 +1,17 @@
 <template>
   <div class="tester">
-    <div class="layout-selector-radios"></div>
+    <div class="layout-selector-radios">
+      <slot v-for="_layout in availableLayouts">
+        <button
+          class="layout-btn-select"
+          v-on:click="layout = _layout"
+          :key="_layout"
+          :class="{ active: _layout === layout }"
+        >
+          {{ _layout }}
+        </button>
+      </slot>
+    </div>
     <div class="visual-tester-keymap" :style="styles">
       <template v-for="meta in testerLayer">
         <component

src/i18n/de.csv

@@ -111,14 +111,18 @@ settingsPanel:displaySizes:title,strg + alt + u
 settingsPanel:fastInput:help,"Gib die Tasten über die Tastatur ein, ohne auf die einzelnen Positionen zu klicken"
 settingsPanel:fastInput:label,Schnelle Eingabe
 settingsPanel:fastInput:title,strg + alt + f
-settingsPanel:iso:help,ISO-Legenden standardmäßig anzeigen
-settingsPanel:iso:label,Verwenden Sie ISO-Schlüssellegenden
 settingsPanel:kcno:label,KC_NO
 settingsPanel:kctrns:label,KC_TRNS
 settingsPanel:language:help,
 settingsPanel:language:title,Sprache
 settingsPanel:off:label,Aus
 settingsPanel:on:label,An
+settingsPanel:osKeyboardLayout:help,Stellen Sie die Tastenbeschriftung auf das Systemlayout.
+settingsPanel:osKeyboardLayout:label:keymap_german,Deutsch (Deutschland & Österreich)
+settingsPanel:osKeyboardLayout:label:keymap_russian,Russisch
+settingsPanel:osKeyboardLayout:label:keymap_uk,Englisch (UK)
+settingsPanel:osKeyboardLayout:label:keymap_us,Englisch (US)
+settingsPanel:osKeyboardLayout:title,Systemlayout
 settingsPanel:snowflakes:label,
 settingsPanel:snowflakes:title,
 settingsPanel:title,Einstellungen

src/i18n/en.csv

@@ -111,14 +111,18 @@ settingsPanel:displaySizes:title,ctrl + alt + u
 settingsPanel:fastInput:help,Input keys via keyboard without clicking each position.
 settingsPanel:fastInput:label,Fast Input
 settingsPanel:fastInput:title,ctrl + alt + f
-settingsPanel:iso:help,Display ISO legends by default
-settingsPanel:iso:label,Use ISO key legends
 settingsPanel:kcno:label,KC_NO
 settingsPanel:kctrns:label,KC_TRNS
 settingsPanel:language:help,Change the language of the user interface
 settingsPanel:language:title,Language
 settingsPanel:off:label,Off
 settingsPanel:on:label,On
+settingsPanel:osKeyboardLayout:help,Change the key legends to match with your host keyboard layout.
+settingsPanel:osKeyboardLayout:label:keymap_german,German (Germany & Austria)
+settingsPanel:osKeyboardLayout:label:keymap_russian,Russian
+settingsPanel:osKeyboardLayout:label:keymap_uk,English (UK)
+settingsPanel:osKeyboardLayout:label:keymap_us,English (US)
+settingsPanel:osKeyboardLayout:title,Host Keyboard Layout
 settingsPanel:snowflakes:label,Toggle Snowflakes
 settingsPanel:snowflakes:title,Snowflakes
 settingsPanel:title,Configurator Settings

src/i18n/es.csv

@@ -111,14 +111,18 @@ settingsPanel:displaySizes:title,ctrl + alt + u
 settingsPanel:fastInput:help,Ingresar teclas por medio del teclado sin hacer click en cada posición.
 settingsPanel:fastInput:label,Entrada rápida
 settingsPanel:fastInput:title,ctrl + alt + f
-settingsPanel:iso:help,Mostrar leyendas ISO de forma predeterminada
-settingsPanel:iso:label,Utilice leyendas clave ISO
 settingsPanel:kcno:label,KC_NO
 settingsPanel:kctrns:label,KC_TRNS
 settingsPanel:language:help,
 settingsPanel:language:title,Idioma
 settingsPanel:off:label,No
 settingsPanel:on:label,Sí
+settingsPanel:osKeyboardLayout:help,
+settingsPanel:osKeyboardLayout:label:keymap_german,Alemán (Alemania y Austria)
+settingsPanel:osKeyboardLayout:label:keymap_russian,Ruso
+settingsPanel:osKeyboardLayout:label:keymap_uk,Inglés (Reino Unido)
+settingsPanel:osKeyboardLayout:label:keymap_us,Inglés (Estados Unidos)
+settingsPanel:osKeyboardLayout:title,
 settingsPanel:snowflakes:label,
 settingsPanel:snowflakes:title,
 settingsPanel:title,Configuración de Configurator

src/i18n/fr.csv

@@ -111,14 +111,18 @@ settingsPanel:displaySizes:title,ctrl + alt + u
 settingsPanel:fastInput:help,Permet d'entrer les touches via votre clavier sans cliquer sur chaque position.
 settingsPanel:fastInput:label,Entrée Rapide
 settingsPanel:fastInput:title,ctrl + alt + f
-settingsPanel:iso:help,Afficher les légendes ISO par défaut
-settingsPanel:iso:label,Utiliser les légendes des clés ISO
 settingsPanel:kcno:label,KC_NO
 settingsPanel:kctrns:label,KC_TRNS
 settingsPanel:language:help,
 settingsPanel:language:title,Langue
 settingsPanel:off:label,Off
 settingsPanel:on:label,On
+settingsPanel:osKeyboardLayout:help,Change les légendes des touches pour qu'elles correspondent à la disposition des touches du système.
+settingsPanel:osKeyboardLayout:label:keymap_german,Allemand (Allemagne & Autriche)
+settingsPanel:osKeyboardLayout:label:keymap_russian,Russe
+settingsPanel:osKeyboardLayout:label:keymap_uk,Anglais (Royaume-Uni)
+settingsPanel:osKeyboardLayout:label:keymap_us,Anglais (États-Unis)
+settingsPanel:osKeyboardLayout:title,Disposition des touches du système d'opération
 settingsPanel:snowflakes:label,
 settingsPanel:snowflakes:title,
 settingsPanel:title,Paramètres du Configurateur

src/i18n/it.csv

@@ -111,14 +111,18 @@ settingsPanel:displaySizes:title,Ctrl + Alt + U
 settingsPanel:fastInput:help,Inserire i tasti tramite la tastiera senza fare clic su ogni posizione.
 settingsPanel:fastInput:label,Ingresso rapido
 settingsPanel:fastInput:title,Ctrl + Alt + F
-settingsPanel:iso:help,Visualizza le legende ISO automaticamente
-settingsPanel:iso:label,Usa le legende delle chiavi ISO
 settingsPanel:kcno:label,KC_NO
 settingsPanel:kctrns:label,KC_TRNS
 settingsPanel:language:help,Cambia lingua dell'interfaccia utente
 settingsPanel:language:title,Lingua
 settingsPanel:off:label,Spegnimento
 settingsPanel:on:label,Accensione
+settingsPanel:osKeyboardLayout:help,
+settingsPanel:osKeyboardLayout:label:keymap_german,Tedesco (Germania e Austria)
+settingsPanel:osKeyboardLayout:label:keymap_russian,Russo
+settingsPanel:osKeyboardLayout:label:keymap_uk,Inglese (Regno Unito)
+settingsPanel:osKeyboardLayout:label:keymap_us,Inglese (US)
+settingsPanel:osKeyboardLayout:title,
 settingsPanel:snowflakes:label,Azionare fiocchi di neve
 settingsPanel:snowflakes:title,Fiocchi di neve
 settingsPanel:title,Impostazioni Configuratore

src/i18n/ja.csv

@@ -111,14 +111,18 @@ settingsPanel:displaySizes:title,ctrl + alt + u
 settingsPanel:fastInput:help,各位置をクリックせずキーボードでキーを入力する
 settingsPanel:fastInput:label,高速入力
 settingsPanel:fastInput:title,ctrl + alt + f
-settingsPanel:iso:help,デフォルトでISO凡例を表示
-settingsPanel:iso:label,ISOキーの凡例を使用する
 settingsPanel:kcno:label,KC_NO
 settingsPanel:kctrns:label,KC_TRNS
 settingsPanel:language:help,ユーザインタフェースの言語を変更する
 settingsPanel:language:title,言語
 settingsPanel:off:label,Off
 settingsPanel:on:label,On
+settingsPanel:osKeyboardLayout:help,
+settingsPanel:osKeyboardLayout:label:keymap_german,ドイツ語（ドイツ・オーストリア）
+settingsPanel:osKeyboardLayout:label:keymap_russian,ロシア語
+settingsPanel:osKeyboardLayout:label:keymap_uk,英語 (UK)
+settingsPanel:osKeyboardLayout:label:keymap_us,英語 (US)
+settingsPanel:osKeyboardLayout:title,
 settingsPanel:snowflakes:label,雪の切り替え
 settingsPanel:snowflakes:title,雪
 settingsPanel:title,Configuratorの設定