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/sidebarRight/calendar/CalendarDayButton.qml
+3 -15
View File
@@ -5,7 +5,7 @@ import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Button {
RippleButton {
id: button
property string day
property int isToday
@@ -17,20 +17,8 @@ Button {
implicitWidth: 38;
implicitHeight: 38;
background: Rectangle {
anchors.fill: parent
radius: Appearance.rounding.full
color: (isToday == 1) ? ((interactable && button.down) ? Appearance.colors.colPrimaryActive :
(interactable && button.hovered) ? Appearance.colors.colPrimaryHover :
Appearance.m3colors.m3primary) :
(interactable && button.down) ? Appearance.colors.colLayer1Active :
(interactable && button.hovered) ? Appearance.colors.colLayer1Hover :
ColorUtils.transparentize(Appearance.colors.colLayer1, 1)
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
}
}
toggled: (isToday == 1)
buttonRadius: Appearance.rounding.small
contentItem: StyledText {
anchors.fill: parent
.config/quickshell/modules/sidebarRight/calendar/CalendarHeaderButton.qml
+6 -12
View File
@@ -4,7 +4,7 @@ import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Button {
RippleButton {
id: button
property string buttonText: ""
property string tooltipText: ""
@@ -18,18 +18,12 @@ Button {
}
}
PointingHandInteraction {}
background.anchors.fill: button
buttonRadius: Appearance.rounding.full
colBackground: Appearance.colors.colLayer2
colBackgroundHover: Appearance.colors.colLayer2Hover
colRipple: Appearance.colors.colLayer2Active
background: Rectangle {
anchors.fill: parent
radius: Appearance.rounding.full
color: (button.down) ? Appearance.colors.colLayer2Active : (button.hovered ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2)
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
}
}
contentItem: StyledText {
text: buttonText
horizontalAlignment: Text.AlignHCenter
.config/quickshell/modules/sidebarRight/notifications/NotificationStatusButton.qml
+24 -28
View File
@@ -4,12 +4,12 @@ import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Button {
RippleButton {
id: button
property string buttonText: ""
property string buttonIcon: ""
// implicitHeight: 30
implicitHeight: 30
implicitWidth: contentRowLayout.implicitWidth + 10 * 2
Behavior on implicitWidth {
SmoothedAnimation {
@@ -17,33 +17,29 @@ Button {
}
}
PointingHandInteraction {}
buttonRadius: Appearance.rounding.full
colBackground: Appearance.colors.colLayer2
colBackgroundHover: Appearance.colors.colLayer2Hover
colRipple: Appearance.colors.colLayer2Active
background.anchors.fill: button
background: Rectangle {
anchors.fill: parent
radius: Appearance.rounding.full
color: (button.down) ? Appearance.colors.colLayer2Active : (button.hovered ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2)
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
}
}
contentItem: RowLayout {
id: contentRowLayout
anchors.centerIn: parent
spacing: 0
MaterialSymbol {
text: buttonIcon
Layout.fillWidth: false
iconSize: Appearance.font.pixelSize.larger
color: Appearance.colors.colOnLayer1
}
StyledText {
text: buttonText
Layout.fillWidth: false
font.pixelSize: Appearance.font.pixelSize.small
color: Appearance.colors.colOnLayer1
contentItem: Item {
RowLayout {
id: contentRowLayout
anchors.centerIn: parent
spacing: 0
MaterialSymbol {
text: buttonIcon
Layout.fillWidth: false
iconSize: Appearance.font.pixelSize.larger
color: Appearance.colors.colOnLayer1
}
StyledText {
text: buttonText
Layout.fillWidth: false
font.pixelSize: Appearance.font.pixelSize.small
color: Appearance.colors.colOnLayer1
}
}
}
.config/quickshell/modules/sidebarRight/quickToggles/QuickToggleButton.qml
+11 -25
View File
@@ -5,41 +5,27 @@ import QtQuick
import QtQuick.Controls
import Quickshell.Io
Button {
RippleButton {
id: button
property bool toggled
property string buttonIcon
toggled: false
buttonRadius: Appearance?.rounding?.full ?? 9999
implicitWidth: 40
implicitHeight: 40
PointingHandInteraction {}
background: Rectangle {
anchors.fill: parent
radius: Appearance.rounding.full
color: toggled ?
(button.down ? Appearance.colors.colPrimaryActive : button.hovered ? Appearance.colors.colPrimaryHover : Appearance.m3colors.m3primary) :
(button.down ? Appearance.colors.colLayer1Active : button.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1))
contentItem: MaterialSymbol {
anchors.centerIn: parent
iconSize: Appearance.font.pixelSize.larger
fill: toggled ? 1 : 0
color: toggled ? Appearance.m3colors.m3onPrimary : Appearance.colors.colOnLayer1
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: buttonIcon
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
}
MaterialSymbol {
anchors.centerIn: parent
iconSize: Appearance.font.pixelSize.larger
fill: toggled ? 1 : 0
text: buttonIcon
color: toggled ? Appearance.m3colors.m3onPrimary : Appearance.colors.colOnLayer1
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
}
}
}
}
.config/quickshell/modules/sidebarRight/todo/TodoItemActionButton.qml
+2 -12
View File
@@ -5,7 +5,7 @@ import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Button {
RippleButton {
id: button
property string buttonText: ""
property string tooltipText: ""
@@ -13,24 +13,14 @@ Button {
implicitHeight: 30
implicitWidth: implicitHeight
PointingHandInteraction {}
Behavior on implicitWidth {
SmoothedAnimation {
velocity: Appearance.animation.elementMove.velocity
}
}
background: Rectangle {
anchors.fill: parent
radius: Appearance.rounding.full
color: (button.down) ? Appearance.colors.colLayer2Active : (button.hovered ? Appearance.colors.colLayer2Hover : ColorUtils.transparentize(Appearance.colors.colLayer2, 1))
buttonRadius: Appearance.rounding.small
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
}
}
contentItem: StyledText {
text: buttonText
horizontalAlignment: Text.AlignHCenter
.config/quickshell/modules/sidebarRight/volumeMixer/AudioDeviceSelectorButton.qml
+5 -12
View File
@@ -8,21 +8,14 @@ import QtQuick.Layouts
import Quickshell.Widgets
import Quickshell.Services.Pipewire
Button {
RippleButton {
id: button
required property bool input
background: Rectangle {
anchors.fill: parent
radius: Appearance.rounding.small
color: (button.down) ? Appearance.colors.colLayer2Active : (button.hovered ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2)
Behavior on color {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
}
}
PointingHandInteraction {}
buttonRadius: Appearance.rounding.small
colBackground: Appearance.colors.colLayer2
colBackgroundHover: Appearance.colors.colLayer2Hover
colRipple: Appearance.colors.colLayer2Active
contentItem: RowLayout {
anchors.fill: parent