fixed sluggish scroll glitch on launcher.qml

This commit is contained in:
SomeElse
2026-06-04 22:18:57 +00:00
parent c97bcaf1f3
commit f59b2d6aa9
21 changed files with 298 additions and 147 deletions

View File

@@ -46,7 +46,7 @@ ModuleChip {
signal dismissed(string toastId)
width: parent ? parent.width : 350
width: parent ? parent.width : 400
height: toastCard.height
property real progressVal: 1.0
@@ -65,12 +65,12 @@ ModuleChip {
NumberAnimation {
target: slideTranslate; property: "x"
from: toastRoot.slideX; to: 0
duration: 320; easing.type: Easing.OutCubic
duration: 380; easing.type: Easing.OutCubic
}
NumberAnimation {
target: bubbleScale; property: "yScale"
from: 0; to: 1
duration: 280; easing.type: Easing.OutBack
duration: 320; easing.type: Easing.OutBack
}
}
@@ -112,7 +112,7 @@ ModuleChip {
Rectangle {
id: toastCard
width: parent.width
height: toastContent.implicitHeight + (toastRoot.urgency === NotificationUrgency.Low ? 30 : 24)
height: toastContent.implicitHeight + (toastRoot.urgency === NotificationUrgency.Low ? 31 : 25)
radius: 16
color: cardHover.hovered ? toastRoot.t.notifToastBgHover : toastRoot.t.notifToastBg
@@ -121,19 +121,46 @@ ModuleChip {
: (cardHover.hovered ? toastRoot.t.notifBorderActive : toastRoot.t.notifToastBorder)
border.width: Cfg.Config.popupBorderWidth
Behavior on color { ColorAnimation { duration: 150; easing.type: Easing.OutCubic } }
Behavior on border.color { ColorAnimation { duration: 150 } }
Behavior on color { ColorAnimation { duration: 180; easing.type: Easing.OutCubic } }
Behavior on border.color { ColorAnimation { duration: 180 } }
// Subtle outer glow for critical notifications
Rectangle {
visible: toastRoot.urgency === NotificationUrgency.Critical
anchors.fill: parent
anchors.margins: -3
radius: parent.radius + 3
color: "transparent"
border.color: Qt.rgba(toastRoot.t.notifUrgencyCritical.r, toastRoot.t.notifUrgencyCritical.g, toastRoot.t.notifUrgencyCritical.b, 0.22)
border.width: 2
z: -1
}
HoverHandler { id: cardHover }
TapHandler { onTapped: toastRoot.triggerDismiss() }
// Left accent bar — wider with a soft glow backing
Rectangle {
id: accentGlow
width: 8
height: Math.max(18, toastCard.height - 25)
radius: 4
anchors {
left: parent.left
leftMargin: 7
verticalCenter: parent.verticalCenter
}
color: Qt.rgba(toastRoot.urgencyColor(toastRoot.urgency).r,
toastRoot.urgencyColor(toastRoot.urgency).g,
toastRoot.urgencyColor(toastRoot.urgency).b, 0.18)
}
Rectangle {
width: 4
height: Math.max(16, toastCard.height - 24)
height: Math.max(18, toastCard.height - 25)
radius: 2
anchors {
left: parent.left
leftMargin: 10
leftMargin: 9
verticalCenter: parent.verticalCenter
}
color: toastRoot.urgencyColor(toastRoot.urgency)
@@ -145,20 +172,20 @@ ModuleChip {
left: parent.left
right: parent.right
top: parent.top
leftMargin: 24
rightMargin: 12
topMargin: 12
leftMargin: 25
rightMargin: 13
topMargin: 13
}
spacing: 4
spacing: 5
RowLayout {
Layout.fillWidth: true
spacing: 6
spacing: 7
Text {
text: toastRoot.urgencyIcon(toastRoot.urgency)
color: toastRoot.urgencyColor(toastRoot.urgency)
font.pixelSize: 12
font.pixelSize: 11
font.bold: true
Layout.alignment: Qt.AlignVCenter
renderType: Text.NativeRendering
@@ -166,10 +193,10 @@ ModuleChip {
Text {
text: toastRoot.appName
color: toastRoot.t.notifToastAppName
font.pixelSize: 12
font.pixelSize: 10
font.bold: true
font.capitalization: Font.AllUppercase
font.letterSpacing: 0.4
font.letterSpacing: 0.8
Layout.fillWidth: true
elide: Text.ElideRight
verticalAlignment: Text.AlignVCenter
@@ -178,17 +205,18 @@ ModuleChip {
Text {
text: toastRoot.timeStr
color: toastRoot.t.notifToastDim
font.pixelSize: 11
font.bold: true
font.pixelSize: 10
verticalAlignment: Text.AlignVCenter
renderType: Text.NativeRendering
}
Rectangle {
Layout.alignment: Qt.AlignVCenter
width: 20; height: 20; radius: 8
color: closeHover.hovered ? toastRoot.t.notifHistoryHover : "transparent"
Behavior on color { ColorAnimation { duration: 100 } }
width: 18; height: 18; radius: 10
color: closeHover.hovered
? Qt.rgba(1, 1, 1, 0.1)
: "transparent"
Behavior on color { ColorAnimation { duration: 120 } }
Text {
anchors.centerIn: parent
@@ -218,16 +246,15 @@ ModuleChip {
Text {
text: toastRoot.body
color: toastRoot.t.notifToastDim
font.pixelSize: 12
font.bold: true
font.pixelSize: 11
Layout.fillWidth: true
wrapMode: Text.WordWrap
maximumLineCount: 3
elide: Text.ElideRight
textFormat: Text.PlainText
textFormat: Text.PlainText
visible: toastRoot.body !== ""
Layout.bottomMargin: toastRoot.urgency === NotificationUrgency.Low ? 6 : 0
lineHeight: 1.2
lineHeight: 1.35
renderType: Text.NativeRendering
}
}
@@ -236,9 +263,9 @@ ModuleChip {
visible: toastRoot.urgency === NotificationUrgency.Low && toastRoot.timeout > 0
anchors {
left: parent.left; right: parent.right; bottom: parent.bottom
margins: 10; bottomMargin: 10
margins: 13; bottomMargin: 10
}
height: 4
height: 2
Rectangle {
anchors.fill: parent
@@ -250,6 +277,7 @@ ModuleChip {
height: parent.height
radius: 2
color: toastRoot.t.notifProgressFill
Behavior on width { NumberAnimation { duration: 80; easing.type: Easing.Linear } }
}
}
}
@@ -271,7 +299,7 @@ ModuleChip {
signal dismissed(int itemIndex)
height: histItemContent.implicitHeight + 16
height: histItemContent.implicitHeight + 18
radius: 10
clip: true
color: histItemHover.hovered ? histRoot.t.notifHistoryHover : "transparent"
@@ -282,25 +310,35 @@ ModuleChip {
SequentialAnimation {
id: dismissAnim
ParallelAnimation {
NumberAnimation { target: histRoot; property: "opacity"; to: 0; duration: 150; easing.type: Easing.OutCubic }
NumberAnimation { target: histRoot; property: "scale"; to: 0.95; duration: 150; easing.type: Easing.OutCubic }
NumberAnimation { target: histRoot; property: "opacity"; to: 0; duration: 180; easing.type: Easing.OutCubic }
NumberAnimation { target: histRoot; property: "scale"; to: 0.94; duration: 180; easing.type: Easing.OutCubic }
}
NumberAnimation { target: histRoot; property: "height"; to: 0; duration: 150; easing.type: Easing.InOutQuad }
NumberAnimation { target: histRoot; property: "height"; to: 0; duration: 160; easing.type: Easing.InOutQuad }
ScriptAction { script: histRoot.dismissed(histRoot.itemIndex) }
}
// Glow backing behind accent bar
Rectangle {
width: 7
height: Math.max(13, histRoot.height - 16)
radius: 3
anchors { left: parent.left; leftMargin: 6; verticalCenter: parent.verticalCenter }
color: Qt.rgba(histRoot.urgencyColor(histRoot.urgency).r,
histRoot.urgencyColor(histRoot.urgency).g,
histRoot.urgencyColor(histRoot.urgency).b, 0.15)
}
Rectangle {
width: 3
height: Math.max(10, histRoot.height - 16)
radius: 1.5
height: Math.max(13, histRoot.height - 16)
radius: 2
anchors { left: parent.left; leftMargin: 8; verticalCenter: parent.verticalCenter }
color: histRoot.urgencyColor(histRoot.urgency)
}
Rectangle {
anchors { right: parent.right; top: parent.top; margins: 6 }
width: 18; height: 18; radius: 8
color: histCloseHover.hovered ? histRoot.t.notifHistoryHover : "transparent"
anchors { right: parent.right; top: parent.top; margins: 6 }
width: 18; height: 18; radius: 9
color: histCloseHover.hovered ? Qt.rgba(1, 1, 1, 0.1) : "transparent"
opacity: histItemHover.hovered ? 1 : 0
Behavior on opacity { NumberAnimation { duration: 150 } }
Behavior on color { ColorAnimation { duration: 150 } }
@@ -311,40 +349,39 @@ ModuleChip {
}
Text {
anchors { right: parent.right; rightMargin: 6; top: parent.top; topMargin: 8 }
anchors { right: parent.right; rightMargin: 8; top: parent.top; topMargin: 8 }
text: histRoot.timeStr
color: histRoot.t.notifToastDim
font.pixelSize: 10
font.bold: true
verticalAlignment: Text.AlignVCenter
renderType: Text.NativeRendering
opacity: histItemHover.hovered ? 0 : 1
opacity: histItemHover.hovered ? 0 : 0.8
Behavior on opacity { NumberAnimation { duration: 150 } }
}
ColumnLayout {
id: histItemContent
anchors { left: parent.left; right: parent.right; top: parent.top; leftMargin: 20; rightMargin: 40; topMargin: 8 }
anchors { left: parent.left; right: parent.right; top: parent.top; leftMargin: 21; rightMargin: 39; topMargin: 8 }
spacing: 2
RowLayout {
Layout.fillWidth: true; spacing: 5
Text { text: histRoot.urgencyIcon(histRoot.urgency); color: histRoot.urgencyColor(histRoot.urgency); font.pixelSize: 10; font.bold: true; Layout.alignment: Qt.AlignVCenter; renderType: Text.NativeRendering }
Text {
text: histRoot.appName; color: histRoot.t.notifToastAppName; font.pixelSize: 11; font.bold: true
font.capitalization: Font.AllUppercase; font.letterSpacing: 0.4; Layout.fillWidth: true; elide: Text.ElideRight; verticalAlignment: Text.AlignVCenter
text: histRoot.appName; color: histRoot.t.notifToastAppName; font.pixelSize: 10; font.bold: true
font.capitalization: Font.AllUppercase; font.letterSpacing: 0.6; Layout.fillWidth: true; elide: Text.ElideRight; verticalAlignment: Text.AlignVCenter
renderType: Text.NativeRendering
}
}
Text {
text: histRoot.summary; color: histRoot.t.notifToastText; font.pixelSize: 12; font.bold: true
text: histRoot.summary; color: histRoot.t.notifToastText; font.pixelSize: 13; font.bold: true
Layout.fillWidth: true; elide: Text.ElideRight; textFormat: Text.PlainText; visible: histRoot.summary !== ""
renderType: Text.NativeRendering
}
Text {
text: histRoot.body; color: histRoot.t.notifToastDim; font.pixelSize: 11; font.bold: true; Layout.fillWidth: true
wrapMode: Text.WordWrap; maximumLineCount: 2; elide: Text.ElideRight; textFormat: Text.PlainText; visible: histRoot.body !== ""; lineHeight: 1.2
text: histRoot.body; color: histRoot.t.notifToastDim; font.pixelSize: 10; Layout.fillWidth: true
wrapMode: Text.WordWrap; maximumLineCount: 2; elide: Text.ElideRight; textFormat: Text.PlainText; visible: histRoot.body !== ""; lineHeight: 1.3
renderType: Text.NativeRendering
}
}
@@ -395,9 +432,9 @@ ModuleChip {
visible: root.unreadCount > 0
anchors.top: parent.top
anchors.right: parent.right
width: Math.max(14, badgeLabel.implicitWidth + 6)
height: 14
radius: 7
width: Math.max(16, badgeLabel.implicitWidth + 8)
height: 16
radius: 8
color: t.notifBadgeBg
Behavior on width { NumberAnimation { duration: 150; easing.type: Easing.OutCubic } }
@@ -495,7 +532,7 @@ ModuleChip {
readonly property bool atBottom: pos === "bottomleft" || pos === "bottomright"
anchors { top: true; bottom: true; right: atRight; left: !atRight }
implicitWidth: 350 + root.barMargin + toastPad
implicitWidth: 344 + root.barMargin + toastPad
WlrLayershell.layer: WlrLayer.Overlay
WlrLayershell.namespace: "main-shell-notifications-toasts"
@@ -512,8 +549,8 @@ ModuleChip {
id: toastCol
x: toastLayer.atRight ? root.barMargin : toastLayer.toastPad
y: !toastLayer.atBottom ? toastLayer.edgeGap : parent.height - toastLayer.edgeGap - toastCol.height
spacing: 8
width: 350
spacing: 10
width: 332
Repeater {
model: activeToasts
@@ -566,7 +603,7 @@ ModuleChip {
Item {
id: histClipContainer
readonly property int cardW: 340
readonly property int cardW: 352
readonly property int screenPad: root.barMargin + 10
x: {
@@ -577,9 +614,9 @@ ModuleChip {
anchors.top: root.isTop ? parent.top : undefined
anchors.bottom: root.isTop ? undefined : parent.bottom
anchors.topMargin: root.isTop ? (root.barHeight + root.barEdgePad + 10) : 0
anchors.bottomMargin: root.isTop ? 0 : (root.barHeight + root.barEdgePad + 10)
height: parent.height - root.barHeight - root.barEdgePad - 10
anchors.topMargin: root.isTop ? (root.barHeight + root.barEdgePad + 12) : 0
anchors.bottomMargin: root.isTop ? 0 : (root.barHeight + root.barEdgePad + 12)
height: parent.height - root.barHeight - root.barEdgePad - 12
clip: true
@@ -588,7 +625,7 @@ ModuleChip {
popupOpen: historyPopup.popupOpen
isTop: root.isTop
animEnabled: historyPopup.visible
height: Math.min(histHeader.implicitHeight + 56 + (notifHistory.count > 0 ? histCol.implicitHeight : 90), 520)
height: Math.min(histHeader.implicitHeight + 58 + (notifHistory.count > 0 ? histCol.implicitHeight : 94), 480)
color: t.notifHistoryBg
radius: Cfg.Config.popupRadius
@@ -598,25 +635,27 @@ ModuleChip {
RowLayout {
id: histHeader
anchors { left: parent.left; right: parent.right; top: parent.top }
anchors.topMargin: 20; anchors.leftMargin: 20; anchors.rightMargin: 20
anchors.topMargin: 16; anchors.leftMargin: 16; anchors.rightMargin: 16
spacing: 10
Text { text: "󰂚"; color: t.notifToastAppName; font.pixelSize: 18; font.bold: true; Layout.alignment: Qt.AlignVCenter; renderType: Text.NativeRendering }
Text {
text: "Notifications"; color: t.notifToastAppName; font.pixelSize: 15; font.bold: true
text: "Notifications"; color: t.notifToastAppName; font.pixelSize: 14; font.bold: true
Layout.fillWidth: true; Layout.alignment: Qt.AlignVCenter; renderType: Text.NativeRendering
}
Rectangle {
Layout.alignment: Qt.AlignVCenter
width: dndRow.implicitWidth + 16
height: 24
radius: 8
width: dndRow.implicitWidth + 19
height: 25
radius: 13
color: root.doNotDisturb
? Qt.rgba(t.notifDnd.r, t.notifDnd.g, t.notifDnd.b, 0.18)
: (dndHover.hovered ? t.notifHistoryHover : "transparent")
border.color: root.doNotDisturb ? t.notifDnd : "transparent"
border.width: Cfg.Config.popupBorderWidth
border.color: root.doNotDisturb
? Qt.rgba(t.notifDnd.r, t.notifDnd.g, t.notifDnd.b, 0.55)
: Qt.rgba(1, 1, 1, 0.08)
border.width: 1
Behavior on color { ColorAnimation { duration: 150 } }
Behavior on border.color { ColorAnimation { duration: 150 } }
@@ -627,7 +666,7 @@ ModuleChip {
Text {
text: "󰂛"
color: root.doNotDisturb ? t.notifDnd : t.notifToastDim
font.pixelSize: 12
font.pixelSize: 11
font.bold: true
anchors.verticalCenter: parent.verticalCenter
Behavior on color { ColorAnimation { duration: 150 } }
@@ -636,7 +675,7 @@ ModuleChip {
Text {
text: root.doNotDisturb ? "On" : "Off"
color: root.doNotDisturb ? t.notifDnd : t.notifToastDim
font.pixelSize: 11
font.pixelSize: 10
font.bold: true
anchors.verticalCenter: parent.verticalCenter
Behavior on color { ColorAnimation { duration: 150 } }
@@ -651,13 +690,15 @@ ModuleChip {
Rectangle {
visible: notifHistory.count > 0
Layout.alignment: Qt.AlignVCenter
width: clearText.implicitWidth + 16
height: 24
radius: 8
width: clearText.implicitWidth + 19
height: 25
radius: 13
color: clearHover.hovered ? t.notifHistoryHover : "transparent"
border.color: Qt.rgba(1, 1, 1, 0.08)
border.width: 1
Behavior on color { ColorAnimation { duration: 150 } }
Text { id: clearText; anchors.centerIn: parent; text: "Clear all"; color: t.notifToastDim; font.pixelSize: 11; font.bold: true; renderType: Text.NativeRendering }
Text { id: clearText; anchors.centerIn: parent; text: "Clear all"; color: t.notifToastDim; font.pixelSize: 10; font.bold: true; renderType: Text.NativeRendering }
HoverHandler { id: clearHover; cursorShape: Qt.PointingHandCursor }
TapHandler { onTapped: clearAllAnim.start() }
}
@@ -666,7 +707,7 @@ ModuleChip {
Rectangle {
id: histDivider
anchors { left: parent.left; right: parent.right; top: histHeader.bottom }
anchors.topMargin: 12; height: 1; color: t.notifSeparator
anchors.topMargin: 10; height: 1; color: t.notifSeparator; opacity: 0.6
}
SequentialAnimation {
@@ -674,11 +715,11 @@ ModuleChip {
ParallelAnimation {
NumberAnimation {
target: histCol; property: "opacity"
to: 0; duration: 220; easing.type: Easing.OutCubic
to: 0; duration: 240; easing.type: Easing.OutCubic
}
NumberAnimation {
target: clearShift; property: "y"
to: -16; duration: 220; easing.type: Easing.OutCubic
to: -20; duration: 240; easing.type: Easing.OutCubic
}
}
ScriptAction {
@@ -693,7 +734,7 @@ ModuleChip {
Flickable {
id: histFlick
anchors { left: parent.left; right: parent.right; top: histDivider.bottom; bottom: parent.bottom }
anchors.leftMargin: 2; anchors.rightMargin: 8
anchors.leftMargin: 4; anchors.rightMargin: 6
anchors.topMargin: 6; anchors.bottomMargin: 8; clip: true
contentHeight: histCol.implicitHeight
flickableDirection: Flickable.VerticalFlick
@@ -703,14 +744,14 @@ ModuleChip {
id: histCol
opacity: 1
transform: Translate { id: clearShift; y: 0 }
width: histFlick.width; spacing: 2; topPadding: 4; bottomPadding: 4; leftPadding: 2; rightPadding: 8
width: histFlick.width; spacing: 2; topPadding: 2; bottomPadding: 2; leftPadding: 4; rightPadding: 6
Item {
width: histCol.width - 16; height: 90; visible: notifHistory.count === 0
width: histCol.width - 16; height: 94; visible: notifHistory.count === 0
ColumnLayout {
anchors.centerIn: parent; spacing: 8
Text { text: "󰂚"; color: t.notifHistoryEmpty; font.pixelSize: 30; font.bold: true; Layout.alignment: Qt.AlignHCenter; renderType: Text.NativeRendering }
Text { text: "No notifications"; color: t.notifHistoryEmpty; font.pixelSize: 12; font.bold: true; Layout.alignment: Qt.AlignHCenter; renderType: Text.NativeRendering }
Text { text: "󰂚"; color: t.notifHistoryEmpty; font.pixelSize: 29; font.bold: true; Layout.alignment: Qt.AlignHCenter; renderType: Text.NativeRendering; opacity: 0.5 }
Text { text: "No notifications"; color: t.notifHistoryEmpty; font.pixelSize: 13; font.bold: true; Layout.alignment: Qt.AlignHCenter; renderType: Text.NativeRendering; opacity: 0.5 }
}
}