477 lines
22 KiB
QML
477 lines
22 KiB
QML
import QtQuick
|
|
import Quickshell
|
|
import "../../config"
|
|
import "./notificationServer"
|
|
import QtQuick.Layouts
|
|
import QtQuick.Controls
|
|
|
|
Rectangle {
|
|
id: root
|
|
|
|
required property var notification
|
|
required property var screen
|
|
property var urgency: (notification.urgency ?? notification.hints["urgency"]) != null ? (notification.urgency ?? notification.hints["urgency"]) + 1 : 0
|
|
|
|
property bool closing: false
|
|
property int _hoveredActionCount: 0
|
|
// When used in history overview we don't want auto-timeout or click-to-close
|
|
property bool isHistory: false
|
|
|
|
// Helpers to handle summary/body placement
|
|
// - "Message:" title is always static (fixed bug where appName replaced it when image existed)
|
|
// - If notification only has summary and no body, show summary on the right side
|
|
property bool hasBody: notification.body !== undefined && notification.body !== null && String(notification.body).trim() !== ""
|
|
property bool hasSummary: notification.summary !== undefined && notification.summary !== null && String(notification.summary).trim() !== ""
|
|
property bool showSummaryOnLeft: hasSummary && hasBody
|
|
property bool showSummaryOnRight: hasSummary && !hasBody
|
|
|
|
property real duration: isHistory ? 0 : (
|
|
notification.expireTimeout > 0 ? notification.expireTimeout*1000 :
|
|
urgency ? urgency * 2000 :
|
|
5000
|
|
)
|
|
|
|
signal dismissed(var notification, bool dismiss)
|
|
|
|
implicitWidth: screen.width/7
|
|
// implicitHeight: screen.height/7
|
|
implicitHeight: contentRowRectangle.height+(actionRowRectangle.visible?actionRowRectangle.height:0)+(inlineReplyRectangle.visible?inlineReplyRectangle.height:0)+(progressBar.visible?progressBar.height:0)
|
|
|
|
color: textBGColor
|
|
border.width: Config.border_width
|
|
border.color: textColor
|
|
radius: isHistory ? Config.small_radius : 0
|
|
clip: isHistory
|
|
|
|
property color textColor: urgency != 3 ? Colors.primary : Colors.tertiary
|
|
property color textBGColor: urgency != 3 ? Qt.alpha(Colors.primaryContainer, 0.75) : Qt.alpha(Colors.tertiaryContainer, 0.75)
|
|
|
|
// Expose hover state for history auto-close (reuse paused logic)
|
|
readonly property bool isHovered: mouseArea.containsMouse || closingMouseArea.containsMouse || inlineReplyButtonMouseArea.containsMouse || _hoveredActionCount > 0 || inlineReplyTextField.hovered || inlineReplyTextField.activeFocus
|
|
|
|
HoverHandler {
|
|
enabled: root.isHistory
|
|
blocking: false
|
|
grabPermissions: PointerHandler.CanTakeOverFromAnything
|
|
onHoveredChanged: if (hovered) NotificationS.historyHovered = true
|
|
}
|
|
// When in history, also keep historyHovered true while any inner element is hovered
|
|
onIsHoveredChanged: if (isHistory && isHovered) NotificationS.historyHovered = true
|
|
|
|
function closeNotification(dismiss){
|
|
if (closing) {
|
|
return
|
|
}
|
|
closing = true
|
|
root.dismissed(root.notification, dismiss)
|
|
}
|
|
|
|
Connections {
|
|
target: root.notification
|
|
function onClosed(reason){
|
|
// It is known that it can be triggered twice and delete multiple Index but since it is only temporary display and the chance is low it is ignored
|
|
root.closeNotification(false)
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
id: mouseArea
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
enabled: !root.isHistory
|
|
visible: !root.isHistory
|
|
onClicked: {
|
|
root.closeNotification(false)
|
|
}
|
|
}
|
|
Column {
|
|
id: contentColumn
|
|
anchors.fill: parent
|
|
spacing: 0
|
|
|
|
Rectangle{
|
|
id: contentRowRectangle
|
|
height: Math.max(iconRectangle.height, contentRectangle.height)+contentRow.anchors.margins*2
|
|
width: parent.width
|
|
color: "transparent"
|
|
// border.width: Config.border_width
|
|
// border.color: textColor
|
|
|
|
MouseArea {
|
|
id: closingMouseArea
|
|
anchors.top: parent.top
|
|
anchors.right: parent.right
|
|
anchors.margins: Config.spacing
|
|
|
|
width: closeIconText.implicitHeight
|
|
height: closeIconText.implicitHeight
|
|
|
|
hoverEnabled: true
|
|
cursorShape: Qt.PointingHandCursor
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
radius: Config.radius
|
|
color: parent.containsMouse ? "red" : "transparent"
|
|
|
|
border.width: Config.border_width
|
|
border.color: parent.containsMouse ? "white" : textColor
|
|
|
|
Text {
|
|
id: closeIconText
|
|
anchors.centerIn: parent
|
|
text: ""; // or "✕"
|
|
font.family: Config.font
|
|
font.pixelSize: Config.screen_height_to_font_medium(screen.height)
|
|
color: parent.parent.containsMouse ? "white" : textColor
|
|
}
|
|
}
|
|
onClicked: function(mouse){
|
|
mouse.accepted=true
|
|
root.closeNotification(true)
|
|
}
|
|
}
|
|
|
|
Row {
|
|
id: contentRow
|
|
anchors.fill: parent
|
|
anchors.margins: Config.spacing
|
|
spacing: Config.spacing
|
|
width: parent.width
|
|
|
|
// Left side: icon + icon information
|
|
Rectangle{
|
|
id: iconRectangle
|
|
width: childrenRect.width
|
|
height: childrenRect.height
|
|
color: "transparent"
|
|
Column {
|
|
id: iconColumn
|
|
// height: Math.max(childrenRect.height, contentBodyColumn.height)
|
|
width: 1.25*iconImage.width
|
|
spacing: Config.spacing
|
|
|
|
Image {
|
|
id: iconImage
|
|
|
|
width: screen.width/30
|
|
height: iconImage.width
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
source: {
|
|
if (notification.image) return notification.image
|
|
if (notification.appIcon) return Quickshell.iconPath(notification.appIcon)
|
|
const entry = notification.desktopEntry ? DesktopEntries.byId(notification.desktopEntry) : null
|
|
if (entry && entry.icon) {
|
|
const p = Quickshell.iconPath(entry.icon)
|
|
if (p && p !== "") return p
|
|
}
|
|
return Quickshell.iconPath("notifications")
|
|
}
|
|
|
|
fillMode: Image.PreserveAspectFit
|
|
asynchronous: true
|
|
}
|
|
|
|
Text {
|
|
id: summaryText
|
|
text: root.notification.summary
|
|
// Only show summary under icon when both summary and body exist.
|
|
// If only summary exists (no body), it will be shown on the right instead.
|
|
visible: root.showSummaryOnLeft
|
|
width: iconColumn.width
|
|
font.family: Config.font
|
|
font.pixelSize: Config.screen_height_to_font_small(screen.height)
|
|
color: textColor
|
|
|
|
wrapMode: Text.Wrap
|
|
horizontalAlignment: Text.AlignHCenter
|
|
}
|
|
}
|
|
}
|
|
|
|
// Right side: notification information
|
|
Rectangle{
|
|
id: contentRectangle
|
|
width: root.width - iconColumn.width - contentRow.spacing - contentRow.anchors.margins*2
|
|
height: Math.max(iconRectangle.height, contentBodyColumn.implicitHeight)
|
|
color: "transparent"
|
|
|
|
Column {
|
|
id: contentBodyColumn
|
|
width: parent.width
|
|
spacing: Config.spacing
|
|
|
|
Item {
|
|
id: titleTextItem
|
|
width: parent.width-closingMouseArea.width
|
|
height: closingMouseArea.height
|
|
Text {
|
|
id: bodyTitleText
|
|
anchors.centerIn: parent
|
|
text: (!notification.appName || !notification.appName.split(".").pop()
|
|
? "Message"
|
|
: notification.appName.split(".").pop().charAt(0).toUpperCase()
|
|
+ notification.appName.split(".").pop().slice(1))
|
|
font.family: Config.font
|
|
font.bold: true
|
|
font.pixelSize: Config.screen_height_to_font_medium(screen.height)
|
|
color: textColor
|
|
}
|
|
}
|
|
Rectangle {
|
|
width: parent.width
|
|
height: Math.max(iconRectangle.height - titleTextItem.height - contentBodyColumn.spacing, 64)
|
|
color: textBGColor
|
|
radius: Config.screen_big_radius_fun(screen.height)
|
|
border.width: Config.border_width
|
|
border.color: textColor
|
|
Item{
|
|
anchors.fill: parent
|
|
anchors.margins: Config.spacing
|
|
Text {
|
|
id: bodyText
|
|
// If only summary exists (no body), show summary on the right instead of left
|
|
text: root.hasBody ? root.notification.body : (root.showSummaryOnRight ? root.notification.summary : "")
|
|
visible: root.hasBody || root.showSummaryOnRight
|
|
|
|
width: parent.width - 2*parent.anchors.margins
|
|
font.family: Config.font
|
|
font.pixelSize: Config.screen_height_to_font_tiny(screen.height)
|
|
color: textColor
|
|
wrapMode: Text.Wrap
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle{
|
|
id: actionRowRectangle
|
|
width: root.width
|
|
height: Config.screen_height_to_font_tiny(screen.height)+2*Config.spacing
|
|
// border.width: Config.border_width
|
|
// border.color: textColor
|
|
color: "transparent"
|
|
visible: notification.actions.length > 0
|
|
Row{
|
|
id: actionsRow
|
|
spacing: Config.spacing
|
|
anchors.fill: parent
|
|
anchors.margins: Config.spacing
|
|
// Expose root to delegates without direct id lookup (avoids ReferenceError inside Repeater)
|
|
property var bodyRoot: root
|
|
|
|
Repeater {
|
|
id: notificationActionRepeater
|
|
model: notification.actions
|
|
|
|
delegate: MouseArea{
|
|
id: actionMouseArea
|
|
width: parent.width / parent.bodyRoot.notification.actions.length
|
|
height: actionRectangle.height
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
hoverEnabled: true
|
|
cursorShape: Qt.PointingHandCursor
|
|
|
|
onContainsMouseChanged: {
|
|
// Track hover for pause logic via parent's bodyRoot (avoids direct 'root' lookup)
|
|
const body = parent.bodyRoot
|
|
if (!body) return
|
|
if (containsMouse) body._hoveredActionCount++
|
|
else body._hoveredActionCount = Math.max(0, body._hoveredActionCount - 1)
|
|
}
|
|
|
|
Component.onDestruction: {
|
|
if (containsMouse && parent && parent.bodyRoot) {
|
|
const body = parent.bodyRoot
|
|
body._hoveredActionCount = Math.max(0, body._hoveredActionCount - 1)
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: actionRectangle
|
|
width: parent.width
|
|
height: actionRow.height
|
|
color: actionMouseArea.containsMouse ? Colors.secondaryContainer_fg : Colors.secondaryContainer
|
|
border.color: actionMouseArea.containsMouse ? Colors.secondary_fg : Colors.secondary
|
|
border.width: Config.border_width
|
|
radius: Config.radius_fun(actionRectangle.height)*2
|
|
|
|
Row{
|
|
id: actionRow
|
|
width: childrenRect.width
|
|
height: childrenRect.height
|
|
anchors.centerIn: parent
|
|
|
|
Image{
|
|
id: actionIcon
|
|
visible: notification.hasActionIcons
|
|
}
|
|
|
|
Text {
|
|
text: modelData.text
|
|
width: Math.min(actionRectangle.width - (actionIcon.visible ? actionIcon.width : 0), implicitWidth)
|
|
font.family: Config.font
|
|
font.pixelSize: Config.screen_height_to_font_tiny(screen.height)
|
|
color: actionMouseArea.containsMouse ? Colors.secondary_fg : Colors.secondary
|
|
}
|
|
}
|
|
}
|
|
|
|
onClicked: function(mouse){
|
|
mouse.accepted=true
|
|
modelData.invoke()
|
|
// resident check is allready in .invoke()
|
|
parent.bodyRoot.closeNotification(false)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: inlineReplyRectangle
|
|
width: root.width
|
|
height: Config.screen_height_to_font_small(screen.height)+2*Config.spacing
|
|
// border.width: Config.border_width
|
|
// border.color: textColor
|
|
color: "transparent"
|
|
visible: notification.hasInlineReply
|
|
|
|
function sendReply(message) {
|
|
notification.sendInlineReply(message)
|
|
inlineReplyTextField.focus = false
|
|
// resident check is allready in .invoke()
|
|
root.closeNotification(false)
|
|
}
|
|
|
|
Row {
|
|
id: inlineReplyRow
|
|
spacing: Config.spacing
|
|
anchors.fill: parent
|
|
anchors.margins: Config.spacing
|
|
TextField {
|
|
id: inlineReplyTextField
|
|
width: parent.width - inlineReplyButtonMouseArea.width
|
|
height: inlineReplyButtonText.height
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
hoverEnabled: true
|
|
activeFocusOnTab: true
|
|
|
|
placeholderText: notification.hints["x-kde-reply-placeholder-text"] != null ? notification.hints["x-kde-reply-placeholder-text"] : notification.inlineReplyPlaceholder
|
|
placeholderTextColor: inlineReplyTextField.activeFocus ? Colors.secondary_fg : Colors.secondary
|
|
font.family: Config.font
|
|
leftPadding: Config.spacing
|
|
|
|
background: Rectangle {
|
|
radius: Config.radius
|
|
color: inlineReplyTextField.activeFocus ? Colors.tertiary_fg : Colors.primary_fg
|
|
border.color: inlineReplyTextField.activeFocus ? Colors.tertiary : Colors.primary
|
|
border.width: Config.border_width
|
|
}
|
|
|
|
onAccepted: {
|
|
console.log("[NotificationBodyInlineReply]: Enter pressed:", inlineReplyTextField.text)
|
|
inlineReplyRectangle.sendReply(inlineReplyTextField.text)
|
|
}
|
|
|
|
}
|
|
|
|
MouseArea {
|
|
id: inlineReplyButtonMouseArea
|
|
width: inlineReplyButtonText.width + 2*Config.spacing
|
|
height: inlineReplyButtonText.height
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
hoverEnabled: true
|
|
cursorShape: Qt.PointingHandCursor
|
|
Rectangle {
|
|
id: inlineReplyButtonRectangle
|
|
width: inlineReplyButtonText.width + 2*Config.spacing
|
|
height: inlineReplyButtonText.height
|
|
color: inlineReplyButtonMouseArea.containsMouse ? Colors.secondaryContainer_fg : Colors.secondaryContainer
|
|
border.color: inlineReplyButtonMouseArea.containsMouse ? Colors.secondary_fg : Colors.secondary
|
|
border.width: Config.border_width
|
|
radius: inlineReplyButtonRectangle.height*0.5
|
|
Text {
|
|
id: inlineReplyButtonText
|
|
text: "SEND"
|
|
font.family: Config.font
|
|
font.pixelSize: Config.screen_height_to_font_small(screen.height)
|
|
color: inlineReplyButtonMouseArea.containsMouse ? Colors.secondary_fg : Colors.secondary
|
|
anchors.centerIn: parent
|
|
}
|
|
}
|
|
onClicked: function(mouse){
|
|
mouse.accepted=true;
|
|
console.log("[NotificationBodyInlineReply]: Pressed SEND:", inlineReplyTextField.text)
|
|
inlineReplyRectangle.sendReply(inlineReplyTextField.text)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Timeout progress bar
|
|
Rectangle {
|
|
id: progressBar
|
|
// anchors.bottom: parent.bottom
|
|
// anchors.left: parent.left
|
|
height: Config.screen_height_to_font_tiny(screen.height)
|
|
color: textColor
|
|
visible: root.duration > 0
|
|
|
|
property real progress: 1.0
|
|
width: parent.width * progress
|
|
|
|
NumberAnimation on progress {
|
|
id: anim
|
|
running: root.duration > 0
|
|
from: 1.0
|
|
to: 0.0
|
|
duration: root.duration
|
|
paused: isHovered && !isHistory
|
|
onFinished: root.closeNotification(false)
|
|
}
|
|
}
|
|
}
|
|
|
|
Component.onCompleted: {
|
|
if(Config.debug == "Notification"){
|
|
console.log("\x1b[31m[NotificationBody]:"+"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"notification.inlineReplyPlaceholder: " + notification.inlineReplyPlaceholder +"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"notification.body: " + notification.body+"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"notification.lastGeneration: " + notification.lastGeneration+"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"notification.appName: " + notification.appName+"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"notification.image: " + notification.image+"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"notification.expireTimeout: " + notification.expireTimeout+"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"notification.resident: " + notification.resident+"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"notification.id: " + notification.id+"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"notification.actions: " + notification.actions+"\x1b[0m")
|
|
if (notification.actions != []) {
|
|
for (const notificationAction of notification.actions) {
|
|
console.log("\x1b[31m\t"+"notification.actions: "+ notificationAction+"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"notification.actions.text: "+ notificationAction.text+"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"notification.actions.identifier: "+ notificationAction.identifier+"\x1b[0m")
|
|
}
|
|
}
|
|
console.log("\x1b[31m\t"+"notification.urgency: " + notification.urgency+"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"notification.appIcon: " + notification.appIcon + " | " + Quickshell.iconPath(notification.appIcon)+"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"notification.desktopEntry: " + notification.desktopEntry+"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"notification.hints: " + notification.hints+"\x1b[0m")
|
|
for (const item of Object.keys(notification.hints)) {
|
|
console.log("\x1b[31m\t"+"notification.hints[\""+ item +"\"]: " + notification.hints[item]+"\x1b[0m")
|
|
}
|
|
console.log("\x1b[31m\t"+"notification.summary: " + notification.summary+"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"notification.transient: " + notification.transient+"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"notification.hasInlineReply: " + notification.hasInlineReply+"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"notification.hasActionIcons: " + notification.hasActionIcons+"\x1b[0m")
|
|
|
|
console.log("\x1b[31m\t"+"image.source: " + iconImage.source+"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"urgency: " + urgency+"\x1b[0m")
|
|
console.log("\x1b[31m\t"+"duration: " + duration+"\x1b[0m")
|
|
}
|
|
}
|
|
} |