lock: better buttons

This commit is contained in:
2 * r + 2 * t 2025-07-22 18:32:28 +10:00
parent 789c58e90a
commit a59cc0474b
2 changed files with 18 additions and 24 deletions

View file

@ -22,7 +22,7 @@ JsonObject {
property int mediaCoverBorder: 3 property int mediaCoverBorder: 3
property int largeScreenWidth: 2560 property int largeScreenWidth: 2560
property int smallScreenWidth: 1080 property int smallScreenWidth: 1080
property int buttonsWidth: 500 property int buttonsWidth: 400
property int buttonsWidthSmall: 300 property int buttonsWidthSmall: 300
} }
} }

View file

@ -4,29 +4,19 @@ import qs.widgets
import qs.services import qs.services
import qs.config import qs.config
import Quickshell import Quickshell
import Quickshell.Widgets
import QtQuick import QtQuick
import QtQuick.Layouts import QtQuick.Layouts
WrapperItem { Item {
readonly property real nonAnimMargin: handler.hovered ? Appearance.padding.large * 2 : Appearance.padding.large * 1.2 id: root
readonly property real nonAnimMargin: handler.hovered ? Appearance.padding.large * 1.5 : Appearance.padding.large
readonly property real nonAnimWidth: handler.hovered ? Config.lock.sizes.buttonsWidth : Config.lock.sizes.buttonsWidthSmall readonly property real nonAnimWidth: handler.hovered ? Config.lock.sizes.buttonsWidth : Config.lock.sizes.buttonsWidthSmall
readonly property real nonAnimHeight: (nonAnimWidth + nonAnimMargin * 2) / 4 readonly property real nonAnimHeight: (nonAnimWidth + nonAnimMargin * 2) / 4
margin: nonAnimMargin
rightMargin: 0
bottomMargin: 0
implicitWidth: nonAnimWidth implicitWidth: nonAnimWidth
implicitHeight: nonAnimHeight implicitHeight: nonAnimHeight
Behavior on margin {
NumberAnimation {
duration: Appearance.anim.durations.large
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.emphasized
}
}
Behavior on implicitWidth { Behavior on implicitWidth {
NumberAnimation { NumberAnimation {
duration: Appearance.anim.durations.large duration: Appearance.anim.durations.large
@ -52,6 +42,10 @@ WrapperItem {
RowLayout { RowLayout {
id: layout id: layout
anchors.fill: parent
anchors.margins: root.nonAnimMargin
anchors.rightMargin: 0
anchors.bottomMargin: 0
spacing: Appearance.spacing.normal spacing: Appearance.spacing.normal
SessionButton { SessionButton {
@ -73,6 +67,14 @@ WrapperItem {
icon: "cached" icon: "cached"
command: ["systemctl", "reboot"] command: ["systemctl", "reboot"]
} }
Behavior on anchors.margins {
NumberAnimation {
duration: Appearance.anim.durations.large
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.emphasized
}
}
} }
component SessionButton: StyledRect { component SessionButton: StyledRect {
@ -82,7 +84,7 @@ WrapperItem {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: width Layout.preferredHeight: width
radius: stateLayer.containsMouse ? Appearance.rounding.large * 2 : Appearance.rounding.large * 1.2 radius: Appearance.rounding.large * 1.2
color: Colours.palette.m3secondaryContainer color: Colours.palette.m3secondaryContainer
StateLayer { StateLayer {
@ -103,13 +105,5 @@ WrapperItem {
font.pointSize: (parent.width * 0.4) || 1 font.pointSize: (parent.width * 0.4) || 1
font.weight: handler.hovered ? 500 : 400 font.weight: handler.hovered ? 500 : 400
} }
Behavior on radius {
NumberAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
}
} }
} }