263 lines
10 KiB
QML
263 lines
10 KiB
QML
|
import QtQuick
|
|||
|
|
import QtQuick.Controls
|
|||
|
|
import QtQuick.Layouts
|
|||
|
|
import Qt5Compat.GraphicalEffects
|
|||
|
|
import "root:/Data" as Data
|
|||
|
|
|
|||
|
|
// Notification history viewer
|
|||
|
|
Item {
|
|||
|
|
id: root
|
|||
|
|
implicitHeight: 400
|
|||
|
|
|
|||
|
|
required property var shell
|
|||
|
|
property bool hovered: false
|
|||
|
|
property real targetX: 0
|
|||
|
|
|
|||
|
|
ColumnLayout {
|
|||
|
|
anchors.fill: parent
|
|||
|
|
anchors.margins: 16
|
|||
|
|
spacing: 12
|
|||
|
|
|
|||
|
|
// Header with title, count, and clear all button
|
|||
|
|
RowLayout {
|
|||
|
|
Layout.fillWidth: true
|
|||
|
|
Layout.preferredHeight: 40
|
|||
|
|
spacing: 8
|
|||
|
|
|
|||
|
|
Text {
|
|||
|
|
text: "Notification History"
|
|||
|
|
color: Data.ThemeManager.accentColor
|
|||
|
|
font.pixelSize: 18
|
|||
|
|
font.bold: true
|
|||
|
|
font.family: "Roboto"
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Text {
|
|||
|
|
text: "(" + (shell.notificationHistory ? shell.notificationHistory.count : 0) + ")"
|
|||
|
|
color: Data.ThemeManager.fgColor
|
|||
|
|
font.family: "Roboto"
|
|||
|
|
font.pixelSize: 12
|
|||
|
|
opacity: 0.7
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Item { Layout.fillWidth: true }
|
|||
|
|
|
|||
|
|
Rectangle {
|
|||
|
|
visible: shell.notificationHistory && shell.notificationHistory.count > 0
|
|||
|
|
width: clearText.implicitWidth + 16
|
|||
|
|
height: 24
|
|||
|
|
radius: 12
|
|||
|
|
color: clearMouseArea.containsMouse ? Qt.rgba(Data.ThemeManager.accentColor.r, Data.ThemeManager.accentColor.g, Data.ThemeManager.accentColor.b, 0.2) : "transparent"
|
|||
|
|
border.color: Data.ThemeManager.accentColor
|
|||
|
|
border.width: 1
|
|||
|
|
|
|||
|
|
Text {
|
|||
|
|
id: clearText
|
|||
|
|
anchors.centerIn: parent
|
|||
|
|
text: "Clear All"
|
|||
|
|
color: Data.ThemeManager.accentColor
|
|||
|
|
font.family: "Roboto"
|
|||
|
|
font.pixelSize: 11
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
MouseArea {
|
|||
|
|
id: clearMouseArea
|
|||
|
|
anchors.fill: parent
|
|||
|
|
hoverEnabled: true
|
|||
|
|
onClicked: shell.notificationHistory.clear()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Scrollable notification list
|
|||
|
|
Item {
|
|||
|
|
Layout.fillWidth: true
|
|||
|
|
Layout.fillHeight: true
|
|||
|
|
|
|||
|
|
ScrollView {
|
|||
|
|
id: scrollView
|
|||
|
|
anchors.fill: parent
|
|||
|
|
clip: true
|
|||
|
|
ScrollBar.vertical: ScrollBar {
|
|||
|
|
policy: ScrollBar.AsNeeded
|
|||
|
|
interactive: true
|
|||
|
|
visible: notificationListView.contentHeight > notificationListView.height
|
|||
|
|
contentItem: Rectangle {
|
|||
|
|
implicitWidth: 6
|
|||
|
|
radius: width / 2
|
|||
|
|
color: parent.pressed ? Data.ThemeManager.accentColor
|
|||
|
|
: parent.hovered ? Qt.lighter(Data.ThemeManager.accentColor, 1.2)
|
|||
|
|
: Qt.rgba(Data.ThemeManager.accentColor.r, Data.ThemeManager.accentColor.g, Data.ThemeManager.accentColor.b, 0.7)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
|||
|
|
|
|||
|
|
ListView {
|
|||
|
|
id: notificationListView
|
|||
|
|
model: shell.notificationHistory
|
|||
|
|
spacing: 12
|
|||
|
|
cacheBuffer: 50 // Memory optimization
|
|||
|
|
reuseItems: true
|
|||
|
|
boundsBehavior: Flickable.StopAtBounds
|
|||
|
|
maximumFlickVelocity: 2500
|
|||
|
|
flickDeceleration: 1500
|
|||
|
|
clip: true
|
|||
|
|
interactive: true
|
|||
|
|
|
|||
|
|
// Smooth scrolling behavior
|
|||
|
|
property real targetY: contentY
|
|||
|
|
Behavior on targetY {
|
|||
|
|
NumberAnimation {
|
|||
|
|
duration: 200
|
|||
|
|
easing.type: Easing.OutQuad
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onTargetYChanged: {
|
|||
|
|
if (!moving && !dragging) {
|
|||
|
|
contentY = targetY
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
delegate: Rectangle {
|
|||
|
|
width: notificationListView.width
|
|||
|
|
height: Math.max(80, contentLayout.implicitHeight + 24)
|
|||
|
|
radius: 8
|
|||
|
|
color: mouseArea.containsMouse ? Qt.darker(Data.ThemeManager.bgColor, 1.15) : Qt.darker(Data.ThemeManager.bgColor, 1.1)
|
|||
|
|
border.color: Data.ThemeManager.accentColor
|
|||
|
|
border.width: 1
|
|||
|
|
|
|||
|
|
// View optimization - only render visible items
|
|||
|
|
visible: y + height > notificationListView.contentY - height &&
|
|||
|
|
y < notificationListView.contentY + notificationListView.height + height
|
|||
|
|
|
|||
|
|
MouseArea {
|
|||
|
|
id: mouseArea
|
|||
|
|
anchors.fill: parent
|
|||
|
|
hoverEnabled: true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Main notification content layout
|
|||
|
|
RowLayout {
|
|||
|
|
id: contentLayout
|
|||
|
|
anchors.fill: parent
|
|||
|
|
anchors.margins: 12
|
|||
|
|
spacing: 12
|
|||
|
|
|
|||
|
|
// App icon area
|
|||
|
|
Item {
|
|||
|
|
Layout.preferredWidth: 24
|
|||
|
|
Layout.preferredHeight: 24
|
|||
|
|
Layout.alignment: Qt.AlignTop
|
|||
|
|
|
|||
|
|
Image {
|
|||
|
|
width: 24
|
|||
|
|
height: 24
|
|||
|
|
source: model.icon || ""
|
|||
|
|
visible: source.toString() !== ""
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Notification text content
|
|||
|
|
ColumnLayout {
|
|||
|
|
Layout.fillWidth: true
|
|||
|
|
Layout.fillHeight: true
|
|||
|
|
spacing: 6
|
|||
|
|
|
|||
|
|
// App name and timestamp row
|
|||
|
|
RowLayout {
|
|||
|
|
Layout.fillWidth: true
|
|||
|
|
|
|||
|
|
Text {
|
|||
|
|
Layout.fillWidth: true
|
|||
|
|
text: model.appName || "Unknown"
|
|||
|
|
color: Data.ThemeManager.accentColor
|
|||
|
|
font.family: "Roboto"
|
|||
|
|
font.pixelSize: 13
|
|||
|
|
font.bold: true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
Text {
|
|||
|
|
text: Qt.formatDateTime(model.timestamp, "hh:mm")
|
|||
|
|
color: Data.ThemeManager.fgColor
|
|||
|
|
font.family: "Roboto"
|
|||
|
|
font.pixelSize: 10
|
|||
|
|
opacity: 0.7
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Notification summary
|
|||
|
|
Text {
|
|||
|
|
Layout.fillWidth: true
|
|||
|
|
visible: model.summary && model.summary.length > 0
|
|||
|
|
text: model.summary || ""
|
|||
|
|
color: Data.ThemeManager.fgColor
|
|||
|
|
font.family: "Roboto"
|
|||
|
|
font.pixelSize: 13
|
|||
|
|
font.bold: true
|
|||
|
|
wrapMode: Text.WordWrap
|
|||
|
|
lineHeight: 1.2
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Notification body text
|
|||
|
|
Text {
|
|||
|
|
Layout.fillWidth: true
|
|||
|
|
visible: model.body && model.body.length > 0
|
|||
|
|
text: model.body || ""
|
|||
|
|
color: Data.ThemeManager.fgColor
|
|||
|
|
font.family: "Roboto"
|
|||
|
|
font.pixelSize: 12
|
|||
|
|
opacity: 0.9
|
|||
|
|
wrapMode: Text.WordWrap
|
|||
|
|
maximumLineCount: 4
|
|||
|
|
elide: Text.ElideRight
|
|||
|
|
lineHeight: 1.2
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Individual delete button
|
|||
|
|
Rectangle {
|
|||
|
|
width: 24
|
|||
|
|
height: 24
|
|||
|
|
radius: 12
|
|||
|
|
anchors.right: parent.right
|
|||
|
|
anchors.top: parent.top
|
|||
|
|
anchors.margins: 8
|
|||
|
|
color: deleteArea.containsMouse ? Qt.rgba(255, 0, 0, 0.2) : "transparent"
|
|||
|
|
border.color: deleteArea.containsMouse ? "#ff4444" : Data.ThemeManager.fgColor
|
|||
|
|
border.width: 1
|
|||
|
|
opacity: deleteArea.containsMouse ? 1 : 0.5
|
|||
|
|
|
|||
|
|
Text {
|
|||
|
|
anchors.centerIn: parent
|
|||
|
|
text: "×"
|
|||
|
|
color: deleteArea.containsMouse ? "#ff4444" : Data.ThemeManager.fgColor
|
|||
|
|
font.family: "Roboto"
|
|||
|
|
font.pixelSize: 16
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
MouseArea {
|
|||
|
|
id: deleteArea
|
|||
|
|
anchors.fill: parent
|
|||
|
|
hoverEnabled: true
|
|||
|
|
onClicked: shell.notificationHistory.remove(model.index)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Empty state message
|
|||
|
|
Text {
|
|||
|
|
anchors.centerIn: parent
|
|||
|
|
visible: !notificationListView.count
|
|||
|
|
text: "No notifications"
|
|||
|
|
color: Data.ThemeManager.fgColor
|
|||
|
|
font.family: "Roboto"
|
|||
|
|
font.pixelSize: 14
|
|||
|
|
opacity: 0.7
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|