473 lines
16 KiB
QML
473 lines
16 KiB
QML
import QtQuick
|
|
import Quickshell
|
|
import "." as M
|
|
|
|
M.HoverPanel {
|
|
id: menuWindow
|
|
|
|
popupMode: true
|
|
contentWidth: 350
|
|
|
|
// Header: title + clear all + DND toggle
|
|
Item {
|
|
width: menuWindow.contentWidth
|
|
height: 32
|
|
|
|
Text {
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 12
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
text: "Notifications"
|
|
color: M.Theme.base05
|
|
font.pixelSize: M.Theme.fontSize + 1
|
|
font.family: M.Theme.fontFamily
|
|
font.bold: true
|
|
}
|
|
|
|
Row {
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: 8
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
spacing: 8
|
|
|
|
// DND toggle
|
|
Text {
|
|
text: M.NotifService.dnd ? "\uDB82\uDE93" : "\uDB80\uDC9C"
|
|
color: M.NotifService.dnd ? M.Theme.base09 : M.Theme.base04
|
|
font.pixelSize: M.Theme.fontSize
|
|
font.family: M.Theme.iconFontFamily
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: M.NotifService.toggleDnd()
|
|
}
|
|
}
|
|
|
|
// Clear all
|
|
Text {
|
|
text: "\uF1F8"
|
|
color: clearArea.containsMouse ? M.Theme.base08 : M.Theme.base04
|
|
font.pixelSize: M.Theme.fontSize
|
|
font.family: M.Theme.iconFontFamily
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
visible: M.NotifService.count > 0
|
|
|
|
MouseArea {
|
|
id: clearArea
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: menuWindow._cascadeDismiss()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
property var _pendingDismissIds: []
|
|
|
|
// Collapsed groups set — reassign to trigger reactivity
|
|
property var _collapsedGroups: ({})
|
|
|
|
function _toggleCollapse(appName) {
|
|
const next = Object.assign({}, _collapsedGroups);
|
|
if (next[appName])
|
|
delete next[appName];
|
|
else
|
|
next[appName] = true;
|
|
_collapsedGroups = next;
|
|
}
|
|
|
|
// Group notifications by appName, sorted by max urgency desc then most recent time desc
|
|
readonly property var _groups: {
|
|
const map = {};
|
|
for (const n of M.NotifService.list) {
|
|
const key = n.appName || "";
|
|
if (!map[key])
|
|
map[key] = {
|
|
appName: key,
|
|
appIcon: n.appIcon,
|
|
notifs: [],
|
|
maxUrgency: 0,
|
|
maxTime: 0
|
|
};
|
|
map[key].notifs.push(n);
|
|
if (n.urgency > map[key].maxUrgency)
|
|
map[key].maxUrgency = n.urgency;
|
|
if (n.time > map[key].maxTime)
|
|
map[key].maxTime = n.time;
|
|
}
|
|
return Object.values(map).sort((a, b) => {
|
|
if (b.maxUrgency !== a.maxUrgency)
|
|
return b.maxUrgency - a.maxUrgency;
|
|
return b.maxTime - a.maxTime;
|
|
});
|
|
}
|
|
|
|
// Flat model: group header followed by its notifications (omitted when collapsed)
|
|
readonly property var _flatModel: {
|
|
const arr = [];
|
|
for (const g of _groups) {
|
|
const collapsed = !!_collapsedGroups[g.appName];
|
|
arr.push({
|
|
type: "header",
|
|
appName: g.appName,
|
|
appIcon: g.appIcon,
|
|
count: g.notifs.length,
|
|
collapsed: collapsed,
|
|
summaries: g.notifs.map(n => n.summary || "")
|
|
});
|
|
if (!collapsed) {
|
|
for (const n of g.notifs)
|
|
arr.push({
|
|
type: "notif",
|
|
data: n
|
|
});
|
|
}
|
|
}
|
|
return arr;
|
|
}
|
|
|
|
// Collect visible (non-dismissing) notif delegates, optionally filtered by appName
|
|
function _getVisibleNotifDelegates(appName) {
|
|
const result = [];
|
|
for (let i = 0; i < _flatModel.length; i++) {
|
|
const item = _flatModel[i];
|
|
if (item.type !== "notif")
|
|
continue;
|
|
if (appName !== undefined && item.data.appName !== appName)
|
|
continue;
|
|
const d = notifList.itemAtIndex(i);
|
|
if (d && d._type === "notif" && d._notif?.state !== "dismissing")
|
|
result.push(d);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function _startCascade(visibles, ids) {
|
|
_pendingDismissIds = ids;
|
|
if (visibles.length === 0) {
|
|
_finishCascade();
|
|
return;
|
|
}
|
|
for (let i = 0; i < visibles.length; i++) {
|
|
_cascadeTimer.createObject(menuWindow, {
|
|
_target: visibles[i],
|
|
_delay: i * 60,
|
|
_isLast: i === visibles.length - 1
|
|
});
|
|
}
|
|
}
|
|
|
|
function _cascadeDismiss() {
|
|
if (M.NotifService.list.length === 0)
|
|
return;
|
|
const ids = M.NotifService.list.map(n => n.id);
|
|
_startCascade(_getVisibleNotifDelegates(), ids);
|
|
}
|
|
|
|
function _cascadeGroupDismiss(appName) {
|
|
const ids = M.NotifService.list.filter(n => n.appName === appName).map(n => n.id);
|
|
if (ids.length === 0)
|
|
return;
|
|
_startCascade(_getVisibleNotifDelegates(appName), ids);
|
|
}
|
|
|
|
function _finishCascade() {
|
|
const ids = _pendingDismissIds;
|
|
_pendingDismissIds = [];
|
|
for (const id of ids)
|
|
M.NotifService.dismiss(id);
|
|
}
|
|
|
|
property Component _cascadeTimer: Component {
|
|
Timer {
|
|
property var _target
|
|
property int _delay
|
|
property bool _isLast
|
|
interval: _delay
|
|
running: true
|
|
onTriggered: {
|
|
if (_target && _target.dismissVisualOnly)
|
|
_target.dismissVisualOnly();
|
|
if (_isLast)
|
|
_bulkTimer.createObject(menuWindow, {});
|
|
destroy();
|
|
}
|
|
}
|
|
}
|
|
|
|
property Component _bulkTimer: Component {
|
|
Timer {
|
|
interval: 400 // swipe (200) + collapse (150) + margin
|
|
running: true
|
|
onTriggered: {
|
|
menuWindow._finishCascade();
|
|
destroy();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Separator
|
|
Rectangle {
|
|
width: menuWindow.contentWidth - 16
|
|
height: 1
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
color: M.Theme.base03
|
|
}
|
|
|
|
// Notification list (scrollable)
|
|
ListView {
|
|
id: notifList
|
|
width: menuWindow.contentWidth
|
|
height: Math.min(contentHeight, 60 * (M.Modules.notifications.maxVisible || 10))
|
|
clip: true
|
|
boundsBehavior: Flickable.StopAtBounds
|
|
model: menuWindow._flatModel
|
|
|
|
delegate: Item {
|
|
id: notifDelegate
|
|
required property var modelData
|
|
required property int index
|
|
|
|
readonly property string _type: modelData.type
|
|
readonly property var _notif: _type === "notif" ? modelData.data : null
|
|
|
|
width: menuWindow.contentWidth
|
|
height: _displayTargetHeight * _heightScale
|
|
clip: true
|
|
opacity: 0
|
|
|
|
readonly property real _targetHeight: {
|
|
if (_type === "header")
|
|
return modelData.collapsed ? (28 + modelData.count * (M.Theme.fontSize + 4)) : 28;
|
|
return _notifCard.implicitHeight;
|
|
}
|
|
|
|
// Animated version of _targetHeight — smoothly transitions header height on collapse
|
|
property real _displayTargetHeight: _targetHeight
|
|
Behavior on _displayTargetHeight {
|
|
NumberAnimation {
|
|
duration: 150
|
|
easing.type: Easing.OutCubic
|
|
}
|
|
}
|
|
|
|
property real _heightScale: 1
|
|
property bool _skipDismiss: false
|
|
|
|
function dismiss() {
|
|
if (_type !== "notif" || _notif.state === "dismissing")
|
|
return;
|
|
_notif.beginDismiss();
|
|
_dismissAnim.start();
|
|
}
|
|
|
|
function dismissVisualOnly() {
|
|
if (_type !== "notif" || _notif.state === "dismissing")
|
|
return;
|
|
_notif.beginDismiss();
|
|
_skipDismiss = true;
|
|
_dismissAnim.start();
|
|
}
|
|
|
|
Component.onCompleted: fadeIn.start()
|
|
|
|
NumberAnimation {
|
|
id: fadeIn
|
|
target: notifDelegate
|
|
property: "opacity"
|
|
to: 1
|
|
duration: 150
|
|
easing.type: Easing.OutCubic
|
|
}
|
|
|
|
// ---- Group header ----
|
|
Item {
|
|
visible: notifDelegate._type === "header"
|
|
anchors.fill: parent
|
|
|
|
HoverHandler {
|
|
id: _headerHover
|
|
}
|
|
|
|
// Tap target for collapse — covers header row only, excludes dismiss button
|
|
Item {
|
|
anchors.left: parent.left
|
|
anchors.right: _groupDismissBtn.left
|
|
anchors.top: parent.top
|
|
height: 28
|
|
|
|
TapHandler {
|
|
cursorShape: Qt.PointingHandCursor
|
|
onTapped: menuWindow._toggleCollapse(notifDelegate.modelData.appName)
|
|
}
|
|
}
|
|
|
|
Image {
|
|
id: _headerIcon
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 10
|
|
anchors.top: parent.top
|
|
anchors.topMargin: (28 - height) / 2
|
|
width: M.Theme.fontSize + 2
|
|
height: M.Theme.fontSize + 2
|
|
source: {
|
|
if (notifDelegate._type !== "header")
|
|
return "";
|
|
const ic = notifDelegate.modelData.appIcon;
|
|
if (!ic)
|
|
return "";
|
|
return (ic.startsWith("/") || ic.startsWith("file://")) ? ic : Quickshell.iconPath(ic, "dialog-information");
|
|
}
|
|
visible: status === Image.Ready
|
|
fillMode: Image.PreserveAspectFit
|
|
sourceSize: Qt.size(M.Theme.fontSize + 2, M.Theme.fontSize + 2)
|
|
asynchronous: true
|
|
}
|
|
|
|
// Collapse chevron
|
|
Text {
|
|
id: _chevron
|
|
anchors.right: _groupDismissBtn.left
|
|
anchors.rightMargin: 8
|
|
anchors.top: parent.top
|
|
height: 28
|
|
verticalAlignment: Text.AlignVCenter
|
|
text: notifDelegate._type === "header" && notifDelegate.modelData.collapsed ? "\u25B8" : "\u25BE"
|
|
color: M.Theme.base04
|
|
font.pixelSize: M.Theme.fontSize - 2
|
|
font.family: M.Theme.fontFamily
|
|
opacity: _headerHover.hovered ? 1 : 0
|
|
}
|
|
|
|
// App name
|
|
Text {
|
|
anchors.left: _headerIcon.visible ? _headerIcon.right : parent.left
|
|
anchors.leftMargin: _headerIcon.visible ? 6 : 10
|
|
anchors.right: _chevron.left
|
|
anchors.rightMargin: 4
|
|
anchors.top: parent.top
|
|
height: 28
|
|
verticalAlignment: Text.AlignVCenter
|
|
text: notifDelegate._type === "header" ? (notifDelegate.modelData.appName || "Unknown") : ""
|
|
color: M.Theme.base05
|
|
font.pixelSize: M.Theme.fontSize - 1
|
|
font.family: M.Theme.fontFamily
|
|
font.bold: true
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
// Dismiss button — opacity-hidden when header not hovered
|
|
Text {
|
|
id: _groupDismissBtn
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: 10
|
|
anchors.top: parent.top
|
|
height: 28
|
|
verticalAlignment: Text.AlignVCenter
|
|
text: "\uF1F8"
|
|
color: _groupDismissHover.hovered ? M.Theme.base08 : M.Theme.base04
|
|
font.pixelSize: M.Theme.fontSize - 1
|
|
font.family: M.Theme.iconFontFamily
|
|
opacity: _headerHover.hovered ? 1 : 0
|
|
|
|
HoverHandler {
|
|
id: _groupDismissHover
|
|
}
|
|
|
|
TapHandler {
|
|
cursorShape: Qt.PointingHandCursor
|
|
onTapped: {
|
|
if (notifDelegate._type === "header")
|
|
menuWindow._cascadeGroupDismiss(notifDelegate.modelData.appName);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Collapsed preview: one line per notification summary
|
|
Repeater {
|
|
model: (notifDelegate._type === "header" && notifDelegate.modelData.collapsed) ? notifDelegate.modelData.summaries : []
|
|
|
|
Text {
|
|
required property string modelData
|
|
required property int index
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: 10
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: 10
|
|
y: 28 + index * (M.Theme.fontSize + 4)
|
|
height: M.Theme.fontSize + 4
|
|
verticalAlignment: Text.AlignVCenter
|
|
text: modelData
|
|
elide: Text.ElideRight
|
|
font.pixelSize: M.Theme.fontSize - 2
|
|
font.family: M.Theme.fontFamily
|
|
color: M.Theme.base04
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---- Individual notification ----
|
|
|
|
M.NotifCard {
|
|
id: _notifCard
|
|
visible: notifDelegate._type === "notif"
|
|
anchors.fill: parent
|
|
anchors.leftMargin: 8
|
|
notif: notifDelegate._notif
|
|
showAppName: false
|
|
iconSize: 24
|
|
bodyMaxLines: 2
|
|
onDismissRequested: notifDelegate.dismiss()
|
|
}
|
|
|
|
SequentialAnimation {
|
|
id: _dismissAnim
|
|
ParallelAnimation {
|
|
NumberAnimation {
|
|
target: notifDelegate
|
|
property: "x"
|
|
to: menuWindow.contentWidth
|
|
duration: 200
|
|
easing.type: Easing.InCubic
|
|
}
|
|
NumberAnimation {
|
|
target: notifDelegate
|
|
property: "opacity"
|
|
to: 0
|
|
duration: 200
|
|
easing.type: Easing.InCubic
|
|
}
|
|
}
|
|
NumberAnimation {
|
|
target: notifDelegate
|
|
property: "_heightScale"
|
|
to: 0
|
|
duration: 150
|
|
easing.type: Easing.OutCubic
|
|
}
|
|
ScriptAction {
|
|
script: {
|
|
if (notifDelegate._notif && !notifDelegate._skipDismiss)
|
|
M.NotifService.dismiss(notifDelegate._notif.id);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Empty state
|
|
Text {
|
|
visible: M.NotifService.count === 0
|
|
width: menuWindow.contentWidth
|
|
height: 48
|
|
horizontalAlignment: Text.AlignHCenter
|
|
verticalAlignment: Text.AlignVCenter
|
|
text: "No notifications"
|
|
color: M.Theme.base04
|
|
font.pixelSize: M.Theme.fontSize
|
|
font.family: M.Theme.fontFamily
|
|
}
|
|
}
|