Finished theming screen : background selection (with randomization op…

…tion), fixes, and dependencies update

babel.config.js

@@ -1,8 +1,5 @@
 module.exports = {
     presets: [
         '@vue/app'
-    ],
-    plugins: [
-        '@babel/plugin-proposal-do-expressions'
     ]
-};
+};

build.sh

@@ -1,4 +1,4 @@
-#!/bin/bash
+#!/bin/sh
 
 echo Building LightDM Webkit theme Litarvan v$(cat version)...
 echo

package.json

@@ -10,15 +10,14 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
-    "@babel/plugin-proposal-do-expressions": "^7.2.0",
     "vue": "^2.6.10",
-    "vue-router": "^3.0.6"
+    "vue-router": "^3.1.3"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.5",
-    "@vue/cli-service": "^3.0.5",
-    "node-sass": "^4.12.0",
-    "sass-loader": "^7.1.0",
+    "@vue/cli-plugin-babel": "^4.0.5",
+    "@vue/cli-service": "^4.0.5",
+    "node-sass": "^4.13.0",
+    "sass-loader": "^8.0.0",
     "vue-template-compiler": "^2.6.10"
   },
   "postcss": {

src/_theme.scss

@@ -2,14 +2,11 @@
  * Nearly all theme colors
  */
 
-$background-image: url(../assets/images/background.png);
-
 $secondary-color: white;
-$primary-color: #249cea;
 $error-color: #de3c2d;
 $password-field-background: rgba(255, 255, 255, 0.2);
 $password-field-caret: rgba($password-field-background, 0.6);
 $password-field-background-setup: rgba($password-field-background,  0.3); // Background on setup screen
 
 $outer-background: black;
-$outer-foreground: white; // Text color mostly
+$outer-foreground: white; // Text color mostly

src/components/Checkbox.vue

@@ -36,8 +36,6 @@
 </script>
 
 <style lang="scss">
-    @import '../theme';
-
     .checkbox {
         border: solid 2px;
         border-radius: 2px;
@@ -53,9 +51,4 @@
     .checkbox:hover {
         cursor: pointer;
     }
-
-    .checkbox.checked {
-        border-color: $primary-color;
-        background: $primary-color;
-    }
 </style>

src/components/PowerButton.vue

@@ -15,13 +15,7 @@
         methods: {
             apply() {
                 if (this.type === 'back') {
-
                     this.$router.push(settings.disableSplash || !settings.first ? '/base/login' : '/base/splash');
-
-                    if (settings.first) {
-                        settings.first = false;
-                    }
-
                     return;
                 }
 

src/lightdm.js

@@ -5,6 +5,18 @@ const DEBUG_PASSWORD = 'test';
 window.lightdm_debug = window.lightdm === undefined;
 
 if (window.lightdm_debug) {
+    window.theme_utils = {
+        dirlist(_) {
+            return [];
+        }
+    };
+
+    window.greeter_config = {
+        branding: {
+            background_images: 'no where this is live test'
+        }
+    };
+
     window.lightdm = {
         is_authenticated: false,
         authentication_user: undefined,
@@ -125,4 +137,4 @@ window.authentication_complete = () => {
 
 window.show_message = (text, type) => {
     errorCB(text);
-};
+};

src/settings.js

@@ -4,7 +4,7 @@ if (local === 'undefined') {
     local = null;
 }
 
-let settings = (local ? JSON.parse(local) : null) || {
+export let settings = (local ? JSON.parse(local) : null) || {
     first: true,
 
     mode: 'classic',
@@ -17,6 +17,7 @@ let settings = (local ? JSON.parse(local) : null) || {
     disableAvatar: false,
     disableZoom: false,
     clock12: false,
+    randomizeBG: false,
 
     user: lightdm.users[0],
     desktop: lightdm.sessions[0]
@@ -28,11 +29,11 @@ lightdm.sessions.forEach(s => settings.desktop.username === s.key && (settings.d
 
 save();
 
-function save(s) {
+export function save(s) {
     localStorage.setItem('settings', JSON.stringify(s ? settings = s : settings));
 }
 
-function avatar(avatar) {
+export function avatar(avatar) {
     if (!avatar || avatar === '') {
         return require('./assets/images/default_user.png');
     }
@@ -43,9 +44,3 @@ function avatar(avatar) {
 
     return avatar;
 }
-
-export {
-    settings,
-    avatar,
-    save
-}

src/themer.js

@@ -1,5 +1,10 @@
-export const DEFAULT = '#249cea';
-export let color = localStorage.getItem('color') || DEFAULT;
+import { settings } from './settings';
+
+export const DEFAULT_COLOR = '#249cea';
+const DEFAULT_BG = require('./assets/images/background.png');
+
+export let color = localStorage.getItem('color') || DEFAULT_COLOR;
+export let background = getBackground();
 
 export function hook(element, rules) {
     const style = element.style;
@@ -9,7 +14,44 @@ export function hook(element, rules) {
     }
 }
 
-export function update(hex) {
+export function updateColor(hex) {
     color = hex;
     localStorage.setItem('color', color);
 }
+
+export function updateBG(bg) {
+    background = bg;
+    localStorage.setItem('background', bg);
+}
+
+export function backgrounds() {
+    let result = [];
+
+    const recDirlist = dir => {
+        let result = [];
+        for (const file of theme_utils.dirlist(dir)) {
+            if (!file.includes('.')) { // I didn't find any good ways to do it
+                result = [...result, ...recDirlist(file)];
+            } else {
+                result.push(file);
+            }
+        }
+
+        return result;
+    };
+
+    for (const bg of recDirlist(greeter_config.branding.background_images)) {
+        result.push('file://' + bg);
+    }
+
+    return [DEFAULT_BG, ...result];
+}
+
+function getBackground() {
+    if(settings.randomizeBG) {
+        const bgs = backgrounds();
+        return bgs[Math.floor(Math.random() * bgs.length)];
+    }
+
+    return localStorage.getItem('background') || DEFAULT_BG;
+}

src/translations.js

@@ -9,6 +9,7 @@ const translations = {
         restart: 'Rebooting...',
 
         setup: 'Setup',
+        theming: 'Theming',
         disableSplash: 'Disable splash ("Press Enter" screen)',
         disableSplashText: 'Disable splash text (clock only)',
         disableIntro: 'Disable intro (OS logo)',
@@ -19,7 +20,9 @@ const translations = {
         clock12: '12-hours clock format',
         capsLock: 'Caps lock is enabled',
 
-        primaryColor: 'Primary color'
+        primaryColor: 'Primary color',
+        randomizeBG: 'Select a random one each time',
+        bgAdd: 'Backgrounds can be added in:'
     },
 
     // French
@@ -31,6 +34,7 @@ const translations = {
         restart: 'Redémarrage...',
 
         setup: 'Réglages',
+        theming: 'Personnalisation',
         disableSplash: 'Désactiver le splash (écran "Appuyez sur entrer")',
         disableSplashText: 'Désactiver le texte du splash (seulement l\'horloge)',
         disableIntro: 'Désactiver l\'introduction (logo de l\'OS)',
@@ -41,7 +45,9 @@ const translations = {
         clock12: 'Format 12 heures de l\'horloge',
         capsLock: 'Verrouillage des majuscules activé',
 
-        primaryColor: 'Couleur principale'
+        primaryColor: 'Couleur principale',
+        randomizeBG: 'En choisir un au hasard à chaque fois',
+        bgAdd: 'Des fonds peuvent être ajoutés dans :'
     },
 
     // Dutch (TODO)
@@ -111,7 +117,12 @@ function getLocale()
 
 function trans(key)
 {
-    const result = translations[getLocale().substring(0, 2)][key];
+    let lang = translations[getLocale().substring(0, 2)];
+    if (!lang) {
+        lang = translations['en'];
+    }
+
+    const result = lang[key];
 
     if (!result) {
         return translations.en[key];

src/views/Base.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="base">
-        <div class="bg" :class="{ blured: isBlured() }">
+        <div class="bg" :class="{ blured: isBlured() }" :style="{ 'background-image': 'url(' + background + ')' }">
         </div>
 
         <transition name="fade">
@@ -10,9 +10,16 @@
 </template>
 
 <script>
+    import { background } from '../themer';
+
     export default {
         name: 'l-base',
 
+        data() {
+            return {
+                background
+            };
+        },
         methods: {
             isBlured() {
                 let name = this.$router.currentRoute.name;
@@ -26,7 +33,6 @@
     @import '../theme';
 
     .bg {
-        background-image: $background-image;
         background-size: cover;
         position: fixed;
         left: 0;
@@ -37,6 +43,8 @@
         height: 100vh;
 
         z-index: -1;
+
+        filter: blur(0px);
         transition: filter 500ms ease-in-out;
 
         color: $secondary-color;

src/views/Setup.vue

@@ -46,6 +46,12 @@
         name: 'setup',
         components: { PowerButton, Login, Checkbox },
 
+        mounted() {
+            if (settings.first) {
+                settings.first = false;
+                save();
+            }
+        },
         data() {
             return {
                 settings: settings,