feat: add keyboard layout selector

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightdm-webkit-theme-litarvan",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "license": "BSD-3-Clause",
   "author": "Adrien 'Litarvan' Navratil <[email protected]>",
   "homepage": "https://litarvan.github.io/lightdm-webkit-theme-litarvan/",

src/components/SelectLayout.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="item" :class="{ 'selected': selected }" v-theming="['border-bottom-color']" v-italic @click="select()"></div>
+</template>
+
+<script>
+    import { settings, save } from '@/settings';
+
+    export default {
+        name: 'l-select-layout',
+        props: ['selected'],
+
+        data() {
+            return {
+                settings,
+                save,
+            };
+        },
+        methods: {
+            select() {
+                this.$emit('select');
+            },
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    .item {
+        font-family: 'Lato', 'Noto Sans', sans-serif;
+
+        border-radius: 5px;
+        transition: background-color 125ms ease-in-out;
+
+        min-width: 150px;
+    }
+
+    .item.selected {
+        border-bottom: solid 2px;
+        background: rgba(255, 255, 255, 0.055);
+    }
+
+    .item:hover {
+        cursor: pointer;
+        background: rgba(255, 255, 255, 0.115);
+    }
+</style>

src/router.js

@@ -9,6 +9,7 @@ import Setup from './views/Setup.vue';
 import Select from './views/Select.vue';
 import Theming from './views/Theming';
 import Blur from './views/Blur';
+import Layout from './views/Layout';
 
 Vue.use(Router);
 
@@ -55,6 +56,11 @@ export default new Router({
                     component: Select
                 }
             ]
-        }
+        },
+        {
+            path: '/layout',
+            name: 'layout',
+            component: Layout,
+        },
     ]
 });

src/settings.js

@@ -9,6 +9,7 @@ export let settings = (local ? JSON.parse(local) : null) || {
 
     mode: 'classic',
     blur: 'fixed',
+    layout: lightdm.layout,
 
     disableSplash: false,
     disableSplashText: false,
@@ -37,6 +38,12 @@ if (!settings.blur) {
     settings.blur = 'fixed'; // 3.2 update
 }
 
+if (!settings.layout) {
+    settings.layout = lightdm.layout; // 3.3 update
+} else {
+    lightdm.layout = settings.layout; // ensure layout is loaded
+}
+
 // Handle display name change
 lightdm.users.forEach(u => settings.user.username === u.username && (settings.user = u));
 lightdm.sessions.forEach(s => settings.desktop.username === s.key && (settings.desktop = s));

src/translations.js

@@ -33,7 +33,11 @@ const translations = {
         absoluteBlur: 'Blurred background - absolute background',
         staticBlur: 'Blurred background without transition',
         disabledBlur: 'Disable background blurring',
-        blurHelp: 'If you are having issues with blur like lags or artifacts, please try a different blur method.\nYou can disable the transition or even the entire blur if nothing is working.'
+        blurHelp: 'If you are having issues with blur like lags or artifacts, please try a different blur method.\nYou can disable the transition or even the entire blur if nothing is working.',
+
+        selectLayout: 'Change keyboard layout',
+        layouts: 'Layouts',
+        keyboardPlaceholder: 'Type here to test the keyboard layout...',
     },
 
     // French
@@ -70,7 +74,11 @@ const translations = {
         absoluteBlur: 'Floutage du fond - fond \'absolute\'',
         staticBlur: 'Floutage du fond sans transition',
         disabledBlur: 'Désactiver le floutage du fond',
-        blurHelp: 'Si vous avez des problèmes avec le floutage comme des lags ou des artifacts, essayez une autre option de floutage.\nVous pouvez désactiver la transition ou le floutage lui-même si aucune autre option ne fonctionne.'
+        blurHelp: 'Si vous avez des problèmes avec le floutage comme des lags ou des artifacts, essayez une autre option de floutage.\nVous pouvez désactiver la transition ou le floutage lui-même si aucune autre option ne fonctionne.',
+
+        selectLayout: 'Changer la disposition de clavier',
+        layouts: 'Dispositions',
+        keyboardPlaceholder: 'Tapez ici pour tester la disposition clavier...',
     },
 
     // Dutch (TODO)

src/views/Layout.vue

@@ -0,0 +1,133 @@
+<template>
+    <div id="select-view">
+        <h1 id="layout-title" v-italic>{{ texts.title }}</h1>
+
+        <div id="select">
+            <l-select-layout
+                    v-for="layout of layouts"
+                    v-text="layout.description"
+
+                    :selected="layout.name === selected.name"
+
+                    @select="select(layout)"
+            />
+        </div>
+
+        <textarea id="textarea" :placeholder="texts.keyboardPlaceholder" v-theming="['border-bottom-color']" v-italic.custom></textarea>
+
+        <l-power-button id="back" type="back" />
+    </div>
+</template>
+
+<script>
+    import LPowerButton from '@/components/PowerButton';
+    import LSelectLayout from '@/components/SelectLayout';
+    import { save, settings } from '@/settings';
+    import { trans } from '@/translations';
+
+    export default {
+        name: 'l-layout-select',
+        components: { LPowerButton, LSelectLayout },
+        data() {
+            return {
+                layouts: lightdm.layouts.sort((a, b) => a.description >= b.description || -1) || [],
+                selected: settings.layout || "",
+                texts: {
+                    title: trans('layouts'),
+                    keyboardPlaceholder: trans('keyboardPlaceholder'),
+                },
+            }
+        },
+
+        methods: {
+            select(layout) {
+                settings.layout = layout;
+                lightdm.layout = layout;
+                save();
+                this.$router.back();
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "../theme";
+
+    #select-view {
+        font-family: 'Lato', 'Noto Sans', sans-serif;
+        font-weight: 300;
+
+        color: $outer-foreground;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    #layout-title {
+        font-size: 72px;
+        font-weight: 300;
+        margin-top: 7vh;
+    }
+
+    #select {
+        display: flex;
+        flex-wrap: nowrap;
+        flex-direction: column;
+        overflow: auto;
+
+        font-family: 'Lato', 'Noto Sans', sans-serif;
+        font-weight: normal;
+        font-size: 44px;
+
+        text-align: center;
+        margin-bottom: 7vh;
+
+        scrollbar-width: thin;
+        scrollbar-color: var(--primary-color);
+    }
+
+    #textarea {
+        font-weight: 300;
+    }
+
+    #textarea, #textarea:focus {
+        outline: none;
+    }
+
+    #textarea::placeholder {
+        color: rgba($secondary-color, 0.55);
+        opacity: 1;
+    }
+
+    #textarea.italic::placeholder {
+        font-style: italic;
+    }
+
+    #textarea {
+        margin-bottom: 3vh;
+        resize: none;
+
+        font-family: 'Lato', 'Noto Sans', sans-serif;
+
+        background: $password-field-background;
+        caret-color: $password-field-caret;
+        color: $secondary-color;
+
+        padding-left: 15px;
+        padding-right: 15px;
+        padding-top: 30px;
+        font-size: 24px;
+        rows: 3;
+
+        width: 400px;
+
+        border: none;
+        border-bottom: solid 3px;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+
+        scrollbar-width: none;
+    }
+</style>

src/views/Setup.vue

@@ -18,6 +18,7 @@
             <div class="checkbox-line"><l-checkbox v-model="settings.disableIntro" /><label>{{ texts.disableIntro }}</label></div>
             <div class="checkbox-line"><l-checkbox v-model="settings.clock12" /><label>{{ texts.clock12 }}</label></div>
             <div class="checkbox-line"><l-checkbox v-model="settings.disablePowerTexts" /><label>{{ texts.disablePowerTexts }}</label></div>
+            <div class="checkbox-line"><router-link to="/layout" class="layout-settings">{{ texts.selectLayout }}</router-link></div>
         </div>
 
         <div id="right-settings" class="settings">
@@ -69,6 +70,7 @@
                     disablePowerTexts: trans('disablePowerTexts'),
                     blurSettings: trans('blurSettings'),
                     hideUsername: trans('hideUsername'),
+                    selectLayout: trans('selectLayout'),
                 }
             }
         },
@@ -295,7 +297,7 @@
         }
     }
 
-    .blur-settings {
+    .blur-settings, .layout-settings {
         color: white;
         vertical-align: 7px;
     }

version

@@ -1 +1 @@
-3.2.0
+3.3.0