Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-04-12 08:42:13 -04:00
Code Packages Releases Activity

animations/ripple: clean up effect and apply more universally

Browse Source
This commit is contained in:
bbedward
2026-02-10 12:48:12 -05:00
parent 5a0bb260b4
commit 3d0ee9d72b
49 changed files with 980 additions and 805 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
quickshell/Widgets/DankButton.qml
View File

@@ -16,7 +16,7 @@ Rectangle {
property int buttonHeight: 40
property int horizontalPadding: Theme.spacingL
property bool enableScaleAnimation: false
property bool enableRipple: false
property bool enableRipple: typeof SettingsData !== "undefined" ? (SettingsData.enableRippleEffects ?? true) : true
signal clicked
@@ -55,6 +55,13 @@ Rectangle {
}
}
DankRipple {
id: rippleLayer
rippleColor: root.textColor
cornerRadius: root.radius
enableRipple: root.enableRipple
}
Row {
id: contentRow
anchors.centerIn: parent
@@ -83,6 +90,10 @@ Rectangle {
hoverEnabled: true
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
enabled: root.enabled
onPressed: mouse => {
if (root.enableRipple)
rippleLayer.trigger(mouse.x, mouse.y);
}
onClicked: root.clicked()
}
}

7
quickshell/Widgets/DankButtonGroup.qml
View File

@@ -169,6 +169,12 @@ Flow {
}
}
DankRipple {
id: segmentRipple
cornerRadius: Theme.cornerRadius
rippleColor: segment.selected ? Theme.buttonText : Theme.surfaceVariantText
}
Item {
id: contentItem
anchors.centerIn: parent
@@ -222,6 +228,7 @@ Flow {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onPressed: mouse => segmentRipple.trigger(mouse.x, mouse.y)
onClicked: root.selectItem(index)
}
}

99
quickshell/Widgets/DankRipple.qml
View File

@@ -1,8 +1,8 @@
import QtQuick
import QtQuick.Effects
import qs.Common
// Material Design 3 ripple effect component
MouseArea {
Item {
id: root
property color rippleColor: Theme.primary
@@ -11,10 +11,10 @@ MouseArea {
property real _rippleX: 0
property real _rippleY: 0
property real _rippleRadius: 0
property real _rippleSize: 0
readonly property alias animating: rippleAnim.running
enabled: false
hoverEnabled: false
anchors.fill: parent
function trigger(x, y) {
if (!enableRipple || Theme.currentAnimationSpeed === SettingsData.AnimationSpeed.None)
@@ -24,7 +24,7 @@ MouseArea {
_rippleY = y;
const dist = (ox, oy) => ox * ox + oy * oy;
_rippleRadius = Math.sqrt(Math.max(dist(x, y), dist(x, height - y), dist(width - x, y), dist(width - x, height - y)));
_rippleSize = Math.sqrt(Math.max(dist(x, y), dist(x, height - y), dist(width - x, y), dist(width - x, height - y))) * 2;
rippleAnim.restart();
}
@@ -42,10 +42,20 @@ MouseArea {
property: "y"
value: root._rippleY
}
PropertyAction {
target: ripple
property: "implicitWidth"
value: 0
}
PropertyAction {
target: ripple
property: "implicitHeight"
value: 0
}
PropertyAction {
target: ripple
property: "opacity"
value: 0.08
value: 0.10
}
ParallelAnimation {
@@ -53,39 +63,74 @@ MouseArea {
target: ripple
property: "implicitWidth"
from: 0
to: root._rippleRadius * 2
duration: Theme.expressiveDurations.expressiveEffects
to: root._rippleSize
duration: Theme.expressiveDurations.expressiveDefaultSpatial
easing.bezierCurve: Theme.expressiveCurves.standardDecel
}
DankAnim {
target: ripple
property: "implicitHeight"
from: 0
to: root._rippleRadius * 2
duration: Theme.expressiveDurations.expressiveEffects
to: root._rippleSize
duration: Theme.expressiveDurations.expressiveDefaultSpatial
easing.bezierCurve: Theme.expressiveCurves.standardDecel
}
}
DankAnim {
target: ripple
property: "opacity"
to: 0
duration: Theme.expressiveDurations.expressiveEffects
easing.bezierCurve: Theme.expressiveCurves.standard
SequentialAnimation {
PauseAnimation {
duration: Math.round(Theme.expressiveDurations.expressiveDefaultSpatial * 0.6)
}
DankAnim {
target: ripple
property: "opacity"
to: 0
duration: Theme.expressiveDurations.expressiveDefaultSpatial
easing.bezierCurve: Theme.expressiveCurves.standard
}
}
}
}
Rectangle {
id: ripple
Item {
id: rippleContainer
anchors.fill: parent
visible: root.cornerRadius <= 0
radius: Math.min(width, height) / 2
color: root.rippleColor
opacity: 0
Rectangle {
id: ripple
transform: Translate {
x: -ripple.width / 2
y: -ripple.height / 2
radius: Math.min(width, height) / 2
color: root.rippleColor
opacity: 0
transform: Translate {
x: -ripple.width / 2
y: -ripple.height / 2
}
}
}
Item {
id: rippleMask
anchors.fill: parent
layer.enabled: root.cornerRadius > 0
layer.smooth: true
visible: false
Rectangle {
anchors.fill: parent
radius: root.cornerRadius
color: "black"
antialiasing: true
}
}
MultiEffect {
anchors.fill: parent
source: rippleContainer
maskEnabled: true
maskSource: rippleMask
maskThresholdMin: 0.5
maskSpreadAtMin: 1.0
visible: root.cornerRadius > 0 && rippleAnim.running
}
}

129
quickshell/Widgets/DankTabBar.qml
View File

@@ -27,81 +27,80 @@ FocusScope {
KeyNavigation.backtab: previousFocusTarget
KeyNavigation.up: previousFocusTarget
Keys.onPressed: (event) => {
Keys.onPressed: event => {
if (!tabBar.activeFocus || tabRepeater.count === 0)
return
return;
function findSelectableIndex(startIndex, step) {
let idx = startIndex
let idx = startIndex;
for (let i = 0; i < tabRepeater.count; i++) {
idx = (idx + step + tabRepeater.count) % tabRepeater.count
const item = tabRepeater.itemAt(idx)
idx = (idx + step + tabRepeater.count) % tabRepeater.count;
const item = tabRepeater.itemAt(idx);
if (item && !item.isAction)
return idx
return idx;
}
return -1
return -1;
}
const goToIndex = (nextIndex) => {
const goToIndex = nextIndex => {
if (nextIndex >= 0 && nextIndex !== tabBar.currentIndex) {
tabBar.currentIndex = nextIndex
tabBar.tabClicked(nextIndex)
tabBar.currentIndex = nextIndex;
tabBar.tabClicked(nextIndex);
}
}
};
const resolveTarget = (item) => {
const resolveTarget = item => {
if (!item)
return null
return null;
if (item.focusTarget)
return resolveTarget(item.focusTarget)
return resolveTarget(item.focusTarget);
return item
}
return item;
};
const focusItem = (item) => {
const target = resolveTarget(item)
const focusItem = item => {
const target = resolveTarget(item);
if (!target)
return false
return false;
if (target.requestFocus) {
Qt.callLater(() => target.requestFocus())
return true
Qt.callLater(() => target.requestFocus());
return true;
}
if (target.forceActiveFocus) {
Qt.callLater(() => target.forceActiveFocus())
return true
Qt.callLater(() => target.forceActiveFocus());
return true;
}
return false
}
return false;
};
if (event.key === Qt.Key_Right && tabBar.enableArrowNavigation) {
const baseIndex = (tabBar.currentIndex >= 0 && tabBar.currentIndex < tabRepeater.count) ? tabBar.currentIndex : -1
const nextIndex = findSelectableIndex(baseIndex, 1)
const baseIndex = (tabBar.currentIndex >= 0 && tabBar.currentIndex < tabRepeater.count) ? tabBar.currentIndex : -1;
const nextIndex = findSelectableIndex(baseIndex, 1);
if (nextIndex >= 0) {
goToIndex(nextIndex)
event.accepted = true
goToIndex(nextIndex);
event.accepted = true;
}
} else if (event.key === Qt.Key_Left && tabBar.enableArrowNavigation) {
const baseIndex = (tabBar.currentIndex >= 0 && tabBar.currentIndex < tabRepeater.count) ? tabBar.currentIndex : 0
const nextIndex = findSelectableIndex(baseIndex, -1)
const baseIndex = (tabBar.currentIndex >= 0 && tabBar.currentIndex < tabRepeater.count) ? tabBar.currentIndex : 0;
const nextIndex = findSelectableIndex(baseIndex, -1);
if (nextIndex >= 0) {
goToIndex(nextIndex)
event.accepted = true
goToIndex(nextIndex);
event.accepted = true;
}
} else if (event.key === Qt.Key_Tab && (event.modifiers & Qt.ShiftModifier)) {
if (focusItem(tabBar.previousFocusTarget)) {
event.accepted = true
event.accepted = true;
}
} else if (event.key === Qt.Key_Tab || event.key === Qt.Key_Down) {
if (focusItem(tabBar.nextFocusTarget)) {
event.accepted = true
event.accepted = true;
}
} else if (event.key === Qt.Key_Up) {
if (focusItem(tabBar.previousFocusTarget)) {
event.accepted = true
event.accepted = true;
}
}
}
@@ -142,7 +141,7 @@ FocusScope {
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: Theme.fontSizeMedium
color: tabItem.isActive ? Theme.primary : Theme.surfaceText
font.weight: tabItem.isActive ? Font.Medium : Font.Normal
font.weight: Font.Medium
visible: hasText
}
}
@@ -154,7 +153,17 @@ FocusScope {
opacity: tabArea.pressed ? 0.12 : (tabArea.containsMouse ? 0.08 : 0)
visible: opacity > 0
radius: Theme.cornerRadius
Behavior on opacity { NumberAnimation { duration: Theme.shortDuration; easing.type: Theme.standardEasing } }
Behavior on opacity {
NumberAnimation {
duration: Theme.shortDuration
easing.type: Theme.standardEasing
}
}
}
DankRipple {
id: tabRipple
cornerRadius: Theme.cornerRadius
}
MouseArea {
@@ -162,15 +171,15 @@ FocusScope {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onPressed: mouse => tabRipple.trigger(mouse.x, mouse.y)
onClicked: {
if (tabItem.isAction) {
tabBar.actionTriggered(index)
tabBar.actionTriggered(index);
} else {
tabBar.tabClicked(index)
tabBar.tabClicked(index);
}
}
}
}
}
}
@@ -216,39 +225,39 @@ FocusScope {
function updateIndicator() {
if (tabRepeater.count === 0 || currentIndex < 0 || currentIndex >= tabRepeater.count) {
return
return;
}
const item = tabRepeater.itemAt(currentIndex)
const item = tabRepeater.itemAt(currentIndex);
if (!item || item.isAction) {
return
return;
}
const tabPos = item.mapToItem(tabBar, 0, 0)
const tabCenterX = tabPos.x + item.width / 2
const indicatorWidth = 60
const tabPos = item.mapToItem(tabBar, 0, 0);
const tabCenterX = tabPos.x + item.width / 2;
const indicatorWidth = 60;
if (tabPos.x < 10 && currentIndex > 0) {
Qt.callLater(updateIndicator)
return
Qt.callLater(updateIndicator);
return;
}
if (!indicator.initialSetupComplete) {
indicator.animationEnabled = false
indicator.width = indicatorWidth
indicator.x = tabCenterX - indicatorWidth / 2
indicator.visible = true
indicator.initialSetupComplete = true
indicator.animationEnabled = true
indicator.animationEnabled = false;
indicator.width = indicatorWidth;
indicator.x = tabCenterX - indicatorWidth / 2;
indicator.visible = true;
indicator.initialSetupComplete = true;
indicator.animationEnabled = true;
} else {
indicator.width = indicatorWidth
indicator.x = tabCenterX - indicatorWidth / 2
indicator.visible = true
indicator.width = indicatorWidth;
indicator.x = tabCenterX - indicatorWidth / 2;
indicator.visible = true;
}
}
onCurrentIndexChanged: {
Qt.callLater(updateIndicator)
Qt.callLater(updateIndicator);
}
onWidthChanged: Qt.callLater(updateIndicator)
}