Update layout

LoginFrame.qml

@@ -1,11 +1,10 @@
 import QtQuick 2.0
 import SddmComponents 2.0
 
-Rectangle {
+Item {
-    property int m_sessionIndex: sessionModel.lastIndex
+    property int sessionIndex: sessionModel.lastIndex
-    property string m_userName: userModel.lastUser
+    property string userName: userModel.lastUser
 
-    readonly property int m_powerButtonSize: 40
 
     function getIconByName(name) {
         for (var i = 0; i < userModel.count; i ++) {
@@ -16,12 +15,6 @@ Rectangle {
         return ""
     }
 
-    Image {
-        id: powerBackground
-        anchors.fill: parent
-        source: "background.jpg"
-    }
-
     Item {
         id: centerArea
         anchors.centerIn: parent
@@ -64,7 +57,7 @@ Rectangle {
                     horizontalCenter: parent.horizontalCenter
                 }
 
-                text: m_userName
+                text: userName
                 color: textColor
                 font.pointSize: 15
             }
@@ -98,7 +91,7 @@ Rectangle {
                     KeyNavigation.backtab: userButton; KeyNavigation.tab: shutdownButton
                     Keys.onPressed: {
                         if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
-                            sddm.login(userNameText.text, passwdInput.text, m_sessionIndex)
+                            sddm.login(userNameText.text, passwdInput.text, sessionIndex)
                             event.accepted = true
                         }
                     }
@@ -113,124 +106,125 @@ Rectangle {
                     // Fixme, This is vary strange
                     source: "icons/login_normal.png"
                     onClicked: {
-                        sddm.login(userNameText.text, passwdInput.text, m_sessionIndex)
+                        sddm.login(userNameText.text, passwdInput.text, sessionIndex)
                     }
                 }
             }
         }
     }
 
-    Item {
+//    Item {
-        id: timeArea
+//        id: timeArea
 
-        anchors {
+//        anchors {
-            bottom: parent.bottom
+//            bottom: parent.bottom
-            left: parent.left
+//            left: parent.left
-        }
+//        }
-        width: parent.width / 3
+//        width: parent.width / 3
-        height: parent.height / 5
+//        height: parent.height / 5
 
-        Text {
+//        Text {
-            id: timeText
+//            id: timeText
-            anchors {
+//            anchors {
-                left: parent.left
+//                left: parent.left
-                leftMargin: hMargin
+//                leftMargin: hMargin
-                bottom: dateText.top
+//                bottom: dateText.top
-                bottomMargin: 5
+//                bottomMargin: 5
-            }
+//            }
 
-            font.pointSize: 50
+//            font.pointSize: 50
-            color: textColor
+//            color: textColor
 
-            function updateTime() {
+//            function updateTime() {
-                text = new Date().toLocaleString(Qt.locale("en_US"), "hh:mm")
+//                text = new Date().toLocaleString(Qt.locale("en_US"), "hh:mm")
-            }
+//            }
-        }
+//        }
 
-        Text {
+//        Text {
-            id: dateText
+//            id: dateText
-            anchors {
+//            anchors {
-                left: parent.left
+//                left: parent.left
-                leftMargin: hMargin
+//                leftMargin: hMargin
-                bottom: parent.bottom
+//                bottom: parent.bottom
-                bottomMargin: vMargin
+//                bottomMargin: vMargin
-            }
+//            }
 
-            font.pointSize: 18
+//            font.pointSize: 18
-            color: textColor
+//            color: textColor
 
-            function updateDate() {
+//            function updateDate() {
-                text = new Date().toLocaleString(Qt.locale("en_US"), "yyyy-MM-dd dddd")
+//                text = new Date().toLocaleString(Qt.locale("en_US"), "yyyy-MM-dd dddd")
-            }
+//            }
-        }
+//        }
 
-        Timer {
+//        Timer {
-            interval: 1000
+//            interval: 1000
-            repeat: true
+//            repeat: true
-            running: true
+//            running: true
-            onTriggered: {
+//            onTriggered: {
-                timeText.updateTime()
+//                timeText.updateTime()
-                dateText.updateDate()
+//                dateText.updateDate()
-            }
+//            }
-        }
+//        }
 
-        Component.onCompleted: {
+//        Component.onCompleted: {
-            timeText.updateTime()
+//            timeText.updateTime()
-            dateText.updateDate()
+//            dateText.updateDate()
-        }
+//        }
-    }
+//    }
 
-    Item {
+//    Item {
-        id: powerArea
+//        id: powerArea
-        anchors {
+//        anchors {
-            bottom: parent.bottom
+//            bottom: parent.bottom
-            right: parent.right
+//            right: parent.right
-        }
+//        }
-        width: parent.width / 3
+//        width: parent.width / 3
-        height: parent.height / 5
+//        height: parent.height / 5
 
-        readonly property int itemSpacing: 20;
+//        readonly property int itemSpacing: 20;
 
-        Row {
+//        Row {
-            spacing: 20
+//            spacing: 20
-            anchors.right: parent.right
+//            anchors.right: parent.right
-            anchors.rightMargin: hMargin
+//            anchors.rightMargin: hMargin
-            anchors.verticalCenter: parent.verticalCenter
+//            anchors.verticalCenter: parent.verticalCenter
 
-            ImageButton {
+//            ImageButton {
-                id: sessionButton
+//                id: sessionButton
-                width: m_powerButtonSize
+//                width: m_powerButtonSize
-                height: m_powerButtonSize
+//                height: m_powerButtonSize
-                visible: sessionFrame.isMultipleSessions()
+//                visible: sessionFrame.isMultipleSessions()
-                source: sessionFrame.getCurrentSessionIconPath()
+//                source: sessionFrame.getCurrentSessionIconPath()
-                onClicked: root.state = "stateSession"
+//                onClicked: root.state = "stateSession"
-            }
+//            }
 
-            ImageButton {
+//            ImageButton {
-                id: userButton
+//                id: userButton
-                width: m_powerButtonSize
+//                width: m_powerButtonSize
-                height: m_powerButtonSize
+//                height: m_powerButtonSize
-                visible: userFrame.isMultipleUsers()
+//                visible: userFrame.isMultipleUsers()
 
-                source: "icons/switchframe/userswitch_normal.png"
+//                source: "icons/switchframe/userswitch_normal.png"
-                onClicked: {
+//                onClicked: {
-                    console.log("Switch User...")
+//                    console.log("Switch User...")
-                    root.state = "stateUser"
+//                    root.state = "stateUser"
-                }
+//                }
-            }
+//            }
 
-            ImageButton {
+//            ImageButton {
-                id: shutdownButton
+//                id: shutdownButton
-                width: m_powerButtonSize
+//                width: m_powerButtonSize
-                height: m_powerButtonSize
+//                height: m_powerButtonSize
-                visible: true//sddm.canPowerOff
+//                visible: true//sddm.canPowerOff
+
+//                source: "icons/switchframe/powermenu.png"
+//                onClicked: {
+//                    console.log("Show shutdown menu")
+//                    root.state = "statePower"
+//                }
+//            }
+//        }
+//    }
 
-                source: "icons/switchframe/powermenu.png"
-                onClicked: {
-                    console.log("Show shutdown menu")
-                    root.state = "statePower"
-                }
-            }
-        }
-    }
 }

Main.qml

@@ -1,6 +1,7 @@
 /***********************************************************************/
 
 import QtQuick 2.0
+import QtGraphicalEffects 1.0
 import SddmComponents 2.0
 
 
@@ -11,7 +12,8 @@ Rectangle {
     state: "stateLogin"
 
     readonly property int hMargin: 40
-    readonly property int vMargin: 40
+    readonly property int vMargin: 30
+    readonly property int m_powerButtonSize: 40
     readonly property color textColor: "#ffffff"
 
     TextConstants { id: textConstants }
@@ -23,6 +25,7 @@ Rectangle {
             PropertyChanges { target: powerFrame; opacity: 1}
             PropertyChanges { target: sessionFrame; opacity: 0}
             PropertyChanges { target: userFrame; opacity: 0}
+            PropertyChanges { target: bgBlur; radius: 20}
         },
         State {
             name: "stateSession"
@@ -30,6 +33,7 @@ Rectangle {
             PropertyChanges { target: powerFrame; opacity: 0}
             PropertyChanges { target: sessionFrame; opacity: 1}
             PropertyChanges { target: userFrame; opacity: 0}
+            PropertyChanges { target: bgBlur; radius: 20}
         },
         State {
             name: "stateUser"
@@ -37,6 +41,7 @@ Rectangle {
             PropertyChanges { target: powerFrame; opacity: 0}
             PropertyChanges { target: sessionFrame; opacity: 0}
             PropertyChanges { target: userFrame; opacity: 1}
+            PropertyChanges { target: bgBlur; radius: 20}
         },
         State {
             name: "stateLogin"
@@ -44,11 +49,13 @@ Rectangle {
             PropertyChanges { target: powerFrame; opacity: 0}
             PropertyChanges { target: sessionFrame; opacity: 0}
             PropertyChanges { target: userFrame; opacity: 0}
+            PropertyChanges { target: bgBlur; radius: 0}
         }
 
     ]
     transitions: Transition {
-        PropertyAnimation { duration: 500; properties: "opacity";  }
+        PropertyAnimation { duration: 300; properties: "opacity";  }
+        PropertyAnimation { duration: 300; properties: "radius";  }
     }
 
     Repeater {
@@ -65,52 +72,189 @@ Rectangle {
         }
     }
 
-    PowerFrame {
+    Item {
-        id: powerFrame
+        id: mainFrame
-        enabled: root.state == "statePower"
         property variant geometry: screenModel.geometry(screenModel.primary)
         x: geometry.x; y: geometry.y; width: geometry.width; height: geometry.height
-        opacity: 1
-        onNeedClose: root.state = "stateLogin"
-        onNeedShutdown: sddm.powerOff()
-        onNeedRestart: sddm.reboot()
-        onNeedSuspend: sddm.suspend()
-    }
 
-    SessionFrame {
+        Image {
-        id: sessionFrame
+            id: mainFrameBackground
-        enabled: root.state == "stateSession"
+            anchors.fill: parent
-        property variant geometry: screenModel.geometry(screenModel.primary)
+            source: "background.jpg"
-        x: geometry.x; y: geometry.y; width: geometry.width; height: geometry.height
-        onSelected: {
-            console.log("Selected session:", index)
-            root.state = "stateLogin"
-            loginFrame.m_sessionIndex = index
         }
-        onNeedClose: root.state = "stateLogin"
-    }
 
-    UserFrame {
+        FastBlur {
-        id: userFrame
+            id: bgBlur
-        enabled: root.state == "stateUser"
+            anchors.fill: mainFrameBackground
-        property variant geometry: screenModel.geometry(screenModel.primary)
+            source: mainFrameBackground
-        x: geometry.x; y: geometry.y; width: geometry.width; height: geometry.height
+            radius: 0
-        onSelected: {
-            console.log("Select user:", userName)
-            root.state = "stateLogin"
-            loginFrame.m_userName = userName
         }
-        onNeedClose: root.state = "stateLogin"
-    }
 
-    LoginFrame {
+        Item {
-        id: loginFrame
+            id: centerArea
-        enabled: root.state == "stateLogin"
+            width: parent.width
-        property variant geometry: screenModel.geometry(screenModel.primary)
+            height: parent.height / 3
-        x: geometry.x; y: geometry.y; width: geometry.width; height: geometry.height
+            anchors.centerIn: parent
-        color: "transparent"
-        opacity: 0
-        transformOrigin: Item.Top
-    }
 
+            PowerFrame {
+                id: powerFrame
+                anchors.fill: parent
+                enabled: root.state == "statePower"
+                onNeedClose: root.state = "stateLogin"
+                onNeedShutdown: sddm.powerOff()
+                onNeedRestart: sddm.reboot()
+                onNeedSuspend: sddm.suspend()
+            }
+
+            SessionFrame {
+                id: sessionFrame
+                anchors.fill: parent
+                enabled: root.state == "stateSession"
+                onSelected: {
+                    console.log("Selected session:", index)
+                    root.state = "stateLogin"
+                    loginFrame.sessionIndex = index
+                }
+                onNeedClose: root.state = "stateLogin"
+            }
+
+            UserFrame {
+                id: userFrame
+                anchors.fill: parent
+                enabled: root.state == "stateUser"
+                onSelected: {
+                    console.log("Select user:", userName)
+                    root.state = "stateLogin"
+                    loginFrame.userName = userName
+                }
+                onNeedClose: root.state = "stateLogin"
+            }
+
+            LoginFrame {
+                id: loginFrame
+                anchors.fill: parent
+                enabled: root.state == "stateLogin"
+                opacity: 0
+                transformOrigin: Item.Top
+            }
+        }
+
+        Item {
+            id: timeArea
+
+            anchors {
+                bottom: parent.bottom
+                left: parent.left
+            }
+            width: parent.width / 3
+            height: parent.height / 5
+
+            Text {
+                id: timeText
+                anchors {
+                    left: parent.left
+                    leftMargin: hMargin
+                    bottom: dateText.top
+                    bottomMargin: 5
+                }
+
+                font.pointSize: 50
+                color: textColor
+
+                function updateTime() {
+                    text = new Date().toLocaleString(Qt.locale("en_US"), "hh:mm")
+                }
+            }
+
+            Text {
+                id: dateText
+                anchors {
+                    left: parent.left
+                    leftMargin: hMargin
+                    bottom: parent.bottom
+                    bottomMargin: vMargin
+                }
+
+                font.pointSize: 18
+                color: textColor
+
+                function updateDate() {
+                    text = new Date().toLocaleString(Qt.locale("en_US"), "yyyy-MM-dd dddd")
+                }
+            }
+
+            Timer {
+                interval: 1000
+                repeat: true
+                running: true
+                onTriggered: {
+                    timeText.updateTime()
+                    dateText.updateDate()
+                }
+            }
+
+            Component.onCompleted: {
+                timeText.updateTime()
+                dateText.updateDate()
+            }
+        }
+
+        Item {
+            id: powerArea
+            anchors {
+                bottom: parent.bottom
+                right: parent.right
+            }
+            width: parent.width / 3
+            height: parent.height / 5
+
+            Row {
+                spacing: 20
+                anchors.right: parent.right
+                anchors.rightMargin: hMargin
+                anchors.verticalCenter: parent.verticalCenter
+
+                ImageButton {
+                    id: sessionButton
+                    width: m_powerButtonSize
+                    height: m_powerButtonSize
+                    visible: sessionFrame.isMultipleSessions()
+                    source: sessionFrame.getCurrentSessionIconPath()
+                    onClicked: root.state = "stateSession"
+                }
+
+                ImageButton {
+                    id: userButton
+                    width: m_powerButtonSize
+                    height: m_powerButtonSize
+                    visible: userFrame.isMultipleUsers()
+
+                    source: "icons/switchframe/userswitch_normal.png"
+                    onClicked: {
+                        console.log("Switch User...")
+                        root.state = "stateUser"
+                    }
+                }
+
+                ImageButton {
+                    id: shutdownButton
+                    width: m_powerButtonSize
+                    height: m_powerButtonSize
+                    visible: true//sddm.canPowerOff
+
+                    source: "icons/switchframe/powermenu.png"
+                    onClicked: {
+                        console.log("Show shutdown menu")
+                        root.state = "statePower"
+                    }
+                }
+            }
+        }
+
+        MouseArea {
+            z: -1
+            anchors.fill: parent
+            onClicked: root.state = "stateLogin"
+        }
+    }
 }

PowerFrame.qml

@@ -1,24 +1,12 @@
 import QtQuick 2.0
 import QtGraphicalEffects 1.0
 
-Rectangle {
+Item {
     signal needClose()
     signal needShutdown()
     signal needRestart()
     signal needSuspend()
 
-    Image {
-        id: powerBackground
-        anchors.fill: parent
-        source: "background.jpg"
-    }
-
-    FastBlur {
-        anchors.fill: powerBackground
-        source: powerBackground
-        radius: 20
-    }
-
     Row {
         spacing: 70
 

SessionFrame.qml

@@ -1,7 +1,7 @@
 import QtQuick 2.0
 import QtGraphicalEffects 1.0
 
-Rectangle {
+Item {
     id: frame
     signal selected(var index)
     signal needClose()
@@ -27,18 +27,6 @@ Rectangle {
         return sessionList.count > 1
     }
 
-    Image {
-        id: sessionBackground
-        anchors.fill: parent
-        source: "background.jpg"
-    }
-
-    FastBlur {
-        anchors.fill: sessionBackground
-        source: sessionBackground
-        radius: 20
-    }
-
     ListView {
         id: sessionList
         anchors.centerIn: parent

UserFrame.qml

@@ -1,7 +1,7 @@
 import QtQuick 2.0
 import QtGraphicalEffects 1.0
 
-Rectangle {
+Item {
     id: frame
     signal selected(var userName)
     signal needClose()
@@ -18,18 +18,6 @@ Rectangle {
         return usersList.count > 1
     }
 
-    Image {
-        id: usersBackground
-        anchors.fill: parent
-        source: "background.jpg"
-    }
-
-    FastBlur {
-        anchors.fill: usersBackground
-        source: usersBackground
-        radius: 20
-    }
-
     ListView {
         id: usersList
         anchors.centerIn: parent