diff --git a/src/components/SettingsPanel.vue b/src/components/SettingsPanel.vue index 569f659f8c..c94d78eb02 100644 --- a/src/components/SettingsPanel.vue +++ b/src/components/SettingsPanel.vue @@ -91,6 +91,28 @@ +
+ +
+
+ +
-
- -
-
- -
{{ helpText }}
@@ -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) { diff --git a/src/components/VisualTesterKeymap.vue b/src/components/VisualTesterKeymap.vue index c294c8d895..ba266496ea 100644 --- a/src/components/VisualTesterKeymap.vue +++ b/src/components/VisualTesterKeymap.vue @@ -1,6 +1,17 @@