finish user panel....... maybe
This commit is contained in:
ash
parent
a96d876289
commit
ce29ddb8c1
4 changed files with 264 additions and 141 deletions
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
31
components/RoundMouseArea.qml
Normal file
31
components/RoundMouseArea.qml
Normal file
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
60
components/UserFieldPanel.qml
Normal file
60
components/UserFieldPanel.qml
Normal file
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue