Merge pull request #16 from KamaleiZestri/master

Qt5 -> Qt6 Compatability

.gitignore

@@ -1 +1 @@
-slice/theme.conf.user
+theme.conf.user

Main.qml

@@ -1,12 +1,15 @@
 import QtQuick 2.7
-import QtGraphicalEffects 1.0
+import Qt5Compat.GraphicalEffects
 import SddmComponents 2.0
 
+import "slice"
+
 Rectangle
 {
     id: root
     color: colors.background
     property variant geometry: screenModel.geometry(screenModel.primary)
+    //property bool virtualkeyboard: bool(config.virtualkeyboard)
 
     state: "stateUsers"
     states:
@@ -56,7 +59,26 @@ Rectangle
         }
     ]
 
+    function bool(str) {
+        if (str === null || str === undefined)
+            return false;
+
+        str = str.toLowerCase();
+
+        if (str === "false" || str === "no")
+            return false;
+        else if (str === "true" || str === "yes")
+            return true;
+
+        return Boolean(Number(str).valueOf()).valueOf();
+    }
+
+    function not_null(str) {
+        return !(str === null || str === undefined);
+    }
+
     TextConstants { id: localeText }
+    Debug { id: debug }
 
     function bgFillMode() {
 
@@ -91,6 +113,7 @@ Rectangle
     }
 
     ColorScheme { id: colors }
+    FontScheme { id: fonts }
 
     Item
     {
@@ -98,7 +121,7 @@ Rectangle
         x: 0
         y: 0
         width: root.width
-        height: 35
+        height: Math.max(buttonPagePower.height, buttonPageSessions.height, buttonPageUsers.height) + 10
 
         SlicedButton
         {
@@ -106,12 +129,14 @@ Rectangle
             x: 5
             y: 5
 
-            hasLeftSlice: false
-            text: sddm.hostName ? sddm.hostName : "Hostname"
+            skewLeft: 0
+            text: debug.hostName ? debug.hostName : "Hostname"
 
-            enabled: sddm.canPowerOff || sddm.canReboot || sddm.canSuspend || sddm.canHibernate || sddm.canHybridSleep
+            enabled: debug.canPowerOff || debug.canReboot || debug.canSuspend || debug.canHibernate || debug.canHybridSleep
 
             onClicked: if (enabled) root.state = "statePower"
+
+            font: fonts.slicesTop
         }
 
         SlicedButton
@@ -123,6 +148,8 @@ Rectangle
             text: pageSessions.currentSessionName
 
             onClicked: root.state = "stateSessions"
+
+            font: fonts.slicesTop
         }
 
         SlicedButton
@@ -134,6 +161,8 @@ Rectangle
             text: pageUsers.currentUserLogin
 
             onClicked: root.state = "stateUsers"
+
+            font: fonts.slicesTop
         }
     }
 
@@ -143,7 +172,7 @@ Rectangle
         x: 0
         y: areaTop.height
         width: root.width
-        height: root.height - (areaTop.height * 2)
+        height: root.height - areaTop.height - areaBottom.height
 
         PagePower
         {
@@ -151,9 +180,6 @@ Rectangle
             width: areaMain.width
             height: areaMain.height
 
-            Keys.onTabPressed: { root.state = "stateSessions" }
-            Keys.onBacktabPressed: { root.state = "stateUsers" }
-
             Behavior on x { NumberAnimation { duration: 150 } }
         }
 
@@ -163,15 +189,6 @@ Rectangle
             width: areaMain.width
             height: areaMain.height
 
-            Keys.onTabPressed: { root.state = "stateUsers" }
-            Keys.onBacktabPressed:
-            {
-                if (buttonPagePower.enabled)
-                    root.state = "statePower"
-                else
-                    root.state = "stateSessions"
-            }
-
             Behavior on x { NumberAnimation { duration: 150 } }
 
             onSelectedIndexChanged: pageUsers.selectedSessionIndex = selectedIndex
@@ -184,63 +201,85 @@ Rectangle
             id: pageUsers
             width: areaMain.width
             height: areaMain.height
-
-            Keys.onTabPressed:
-            {
-                if (buttonPagePower.enabled)
-                    root.state = "statePower"
-                else
-                    root.state = "stateSessions"
-            }
-            Keys.onBacktabPressed: { root.state = "stateSessions" }
+            y: inputPanel.visible && inputPanel.y != areaMain.height + areaBottom.height ? -150 : 0
 
             Behavior on x { NumberAnimation { duration: 150 } }
+            Behavior on y { NumberAnimation { duration: 150 } }
 
             onLockNav: areaTop.enabled = false
             onUnlockNav: areaTop.enabled = true
         }
+
+        Loader {
+            id: inputPanel
+            source: "slice/VirtualKeyboard.qml"
+            width: areaMain.width
+            y: areaMain.height - 350 - areaBottom.height
+            Behavior on y { NumberAnimation { duration: 150 } }
+            //visible: virtualkeyboard
+            visible: false
+        }
     }
 
     Item
     {
         id: areaBottom
         x: 0
-        y: areaTop.height + areaMain.height
+        y: root.height - height
         width: root.width
-        height: 35
+        height: Math.max(
+                    buttonCapsLock.height,
+                    buttonNumLock.height,
+                    buttonKeyboardLayout.height,
+                    buttonWeekday.height,
+                    buttonDate.height,
+                    buttonTime.height
+                ) + 10
 
         SlicedButton
         {
             id: buttonCapsLock
             x: 5
-            y: 5
+            y: areaBottom.height - height - 5
 
-            hasLeftSlice: false
+            skewLeft: 0
             text: "Caps Lock"
             highlighted: keyboard.capsLock
 
             onClicked: keyboard.capsLock = !keyboard.capsLock
+
+            font: fonts.slicesBottomLeft
         }
 
         SlicedButton
         {
             id: buttonNumLock
             x: buttonCapsLock.x + buttonCapsLock.widthPartial + 3
-            y: 5
+            y: areaBottom.height - height - 5
 
             text: "Num Lock"
             highlighted: keyboard.numLock
 
             onClicked: keyboard.numLock = !keyboard.numLock
+
+            font: fonts.slicesBottomLeft
         }
 
         SlicedButton
         {
             id: buttonKeyboardLayout
             x: buttonNumLock.x + buttonNumLock.widthPartial + 3
-            y: 5
+            y: areaBottom.height - height - 5
 
             text: keyboard.layouts[keyboard.currentLayout].longName
+            onClicked: {
+                var newId = keyboard.currentLayout+1;
+                if (newId >= keyboard.layouts.length)
+                    newId = 0;
+                keyboard.currentLayout = newId;
+            }
+
+            font: fonts.slicesBottomLeft
         }
 
         Item
@@ -252,42 +291,51 @@ Rectangle
             SlicedButton
             {
                 id: buttonWeekday
+                enabled: false
                 x: 5
-                y: 5
+                y: areaBottom.height - height - 5
 
                 function updateTime()
                 {
                     text = new Date().toLocaleString(Qt.locale(),
                         "dddd")
                 }
+
+                font: fonts.slicesBottomRight
             }
 
             SlicedButton
             {
                 id: buttonDate
+                enabled: false
                 x: buttonWeekday.x + buttonWeekday.widthPartial + 3
-                y: 5
+                y: areaBottom.height - height - 5
 
                 function updateTime()
                 {
                     text = new Date().toLocaleString(Qt.locale(),
                         "dd.MM.yyyy")
                 }
+
+                font: fonts.slicesBottomRight
             }
 
             SlicedButton
             {
                 id: buttonTime
+                enabled: false
                 x: buttonDate.x + buttonDate.widthPartial + 3
-                y: 5
+                y: areaBottom.height - height - 5
 
-                hasRightSlice: false
+                skewRight: 0
 
                 function updateTime()
                 {
                     text = new Date().toLocaleString(Qt.locale(),
                         "hh:mm:ss")
                 }
+
+                font: fonts.slicesBottomRight
             }
         }
 
@@ -323,14 +371,14 @@ Rectangle
             switch (root.state)
             {
                 case "statePower":
-                    if (wheel.pixelDelta.y < 0)
+                    if (wheel.angleDelta.y < 0)
                         pagePower.scroll_up()
                     else
                         pagePower.scroll_down()
                     break
 
                 case "stateSessions":
-                    if (wheel.pixelDelta.y < 0)
+                    if (wheel.angleDelta.y < 0)
                         pageSessions.scroll_up()
                     else
                         pageSessions.scroll_down()
@@ -339,7 +387,7 @@ Rectangle
                 case "stateUsers":
                     if (!pageUsers.hasLoginShown)
                     {
-                        if (wheel.pixelDelta.y < 0)
+                        if (wheel.angleDelta.y < 0)
                             pageUsers.scroll_up()
                         else
                             pageUsers.scroll_down()
@@ -348,5 +396,44 @@ Rectangle
             }
         }
     }
+
+    function nextScreen() {
+        switch(root.state)
+        {
+            case "statePower":
+                root.state = "stateSessions";
+                break;
+
+            case "stateSessions":
+                root.state = "stateUsers";
+                break;
+
+            case "stateUsers":
+                root.state = (buttonPagePower.enabled) ? "statePower" : "stateSessions";
+                break;
+        }
+    }
+
+    function previousScreen() {
+        switch(root.state)
+        {
+            case "statePower":
+                root.state = "stateUsers";
+                break;
+
+            case "stateSessions":
+                root.state = (buttonPagePower.enabled) ? "statePower" : "stateUsers";
+                break;
+
+            case "stateUsers":
+                root.state = "stateSessions";
+                break;
+        }
+    }
+
+    Keys.onTabPressed: nextScreen()
+    Keys.onBacktabPressed: previousScreen()
+    Keys.onLeftPressed: previousScreen()
+    Keys.onRightPressed: nextScreen()
 }
 

README.md

@@ -1,41 +1,77 @@
 # Slice (SDDM Theme)
 
-Simple dark SDDM theme.
+Simple dark SDDM theme with many customization options.
 
-[![Theme preview (YouTube)](http://img.youtube.com/vi/y2zzlDdJTUU/0.jpg)](https://youtu.be/y2zzlDdJTUU)
+[![Theme preview (YouTube)](https://user-images.githubusercontent.com/2903496/45325970-142dd700-b55b-11e8-8396-dc6aba6282e5.png)](https://youtu.be/X6lXkBwo--s)
 
-## Installing
+## Install from KDE system settings
+
+If you're using KDE, you can install theme from `System Settings > Startup and Shutdown > Login Screen (SDDM)`. You can download this repo as zip and install with `Install From File...`, or you can find it in `Get New Login Screens...` window.
+
+## Manual install
 
 1. Install `Qt Graphical Effects` QML module
-2. Install Roboto font (optional, you can change to other font, see below)
-3. `git clone https://github.com/RadRussianRus/sddm-slice.git`
-4. `cp -r sddm-slice/slice /usr/share/sddm/themes/slice`
-5. Open `/etc/sddm.conf` and put `Current=slice` in `[Theme]` section
+2. Install Roboto font (optional, you can change to other font, [see below](#font-scheme))
+3. `git clone https://github.com/EricKotato/sddm-slice.git`
+4. `cp -r sddm-slice /usr/share/sddm/themes/sddm-slice`
+5. Open `/etc/sddm.conf` and put `Current=sddm-slice` in `[Theme]` section
 
 ## Configuration
 
-Create file `theme.conf.user` in theme folder. See `slice/theme.conf` for reference.
+Create file `theme.conf.user` in theme folder. See `theme.conf` for reference. Also sample configs can be found [in wiki](https://github.com/EricKotato/sddm-slice/wiki#sample-configs).
 
 ### Base options
 
-* `font` - overall font. Defaults to `Roboto`.
 * `background` - path to background image. If not set, falls back to `color_bg`. Not set by default.
 * `bg_mode` - background image fill mode. Can be either `aspect`, `fill`, `tile` or `none`. Defaults to `aspect`.
 * `parallax_bg_shift` - shifting of parallax background on tab change in pixels. `0` disables parallax motion. Negative values will scroll background in opposite direction. Default is `20`.
+* `manual` - enables manual login mode and disables user selection. You can use "0/1", "true/false" and "yes/no" on this option. Disabled by default.
 
 ### Color scheme
 
-There are many color options. In fact, too many. So now they are grouped by layers in [color scheme](https://github.com/RadRussianRus/sddm-slice/wiki/Color-scheme). Most of them are optional, only mandatory options are from [layer 1](https://github.com/RadRussianRus/sddm-slice/wiki/Layer-1):
+There are many color options. In fact, too many. So now they are grouped by layers in [color scheme](https://github.com/EricKotato/sddm-slice/wiki/Color-Scheme). Most of them are optional, only mandatory options are from [layer 1](https://github.com/EricKotato/sddm-slice/wiki/Color-Scheme-Layer-1):
 
 * `color_bg` - background color. Defaults to `#222222`.
 * `color_main` - main color. Defaults to `#dddddd`.
 * `color_dimmed` - dimmed main color. Defaults to `#888888`.
 * `color_contrast` - color that contrasting to both main and dimmed. Defaults to `#1f1f1f`.
 
-Info about other layers can be found on wiki: [layer 2](https://github.com/RadRussianRus/sddm-slice/wiki/Layer-2), [layer 3](https://github.com/RadRussianRus/sddm-slice/wiki/Layer-3).
+Info about other layers can be found on wiki: [layer 2](https://github.com/EricKotato/sddm-slice/wiki/Color-Scheme-Layer-2), [layer 3](https://github.com/EricKotato/sddm-slice/wiki/Color-Scheme-Layer-3).
+
+### Font scheme
+
+There are also many font options, so there is now [font scheme](https://github.com/EricKotato/sddm-slice/wiki/Font-Scheme) too. Most of them are optional, only mandatory option is from [layer 1](https://github.com/EricKotato/sddm-slice/wiki/Font-Scheme-Layer-1):
+
+* `font` - overall font. Defaults to `Roboto`.
+
+Info about other layers can be found on wiki: [layer 2](https://github.com/EricKotato/sddm-slice/wiki/Font-Scheme-Layer-2), [layer 3](https://github.com/EricKotato/sddm-slice/wiki/Font-Scheme-Layer-3).
+
+### Debug mode options
+
+There are some things that can't be tested well in greeter (e.g. shutdown options or login error). So there is a debug mode.
+
+#### Boolean options
+
+> You can use "0/1", "true/false" and "yes/no" on boolean options. All debug options are disabled by default.
+
+* `debug` - activates debug mode.
+* `debug_can_power_off` - sets `sddm.canPowerOff` (shows "Shutdown").
+* `debug_can_reboot` - sets `sddm.canReboot` (shows "Reboot").
+* `debug_can_suspend` - sets `sddm.canSuspend` (shows "Suspend").
+* `debug_can_hibernate` - sets `sddm.canHibernate` (shows "Hibernate").
+* `debug_can_hybrid_sleep` - sets `sddm.canHybridSleep` (shows "Hybrid Sleep").
+* `debug_login_error` - forces login error.
+
+#### Number options
+
+* `debug_login_timeout` - time between pressing "Login" and login error in seconds. Not effective if `debug_login_error` is disabled.
+
+#### String options
+
+* `debug_hostname` - sets `sddm.hostName`.
 
 ## License
 
 Icons: [Material Design Icons](https://github.com/Templarian/MaterialDesign)
 
-[![CC-BY-SA](https://i.creativecommons.org/l/by-sa/4.0/88x31.png)](http://creativecommons.org/licenses/by-sa/4.0/)
+[![CC-BY-SA](https://i.creativecommons.org/l/by-sa/4.0/88x31.png)](http://creativecommons.org/licenses/by-sa/4.0/)

metadata.desktop

@@ -2,11 +2,12 @@
 Name=Slice
 Description=Simple SDDM theme.
 Author=RadRussianRus
-Copyright=(c) 2018, RadRussianRus
+Copyright=(c) 2020, RadRussianRus
 License=CC-BY-SA
 Type=sddm-theme
-Website=https://github.com/RadRussianRus/slice-sddm
-Version=1.0
+Screenshot=screenshot.png
+Website=https://github.com/RadRussianRus/sddm-slice
+Version=1.5.1
 MainScript=Main.qml
 TranslationsDirectory=translations
-ConfigFile=theme.conf
+ConfigFile=theme.conf

slice/Debug.qml

@@ -0,0 +1,38 @@
+import QtQuick 2.7
+import SddmComponents 2.0
+
+Item
+{
+    readonly property bool active: bool(config.debug)
+
+    function debugbool(config_value, real_property)
+    {
+        return (active && bool(config_value)) || real_property;
+    }
+
+    function debugnum(config_value, real_property)
+    {
+        if (config_value === null || config_value === undefined)
+            return real_property;
+
+        return active ? Number(config_value).valueOf() : real_property;
+    }
+
+    function debugstr(config_value, real_property)
+    {
+        if (config_value === null || config_value === undefined)
+            return real_property;
+
+        return active ? config_value : real_property;
+    }
+
+    readonly property bool canPowerOff: debugbool(config.debug_can_power_off, sddm.canPowerOff)
+    readonly property bool canReboot: debugbool(config.debug_can_reboot, sddm.canReboot)
+    readonly property bool canSuspend: debugbool(config.debug_can_suspend, sddm.canSuspend)
+    readonly property bool canHibernate: debugbool(config.debug_can_hibernate, sddm.canHibernate)
+    readonly property bool canHybridSleep: debugbool(config.debug_can_hybrid_sleep, sddm.canHybridSleep)
+    readonly property bool loginError: debugbool(config.debug_login_error, false)
+    readonly property int loginTimeout: debugnum(config.debug_login_timeout, 0)
+    readonly property string hostName: debugstr(config.debug_hostname, sddm.hostName)
+
+}

slice/FontScheme.qml

@@ -0,0 +1,178 @@
+import QtQuick 2.7
+
+Item
+{
+    /* * * * * * * * * * * * * * * * * *
+     *
+     *  Functions
+     *
+     * * * * * * * * * * * * * * * * * */
+
+    function cap(str)
+    {
+        str = str.toLowerCase();
+
+        switch (str)
+        {
+            case 'upper':
+                return Font.AllUppercase;
+
+            case 'lower':
+                return Font.AllLowercase;
+
+            case 'smallcaps':
+                return Font.SmallCaps;
+
+            case 'capitalize':
+                return Font.Capitalize;
+
+            default:
+                return Font.MixedCase;
+        }
+    }
+
+
+    /* * * * * * * * * * * * * * * * * *
+     *
+     *  Layer 1 options
+     *  Required
+     *
+     * * * * * * * * * * * * * * * * * */
+
+    property string main: config.font
+
+
+    /* * * * * * * * * * * * * * * * * *
+     *
+     *  Layer 2 options
+     *  Common
+     *
+     * * * * * * * * * * * * * * * * * */
+
+    property font slices: Qt.font({
+        family:                  config.font_slices             ?        config.font_slices             : config.font,
+        pointSize:               config.font_slices_size        ? Number(config.font_slices_size)       : 13,
+        bold:           not_null(config.font_slices_bold)       ?   bool(config.font_slices_bold)       : true,
+        italic:         not_null(config.font_slices_italic)     ?   bool(config.font_slices_italic)     : false,
+        underline:      not_null(config.font_slices_underline)  ?   bool(config.font_slices_underline)  : false,
+        capitalization: not_null(config.font_slices_capitalize) ?    cap(config.font_slices_capitalize) : Font.AllUppercase
+    });
+
+    property font inputGroup: Qt.font({
+        family:                  config.font_input_group             ?        config.font_input_group             : config.font,
+        pointSize:               config.font_input_group_size        ? Number(config.font_input_group_size)       : 18,
+        bold:           not_null(config.font_input_group_bold)       ?   bool(config.font_input_group_bold)       : false,
+        italic:         not_null(config.font_input_group_italic)     ?   bool(config.font_input_group_italic)     : false,
+        underline:      not_null(config.font_input_group_underline)  ?   bool(config.font_input_group_underline)  : false,
+        capitalization: not_null(config.font_input_group_capitalize) ?    cap(config.font_input_group_capitalize) : Font.MixedCase
+    });
+
+    property font listItemBig: Qt.font({
+        family:                  config.font_list_item_big             ?        config.font_list_item_big             : config.font,
+        pointSize:               config.font_list_item_big_size        ? Number(config.font_list_item_big_size)       : 36,
+        bold:           not_null(config.font_list_item_big_bold)       ?   bool(config.font_list_item_big_bold)       : true,
+        italic:         not_null(config.font_list_item_big_italic)     ?   bool(config.font_list_item_big_italic)     : false,
+        underline:      not_null(config.font_list_item_big_underline)  ?   bool(config.font_list_item_big_underline)  : false,
+        capitalization: not_null(config.font_list_item_big_capitalize) ?    cap(config.font_list_item_big_capitalize) : Font.MixedCase
+    });
+
+    property font listItemMed: Qt.font({
+        family:                  config.font_list_item_med             ?        config.font_list_item_med             : config.font,
+        pointSize:               config.font_list_item_med_size        ? Number(config.font_list_item_med_size)       : 28,
+        bold:           not_null(config.font_list_item_med_bold)       ?   bool(config.font_list_item_med_bold)       : true,
+        italic:         not_null(config.font_list_item_med_italic)     ?   bool(config.font_list_item_med_italic)     : false,
+        underline:      not_null(config.font_list_item_med_underline)  ?   bool(config.font_list_item_med_underline)  : false,
+        capitalization: not_null(config.font_list_item_med_capitalize) ?    cap(config.font_list_item_med_capitalize) : Font.MixedCase
+    });
+
+    property font listItemSub: Qt.font({
+        family:                  config.font_list_item_sub             ?        config.font_list_item_sub             : config.font,
+        pointSize:               config.font_list_item_sub_size        ? Number(config.font_list_item_sub_size)       : 20,
+        bold:           not_null(config.font_list_item_sub_bold)       ?   bool(config.font_list_item_sub_bold)       : false,
+        italic:         not_null(config.font_list_item_sub_italic)     ?   bool(config.font_list_item_sub_italic)     : false,
+        underline:      not_null(config.font_list_item_sub_underline)  ?   bool(config.font_list_item_sub_underline)  : false,
+        capitalization: not_null(config.font_list_item_sub_capitalize) ?    cap(config.font_list_item_sub_capitalize) : Font.MixedCase
+    });
+
+    property font error: Qt.font({
+        family:                  config.font_error             ?        config.font_error             : config.font,
+        pointSize:               config.font_error_size        ? Number(config.font_error_size)       : 18,
+        bold:           not_null(config.font_error_bold)       ?   bool(config.font_error_bold)       : true,
+        italic:         not_null(config.font_error_italic)     ?   bool(config.font_error_italic)     : false,
+        underline:      not_null(config.font_error_underline)  ?   bool(config.font_error_underline)  : false,
+        capitalization: not_null(config.font_error_capitalize) ?    cap(config.font_error_capitalize) : Font.MixedCase
+    });
+
+    /* * * * * * * * * * * * * * * * * *
+     *
+     *  Layer 3 options
+     *  Control types
+     *
+     * * * * * * * * * * * * * * * * * */
+
+    // Slices
+    property font slicesTop: Qt.font({
+        family:                  config.font_slices_top             ?        config.font_slices_top             : slices.family,
+        pointSize:               config.font_slices_top_size        ? Number(config.font_slices_top_size)       : slices.pointSize,
+        bold:           not_null(config.font_slices_top_bold)       ?   bool(config.font_slices_top_bold)       : slices.bold,
+        italic:         not_null(config.font_slices_top_italic)     ?   bool(config.font_slices_top_italic)     : slices.italic,
+        underline:      not_null(config.font_slices_top_underline)  ?   bool(config.font_slices_top_underline)  : slices.underline,
+        capitalization: not_null(config.font_slices_top_capitalize) ?    cap(config.font_slices_top_capitalize) : slices.capitalization
+    });
+
+    property font slicesBottomLeft: Qt.font({
+        family:                  config.font_slices_bottom_left             ?        config.font_slices_bottom_left             : slices.family,
+        pointSize:               config.font_slices_bottom_left_size        ? Number(config.font_slices_bottom_left_size)       : slices.pointSize,
+        bold:           not_null(config.font_slices_bottom_left_bold)       ?   bool(config.font_slices_bottom_left_bold)       : slices.bold,
+        italic:         not_null(config.font_slices_bottom_left_italic)     ?   bool(config.font_slices_bottom_left_italic)     : slices.italic,
+        underline:      not_null(config.font_slices_bottom_left_underline)  ?   bool(config.font_slices_bottom_left_underline)  : slices.underline,
+        capitalization: not_null(config.font_slices_bottom_left_capitalize) ?    cap(config.font_slices_bottom_left_capitalize) : slices.capitalization
+    });
+
+    property font slicesBottomRight: Qt.font({
+        family:                  config.font_slices_bottom_right             ?        config.font_slices_bottom_right             : slices.family,
+        pointSize:               config.font_slices_bottom_right_size        ? Number(config.font_slices_bottom_right_size)       : slices.pointSize,
+        bold:           not_null(config.font_slices_bottom_right_bold)       ?   bool(config.font_slices_bottom_right_bold)       : slices.bold,
+        italic:         not_null(config.font_slices_bottom_right_italic)     ?   bool(config.font_slices_bottom_right_italic)     : slices.italic,
+        underline:      not_null(config.font_slices_bottom_right_underline)  ?   bool(config.font_slices_bottom_right_underline)  : slices.underline,
+        capitalization: not_null(config.font_slices_bottom_right_capitalize) ?    cap(config.font_slices_bottom_right_capitalize) : slices.capitalization
+    });
+
+    property font slicesLoginButtons: Qt.font({
+        family:                  config.font_slices_login_buttons             ?        config.font_slices_login_buttons             : slices.family,
+        pointSize:               config.font_slices_login_buttons_size        ? Number(config.font_slices_login_buttons_size)       : slices.pointSize,
+        bold:           not_null(config.font_slices_login_buttons_bold)       ?   bool(config.font_slices_login_buttons_bold)       : slices.bold,
+        italic:         not_null(config.font_slices_login_buttons_italic)     ?   bool(config.font_slices_login_buttons_italic)     : slices.italic,
+        underline:      not_null(config.font_slices_login_buttons_underline)  ?   bool(config.font_slices_login_buttons_underline)  : slices.underline,
+        capitalization: not_null(config.font_slices_login_buttons_capitalize) ?    cap(config.font_slices_login_buttons_capitalize) : slices.capitalization
+    });
+
+    // Input group
+    property font input: Qt.font({
+        family:                  config.font_input             ?        config.font_input             : inputGroup.family,
+        pointSize:               config.font_input_size        ? Number(config.font_input_size)       : inputGroup.pointSize,
+        bold:           not_null(config.font_input_bold)       ?   bool(config.font_input_bold)       : inputGroup.bold,
+        italic:         not_null(config.font_input_italic)     ?   bool(config.font_input_italic)     : inputGroup.italic,
+        underline:      not_null(config.font_input_underline)  ?   bool(config.font_input_underline)  : inputGroup.underline,
+        capitalization: not_null(config.font_input_capitalize) ?    cap(config.font_input_capitalize) : inputGroup.capitalization
+    });
+
+    property font loginInput: Qt.font({
+        family:                  config.font_login_input             ?        config.font_login_input             : inputGroup.family,
+        pointSize:               config.font_login_input_size        ? Number(config.font_login_input_size)       : inputGroup.pointSize,
+        bold:           not_null(config.font_login_input_bold)       ?   bool(config.font_login_input_bold)       : true,
+        italic:         not_null(config.font_login_input_italic)     ?   bool(config.font_login_input_italic)     : inputGroup.italic,
+        underline:      not_null(config.font_login_input_underline)  ?   bool(config.font_login_input_underline)  : inputGroup.underline,
+        capitalization: not_null(config.font_login_input_capitalize) ?    cap(config.font_login_input_capitalize) : inputGroup.capitalization
+    });
+
+    property font placeholder: Qt.font({
+        family:                  config.font_placeholder             ?        config.font_placeholder             : inputGroup.family,
+        pointSize:               config.font_placeholder_size        ? Number(config.font_placeholder_size)       : inputGroup.pointSize,
+        bold:           not_null(config.font_placeholder_bold)       ?   bool(config.font_placeholder_bold)       : inputGroup.bold,
+        italic:         not_null(config.font_placeholder_italic)     ?   bool(config.font_placeholder_italic)     : inputGroup.italic,
+        underline:      not_null(config.font_placeholder_underline)  ?   bool(config.font_placeholder_underline)  : inputGroup.underline,
+        capitalization: not_null(config.font_placeholder_capitalize) ?    cap(config.font_placeholder_capitalize) : inputGroup.capitalization
+    });
+
+}

slice/LoopListPowerItem.qml

@@ -1,5 +1,5 @@
 import QtQuick 2.7
-import QtGraphicalEffects 1.0
+import Qt5Compat.GraphicalEffects
 
 Item
 {
@@ -14,8 +14,8 @@ Item
 
     transform: Scale
     {
-        origin.x: 54
-        origin.y: 29
+        origin.x: descriptionLabel.height + 10 + 2
+        origin.y: descriptionLabel.height + 10 / 2
         xScale: distance
         yScale: distance
     }
@@ -29,14 +29,22 @@ Item
     property string icon: "icons/no_avatar.svg"
     property string title: ""
 
+    Rectangle
+    {
+        width: descriptionLabel.height + 10
+        height: descriptionLabel.height + 10
+        color: ( hover ? colors.iconBgHover : colors.iconBg )
+    }
+
     Image
     {
         id: powerItemIcon
         source: icon
-        sourceSize.width: 48
-        sourceSize.height: 48
+        sourceSize.width: descriptionLabel.height + 10 - 4
+        sourceSize.height: descriptionLabel.height + 10 - 4
         x: 2
         y: 2
+        opacity: 0
     }
 
     ColorOverlay
@@ -45,13 +53,15 @@ Item
         anchors.fill: powerItemIcon
         source: powerItemIcon
         color: ( hover ? colors.iconHover : colors.icon )
+        opacity: parent.opacity
     }
 
     Rectangle
     {
-        width: 52
-        height: 52
-        color: ( hover ? colors.iconBgHover : colors.iconBg )
+        x: descriptionLabel.height + 10 + 2
+        width: parent.width - descriptionLabel.height + 10 - 2
+        height: descriptionLabel.height + 10
+        color: ( hover ? colors.textBgHover : colors.textBg )
     }
 
     Text
@@ -59,30 +69,19 @@ Item
         id: descriptionLabel
         text: itemRoot.title
         color: ( hover ? colors.textHover : colors.text )
+        width: parent.width - descriptionLabel.height + 10 - 2 - 24
 
-        font
-        {
-            family: config.font
-            pointSize: 28
-            bold: true
-        }
+        font: fonts.listItemMed
+        elide: Text.ElideRight
 
-        x: 64
+        x: descriptionLabel.height + 10 + 12
         y: 5
     }
 
-    Rectangle
-    {
-        x: 54
-        width: parent.width - 54
-        height: 52
-        color: ( hover ? colors.textBgHover : colors.textBg )
-    }
-
     MouseArea
     {
         width: descriptionLabel.x + descriptionLabel.width
-        height: 52
+        height: descriptionLabel.height + 10
         hoverEnabled: true
 
         onClicked: itemRoot.clicked()

slice/LoopListSessionItem.qml

@@ -1,35 +1,18 @@
 import QtQuick 2.7
-import QtGraphicalEffects 1.0
+import Qt5Compat.GraphicalEffects
 import SddmComponents 2.0
 
 Item
 {
     id: itemRoot
-    opacity: distance
-    scale: distance
+    opacity: computedDistance
+    scale: computedDistance
 
     property real distance: 1.0
+    readonly property real computedDistance: Math.sin(Math.PI / 2 * distance)
     property string sessionName: ""
     property bool hover: false
 
-    Text
-    {
-        id: sessionNameLabel
-        anchors.centerIn: parent
-        text: sessionName
-        color: ( hover ? colors.textHover : colors.text )
-
-        font
-        {
-            family: config.font
-            pointSize: 28
-            bold: true
-        }
-
-        x: parent.x + 10
-        y: 5
-    }
-
     Rectangle
     {
         x: sessionNameLabel.x - 10
@@ -38,4 +21,17 @@ Item
         height: sessionNameLabel.height + 10
         color: ( hover ? colors.textBgHover : colors.textBg )
     }
+
+    Text
+    {
+        id: sessionNameLabel
+        anchors.centerIn: parent
+        text: sessionName
+        color: ( hover ? colors.textHover : colors.text )
+
+        font: fonts.listItemMed
+
+        x: parent.x + 10
+        y: 5
+    }
 }

slice/LoopListUserItem.qml

@@ -1,82 +1,83 @@
 import QtQuick 2.7
-import QtGraphicalEffects 1.0
+import Qt5Compat.GraphicalEffects
 import SddmComponents 2.0
 
 Item
 {
     id: itemRoot
-    opacity: distance
+    opacity: computedDistance
     width: parent.width
+    height: userName == "" ? userLoginText.height + 14 : userNameText.height + userLoginText.height - 4
     
     property bool hover: false
     property bool hoverEnabled: true
 
     transform: Scale
     {
-        origin.x: 80
-        xScale: distance
-        yScale: distance
+        origin.x: itemRoot.height + 12
+        xScale: computedDistance
+        yScale: computedDistance
     }
 
     property real distance: 1.0
+    readonly property real computedDistance: Math.sin(Math.PI / 2 * distance)
     property string userName: ""
     property string userLogin: ""
     property string userAvatar: "icons/no_avatar.svg"
 
+    Rectangle
+    {
+        width: itemRoot.height
+        height: itemRoot.height
+        color: ( hoverEnabled && hover ? colors.iconBgHover : colors.iconBg )
+    }
+
     Image
     {
         id: profilePicture
         source: userAvatar
-        sourceSize.width: 60
-        sourceSize.height: 60
+        sourceSize.width: itemRoot.height - 8
+        sourceSize.height: itemRoot.height - 8
         x: 4
         y: 4
     }
 
     Rectangle
     {
-        width: 68
-        height: 68
-        color: ( hoverEnabled && hover ? colors.iconBgHover : colors.iconBg )
+        x: itemRoot.height + 2
+        y: 0
+        width: parent.width - itemRoot.height - 2
+        height: itemRoot.height
+        color: ( hoverEnabled && hover ? colors.textBgHover : colors.textBg )
     }
 
-
     Text
     {
+        id: userNameText
         text: userName
         color: ( hoverEnabled && hover ? colors.textHover : colors.text )
         
-        font
-        {
-            family: config.font
-            pointSize: 28
-            bold: true
-        }
+        font: fonts.listItemMed
 
-        x: 80
+        elide: Text.ElideRight
+
+        x: itemRoot.height + 12
         y: 0
+
+        width: itemRoot.width - itemRoot.height - 26
     }
 
     Text
     {
+        id: userLoginText
         text: userLogin
         color: ( hoverEnabled && hover ? (userName == "" ? colors.textHover : colors.textDimmedHover ) : (userName == "" ? colors.text : colors.textDimmed ) )
-        y: userName == "" ? 6 : 36
-        font
-        {
-            family: config.font
-            pointSize: userName == "" ? 36 : 20
-            bold: userName == ""
-        }
-        x: 80
-    }
+        y: userName == "" ? 7 : userNameText.height * 0.8
+        font: userName == "" ? fonts.listItemBig : fonts.listItemSub
+        x: itemRoot.height + 12
 
-    Rectangle
-    {
-        x: 70
-        y: 0
-        width: parent.width - 70
-        height: 68
-        color: ( hoverEnabled && hover ? colors.textBgHover : colors.textBg )
+        elide: Text.ElideRight
+
+        width: itemRoot.width - itemRoot.height - 26
     }
 }

slice/PagePower.qml

@@ -1,5 +1,5 @@
 import QtQuick 2.7
-import QtGraphicalEffects 1.0
+import Qt5Compat.GraphicalEffects
 import SddmComponents 2.0
 import QtQuick.Layouts 1.3
 
@@ -10,11 +10,11 @@ Item
 
     property int selectedIndex:
     {
-        if (sddm.canPowerOff) return 0
-        else if (sddm.canReboot) return 1
-        else if (sddm.canSuspend) return 2
-        else if (sddm.canHibernate) return 3
-        else if (sddm.canHybridSleep) return 4
+        if (debug.canPowerOff) return 0
+        else if (debug.canReboot) return 1
+        else if (debug.canSuspend) return 2
+        else if (debug.canHibernate) return 3
+        else if (debug.canHybridSleep) return 4
         else return 0
     }
 
@@ -64,7 +64,7 @@ Item
             Layout.alignment: Qt.AlignVCenter
             Layout.minimumHeight: 48
 
-            visible: sddm.canPowerOff
+            visible: debug.canPowerOff
             onEntered: selectedIndex = 0
             onClicked: { selectedIndex = 0; execute() }
         }
@@ -80,7 +80,7 @@ Item
             Layout.alignment: Qt.AlignVCenter
             Layout.minimumHeight: 48
 
-            visible: sddm.canReboot
+            visible: debug.canReboot
 
             onEntered: selectedIndex = 1
             onClicked: { selectedIndex = 1; execute() }
@@ -98,7 +98,7 @@ Item
             Layout.alignment: Qt.AlignVCenter
             Layout.minimumHeight: 48
 
-            visible: sddm.canSuspend
+            visible: debug.canSuspend
 
             onEntered: selectedIndex = 2
             onClicked: { selectedIndex = 2; execute() }
@@ -115,7 +115,7 @@ Item
             Layout.alignment: Qt.AlignVCenter
             Layout.minimumHeight: 48
 
-            visible: sddm.canHibernate
+            visible: debug.canHibernate
 
             onEntered: selectedIndex = 3
             onClicked: { selectedIndex = 3; execute() }
@@ -133,7 +133,7 @@ Item
             Layout.alignment: Qt.AlignVCenter
             Layout.minimumHeight: 48
 
-            visible: sddm.canHybridSleep
+            visible: debug.canHybridSleep
 
             onEntered: selectedIndex = 4
             onClicked: { selectedIndex = 4; execute() }
@@ -168,23 +168,23 @@ Item
             switch (result)
             {
                 case 0:
-                    if (sddm.canPowerOff) actionFound = true
+                    if (debug.canPowerOff) actionFound = true
                     break
 
                 case 1:
-                    if (sddm.canReboot) actionFound = true
+                    if (debug.canReboot) actionFound = true
                     break
 
                 case 2:
-                    if (sddm.canSuspend) actionFound = true
+                    if (debug.canSuspend) actionFound = true
                     break
 
                 case 3:
-                    if (sddm.canHibernate) actionFound = true
+                    if (debug.canHibernate) actionFound = true
                     break
 
                 case 4:
-                    if (sddm.canHybridSleep) actionFound = true
+                    if (debug.canHybridSleep) actionFound = true
                     break
             }
 
@@ -211,23 +211,23 @@ Item
             switch (result)
             {
                 case 0:
-                    if (sddm.canPowerOff) actionFound = true
+                    if (debug.canPowerOff) actionFound = true
                     break
 
                 case 1:
-                    if (sddm.canReboot) actionFound = true
+                    if (debug.canReboot) actionFound = true
                     break
 
                 case 2:
-                    if (sddm.canSuspend) actionFound = true
+                    if (debug.canSuspend) actionFound = true
                     break
 
                 case 3:
-                    if (sddm.canHibernate) actionFound = true
+                    if (debug.canHibernate) actionFound = true
                     break
 
                 case 4:
-                    if (sddm.canHybridSleep) actionFound = true
+                    if (debug.canHybridSleep) actionFound = true
                     break
             }
 

slice/PageUsers.qml

@@ -10,6 +10,7 @@ Item
     property int scrollRepeat: 0
     property string currentUserLogin: get_login(0)
     property bool hasLoginShown: true
+    property bool manual: bool(config.manual)
 
     signal lockNav()
     signal unlockNav()
@@ -67,8 +68,12 @@ Item
 
     onFocusChanged:
     {
-        if (focus && hasLoginShown)
-            passwordField.forceActiveFocus()
+        if (focus && hasLoginShown) {
+            if (manual)
+                loginField.forceActiveFocus()
+            else
+                passwordField.forceActiveFocus()
+        }
     }
 
     Item
@@ -187,10 +192,11 @@ Item
         LoopListUserItem
         {
             id: middleItem
-            y: hasLoginShown ? pageRoot.height / 2.3 - 40 : pageRoot.height / 2.3
+            y: hasLoginShown ? pageRoot.height / 2.3 - (middleItem.height / 2 + passwordFieldBg.height + progressBar.height + 2 + buttonUserLogin.height) / 2 : pageRoot.height / 2.3
             userName: get_name(0)
             userLogin: get_login(0)
             userAvatar: get_avatar(0)
+            visible: !manual
         }
 
         LoopListUserItem
@@ -223,150 +229,178 @@ Item
             userAvatar: get_avatar(3)
         }
 
-        TextInput
-        {
-            id: passwordField
-            x: 10
-            y: hasLoginShown ? pageRoot.height / 2.3 + 37 : pageRoot.height / 2.3 + 62
-            width: parent.width - 20
-            height: 25
-            opacity: hasLoginShown ? 1 : 0
-            color: colors.inputText
-            selectionColor: colors.inputSelectionBg
-            selectedTextColor: colors.inputSelectionText
+        Item {
+            id: loginControls
+            y: manual ? middleItem.y : middleItem.y + middleItem.height + 2
+            width: parent.width
 
-            echoMode: TextInput.Password
-            clip: true
-            selectByMouse: true
-            
-            font
+            Rectangle
             {
-                family: config.font
-                bold: true
-                pointSize: 18
+                id: loginFieldBg
+                y: 0
+                width: parent.width
+                height: Math.max(fonts.input.pointSize, fonts.placeholder.pointSize) + 20
+                opacity: hasLoginShown && manual ? 1 : 0
+                color: colors.inputBg
             }
 
-            Component.onCompleted: forceActiveFocus()
-
-        }
-
-        Text
-        {
-            id: passwordFieldPlaceholder
-            x: passwordField.x
-            y: passwordField.y
-            width: passwordField.width
-            opacity: hasLoginShown ? 1 : 0
-            visible: passwordField.text.length <= 0
-
-            color: colors.inputPlaceholderText
-
-            font
+            TextInput
             {
-                family: config.font
-                bold: true
-                pointSize: 18
+                id: loginField
+                x: 10
+                y: (loginFieldBg.height - height) / 2 + loginFieldBg.y
+                width: parent.width - 20
+                opacity: hasLoginShown && manual ? 1 : 0
+                color: colors.inputText
+                selectionColor: colors.inputSelectionBg
+                selectedTextColor: colors.inputSelectionText
+
+                clip: true
+                selectByMouse: true
+                
+                font: fonts.loginInput
+
+                Component.onCompleted: if (manual) forceActiveFocus()
+                Keys.onTabPressed: passwordField.forceActiveFocus()
             }
 
-            text: localeText.password
-        }
-
-        Rectangle {
-            id: passwordFieldBg
-            y: hasLoginShown ? pageRoot.height / 2.3 + 30 : pageRoot.height / 2.3 + 55
-            width: parent.width
-            height: 40
-            opacity: hasLoginShown ? 1 : 0
-            color: colors.inputBg
-        }
-
-        Rectangle
-        {
-            id: progressBar
-            y: hasLoginShown ? pageRoot.height / 2.3 + 70 : pageRoot.height / 2.3 + 105
-            width: parent.width
-            height: 2
-            opacity: hasLoginShown ? 1 : 0
-            color: colors.progressBar
-        }
-
-        Rectangle
-        {
-            id: progressBarBg
-            y: progressBar.y
-            width: parent.width
-            height: 2
-            opacity: 0
-            color: colors.progressBarBg
-        }
-
-        Rectangle
-        {
-            id: progressBarSlider1
-            x: 0
-            y: progressBar.y
-            width: parent.width / 5
-            height: 2
-            opacity: 0
-            color: colors.progressBarSlider
-        }
-
-        Rectangle
-        {
-            id: progressBarSlider2
-            x: parent.width
-            y: progressBar.y
-            width: 0
-            height: 2
-            opacity: 0
-            color: colors.progressBarSlider
-        }
-
-        SlicedButton
-        {
-            id: buttonUserLogin
-            x: userListContainer.width - widthFull
-            y: hasLoginShown ? pageRoot.height / 2.3 + 74 : pageRoot.height / 2.3 + 109
-            paddingTop: 2
-            highlighted: true
-            opacity: hasLoginShown ? 1 : 0
-
-            text: localeText.login
-
-            onClicked: select_or_login()
-        }
-
-        SlicedButton
-        {
-            id: buttonUserBack
-            x: userListContainer.width - widthFull - buttonUserLogin.widthPartial - 3
-            y: hasLoginShown ? pageRoot.height / 2.3 + 74 : pageRoot.height / 2.3 + 109
-            paddingTop: 2
-            opacity: hasLoginShown ? 1 : 0
-
-            text: qsTr("Back")
-
-            onClicked: back_to_selection()
-        }
-
-        Text
-        {
-            id: errorMessage
-            text: localeText.loginFailed
-            anchors.horizontalCenter: parent.horizontalCenter
-            y: pageRoot.height / 4.7
-            opacity: 0
-
-            color: colors.errorText
-
-            font
+            Text
             {
-                family: config.font
-                bold: true
-                pointSize: 18
+                id: loginFieldPlaceholder
+                x: loginField.x
+                y: (loginFieldBg.height - height) / 2 + loginFieldBg.y
+                width: loginField.width
+                opacity: hasLoginShown && manual ? 1 : 0
+                visible: loginField.text.length <= 0
+
+                color: colors.inputPlaceholderText
+
+                font: fonts.placeholder
+
+                text: localeText.userName
             }
 
-            Behavior on opacity { NumberAnimation { duration: userListContainer.scrollDuration } }
+            Rectangle
+            {
+                id: passwordFieldBg
+                y: manual ? loginFieldBg.y + loginFieldBg.height + 2 : 0
+                width: parent.width
+                height: Math.max(fonts.input.pointSize, fonts.placeholder.pointSize) + 20
+                opacity: hasLoginShown ? 1 : 0
+                color: colors.inputBg
+            }
+
+            TextInput
+            {
+                id: passwordField
+                x: 10
+                y: (passwordFieldBg.height - height) / 2 + passwordFieldBg.y
+                width: parent.width - 20
+                opacity: hasLoginShown ? 1 : 0
+                color: colors.inputText
+                selectionColor: colors.inputSelectionBg
+                selectedTextColor: colors.inputSelectionText
+
+                echoMode: TextInput.Password
+                clip: true
+                selectByMouse: true
+                
+                font: fonts.input
+
+                Component.onCompleted: forceActiveFocus()
+                Keys.onBacktabPressed: { if (manual) loginField.forceActiveFocus(); else event.accepted = false; }
+
+            }
+
+            Text
+            {
+                id: passwordFieldPlaceholder
+                x: passwordField.x
+                y: (passwordFieldBg.height - height) / 2 + passwordFieldBg.y
+                width: passwordField.width
+                opacity: hasLoginShown ? 1 : 0
+                visible: passwordField.text.length <= 0
+
+                color: colors.inputPlaceholderText
+
+                font: fonts.placeholder
+
+                text: localeText.password
+            }
+
+            Rectangle
+            {
+                id: progressBar
+                y: passwordFieldBg.y + passwordFieldBg.height
+                width: parent.width
+                height: 2
+                opacity: hasLoginShown ? 1 : 0
+                color: colors.progressBar
+            }
+
+            Rectangle
+            {
+                id: progressBarBg
+                y: progressBar.y
+                width: parent.width
+                height: 2
+                opacity: 0
+                color: colors.progressBarBg
+            }
+
+            Rectangle
+            {
+                id: progressBarSlider1
+                x: 0
+                y: progressBar.y
+                width: parent.width / 5
+                height: 2
+                opacity: 0
+                color: colors.progressBarSlider
+            }
+
+            Rectangle
+            {
+                id: progressBarSlider2
+                x: parent.width
+                y: progressBar.y
+                width: 0
+                height: 2
+                opacity: 0
+                color: colors.progressBarSlider
+            }
+
+            SlicedButton
+            {
+                id: buttonUserLogin
+                x: userListContainer.width - widthFull
+                y: progressBar.y + progressBar.height + 2
+                paddingTop: 2
+                highlighted: true
+                opacity: hasLoginShown ? 1 : 0
+
+                text: localeText.login
+
+                onClicked: select_or_login()
+
+                font: fonts.slicesLoginButtons
+            }
+
+            SlicedButton
+            {
+                id: buttonUserBack
+                x: userListContainer.width - widthFull - buttonUserLogin.widthPartial - 3
+                y: buttonUserLogin.y
+                paddingTop: 2
+                opacity: hasLoginShown ? 1 : 0
+                visible: !manual
+
+                text: qsTr("Back")
+
+                onClicked: back_to_selection()
+
+                font: fonts.slicesLoginButtons
+            }
 
         }
 
@@ -383,6 +417,22 @@ Item
             Behavior on opacity { NumberAnimation { duration: userListContainer.scrollDuration } }
         }
 
+        Text
+        {
+            id: errorMessage
+            text: localeText.loginFailed
+            anchors.horizontalCenter: parent.horizontalCenter
+            y: pageRoot.height / 4.7
+            opacity: 0
+
+            color: colors.errorText
+
+            font: fonts.error
+
+            Behavior on opacity { NumberAnimation { duration: userListContainer.scrollDuration } }
+
+        }
+
         ParallelAnimation
         {
             id: progressBarLoop
@@ -428,8 +478,11 @@ Item
             NumberAnimation { target: botMidItem; property: "distance"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: botFarItem; property: "distance"; to: 0; duration: userListContainer.scrollDuration }
 
-            NumberAnimation { target: middleItem; property: "y"; to: pageRoot.height / 2.3 - 40; duration: userListContainer.scrollDuration }
+            NumberAnimation { target: middleItem; property: "y"; to: pageRoot.height / 2.3 - (middleItem.height / 2 + passwordFieldBg.height + progressBar.height + 2 + buttonUserLogin.height) / 2; duration: userListContainer.scrollDuration }
 
+            NumberAnimation { target: loginField; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
+            NumberAnimation { target: loginFieldPlaceholder; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
+            NumberAnimation { target: loginFieldBg; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordField; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordFieldPlaceholder; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordFieldBg; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
@@ -437,12 +490,6 @@ Item
             NumberAnimation { target: buttonUserBack; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
             NumberAnimation { target: buttonUserLogin; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
 
-            NumberAnimation { target: passwordField; property: "y"; to: pageRoot.height / 2.3 + 37; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: passwordFieldBg; property: "y"; to: pageRoot.height / 2.3 + 30; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: progressBar; property: "y"; to: pageRoot.height / 2.3 + 70; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: buttonUserBack; property: "y"; to: pageRoot.height / 2.3 + 74; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: buttonUserLogin; property: "y"; to: pageRoot.height / 2.3 + 74; duration: userListContainer.scrollDuration }
-
             onStopped: 
             {
                 hasLoginShown = true
@@ -460,6 +507,9 @@ Item
 
             NumberAnimation { target: middleItem; property: "y"; to: pageRoot.height / 2.3; duration: userListContainer.scrollDuration }
 
+            NumberAnimation { target: loginField; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
+            NumberAnimation { target: loginFieldPlaceholder; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
+            NumberAnimation { target: loginFieldBg; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordField; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordFieldPlaceholder; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordFieldBg; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
@@ -467,12 +517,6 @@ Item
             NumberAnimation { target: buttonUserBack; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: buttonUserLogin; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
 
-            NumberAnimation { target: passwordField; property: "y"; to: pageRoot.height / 2.3 + 62; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: passwordFieldBg; property: "y"; to: pageRoot.height / 2.3 + 55; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: progressBar; property: "y"; to: pageRoot.height / 2.3 + 105; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: buttonUserBack; property: "y"; to: pageRoot.height / 2.3 + 109; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: buttonUserLogin; property: "y"; to: pageRoot.height / 2.3 + 109; duration: userListContainer.scrollDuration }
-
             onStopped:
             {
                 hasLoginShown = false
@@ -561,7 +605,7 @@ Item
             id: loginEnterAnimation
             NumberAnimation { target: passwordField; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordFieldBg; property: "height"; to: 0; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: passwordFieldBg; property: "y"; to: pageRoot.height / 2.3 + 70; duration: userListContainer.scrollDuration }
+            NumberAnimation { target: loginControls; property: "y"; to: pageRoot.height / 2.3 - (middleItem.height / 2 + progressBar.height + 2) / 2; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordFieldPlaceholder; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: buttonUserBack; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: buttonUserLogin; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
@@ -578,7 +622,7 @@ Item
             id: loginExitAnimation
             NumberAnimation { target: passwordField; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordFieldBg; property: "height"; to: 40; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: passwordFieldBg; property: "y"; to: pageRoot.height / 2.3 + 30; duration: userListContainer.scrollDuration }
+            NumberAnimation { target: loginControls; property: "y"; to: pageRoot.height / 2.3 - (middleItem.height / 2 + passwordFieldBg.height + progressBar.height + 2 + buttonUserLogin.height) / 2; duration: userListContainer.scrollDuration }
             NumberAnimation { target: passwordFieldPlaceholder; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
             NumberAnimation { target: buttonUserBack; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
             NumberAnimation { target: buttonUserLogin; property: "opacity"; to: 1; duration: userListContainer.scrollDuration }
@@ -586,7 +630,7 @@ Item
             NumberAnimation { target: progressBarSlider1; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: progressBarSlider2; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
             NumberAnimation { target: progressBarBg; property: "opacity"; to: 0; duration: userListContainer.scrollDuration }
-            NumberAnimation { target: middleItem; property: "y"; to: pageRoot.height / 2.3 - 40; duration: userListContainer.scrollDuration }
+            NumberAnimation { target: middleItem; property: "y"; to: pageRoot.height / 2.3 - (middleItem.height / 2 + passwordFieldBg.height + progressBar.height + 2 + buttonUserLogin.height) / 2; duration: userListContainer.scrollDuration }
 
             onStopped:
             {
@@ -642,9 +686,16 @@ Item
             pageRoot.enabled = false
             progressBarLoop.start()
             loginEnterAnimation.start()
-            sddm.login(currentUserLogin, passwordField.text, selectedSessionIndex)
+            if (debug.loginError)
+                loginTimeoutTimer.start()
+            else {
+                if (manual)
+                    sddm.login(loginField.text, passwordField.text, selectedSessionIndex)
+                else
+                    sddm.login(currentUserLogin, passwordField.text, selectedSessionIndex)
+            }
         }
-        else
+        else if (!manual)
         {
             topFarItem.hoverEnabled = false
             topMidItem.hoverEnabled = false
@@ -657,7 +708,7 @@ Item
 
     function back_to_selection()
     {
-        if (hasLoginShown)
+        if (hasLoginShown && !manual)
         {
             topFarItem.hoverEnabled = true
             topMidItem.hoverEnabled = true
@@ -670,10 +721,37 @@ Item
         }
     }
 
-    Keys.onUpPressed: scroll_down()
-    Keys.onDownPressed: scroll_up()
-    Keys.onEnterPressed: select_or_login()
-    Keys.onReturnPressed: select_or_login()
+    Timer
+    {
+        id: loginTimeoutTimer
+        interval: debug.loginTimeout * 1000
+        onTriggered: sddm.onLoginFailed()
+    }
+
+    Keys.onUpPressed: {
+        if (manual && hasLoginShown && passwordField.activeFocus) {
+            loginField.forceActiveFocus()
+        } else
+            scroll_down()
+    }
+    Keys.onDownPressed: {
+        if (manual && hasLoginShown && loginField.activeFocus) {
+            passwordField.forceActiveFocus()
+        } else
+            scroll_up()
+    }
+    Keys.onEnterPressed: {
+        if (hasLoginShown && !passwordField.activeFocus)
+            passwordField.forceActiveFocus()
+        else
+            select_or_login()
+    }
+    Keys.onReturnPressed: {
+        if (hasLoginShown && !passwordField.activeFocus)
+            passwordField.forceActiveFocus()
+        else
+            select_or_login()
+    }
     Keys.onEscapePressed: back_to_selection()
     
 }

slice/SlicedButton.qml

@@ -3,20 +3,25 @@ import QtQuick 2.7
 Item
 {
     id: buttonRoot
-    height: 25
+    height: paddingTop * 2 + buttonText.height
+
+    property font font: Qt.font({
+        family: config.font,
+        bold: true,
+        pointSize: 13,
+        capitalization: Font.AllUppercase,
+        smooth: false
+    });
 
-    property int fontSize: 13
     property string text: ""
 
-    property bool hasLeftSlice: true
-    property bool hasRightSlice: true
-
     property bool highlighted: false
-    readonly property int skew: 15
+    property int skewLeft:  15
+    property int skewRight: 15
 
-    readonly property int paddingLeft: hasLeftSlice ? skew : 5
+    readonly property int paddingLeft: Math.max(Math.abs(skewLeft), 5)
     property int paddingTop: 3
-    readonly property int paddingRight: hasRightSlice ? skew : 5
+    readonly property int paddingRight: Math.max(Math.abs(skewRight), 5)
 
     readonly property int widthFull: buttonText.width + paddingLeft + paddingRight
     readonly property int widthPartial: buttonText.width + paddingLeft
@@ -43,8 +48,7 @@ Item
 
     onHighlightedChanged:
     {
-        buttonBgSliceLeft.requestPaint()
-        buttonBgSliceRight.requestPaint()
+        buttonBg.requestPaint()
     }
 
     onTextChanged:
@@ -60,19 +64,7 @@ Item
             name: "idle"
             PropertyChanges
             {
-                target: buttonBgSliceLeft;
-                bgColor: highlighted ? bgIdleHighlighted : bgIdle
-            }
-
-            PropertyChanges
-            {
-                target: buttonBgCenter;
-                color: highlighted ? bgIdleHighlighted : bgIdle
-            }
-
-            PropertyChanges
-            {
-                target: buttonBgSliceRight;
+                target: buttonBg;
                 bgColor: highlighted ? bgIdleHighlighted : bgIdle
             }
 
@@ -87,19 +79,7 @@ Item
             name: "hover"
             PropertyChanges
             {
-                target: buttonBgSliceLeft;
-                bgColor: highlighted ? bgHoverHighlighted : bgHover
-            }
-
-            PropertyChanges
-            {
-                target: buttonBgCenter;
-                color: highlighted ? bgHoverHighlighted : bgHover
-            }
-
-            PropertyChanges
-            {
-                target: buttonBgSliceRight;
+                target: buttonBg;
                 bgColor: highlighted ? bgHoverHighlighted : bgHover
             }
 
@@ -113,107 +93,63 @@ Item
 
     Canvas
     {
-        id: buttonBgSliceLeft
+        id: buttonBg
 
-        width: paddingLeft
+        width: widthFull
         height: parent.height
         property string bgColor: colors.buttonBg
 
         onPaint:
         {
-
-            var context = getContext("2d")
+            var context = getContext("2d");
             context.clearRect(0, 0, width, height);
             context.fillStyle = bgColor
-
             context.beginPath()
 
-            if (buttonRoot.hasLeftSlice)
-                context.moveTo(paddingLeft, 0)
-            else
-            {
-                context.moveTo(0, 0)
-                context.lineTo(paddingLeft, 0)
+            context.moveTo(paddingLeft, height);
+
+            if (skewLeft > 0) {
+                context.lineTo(0, height);
+                context.lineTo(skewLeft, 0);
+            } else if (skewLeft < 0) {
+                context.lineTo(Math.abs(skewLeft), height);
+                context.lineTo(0, 0);
+            } else {
+                context.lineTo(0, height);
+                context.lineTo(0, 0);
             }
 
-            context.lineTo(paddingLeft, height)
-            context.lineTo(0, height)
-            
+            context.lineTo(widthPartial, 0);
+
+            if (skewRight > 0) {
+                context.lineTo(width, 0);
+                context.lineTo(width-skewRight, height);
+            } else if (skewRight < 0) {
+                context.lineTo(width+skewRight, 0);
+                context.lineTo(width, height);
+            } else {
+                context.lineTo(width, 0);
+                context.lineTo(width, height);
+            }
+
+            context.lineTo(paddingLeft, height);
+
             context.closePath()
             context.fill()
         }
 
-
         Behavior on x
         {
             PropertyAnimation { duration: 100 }
         }
-    }
-
-    Rectangle
-    {
-        id: buttonBgCenter
-        color: colors.buttonBg
-        x: paddingLeft
-        width: buttonText.width
-        height: parent.height
 
         Behavior on width
-        {
-            PropertyAnimation
-            {
-                duration: 100
-                onStopped:
-                {
-                    buttonRoot.showTextAnimation.start()
-                }
-            }
-        }
-
-
-        Behavior on x
         {
             PropertyAnimation { duration: 100 }
         }
+
     }
 
-    Canvas
-    {
-        id: buttonBgSliceRight
-
-        x: widthPartial
-
-        width: paddingRight
-        height: parent.height
-        property string bgColor: colors.buttonBg
-
-        onPaint:
-        {
-            var context = getContext("2d")
-            context.clearRect(0, 0, paddingRight, height);
-            context.fillStyle = bgColor
-
-            context.beginPath()
-
-            context.moveTo(0, 0)
-            context.lineTo(paddingRight, 0)
-
-            if (!buttonRoot.hasRightSlice)
-                context.lineTo(paddingRight, height)
-            
-            context.lineTo(0, height)
-            
-            context.closePath()
-            context.fill()
-        }
-
-        Behavior on x
-        {
-            PropertyAnimation { duration: 100 }
-        }
-    }
-
-
     Text
     {
         id: buttonText
@@ -221,16 +157,9 @@ Item
         y: paddingTop
         color: colors.buttonText
 
-        font
-        {
-            family: config.font
-            bold: true
-            pointSize: fontSize
-            capitalization: Font.AllUppercase
-        }
+        font: buttonRoot.font
 
         text: ""
-
     }
 
     MouseArea
@@ -244,15 +173,13 @@ Item
         onEntered: 
         {
             buttonRoot.state = "hover"
-            buttonBgSliceLeft.requestPaint()
-            buttonBgSliceRight.requestPaint()
+            buttonBg.requestPaint()
         }
 
         onExited:
         {
             buttonRoot.state = "idle"
-            buttonBgSliceLeft.requestPaint()
-            buttonBgSliceRight.requestPaint()
+            buttonBg.requestPaint()
         }
 
         onClicked: buttonRoot.clicked()

slice/VirtualKeyboard.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.7
+import QtQuick.VirtualKeyboard 2.1
+
+InputPanel {
+    id: inputPanel
+    width: parent.width
+}

theme.conf

@@ -6,4 +6,5 @@ parallax_bg_shift=20
 color_bg=#222222
 color_main=#dddddd
 color_dimmed=#888888
-color_contrast=#1f1f1f
+color_contrast=#1f1f1f
+manual=false

translations/nl.ts

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE TS>
+<TS version="2.1" language="nl">
+<context>
+    <name>PagePower</name>
+    <message>
+        <source>Suspend</source>
+        <translation>Pauzestand</translation>
+    </message>
+    <message>
+        <source>Hibernate</source>
+        <translation>Slaapstand</translation>
+    </message>
+    <message>
+        <source>Hybrid Sleep</source>
+        <translation>Hybride slaapstand</translation>
+    </message>
+</context>
+<context>
+    <name>PageUsers</name>
+    <message>
+        <source>Back</source>
+        <translation>Terug</translation>
+    </message>
+</context>
+</TS>