make buttons ripple

This commit is contained in:
end-4
2025-05-22 19:01:20 +02:00
parent 042a4d1c24
commit 927487c60f
26 changed files with 305 additions and 400 deletions
@@ -7,31 +7,15 @@ import QtQuick.Controls
import QtQuick.Layouts
import Quickshell
Button {
RippleButton {
id: button
property string buttonIcon
property bool activated: false
toggled: activated
implicitHeight: 30
implicitWidth: 30
PointingHandInteraction {}
background: Rectangle {
radius: Appearance.rounding.small
color: !button.enabled ? ColorUtils.transparentize(Appearance.m3colors.m3surfaceContainerHighest, 1) :
button.activated ? (button.down ? Appearance.colors.colPrimaryActive :
button.hovered ? Appearance.colors.colPrimaryHover :
Appearance.m3colors.m3primary) :
(button.down ? Appearance.colors.colSurfaceContainerHighestActive :
button.hovered ? Appearance.colors.colSurfaceContainerHighestHover :
ColorUtils.transparentize(Appearance.m3colors.m3surfaceContainerHighest, 1))
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
}
}
contentItem: MaterialSymbol {
horizontalAlignment: Text.AlignHCenter
font.pixelSize: Appearance.font.pixelSize.large
@@ -11,7 +11,7 @@ import Quickshell.Io
import Quickshell.Widgets
import Quickshell.Hyprland
Button {
RippleButton {
id: root
property string displayText
property string url
@@ -27,6 +27,10 @@ Button {
implicitHeight: 30
leftPadding: (implicitHeight - faviconSize) / 2
rightPadding: 10
buttonRadius: Appearance.rounding.full
colBackground: Appearance.m3colors.m3surfaceContainerHighest
colBackgroundHover: Appearance.colors.colSurfaceContainerHighestHover
colRipple: Appearance.colors.colSurfaceContainerHighestActive
Process {
id: faviconDownloadProcess
@@ -49,13 +53,6 @@ Button {
}
}
background: Rectangle {
radius: Appearance.rounding.full
color: (root.down ? Appearance.colors.colSurfaceContainerHighestActive :
root.hovered ? Appearance.colors.colSurfaceContainerHighestHover :
Appearance.m3colors.m3surfaceContainerHighest)
}
contentItem: RowLayout {
spacing: 5
IconImage {
@@ -102,35 +102,18 @@ Item {
text: root.completed ? qsTr("Chain of Thought") : (qsTr("Thinking") + ".".repeat(Math.random() * 4))
}
Item { Layout.fillWidth: true }
Button { // Expand button
RippleButton { // Expand button
id: expandButton
visible: root.completed
implicitWidth: 22
implicitHeight: 22
colBackground: headerMouseArea.containsMouse ? Appearance.colors.colLayer2Hover
: ColorUtils.transparentize(Appearance.colors.colLayer2, 1)
colBackgroundHover: Appearance.colors.colLayer2Hover
colRipple: Appearance.colors.colLayer2Active
PointingHandInteraction{}
onClicked: {
root.collapsed = !root.collapsed
}
background: Rectangle {
anchors.fill: parent
radius: Appearance.rounding.full
color: (headerMouseArea.pressed) ? Appearance.colors.colLayer2Active
: (headerMouseArea.containsMouse ? Appearance.colors.colLayer2Hover
: ColorUtils.transparentize(Appearance.colors.colLayer2, 1))
Behavior on color {
ColorAnimation {
duration: collapseAnimation.duration
easing.type: collapseAnimation.type
easing.bezierCurve: collapseAnimation.bezierCurve
}
}
}
onClicked: { root.collapsed = !root.collapsed }
contentItem: MaterialSymbol {
anchors.centerIn: parent
text: "keyboard_arrow_down"