diff --git a/client/src/components/settings.vue b/client/src/components/settings.vue
index 16660415..5f0fd127 100644
--- a/client/src/components/settings.vue
+++ b/client/src/components/settings.vue
@@ -35,6 +35,22 @@
+
+ {{ $t('setting.keyboard_layout') }}
+
+
@@ -182,6 +198,31 @@
}
}
}
+
+ .select {
+ max-width: 120px;
+
+ select {
+ display: block;
+ width: 100%;
+ max-width: 100%;
+ padding: 4px;
+ margin: 0;
+ line-height: 30px;
+ font-weight: bold;
+ border: 0;
+ border-radius: 12px;
+
+ color: black;
+ background-color: $style-primary;
+
+ option {
+ font-weight: normal;
+ color: $text-normal;
+ background-color: $background-tertiary;
+ }
+ }
+ }
}
}
}
@@ -236,6 +277,14 @@
this.$accessor.settings.setSound(value)
}
+ get keyboard_layout() {
+ return this.$accessor.settings.keyboard_layout
+ }
+
+ set keyboard_layout(value: string) {
+ this.$accessor.settings.setKeyboardLayout(value)
+ }
+
logout() {
this.$accessor.logout()
}
diff --git a/client/src/locale/en-us.ts b/client/src/locale/en-us.ts
index 1dfe6454..2cb49328 100644
--- a/client/src/locale/en-us.ts
+++ b/client/src/locale/en-us.ts
@@ -60,6 +60,7 @@ export const setting = {
autoplay: 'Autoplay Video',
ignore_emotes: 'Ignore Emotes',
chat_sound: 'Play Chat Sound',
+ keyboard_layout: 'Change Keyboard Layout',
}
export const connection = {
diff --git a/client/src/store/settings.ts b/client/src/store/settings.ts
index 9e1e29a3..ba3d06b7 100644
--- a/client/src/store/settings.ts
+++ b/client/src/store/settings.ts
@@ -10,6 +10,7 @@ export const state = () => {
autoplay: get('autoplay', true),
ignore_emotes: get('ignore_emotes', false),
chat_sound: get('chat_sound', true),
+ keyboard_layout: get('keyboard_layout', 'us'),
}
}
@@ -40,4 +41,9 @@ export const mutations = mutationTree(state, {
state.chat_sound = value
set('chat_sound', value)
},
+
+ setKeyboardLayout(state, value: string) {
+ state.keyboard_layout = value
+ set('keyboard_layout', value)
+ },
})