Update

README.md

@@ -45,7 +45,7 @@ I can tell you how to install it on Arch Linux:
 1. Download from AUR `lightdm-webkit-material-git`
 2. Enable the theme in your `/etc/lightdm/lightdm-webkit2-greeter.conf`
   - Search for `greeter` section
-  - Set `webkit-theme` to `lightdm-webkit-material`
+  - Set `webkit-theme` to `material`
 
 ### Updating
 1. In the terminal, `cd` to `/usr/share/lightdm-webkit/themes/lightdm-webkit-material/`

assets/css/style.css

@@ -3,7 +3,7 @@ html, body {
 }
 
 body {
-    background-image: url("../ui/background-blue.jpg");
+    background-image: url("../ui/background/background-blue.jpg");
     background-size: cover;
     background-attachment: fixed;
     -webkit-user-select: none

assets/js/clock.js

@@ -1,19 +1,35 @@
+startTime();
+
 function startTime(){
     var date = new Date();
 
     var hour = date.getHours();
     var minute = date.getMinutes();
     var second = date.getSeconds();
+    var suffix = "";
+
+    //12-hour clock support :)
+    if(settings['clockStyle'] == "1"){
+        if(hour > 12){
+            suffix = "p.m.";
+            hour = hour - 12;
+        }else{
+            suffix = "a.m.";
+        }
+    }
 
+    //Add "0" before minutes, if minute is smaller than 10
     if(minute < 10){
         minute = "0" + minute;
     }
 
+    //Add "0" before seconds, if seconds is smaller than 10
     if(second < 10){
         second = "0" + second;
     }
 
-    $("#clock").html(hour + ":" + minute + ":" + second);
+    //Update clock!
+    $("#clock").html(hour + ":" + minute + ":" + second + " " + suffix);
 }
 
 setInterval(startTime, 1000);

assets/js/dialogs.js

@@ -1,4 +1,4 @@
-var animation_time = 500;
+var animation_time = 300;
 
 function show_shutdown_dialog() {
     $(".card:visible").fadeOut(animation_time, function(){

assets/js/login.js

@@ -4,8 +4,7 @@ var login = (function (lightdm, $) {
     var $user = $('#user');
     var $pass = $('#pass');
     var $session = $('#session');
-    var $lang = $("#language");
-    var $keyboard_layout = $("#layout");
+    var $lang = $("#settings-language");
 
     // private functions
     var setup_users_list = function () {
@@ -37,7 +36,6 @@ var login = (function (lightdm, $) {
 
             //Set language and layout for user
             lightdm.users[idx].language = settings['language'];
-            lightdm.users[idx].layout = settings['layout'];
         }
     };
 
@@ -55,15 +53,6 @@ var login = (function (lightdm, $) {
         });
     };
 
-    var setup_layout_list = function(){
-        var $list = $keyboard_layout;
-
-        $.each(lightdm.layouts, function(i) {
-            var lang = lightdm.layouts[i];
-            $list.append('<option value="' + lang.name + '">' + lang.name + '</option>');
-        });
-    };
-
     var find_and_display_user_picture = function(idx){
         if(lightdm.users[idx].image == "" || lightdm.users[idx].image == null){
             $('.profile-img').attr("src", "assets/ui/avatar.png");
@@ -118,7 +107,6 @@ var login = (function (lightdm, $) {
             select_user_from_list();
             setup_sessions_list();
             setup_language_list();
-            setup_layout_list();
 
             // Hide usunsed/blocked/disabled options
             if(!lightdm.can_restart){

assets/js/settings.js

@@ -1,139 +1,50 @@
 var settings = {};
 load_settings();
-
+//settings-backgroundPath
 function save_settings(){
-    localStorage.setItem("settings.language", $("#language").val());
-    localStorage.setItem("settings.layout", $("#layout").val());
-    localStorage.setItem("settings.background", $("#background").val());
+    localStorage.setItem("settings.language", $("#settings-language").val());
+    localStorage.setItem("settings.background", $("#settings-background").val());
+    localStorage.setItem("settings.backgroundPath", $("#settings-backgroundPath").val());
+    localStorage.setItem("settings.clockStyle", $("#settings-clockStyle").val());
     load_settings();
 }
 
 function load_settings(){
     set_default_settings();
     settings['language'] = localStorage.getItem("settings.language");
-    settings['layout'] = localStorage.getItem("settings.layout");
     settings['background'] = localStorage.getItem("settings.background");
+    settings['backgroundPath'] = localStorage.getItem("settings.backgroundPath");
+    settings['clockStyle'] = localStorage.getItem("settings.clockStyle");
     set_default_settings();
 
     //Update background
-    $("body").css("background-image", "url(\"assets/ui/background-" + settings['background'] + ".jpg\")");
+    if(settings['background'] == "custom"){
+        if(settings['backgroundPath'] != ""){
+            $("body").css("background-image", "url(\"" + settings['backgroundPath'] + "\")");
+        }else{
+            $("body").css("background-image", "url(\"assets/ui/background/background-blue.jpg\")");
+        }
+    }else{
+        $("body").css("background-image", "url(\"assets/ui/background/background-" + settings['background'] + ".jpg\")");
+        $("#settings-backgroundPath").val("");
+    }
 }
 
 function set_default_settings(){
-    if(localStorage.getItem("settings.language") == null || localStorage.getItem("settings.language") == ""){
-        localStorage.setItem("settings.language", $("#language").val());
-    }
-    if(localStorage.getItem("settings.layout") == null || localStorage.getItem("settings.layout") == ""){
-        localStorage.setItem("settings.layout", "en");
+    if(localStorage.getItem("settings.language") == null || localStorage.getItem("settings.language") == "" || !localStorage.getItem("settings.language")){
+        localStorage.setItem("settings.language", $("#settings-language").val());
     }
-    if(localStorage.getItem("settings.background") == null){
+    if(localStorage.getItem("settings.background") == null || !localStorage.getItem("settings.background")){
         localStorage.setItem("settings.background", "blue");
     }
+    if(localStorage.getItem("settings.clockStyle") == null || localStorage.getItem("settings.clockStyle") == "" || !localStorage.getItem("settings.clockStyle")){
+        localStorage.setItem("settings.clockStyle", "0");
+    }
 }
 
 function settings_fill_inputs(){
-    $("#language").val(settings['language']);
-    $("#layout").val(settings['layout']);
-    $("#background").val(settings['background']);
-}
-
-/*
-var settings = (function ($) {
-    var $settings_card = $('#settings');
-    var $signin_card = $('#login');
-    var animation_time = 500; //in miliseconds
-    window.login_settings = window.login_settings || {};
-
-    var setup_settings_bind = function () {
-        $('#action-settings, #settings .cancel').on(
-            'click',
-            function (e) {
-                e.preventDefault();
-
-                if($settings_card.is(':hidden')){
-                    show_settings_form();
-                }else{
-                    hide_settings_form();
-                }
-            }
-        );
-    };
-    var show_settings_form = function(){
-        $signin_card.fadeOut(animation_time, function(){
-            $settings_card.fadeIn(animation_time);
-            load_settings_from_localstorage();
-        });
-    };
-    
-    var hide_settings_form = function(){
-        $settings_card.fadeOut(animation_time, function(){
-            $signin_card.fadeIn(animation_time);
-        });
-    };
-    
-    var load_settings_from_localstorage = function () {
-        var formdata = localStorage.getItem('login_settings');
-            formdata = JSON.parse(formdata);
-
-        if(formdata) {
-            $.each(formdata, function(index, data) {
-                console.log(data.name, data.value);
-                $('#'+data.name).val(data.value);
-            });
-        }
-
-        assign_stored_settings();
-        check_stored_settings();
-    };
-    var save_settings_to_localstorage = function ($form) {
-        var formdata = $form.serializeArray();
-            formdata = JSON.stringify(formdata);
-
-        localStorage.setItem('login_settings', formdata);
-
-        assign_stored_settings();
-        check_stored_settings();
-    };
-    
-    var assign_stored_settings = function () {
-        var stored_setings = JSON.parse(
-            localStorage.getItem('login_settings')
-        );
-        if(stored_setings) {
-            $.each(stored_setings, function(index, data) {
-                window.login_settings[data.name] = data.value;
-            });
-        }
-    };
-    
-    var check_stored_settings = function () {
-
-        if (window.login_settings['show_photo'] == 0) {
-            $('.profile-img').hide();
-        } else {
-            $('.profile-img').show();
-        }
-    };
-
-    // exposed outside of closure
-    var init = function () {
-        $(function () {
-            setup_settings_bind();
-            assign_stored_settings();
-            check_stored_settings();
-
-            $settings_card.find('form').on('submit', function(e) {
-                e.preventDefault();
-                save_settings_to_localstorage($settings_card);
-                hide_settings_form();
-            });
-        });
-    };
-
-    return {
-        init: init
-    };
-} (jQuery));
-
-settings.init();
-*/
+    $("#settings-language").val(settings['language']);
+    $("#settings-background").val(settings['background']);
+    $("#settings-backgroundPath").val(settings['backgroundPath']);
+    $("#settings-clockStyle").val(settings['clockStyle']);
+}

index.html

@@ -40,24 +40,37 @@
                     <form>
                         <div class="form-group">
                             <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-                                <label class="mdl-textfield__label" for="language"><i class="fa fa-language"></i> Language</label>
-                                <select id="language" class="mdl-textfield__input"></select>
+                                <label class="mdl-textfield__label" for="settings-language"><i class="fa fa-language"></i> Language</label>
+                                <select id="settings-language" class="mdl-textfield__input"></select>
                             </div>
                             <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-                                <label class="mdl-textfield__label" for="layout"><i class="fa fa-keyboard-o"></i> Keyboard layout</label>
-                                <select id="layout" class="mdl-textfield__input"></select>
+                                <label class="mdl-textfield__label" for="settings-background"><i class="fa fa-desktop"></i> Background</label>
+                                <select id="settings-background" class="mdl-textfield__input">
+                                    <optgroup label="Predefined">
+                                        <option value="blue">Blue (default)</option>
+                                        <option value="green">Green</option>
+                                        <option value="red">Red</option>
+                                        <option value="yellow">Yellow</option>
+                                        <option value="purple">Purple</option>
+                                        <option value="teal">Teal</option>
+                                        <option value="pink">Pink</option>
+                                        <option value="gold">Gold</option>
+                                        <option value="grey">Grey</option>
+                                    </optgroup>
+                                    <optgroup label="Other">
+                                        <option value="custom">Custom background</option>
+                                    </optgroup>
+                                </select>
+                            </div>
+                            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+                                <input class="mdl-textfield__input" type="text" id="settings-backgroundPath">
+                                <label class="mdl-textfield__label" for="settings-backgroundPath"><i class="fa fa-desktop"></i> Path to background (if custom)</label>
                             </div>
                             <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-                                <label class="mdl-textfield__label" for="background"><i class="fa fa-desktop"></i> Background color</label>
-                                <select id="background" class="mdl-textfield__input">
-                                    <option value="blue">Blue (default)</option>
-                                    <option value="green">Green</option>
-                                    <option value="red">Red</option>
-                                    <option value="yellow">Yellow</option>
-                                    <option value="purple">Purple</option>
-                                    <option value="teal">Teal</option>
-                                    <option value="gold">Gold</option>
-                                    <option value="grey">Grey</option>
+                                <label class="mdl-textfield__label" for="settings-clockStyle"><i class="fa fa-clock-o"></i> Use 12-hour clock</label>
+                                <select id="settings-clockStyle" class="mdl-textfield__input">
+                                    <option value="0">No (default)</option>
+                                    <option value="1">Yes</option>
                                 </select>
                             </div>
                             <br/>