From ce29ddb8c1c4f16c70e661cf475888d23c8b796a Mon Sep 17 00:00:00 2001 From: ash Date: Thu, 5 Jan 2023 05:49:06 -0500 Subject: [PATCH] finish user panel....... maybe --- components/LoginPanel.qml | 9 +- components/RoundMouseArea.qml | 31 ++++ components/UserFieldPanel.qml | 60 +++++++ components/UserPanel.qml | 305 ++++++++++++++++++---------------- 4 files changed, 264 insertions(+), 141 deletions(-) create mode 100644 components/RoundMouseArea.qml create mode 100644 components/UserFieldPanel.qml diff --git a/components/LoginPanel.qml b/components/LoginPanel.qml index 828ec43..13a830b 100644 --- a/components/LoginPanel.qml +++ b/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) + } } } diff --git a/components/RoundMouseArea.qml b/components/RoundMouseArea.qml new file mode 100644 index 0000000..fb0d054 --- /dev/null +++ b/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() + } +} diff --git a/components/UserFieldPanel.qml b/components/UserFieldPanel.qml new file mode 100644 index 0000000..c0a016c --- /dev/null +++ b/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 + } + } +} + diff --git a/components/UserPanel.qml b/components/UserPanel.qml index 19c7a98..bfe9a19 100644 --- a/components/UserPanel.qml +++ b/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 { - id: avatar - source: "/usr/share/sddm/faces/ash.face.icon" + DelegateModel { + id: delegateModel - height: inputWidth / 1.5 - width: inputWidth / 1.5 - anchors.horizontalCenter: parent.horizontalCenter + model: userModel - fillMode: Image.PreserveAspectCrop - layer.enabled: true - layer.effect: OpacityMask { - maskSource: mask + delegate: ItemDelegate { + id: userEntry + + 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 - currentIndex: model.lastIndex + model: delegateModel + + 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 } - -