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

dms: Material Animation Refactor

Browse Source 
- Thanks Google for Material 3 Expressive stuffs
- Thanks Caelestia shell for pushing qml limits to showcase the blueprint
This commit is contained in:
purian23
2026-02-08 20:24:37 -05:00
parent d775974a90
commit 37cc4ab197
16 changed files with 442 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
quickshell/Widgets/DankButton.qml
View File

@@ -15,6 +15,8 @@ Rectangle {
property color textColor: Theme.buttonText
property int buttonHeight: 40
property int horizontalPadding: Theme.spacingL
property bool enableScaleAnimation: false
property bool enableRipple: false
signal clicked
@@ -23,6 +25,15 @@ Rectangle {
radius: Theme.cornerRadius
color: backgroundColor
opacity: enabled ? 1 : 0.4
scale: (enableScaleAnimation && pressed) ? 0.98 : 1.0
Behavior on scale {
enabled: enableScaleAnimation && Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
DankAnim {
duration: 100
easing.bezierCurve: Theme.expressiveCurves.standard
}
}
Rectangle {
id: stateLayer

130
quickshell/Widgets/DankCollapsibleSection.qml Normal file
View File

@@ -0,0 +1,130 @@
import QtQuick
import QtQuick.Layouts
import qs.Common
import qs.Widgets
ColumnLayout {
id: root
required property string title
property string description: ""
property bool expanded: false
property bool showBackground: false
property alias headerColor: headerRect.color
signal toggleRequested
spacing: Theme.spacingS
Layout.fillWidth: true
Rectangle {
id: headerRect
Layout.fillWidth: true
Layout.preferredHeight: Math.max(titleRow.implicitHeight + Theme.paddingM * 2, 48)
radius: Theme.cornerRadius
color: "transparent"
RowLayout {
id: titleRow
anchors.fill: parent
anchors.leftMargin: Theme.paddingM
anchors.rightMargin: Theme.paddingM
spacing: Theme.spacingM
StyledText {
text: root.title
font.pixelSize: Theme.fontSizeLarge
font.weight: Font.Medium
Layout.fillWidth: true
}
DankIcon {
name: "expand_more"
size: Theme.iconSizeSmall
rotation: root.expanded ? 180 : 0
Behavior on rotation {
enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
DankAnim {
duration: Theme.shortDuration
easing.bezierCurve: Theme.expressiveCurves.standard
}
}
}
}
StateLayer {
anchors.fill: parent
onClicked: {
root.toggleRequested();
root.expanded = !root.expanded;
}
}
}
default property alias content: contentColumn.data
Item {
id: contentWrapper
Layout.fillWidth: true
Layout.preferredHeight: root.expanded ? (contentColumn.implicitHeight + Theme.spacingS * 2) : 0
clip: true
Behavior on Layout.preferredHeight {
enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
DankAnim {
duration: Theme.expressiveDurations.expressiveDefaultSpatial
easing.bezierCurve: Theme.expressiveCurves.standard
}
}
Rectangle {
id: backgroundRect
anchors.fill: parent
radius: Theme.cornerRadius
color: Theme.surfaceContainer
opacity: root.showBackground && root.expanded ? 1.0 : 0.0
visible: root.showBackground
Behavior on opacity {
enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
DankAnim {
duration: Theme.shortDuration
easing.bezierCurve: Theme.expressiveCurves.standard
}
}
}
ColumnLayout {
id: contentColumn
anchors.left: parent.left
anchors.right: parent.right
y: Theme.spacingS
anchors.leftMargin: Theme.paddingM
anchors.rightMargin: Theme.paddingM
anchors.bottomMargin: Theme.spacingS
spacing: Theme.spacingS
opacity: root.expanded ? 1.0 : 0.0
Behavior on opacity {
enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
DankAnim {
duration: Theme.shortDuration
easing.bezierCurve: Theme.expressiveCurves.standard
}
}
StyledText {
id: descriptionText
Layout.fillWidth: true
Layout.topMargin: root.description !== "" ? Theme.spacingXS : 0
Layout.bottomMargin: root.description !== "" ? Theme.spacingS : 0
visible: root.description !== ""
text: root.description
color: Theme.surfaceTextSecondary
font.pixelSize: Theme.fontSizeSmall
wrapMode: Text.Wrap
}
}
}
}

8
quickshell/Widgets/DankIcon.qml
View File

@@ -34,6 +34,14 @@ Item {
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
antialiasing: true
Behavior on color {
enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
DankColorAnim {
duration: Theme.shorterDuration
easing.bezierCurve: Theme.expressiveCurves.standard
}
}
font.variableAxes: {
"FILL": root.fill.toFixed(1),
"GRAD": root.grade,

6
quickshell/Widgets/DankListView.qml
View File

@@ -1,5 +1,6 @@
import QtQuick
import QtQuick.Controls
import qs.Common
import qs.Widgets
ListView {
@@ -22,6 +23,11 @@ ListView {
pressDelay: 0
flickableDirection: Flickable.VerticalFlick
add: ListViewTransitions.add
remove: ListViewTransitions.remove
displaced: ListViewTransitions.displaced
move: ListViewTransitions.move
onMovementStarted: {
isUserScrolling = true;
vbar._scrollBarActive = true;

91
quickshell/Widgets/DankRipple.qml Normal file
View File

@@ -0,0 +1,91 @@
import QtQuick
import qs.Common
// Material Design 3 ripple effect component
MouseArea {
id: root
property color rippleColor: Theme.primary
property real cornerRadius: 0
property bool enableRipple: typeof SettingsData !== "undefined" ? (SettingsData.enableRippleEffects ?? true) : true
property real _rippleX: 0
property real _rippleY: 0
property real _rippleRadius: 0
enabled: false
hoverEnabled: false
function trigger(x, y) {
if (!enableRipple || Theme.currentAnimationSpeed === SettingsData.AnimationSpeed.None)
return;
_rippleX = x;
_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)));
rippleAnim.restart();
}
SequentialAnimation {
id: rippleAnim
PropertyAction {
target: ripple
property: "x"
value: root._rippleX
}
PropertyAction {
target: ripple
property: "y"
value: root._rippleY
}
PropertyAction {
target: ripple
property: "opacity"
value: 0.08
}
ParallelAnimation {
DankAnim {
target: ripple
property: "implicitWidth"
from: 0
to: root._rippleRadius * 2
duration: Theme.expressiveDurations.expressiveEffects
easing.bezierCurve: Theme.expressiveCurves.standardDecel
}
DankAnim {
target: ripple
property: "implicitHeight"
from: 0
to: root._rippleRadius * 2
duration: Theme.expressiveDurations.expressiveEffects
easing.bezierCurve: Theme.expressiveCurves.standardDecel
}
}
DankAnim {
target: ripple
property: "opacity"
to: 0
duration: Theme.expressiveDurations.expressiveEffects
easing.bezierCurve: Theme.expressiveCurves.standard
}
}
Rectangle {
id: ripple
radius: Math.min(width, height) / 2
color: root.rippleColor
opacity: 0
transform: Translate {
x: -ripple.width / 2
y: -ripple.height / 2
}
}
}

24
quickshell/Widgets/StateLayer.qml
View File

@@ -9,6 +9,7 @@ MouseArea {
property real cornerRadius: parent && parent.radius !== undefined ? parent.radius : Theme.cornerRadius
property var tooltipText: null
property string tooltipSide: "bottom"
property bool enableRipple: typeof SettingsData !== "undefined" ? (SettingsData.enableRippleEffects ?? true) : true
readonly property real stateOpacity: disabled ? 0 : pressed ? 0.12 : containsMouse ? 0.08 : 0
@@ -16,10 +17,33 @@ MouseArea {
cursorShape: disabled ? undefined : Qt.PointingHandCursor
hoverEnabled: true
onPressed: mouse => {
if (!disabled && enableRipple) {
rippleLayer.trigger(mouse.x, mouse.y);
}
}
Rectangle {
id: stateRect
anchors.fill: parent
radius: root.cornerRadius
color: Qt.rgba(stateColor.r, stateColor.g, stateColor.b, stateOpacity)
Behavior on color {
enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
DankColorAnim {
duration: Theme.shorterDuration
easing.bezierCurve: Theme.expressiveCurves.standardDecel
}
}
}
DankRipple {
id: rippleLayer
anchors.fill: parent
rippleColor: root.stateColor
cornerRadius: root.cornerRadius
enableRipple: root.enableRipple
}
Timer {