sho/quickshell-rice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(lockscreen): remove submit arrow for centered password input and enlarge session controls inside input card

Browse Source
This commit is contained in:
Sho 2026-08-02 16:20:21 +09:00
parent aed2c0f11d
commit b50ef1c8cb
1 changed files with 183 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
quickshell/modules/lockscreen/LockscreenContent.qml
View File

@ -205,12 +205,12 @@ Item {
Item { Layout.preferredHeight: 4 } Item { Layout.preferredHeight: 4 }
// 3. Elegant Glass Input Card with Animated Typing Dots // 3. Elegant Glass Input Card with Animated Typing Dots & Session Controls
Rectangle { Rectangle {
id: cardContainer id: cardContainer
Layout.fillWidth: true Layout.fillWidth: true
implicitHeight: cardLayout.implicitHeight + 36 implicitHeight: cardLayout.implicitHeight + 36
radius: 20 radius: 24
color: Theme.isDark ? Qt.rgba(30/255, 30/255, 46/255, 0.65) : Qt.rgba(240/255, 240/255, 245/255, 0.75) color: Theme.isDark ? Qt.rgba(30/255, 30/255, 46/255, 0.65) : Qt.rgba(240/255, 240/255, 245/255, 0.75)
border.color: LockscreenService.authFailed ? Theme.red : (secretInput.activeFocus ? Theme.accent : Qt.rgba(Theme.fg.r, Theme.fg.g, Theme.fg.b, 0.18)) border.color: LockscreenService.authFailed ? Theme.red : (secretInput.activeFocus ? Theme.accent : Qt.rgba(Theme.fg.r, Theme.fg.g, Theme.fg.b, 0.18))
border.width: LockscreenService.authFailed ? 2 : (secretInput.activeFocus ? 2 : 1) border.width: LockscreenService.authFailed ? 2 : (secretInput.activeFocus ? 2 : 1)
@ -223,26 +223,21 @@ Item {
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.margins: 18 anchors.margins: 18
spacing: 14 spacing: 16
// Password Row: Input Field + Submit Button // Centered Password Input Field
RowLayout {
Layout.fillWidth: true
spacing: 12
// Password Visual Placeholder / Input Area
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
implicitHeight: 44 implicitHeight: 48
radius: 12 radius: 14
color: Qt.rgba(0, 0, 0, 0.25) color: Qt.rgba(0, 0, 0, 0.28)
border.color: Qt.rgba(Theme.fg.r, Theme.fg.g, Theme.fg.b, 0.1) border.color: secretInput.activeFocus ? Qt.rgba(Theme.accent.r, Theme.accent.g, Theme.accent.b, 0.4) : Qt.rgba(Theme.fg.r, Theme.fg.g, Theme.fg.b, 0.12)
// Empty State Placeholder Text Behavior on border.color { ColorAnimation { duration: 150 } }
// Empty State Placeholder Text (Centered)
Text { Text {
anchors.verticalCenter: parent.verticalCenter anchors.centerIn: parent
anchors.left: parent.left
anchors.leftMargin: 16
visible: LockscreenService.typedCount === 0 && !LockscreenService.isAuthenticating visible: LockscreenService.typedCount === 0 && !LockscreenService.isAuthenticating
text: "Type password to unlock..." text: "Type password to unlock..."
color: Theme.comment color: Theme.comment
@ -276,7 +271,7 @@ Item {
} }
} }
// ANIMATED TYPING DOTS (Ultra-smooth sliding dot array with add/remove/displaced transitions) // ANIMATED TYPING DOTS (Centered sliding dot array with add/remove/displaced transitions)
Item { Item {
id: dotsContainer id: dotsContainer
anchors.centerIn: parent anchors.centerIn: parent
@ -352,96 +347,70 @@ Item {
} }
} }
// Submit / Unlock Arrow Button // Dynamic Auth Error Feedback Message
Rectangle {
width: 44
height: 44
radius: 12
color: submitMouse.containsMouse ? Theme.accent : Qt.rgba(Theme.accent.r, Theme.accent.g, Theme.accent.b, 0.25)
border.color: Theme.accent
Behavior on color { ColorAnimation { duration: 120 } }
Text {
anchors.centerIn: parent
text: "➔"
color: submitMouse.containsMouse ? "#ffffff" : Theme.accent
font.pixelSize: 18
font.weight: Font.Bold
}
MouseArea {
id: submitMouse
anchors.fill: parent
hoverEnabled: true
onClicked: LockscreenService.submitPassword()
}
}
}
// Dynamic Typing Status & Feedback Message
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
visible: LockscreenService.authFailed visible: LockscreenService.authFailed
Item { Layout.fillWidth: true } Item { Layout.fillWidth: true }
// Auth Error Message Display
Text { Text {
text: LockscreenService.authErrorMsg text: LockscreenService.authErrorMsg
color: Theme.red color: Theme.red
font.pixelSize: 12 font.pixelSize: 12
font.weight: Font.Bold font.weight: Font.Bold
} }
}
} Item { Layout.fillWidth: true }
} }
Item { Layout.preferredHeight: 14 } // Prominent, Large Session Action Buttons (Right underneath Password Input)
// 4. Session Action Buttons (Power & Unlock)
RowLayout { RowLayout {
Layout.alignment: Qt.AlignHCenter Layout.fillWidth: true
spacing: 16 spacing: 12
// Suspend Button // Suspend / Sleep Button
Rectangle { Rectangle {
implicitWidth: 110 Layout.fillWidth: true
implicitHeight: 38 implicitHeight: 48
radius: 10 radius: 12
color: suspendMouse.containsMouse ? Qt.rgba(Theme.fg.r, Theme.fg.g, Theme.fg.b, 0.15) : Qt.rgba(0, 0, 0, 0.3) color: suspendMouse.containsMouse ? Qt.rgba(Theme.accent.r, Theme.accent.g, Theme.accent.b, 0.25) : Qt.rgba(0, 0, 0, 0.3)
border.color: Qt.rgba(Theme.fg.r, Theme.fg.g, Theme.fg.b, 0.15) border.color: suspendMouse.containsMouse ? Theme.accent : Qt.rgba(Theme.fg.r, Theme.fg.g, Theme.fg.b, 0.12)
Behavior on color { ColorAnimation { duration: 150 } }
Behavior on border.color { ColorAnimation { duration: 150 } }
RowLayout { RowLayout {
anchors.centerIn: parent anchors.centerIn: parent
spacing: 6 spacing: 8
Text { text: "🌙"; font.pixelSize: 13 } Text { text: "🌙"; font.pixelSize: 16 }
Text { text: "Sleep"; color: Theme.fg; font.pixelSize: 12; font.weight: Font.Medium } Text { text: "Sleep"; color: Theme.fg; font.pixelSize: 14; font.weight: Font.SemiBold }
} }
MouseArea { MouseArea {
id: suspendMouse id: suspendMouse
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onClicked: { onClicked: Quickshell.execDetached(["systemctl", "suspend"])
Quickshell.execDetached(["systemctl", "suspend"])
}
} }
} }
// Reboot Button // Reboot / Restart Button
Rectangle { Rectangle {
implicitWidth: 110 Layout.fillWidth: true
implicitHeight: 38 implicitHeight: 48
radius: 10 radius: 12
color: rebootMouse.containsMouse ? Qt.rgba(Theme.orange.r, Theme.orange.g, Theme.orange.b, 0.25) : Qt.rgba(0, 0, 0, 0.3) color: rebootMouse.containsMouse ? Qt.rgba(Theme.orange.r, Theme.orange.g, Theme.orange.b, 0.3) : Qt.rgba(0, 0, 0, 0.3)
border.color: Qt.rgba(Theme.fg.r, Theme.fg.g, Theme.fg.b, 0.15) border.color: rebootMouse.containsMouse ? Theme.orange : Qt.rgba(Theme.fg.r, Theme.fg.g, Theme.fg.b, 0.12)
Behavior on color { ColorAnimation { duration: 150 } }
Behavior on border.color { ColorAnimation { duration: 150 } }
RowLayout { RowLayout {
anchors.centerIn: parent anchors.centerIn: parent
spacing: 6 spacing: 8
Text { text: "🔄"; font.pixelSize: 13 } Text { text: "🔄"; font.pixelSize: 16 }
Text { text: "Restart"; color: Theme.fg; font.pixelSize: 12; font.weight: Font.Medium } Text { text: "Restart"; color: Theme.fg; font.pixelSize: 14; font.weight: Font.SemiBold }
} }
MouseArea { MouseArea {
@ -452,19 +421,22 @@ Item {
} }
} }
// Shutdown Button // Shutdown / Power Off Button
Rectangle { Rectangle {
implicitWidth: 110 Layout.fillWidth: true
implicitHeight: 38 implicitHeight: 48
radius: 10 radius: 12
color: powerMouse.containsMouse ? Qt.rgba(Theme.red.r, Theme.red.g, Theme.red.b, 0.25) : Qt.rgba(0, 0, 0, 0.3) color: powerMouse.containsMouse ? Qt.rgba(Theme.red.r, Theme.red.g, Theme.red.b, 0.3) : Qt.rgba(0, 0, 0, 0.3)
border.color: Qt.rgba(Theme.fg.r, Theme.fg.g, Theme.fg.b, 0.15) border.color: powerMouse.containsMouse ? Theme.red : Qt.rgba(Theme.fg.r, Theme.fg.g, Theme.fg.b, 0.12)
Behavior on color { ColorAnimation { duration: 150 } }
Behavior on border.color { ColorAnimation { duration: 150 } }
RowLayout { RowLayout {
anchors.centerIn: parent anchors.centerIn: parent
spacing: 6 spacing: 8
Text { text: "⚡"; font.pixelSize: 13 } Text { text: "⏻"; font.pixelSize: 16; color: Theme.red }
Text { text: "Power Off"; color: Theme.fg; font.pixelSize: 12; font.weight: Font.Medium } Text { text: "Power Off"; color: Theme.fg; font.pixelSize: 14; font.weight: Font.SemiBold }
} }
MouseArea { MouseArea {
@ -476,4 +448,6 @@ Item {
} }
} }
} }
}
}
} }