finish user panel....... maybe

components/LoginPanel.qml

@@ -3,7 +3,7 @@ import QtQuick.Window 2.12
 import QtQuick.Controls 2.12
 
 Item {
-    property var user: "ash"
+    property var user: userPanel.username
     property var password: passwordField.text
     property var session: sessionPanel.currentIndex
     property var inputHeight: Screen.height * config.LoginScale * 0.25
@@ -113,7 +113,12 @@ Item {
                 }
             }
 
-            onClicked: sddm.login(user, password, session)
+            onClicked: {
+                sddm.login(user, password, session)
+                print("user: " + user)
+                print("password: " + password)
+                print("session: " + session)
+            }
         }
     }
 

components/RoundMouseArea.qml

@@ -0,0 +1,31 @@
+import QtQuick 2.12
+
+Item {
+    id: roundMouseArea
+
+    property alias mouseX: mouseArea.mouseX
+    property alias mouseY: mouseArea.mouseY
+
+    property bool containsMouse: {
+        var x1 = width / 2;
+        var y1 = height / 2;
+        var x2 = mouseX;
+        var y2 = mouseY;
+        var distanceFromCenter = Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2);
+        var radiusSquared = Math.pow(Math.min(width, height) / 2, 2);
+        var isWithinOurRadius = distanceFromCenter < radiusSquared;
+        return isWithinOurRadius;
+    }
+
+    readonly property bool pressed: containsMouse && mouseArea.pressed
+
+    signal clicked
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        onClicked: if (roundMouseArea.containsMouse) roundMouseArea.clicked()
+    }
+}

components/UserFieldPanel.qml

@@ -0,0 +1,60 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtGraphicalEffects 1.12
+
+TextField {
+    id: usernameField
+
+    height: inputHeight
+    width: inputWidth
+
+    selectByMouse: true
+    echoMode: TextInput.Normal
+
+    renderType: Text.NativeRendering
+    font.family: config.Font
+    font.pointSize: config.LoginFontSize
+    font.bold: true
+    color: config.AccentText
+    horizontalAlignment: Text.AlignHCenter
+
+    placeholderText: "Username"
+    text: userModel.lastUser
+
+    background: Rectangle {
+        id: userFieldBackground
+
+        color: config.AccentDark
+        border.color: config.AccentText
+        border.width: 0
+        radius: config.CornerRadius
+    }
+
+    states: [
+        State {
+            name: "focused"
+            when: usernameField.activeFocus
+            PropertyChanges {
+                target: userFieldBackground
+                color: Qt.darker(config.AccentDark, 1.2)
+                border.width: 3
+            }
+        },
+        State {
+            name: "hovered"
+            when: usernameField.hovered
+            PropertyChanges {
+                target: userFieldBackground
+                color: Qt.darker(config.AccentDark, 1.2)
+            }
+        }
+    ]
+
+    transitions: Transition {
+        PropertyAnimation {
+            properties: "color, border.width"
+            duration: 150
+        }
+    }
+}
+

components/UserPanel.qml

@@ -1,40 +1,73 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtGraphicalEffects 1.12
+import QtQml.Models 2.12
 
 Column {
-    property var selectedUserIndex: userList.currentIndex
+    property var username: usernameField.text
 
     spacing: 30
 
-    Image {
+    DelegateModel {
-        id: avatar
+        id: delegateModel
-        source: "/usr/share/sddm/faces/ash.face.icon"
 
-        height: inputWidth / 1.5
+        model: userModel
-        width: inputWidth / 1.5
-        anchors.horizontalCenter: parent.horizontalCenter
 
-        fillMode: Image.PreserveAspectCrop
+        delegate: ItemDelegate {
-        layer.enabled: true
+            id: userEntry
-        layer.effect: OpacityMask {
+                
-            maskSource: mask
+            height: inputHeight
+            width: parent.width
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            contentItem: Text {
+                renderType: Text.NativeRendering
+                font.family: config.Font
+                font.pointSize: config.LoginFontSize
+                font.bold: true
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                color: config.AccentText
+
+                text: name
+            }
+
+            background: Rectangle {
+                id: userEntryBackground
+
+                color: config.AccentLight
+                radius: config.CornerRadius
+            }
+
+            states: [
+                State {
+                    name: "hovered"
+                    when: userEntry.hovered
+                    PropertyChanges {
+                        target: userEntryBackground
+                        color: Qt.lighter(config.AccentLight, 1.2)
+                    }
+                }
+            ]
+
+            transitions: Transition {
+                PropertyAnimation {
+                    property: "color"
+                    duration: 150
+                }
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    userList.currentIndex = index
+                    usernameField.text = delegateModel.items.get(index).model.name
+                    userPicture.source = delegateModel.items.get(index).model.icon
+                    popup.close()
+                }
+            }
         }
-
-        MouseArea {
-            anchors.fill: parent
-            cursorShape: Qt.PointingHandCursor
-            onClicked: popup.open()
-        }
-    }
-
-    Rectangle {
-        id: mask
-
-        height: inputWidth / 1.5
-        width: inputWidth / 1.5
-        radius: inputWidth / 3
-        visible: false
     }
 
     Popup {
@@ -50,68 +83,10 @@ Column {
             implicitHeight: contentHeight
             spacing: 8
 
-            model: userModel
+            model: delegateModel
-            currentIndex: model.lastIndex
+
+            currentIndex: userModel.lastIndex
             clip: true
-            
-            // TODO: highlight currently selected item + make text bold
-            delegate: ItemDelegate {
-                id: userEntry
-                
-                height: inputHeight
-                width: parent.width
-                anchors.horizontalCenter: parent.horizontalCenter
-
-                highlighted: parent.highlightedIndex === index
-        
-                contentItem: Text {
-                    renderType: Text.NativeRendering
-                    font.family: config.Font
-                    font.pointSize: config.LoginFontSize
-                    font.bold: true
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                    color: config.AccentText
-
-                    text: model.name
-                }
-
-                background: Rectangle {
-                    id: userEntryBackground
-
-                    color: config.AccentLight
-                    radius: config.CornerRadius
-                }
-
-                states: [
-                    State {
-                        name: "hovered"
-                        when: userEntry.hovered
-                        PropertyChanges {
-                            target: userEntryBackground
-                            color: Qt.lighter(config.AccentLight, 1.2)
-                        }
-                    }
-                ]
-
-                transitions: Transition {
-                    PropertyAnimation {
-                        property: "color"
-                        duration: 150
-                    }
-                }
-
-                MouseArea {
-                    anchors.fill: parent
-                    cursorShape: Qt.PointingHandCursor
-                    onClicked: {
-                        userList.currentIndex = index
-                        usernameField.text = userList.currentIndex
-                        popup.close()
-                        print(userList.currentIndex)
-                    }
-                }
-            }
         }
 
         background: Rectangle {
@@ -138,61 +113,113 @@ Column {
         }
     }
 
-    TextField {
+    Item {
+        width: inputWidth
+        implicitHeight: pictureBorder.height
+
+        Rectangle {
+            id: pictureBorder
+
+            anchors.centerIn: userPicture
+            height: inputWidth / 1.5 + (border.width * 2)
+            width: inputWidth / 1.5 + (border.width * 2)
+            radius: height / 2
+            border.width: config.LoginUserPictureBorderWidth
+            border.color: config.AccentText
+            color: config.AccentLight
+
+            MouseArea {
+                id: roundMouseArea
+
+                anchors.fill: parent
+                hoverEnabled: true
+
+                onClicked: popup.open()
+                onHoveredChanged: {
+                    if (containsMouse) {
+                        pictureBorder.state = "hovered"
+                    } else {
+                        pictureBorder.state = "unhovered"
+                    }
+                }
+                onPressedChanged: {
+                    if (containsPress) {
+                        pictureBorder.state = "pressed"
+                    } else if (containsMouse) {
+                        pictureBorder.state = "hovered"
+                    } else {
+                        pictureBorder.state = "unhovered"
+                    }
+                }
+            }
+
+            states: [
+                State {
+                    name: "pressed"
+                    PropertyChanges {
+                        target: pictureBorder
+                        border.color: Qt.darker(config.AccentText, 1.5)
+                        color: Qt.darker(config.AccentLight, 1.5)
+                    }
+                },
+                State {
+                    name: "hovered"
+                    PropertyChanges {
+                        target: pictureBorder
+                        border.color: Qt.darker(config.AccentText, 1.2)
+                        color: Qt.darker(config.AccentLight, 1.2)
+                    }
+                },
+                State {
+                    name: "unhovered"
+                    PropertyChanges {
+                        target: pictureBorder
+                        border.color: config.AccentText
+                        color: config.AccentLight
+                    }
+                }
+            ]
+
+transitions: Transition {
+            PropertyAnimation {
+                properties: "border.color, color"
+                duration: 150
+            }
+        }
+
+        }
+
+        Image {
+            id: userPicture
+            source: ""
+
+            height: inputWidth / 1.5
+            width: inputWidth / 1.5
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            fillMode: Image.PreserveAspectCrop
+            layer.enabled: true
+            layer.effect: OpacityMask {
+                maskSource: mask
+            }
+
+            Rectangle {
+                id: mask
+
+                anchors.fill: parent
+                radius: inputWidth / 3
+                visible: false
+            }
+        }
+        
+            }
+
+    UserFieldPanel {
         id: usernameField
 
         height: inputHeight
         width: inputWidth
-        
-        selectByMouse: true
-        echoMode: TextInput.Normal
-
-        renderType: Text.NativeRendering
-        font.family: config.Font
-        font.pointSize: config.LoginFontSize
-        font.bold: true
-        color: config.AccentText
-        horizontalAlignment: Text.AlignHCenter
-
-        placeholderText: "Username"
-        text: userModel.lastUser
-
-        background: Rectangle {
-            id: userFieldBackground
-
-            color: config.AccentDark
-            border.color: config.AccentText
-            border.width: 0
-            radius: config.CornerRadius
-        }
-
-        states: [
-            State {
-                name: "focused"
-                when: usernameField.activeFocus
-                PropertyChanges {
-                    target: userFieldBackground
-                    color: Qt.darker(config.AccentDark, 1.2)
-                    border.width: 3
-                }
-            },
-            State {
-                name: "hovered"
-                when: usernameField.hovered
-                PropertyChanges {
-                    target: userFieldBackground
-                    color: Qt.darker(config.AccentDark, 1.2)
-                }
-            }
-        ]
-
-        transitions: Transition {
-            PropertyAnimation {
-                properties: "color, border.width"
-                duration: 150
-            }
-        }
     }
+
+    Component.onCompleted: userPicture.source = delegateModel.items.get(userList.currentIndex).model.icon
 }
-
-