kenji/illogical-impulse
1
0
Fork 0
forked from Shinonome/dots-hyprland
Code Pull Requests Activity

make buttons ripple

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
.config/quickshell/modules/sidebarLeft/AiChat.qml
+4 -29
View File
@@ -282,14 +282,8 @@ int main(int argc, char* argv[]) {
}
delegate: ApiCommandButton {
id: commandButton
colBackground: suggestions.selectedIndex === index ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2
background: Rectangle {
radius: Appearance.rounding.small
color: suggestions.selectedIndex === index ? Appearance.colors.colLayer2Hover :
commandButton.down ? Appearance.colors.colLayer2Active :
commandButton.hovered ? Appearance.colors.colLayer2Hover :
Appearance.colors.colLayer2
}
contentItem: RowLayout {
spacing: 5
StyledText {
@@ -440,13 +434,15 @@ int main(int argc, char* argv[]) {
}
}
Button { // Send button
RippleButton { // Send button
id: sendButton
Layout.alignment: Qt.AlignTop
Layout.rightMargin: 5
implicitWidth: 40
implicitHeight: 40
buttonRadius: Appearance.rounding.small
enabled: messageInputField.text.length > 0
toggled: enabled
MouseArea {
anchors.fill: parent
@@ -458,17 +454,6 @@ int main(int argc, char* argv[]) {
}
}
background: Rectangle {
radius: Appearance.rounding.small
color: sendButton.enabled ? (sendButton.down ? Appearance.colors.colPrimaryActive :
sendButton.hovered ? Appearance.colors.colPrimaryHover :
Appearance.m3colors.m3primary) : Appearance.colors.colLayer2Disabled
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
}
}
contentItem: MaterialSymbol {
anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter
@@ -546,16 +531,6 @@ int main(int argc, char* argv[]) {
id: commandButton
property string commandRepresentation: `${root.commandPrefix}${modelData.name}`
buttonText: commandRepresentation
background: Rectangle {
radius: Appearance.rounding.small
color: commandButton.down ? Appearance.colors.colLayer2Active :
commandButton.hovered ? Appearance.colors.colLayer2Hover :
Appearance.colors.colLayer2
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
}
}
onClicked: {
if(modelData.sendDirectly) {
root.handleInput(commandRepresentation)
.config/quickshell/modules/sidebarLeft/Anime.qml
+7 -30
View File
@@ -309,14 +309,8 @@ Item {
delegate: ApiCommandButton {
id: tagButton
background: Rectangle {
radius: Appearance.rounding.small
color: tagSuggestions.selectedIndex === index ? Appearance.colors.colLayer2Hover :
tagButton.down ? Appearance.colors.colLayer2Active :
tagButton.hovered ? Appearance.colors.colLayer2Hover :
Appearance.colors.colLayer2
}
colBackground: tagSuggestions.selectedIndex === index ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2
contentItem: RowLayout {
spacing: 5
StyledText {
@@ -487,13 +481,15 @@ Item {
}
}
Button { // Send button
RippleButton { // Send button
id: sendButton
Layout.alignment: Qt.AlignTop
Layout.rightMargin: 5
implicitWidth: 40
implicitHeight: 40
buttonRadius: Appearance.rounding.small
enabled: tagInputField.text.length > 0
toggled: enabled
MouseArea {
anchors.fill: parent
@@ -505,17 +501,6 @@ Item {
}
}
background: Rectangle {
radius: Appearance.rounding.small
color: sendButton.enabled ? (sendButton.down ? Appearance.colors.colPrimaryActive :
sendButton.hovered ? Appearance.colors.colPrimaryHover :
Appearance.m3colors.m3primary) : Appearance.colors.colLayer2Disabled
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
}
}
contentItem: MaterialSymbol {
anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter
@@ -637,16 +622,8 @@ Item {
id: tagButton
property string commandRepresentation: `${root.commandPrefix}${modelData.name}`
buttonText: commandRepresentation
background: Rectangle {
radius: Appearance.rounding.small
color: tagButton.down ? Appearance.colors.colLayer2Active :
tagButton.hovered ? Appearance.colors.colLayer2Hover :
Appearance.colors.colLayer2
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
}
}
colBackground: Appearance.colors.colLayer2
onClicked: {
if(modelData.sendDirectly) {
root.handleInput(commandRepresentation)
.config/quickshell/modules/sidebarLeft/ApiCommandButton.qml
+4 -9
View File
@@ -6,7 +6,7 @@ import QtQuick.Controls
import QtQuick.Layouts
import Quickshell
Button {
RippleButton {
id: button
property string buttonText
@@ -14,14 +14,9 @@ Button {
leftPadding: 10
rightPadding: 10
PointingHandInteraction {}
background: Rectangle {
radius: Appearance.rounding.small
color: (button.down ? Appearance.colors.colSurfaceContainerHighestActive :
button.hovered ? Appearance.colors.colSurfaceContainerHighestHover :
Appearance.m3colors.m3surfaceContainerHighest)
}
colBackground: Appearance.colors.colLayer2
colBackgroundHover: Appearance.colors.colLayer2Hover
colRipple: Appearance.colors.colLayer2Active
contentItem: StyledText {
horizontalAlignment: Text.AlignHCenter
.config/quickshell/modules/sidebarLeft/aiChat/AiMessageControlButton.qml
+2 -18
View File
@@ -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
.config/quickshell/modules/sidebarLeft/aiChat/AnnotationSourceButton.qml
+5 -8
View File
@@ -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 {
.config/quickshell/modules/sidebarLeft/aiChat/MessageThinkBlock.qml
+7 -24
View File
@@ -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"
.config/quickshell/modules/sidebarLeft/anime/BooruImage.qml
+5 -11
View File
@@ -46,8 +46,6 @@ Button {
implicitWidth: imageObject.width
implicitHeight: imageObject.height
// PointingHandInteraction {}
background: Rectangle {
implicitWidth: imageObject.width
implicitHeight: imageObject.height
@@ -84,7 +82,7 @@ Button {
}
}
Button {
RippleButton {
id: menuButton
anchors.top: parent.top
anchors.right: parent.right
@@ -92,19 +90,15 @@ Button {
implicitHeight: 30
implicitWidth: 30
PointingHandInteraction {}
buttonRadius: Appearance.rounding.full
colBackground: ColorUtils.transparentize(Appearance.m3colors.m3surface, 0.3)
colBackgroundHover: ColorUtils.transparentize(ColorUtils.mix(Appearance.m3colors.m3surface, Appearance.m3colors.m3onSurface, 0.8), 0.2)
colRipple: ColorUtils.transparentize(ColorUtils.mix(Appearance.m3colors.m3surface, Appearance.m3colors.m3onSurface, 0.6), 0.1)
StyledToolTip {
content: `${StringUtils.wordWrap(root.imageData.tags, root.maxTagStringLineLength)}\n${qsTr("Click for options")}`
}
background: Rectangle {
color: menuButton.down ? ColorUtils.transparentize(ColorUtils.mix(Appearance.m3colors.m3surface, Appearance.m3colors.m3onSurface, 0.6), 0.1) :
menuButton.hovered ? ColorUtils.transparentize(ColorUtils.mix(Appearance.m3colors.m3surface, Appearance.m3colors.m3onSurface, 0.8), 0.2) :
ColorUtils.transparentize(Appearance.m3colors.m3surface, 0.3)
radius: Appearance.rounding.full
}
contentItem: MaterialSymbol {
horizontalAlignment: Text.AlignHCenter
iconSize: Appearance.font.pixelSize.large
.config/quickshell/modules/sidebarLeft/anime/BooruResponse.qml
+5 -8
View File
@@ -251,7 +251,7 @@ Rectangle {
}
}
Button { // Next page button
RippleButton { // Next page button
id: button
property string buttonText
visible: root.responseData.page != "" && root.responseData.page > 0
@@ -261,18 +261,15 @@ Rectangle {
leftPadding: 10
rightPadding: 5
PointingHandInteraction {}
onClicked: {
tagInputField.text = `${responseData.tags.join(" ")} ${parseInt(root.responseData.page) + 1}`
tagInputField.accept()
}
background: Rectangle {
radius: Appearance.rounding.small
color: (button.down ? Appearance.colors.colSurfaceContainerHighestActive :
button.hovered ? Appearance.colors.colSurfaceContainerHighestHover :
Appearance.m3colors.m3surfaceContainerHighest)
}
buttonRadius: Appearance.rounding.small
colBackground: Appearance.m3colors.m3surfaceContainerHighest
colBackgroundHover: Appearance.colors.colSurfaceContainerHighestHover
colRipple: Appearance.colors.colSurfaceContainerHighestActive
contentItem: Item {
anchors.fill: parent