1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-04-10 07:42:09 -04:00

(frame): Update connected mode animation & motion logic

This commit is contained in:
purian23
2026-04-09 12:46:49 -04:00
parent bd4eb0cea1
commit 5324201c26
12 changed files with 450 additions and 232 deletions

View File

@@ -112,8 +112,8 @@ PanelWindow {
readonly property bool _active: ConnectedModeState.popoutVisible && ConnectedModeState.popoutScreen === win._screenName
readonly property real _dyClamp: (ConnectedModeState.popoutBarSide === "top" || ConnectedModeState.popoutBarSide === "bottom") ? Math.max(-ConnectedModeState.popoutBodyH, Math.min(ConnectedModeState.popoutAnimY, ConnectedModeState.popoutBodyH)) : 0
readonly property real _dxClamp: (ConnectedModeState.popoutBarSide === "left" || ConnectedModeState.popoutBarSide === "right") ? Math.max(-ConnectedModeState.popoutBodyW, Math.min(ConnectedModeState.popoutAnimX, ConnectedModeState.popoutBodyW)) : 0
readonly property real _dyClamp: (ConnectedModeState.popoutBarSide === "top" || ConnectedModeState.popoutBarSide === "bottom") ? Math.max(-ConnectedModeState.popoutBodyH, Math.min(ConnectedModeState.popoutAnimY * 1.02, ConnectedModeState.popoutBodyH)) : 0
readonly property real _dxClamp: (ConnectedModeState.popoutBarSide === "left" || ConnectedModeState.popoutBarSide === "right") ? Math.max(-ConnectedModeState.popoutBodyW, Math.min(ConnectedModeState.popoutAnimX * 1.02, ConnectedModeState.popoutBodyW)) : 0
x: _active ? ConnectedModeState.popoutBodyX + (ConnectedModeState.popoutBarSide === "right" ? _dxClamp : 0) : 0
y: _active ? ConnectedModeState.popoutBodyY + (ConnectedModeState.popoutBarSide === "bottom" ? _dyClamp : 0) : 0
@@ -218,60 +218,6 @@ PanelWindow {
height: _active ? win._dockConnectorRadius() * 2 : 0
}
Item {
id: _popoutLeftConnectorBlurAnchor
opacity: 0
readonly property bool _active: win._popoutArcVisible()
readonly property real _w: win._popoutConnectorWidth(0)
readonly property real _h: win._popoutConnectorHeight(0)
x: _active ? Theme.snap(win._popoutConnectorX(ConnectedModeState.popoutBodyX, ConnectedModeState.popoutBodyW, "left", 0), win._dpr) : 0
y: _active ? Theme.snap(win._popoutConnectorY(ConnectedModeState.popoutBodyY, ConnectedModeState.popoutBodyH, "left", 0), win._dpr) : 0
width: _active ? _w : 0
height: _active ? _h : 0
}
Item {
id: _popoutRightConnectorBlurAnchor
opacity: 0
readonly property bool _active: win._popoutArcVisible()
readonly property real _w: win._popoutConnectorWidth(0)
readonly property real _h: win._popoutConnectorHeight(0)
x: _active ? Theme.snap(win._popoutConnectorX(ConnectedModeState.popoutBodyX, ConnectedModeState.popoutBodyW, "right", 0), win._dpr) : 0
y: _active ? Theme.snap(win._popoutConnectorY(ConnectedModeState.popoutBodyY, ConnectedModeState.popoutBodyH, "right", 0), win._dpr) : 0
width: _active ? _w : 0
height: _active ? _h : 0
}
Item {
id: _popoutLeftConnectorCutout
opacity: 0
readonly property bool _active: _popoutLeftConnectorBlurAnchor.width > 0 && _popoutLeftConnectorBlurAnchor.height > 0
readonly property string _arcCorner: win._connectorArcCorner(ConnectedModeState.popoutBarSide, "left")
x: _active ? win._connectorCutoutX(_popoutLeftConnectorBlurAnchor.x, _popoutLeftConnectorBlurAnchor.width, _arcCorner) : 0
y: _active ? win._connectorCutoutY(_popoutLeftConnectorBlurAnchor.y, _popoutLeftConnectorBlurAnchor.height, _arcCorner) : 0
width: _active ? win._effectivePopoutCcr * 2 : 0
height: _active ? win._effectivePopoutCcr * 2 : 0
}
Item {
id: _popoutRightConnectorCutout
opacity: 0
readonly property bool _active: _popoutRightConnectorBlurAnchor.width > 0 && _popoutRightConnectorBlurAnchor.height > 0
readonly property string _arcCorner: win._connectorArcCorner(ConnectedModeState.popoutBarSide, "right")
x: _active ? win._connectorCutoutX(_popoutRightConnectorBlurAnchor.x, _popoutRightConnectorBlurAnchor.width, _arcCorner) : 0
y: _active ? win._connectorCutoutY(_popoutRightConnectorBlurAnchor.y, _popoutRightConnectorBlurAnchor.height, _arcCorner) : 0
width: _active ? win._effectivePopoutCcr * 2 : 0
height: _active ? win._effectivePopoutCcr * 2 : 0
}
Region {
id: _staticBlurRegion
x: 0
@@ -289,31 +235,11 @@ PanelWindow {
// ── Connected popout blur regions ──
Region {
item: _popoutBodyBlurAnchor
readonly property string _bs: ConnectedModeState.popoutBarSide
topLeftRadius: (_bs === "top" || _bs === "left") ? win._effectivePopoutCcr : win._surfaceRadius
topRightRadius: (_bs === "top" || _bs === "right") ? win._effectivePopoutCcr : win._surfaceRadius
bottomLeftRadius: (_bs === "bottom" || _bs === "left") ? win._effectivePopoutCcr : win._surfaceRadius
bottomRightRadius: (_bs === "bottom" || _bs === "right") ? win._effectivePopoutCcr : win._surfaceRadius
radius: win._surfaceRadius
}
Region {
item: _popoutBodyBlurCap
}
Region {
item: _popoutLeftConnectorBlurAnchor
Region {
item: _popoutLeftConnectorCutout
intersection: Intersection.Subtract
radius: win._effectivePopoutCcr
}
}
Region {
item: _popoutRightConnectorBlurAnchor
Region {
item: _popoutRightConnectorCutout
intersection: Intersection.Subtract
radius: win._effectivePopoutCcr
}
}
// ── Connected dock blur regions ──
Region {
@@ -343,37 +269,7 @@ PanelWindow {
}
}
// ─── Connector position helpers (mirror DankPopout / Dock logic) ──────────
function _popoutConnectorWidth(spacing) {
const barSide = ConnectedModeState.popoutBarSide;
return (barSide === "top" || barSide === "bottom") ? win._effectivePopoutCcr : (spacing + win._effectivePopoutCcr);
}
function _popoutConnectorHeight(spacing) {
const barSide = ConnectedModeState.popoutBarSide;
return (barSide === "top" || barSide === "bottom") ? (spacing + win._effectivePopoutCcr) : win._effectivePopoutCcr;
}
function _popoutConnectorX(baseX, bodyWidth, placement, spacing) {
const barSide = ConnectedModeState.popoutBarSide;
const seamX = (barSide === "top" || barSide === "bottom") ? (placement === "left" ? baseX : baseX + bodyWidth) : (barSide === "left" ? baseX : baseX + bodyWidth);
const w = _popoutConnectorWidth(spacing);
if (barSide === "top" || barSide === "bottom")
return placement === "left" ? seamX - w : seamX;
return barSide === "left" ? seamX : seamX - w;
}
function _popoutConnectorY(baseY, bodyHeight, placement, spacing) {
const barSide = ConnectedModeState.popoutBarSide;
const seamY = barSide === "top" ? baseY : barSide === "bottom" ? baseY + bodyHeight : (placement === "left" ? baseY : baseY + bodyHeight);
const h = _popoutConnectorHeight(spacing);
if (barSide === "top")
return seamY;
if (barSide === "bottom")
return seamY - h;
return placement === "left" ? seamY - h : seamY;
}
// ─── Connector position helpers (dock) ─────────────────────────────────
function _dockBodyBlurRadius() {
return _dockBodyBlurAnchor._active ? Math.max(0, Math.min(win._surfaceRadius, _dockBodyBlurAnchor.width / 2, _dockBodyBlurAnchor.height / 2)) : win._surfaceRadius;
@@ -660,56 +556,27 @@ PanelWindow {
Item {
id: _popoutClip
x: win._popoutClipX()
y: win._popoutClipY()
width: win._popoutClipWidth()
height: win._popoutClipHeight()
readonly property bool _barHoriz: ConnectedModeState.popoutBarSide === "top" || ConnectedModeState.popoutBarSide === "bottom"
// Expand clip by ccr on bar axis to include arc columns
x: win._popoutClipX() - (_barHoriz ? win._effectivePopoutCcr : 0)
y: win._popoutClipY() - (_barHoriz ? 0 : win._effectivePopoutCcr)
width: win._popoutClipWidth() + (_barHoriz ? win._effectivePopoutCcr * 2 : 0)
height: win._popoutClipHeight() + (_barHoriz ? 0 : win._effectivePopoutCcr * 2)
clip: true
Rectangle {
id: _popoutFill
x: win._popoutBodyXInClip()
y: win._popoutBodyYInClip()
width: win._popoutBodyFullWidth()
height: win._popoutBodyFullHeight()
color: win._opaqueSurfaceColor
z: 1
topLeftRadius: (ConnectedModeState.popoutBarSide === "top" || ConnectedModeState.popoutBarSide === "left") ? 0 : win._surfaceRadius
topRightRadius: (ConnectedModeState.popoutBarSide === "top" || ConnectedModeState.popoutBarSide === "right") ? 0 : win._surfaceRadius
bottomLeftRadius: (ConnectedModeState.popoutBarSide === "bottom" || ConnectedModeState.popoutBarSide === "left") ? 0 : win._surfaceRadius
bottomRightRadius: (ConnectedModeState.popoutBarSide === "bottom" || ConnectedModeState.popoutBarSide === "right") ? 0 : win._surfaceRadius
ConnectedShape {
id: _popoutShape
visible: _popoutBodyBlurAnchor._active && _popoutBodyBlurAnchor.width > 0 && _popoutBodyBlurAnchor.height > 0
barSide: ConnectedModeState.popoutBarSide
bodyWidth: win._popoutClipWidth()
bodyHeight: win._popoutClipHeight()
connectorRadius: win._effectivePopoutCcr
surfaceRadius: win._surfaceRadius
fillColor: win._opaqueSurfaceColor
x: 0
y: 0
}
}
ConnectedCorner {
id: _connPopoutLeft
visible: win._popoutArcVisible()
barSide: ConnectedModeState.popoutBarSide
placement: "left"
spacing: 0
connectorRadius: win._effectivePopoutCcr
color: win._opaqueSurfaceColor
edgeStrokeWidth: win._seamOverlap
edgeStrokeColor: win._opaqueSurfaceColor
dpr: win._dpr
x: Theme.snap(win._popoutConnectorX(ConnectedModeState.popoutBodyX, ConnectedModeState.popoutBodyW, "left", 0) - _popoutChrome.x, win._dpr)
y: Theme.snap(win._popoutConnectorY(ConnectedModeState.popoutBodyY, ConnectedModeState.popoutBodyH, "left", 0) - _popoutChrome.y, win._dpr)
}
ConnectedCorner {
id: _connPopoutRight
visible: win._popoutArcVisible()
barSide: ConnectedModeState.popoutBarSide
placement: "right"
spacing: 0
connectorRadius: win._effectivePopoutCcr
color: win._opaqueSurfaceColor
edgeStrokeWidth: win._seamOverlap
edgeStrokeColor: win._opaqueSurfaceColor
dpr: win._dpr
x: Theme.snap(win._popoutConnectorX(ConnectedModeState.popoutBodyX, ConnectedModeState.popoutBodyW, "right", 0) - _popoutChrome.x, win._dpr)
y: Theme.snap(win._popoutConnectorY(ConnectedModeState.popoutBodyY, ConnectedModeState.popoutBodyH, "right", 0) - _popoutChrome.y, win._dpr)
}
}
Item {

View File

@@ -34,11 +34,12 @@ Rectangle {
readonly property real actionButtonHeight: compactMode ? 20 : 24
readonly property real collapsedContentHeight: Math.max(iconSize, Theme.fontSizeSmall * 1.2 + Theme.fontSizeMedium * 1.2 + Theme.fontSizeSmall * 1.2 * (compactMode ? 1 : 2))
readonly property real baseCardHeight: cardPadding * 2 + collapsedContentHeight + actionButtonHeight + contentSpacing
readonly property bool connectedFrameMode: SettingsData.connectedFrameModeActive
width: parent ? parent.width : 400
height: expanded ? (expandedContent.height + cardPadding * 2) : (baseCardHeight + collapsedContent.extraHeight)
readonly property real targetHeight: expanded ? (expandedContent.height + cardPadding * 2) : (baseCardHeight + collapsedContent.extraHeight)
radius: Theme.cornerRadius
radius: connectedFrameMode ? Theme.connectedSurfaceRadius : Theme.cornerRadius
scale: (cardHoverHandler.hovered ? 1.004 : 1.0) * listLevelAdjacentScaleInfluence
readonly property bool shadowsAllowed: Theme.elevationEnabled && Quickshell.env("DMS_DISABLE_LAYER") !== "true" && Quickshell.env("DMS_DISABLE_LAYER") !== "1"
readonly property var shadowElevation: Theme.elevationLevel1
@@ -100,6 +101,8 @@ Rectangle {
if (keyboardNavigationActive && expanded && selectedNotificationIndex >= 0) {
return Theme.primaryHoverLight;
}
if (connectedFrameMode)
return Theme.popupLayerColor(Theme.surfaceContainerHigh);
return Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency);
}
border.color: {
@@ -959,9 +962,9 @@ Rectangle {
Behavior on height {
enabled: root.__initialized && root.userInitiatedExpansion && root.animateExpansion
NumberAnimation {
duration: root.expanded ? Theme.notificationExpandDuration : Theme.notificationCollapseDuration
duration: root.connectedFrameMode ? Theme.variantDuration(Theme.popoutAnimationDuration, root.expanded) : (root.expanded ? Theme.notificationExpandDuration : Theme.notificationCollapseDuration)
easing.type: Easing.BezierSpline
easing.bezierCurve: Theme.expressiveCurves.emphasized
easing.bezierCurve: root.connectedFrameMode ? (root.expanded ? Theme.variantPopoutEnterCurve : Theme.variantPopoutExitCurve) : Theme.expressiveCurves.emphasized
onRunningChanged: {
if (running) {
root.isAnimating = true;

View File

@@ -16,7 +16,7 @@ PanelWindow {
blurY: content.y + content.cardInset + swipeTx.y + tx.y
blurWidth: !win._finalized ? Math.max(0, content.width - content.cardInset * 2) : 0
blurHeight: !win._finalized ? Math.max(0, content.height - content.cardInset * 2) : 0
blurRadius: Theme.cornerRadius
blurRadius: SettingsData.connectedFrameModeActive ? Theme.connectedSurfaceRadius : Theme.cornerRadius
}
WlrLayershell.namespace: "dms:notification-popup"

View File

@@ -8,11 +8,12 @@ QtObject {
property var modelData
property int topMargin: 0
readonly property bool compactMode: SettingsData.notificationCompactMode
readonly property bool connectedFrameMode: SettingsData.connectedFrameModeActive
readonly property real cardPadding: compactMode ? Theme.notificationCardPaddingCompact : Theme.notificationCardPadding
readonly property real popupIconSize: compactMode ? Theme.notificationIconSizeCompact : Theme.notificationIconSizeNormal
readonly property real actionButtonHeight: compactMode ? 20 : 24
readonly property real contentSpacing: compactMode ? Theme.spacingXS : Theme.spacingS
readonly property real popupSpacing: compactMode ? 0 : Theme.spacingXS
readonly property real popupSpacing: connectedFrameMode ? 0 : (compactMode ? 0 : Theme.spacingXS)
readonly property real collapsedContentHeight: Math.max(popupIconSize, Theme.fontSizeSmall * 1.2 + Theme.fontSizeMedium * 1.2 + Theme.fontSizeSmall * 1.2 * (compactMode ? 1 : 2))
readonly property int baseNotificationHeight: cardPadding * 2 + collapsedContentHeight + actionButtonHeight + contentSpacing + popupSpacing
property var popupWindows: []