feat: add screen height to font functions in Config. Added actions, inline Reply and urgency to NotificationBody

This commit is contained in:
Hannes
2026-08-29 22:48:53 +02:00
parent 095839c45a
commit bd59a8e457
5 changed files with 351 additions and 290 deletions
+5
View File
@@ -20,6 +20,11 @@ QtObject {
function font_size_small(spaceHeight) { return Math.floor(spaceHeight * 0.625) }
function font_size_tiny(spaceHeight) { return Math.floor(spaceHeight * 0.4) }
function screen_height_to_font_tiny(screenHeight) {return Math.round(9 * screenHeight / 1080)}
function screen_height_to_font_small(screenHeight) {return Math.round(12 * screenHeight / 1080)}
function screen_height_to_font_medium(screenHeight) {return Math.round(16 * screenHeight / 1080)}
function screen_height_to_font_big(screenHeight) {return Math.round(22 * screenHeight / 1080)}
readonly property int small_radius: 8
readonly property int radius: 16
function small_radius_fun(barHeight) { return Math.floor(barHeight / 8) }
+15 -8
View File
@@ -10,6 +10,8 @@ PanelWindow {
id: notificationWindow
focusable: true
anchors.top: true
anchors.left: true
@@ -31,7 +33,7 @@ PanelWindow {
if (!NotificationS.correctMonitor(screen))
return
if (NotificationS.correctMonitor(screen)) {
console.log("[NotificationWindow " + Hyprland.monitorFor(screen).activeWorkspace.id + "]: This notification belongs to me! ")
Config.debug == "Notification" && console.log("[NotificationWindow " + Hyprland.monitorFor(screen).activeWorkspace.id + "]: This notification belongs to me! ")
notificationListModel.append({notificationData: notification})
}
}
@@ -61,12 +63,17 @@ PanelWindow {
notification: notificationData
onDismissed: function(notification, dismiss) {
notificationListModel.remove(index)
// if (dismiss) {
// notification.dismiss()
// console.log("[NotificationWindow " + Hyprland.monitorFor(screen).activeWorkspace.id + "]: Dissmiss: " + notification.appName + " " + notification.id + " - " + notification.summary)
// }
console.log("[NotificationWindow " + Hyprland.monitorFor(screen).activeWorkspace.id + "]: Close: " + notification.appName + " " + notification.id + " - " + notification.summary)
const appName = notification.appName
const id = notification.id
const summary = notification.summary
if (dismiss) {
Config.debug == "Notification" && console.log("[NotificationWindow " + Hyprland.monitorFor(screen).activeWorkspace.id + "]: Dissmiss: " + appName + " " + id + " - " + summary)
notification.dismiss()
notificationListModel.remove(index)
} else {
Config.debug == "Notification" && console.log("[NotificationWindow " + Hyprland.monitorFor(screen).activeWorkspace.id + "]: Close: " + appName + " " + id + " - " + summary)
notificationListModel.remove(index)
}
}
}
onItemAdded: updateContentSize()
@@ -93,6 +100,6 @@ PanelWindow {
contentWidth = width
contentHeight = height
console.log("[updateContentSize] contentWidth:", contentWidth, "contentHeight:", contentHeight)
Config.debug == "Notification" && console.log("[updateContentSize] contentWidth:", contentWidth, "contentHeight:", contentHeight)
}
}
+319 -278
View File
@@ -2,6 +2,7 @@ import QtQuick
import Quickshell
import "../../config"
import QtQuick.Layouts
import QtQuick.Controls
Rectangle {
id: root
@@ -10,310 +11,350 @@ Rectangle {
required property var notification
required property var screen
property real duration: 5000 // Expected in milliseconds (e.g., 5000 for 5s)
property var urgency: (notification.urgency ?? notification.hints["urgency"]) != null ? (notification.urgency ?? notification.hints["urgency"]) + 1 : 0
property bool closing: false
property real duration: ( notification.hasInlineReply ? 5000000000 : 1)
// notification.expireTimeout > 0 ? notification.expireTimeout :
// urgency ? urgency * 2000 :
// 5000
// )
signal dismissed(var notification, bool dismiss)
implicitWidth: Math.min(iconColumn.width+contentColumn.width+2*Config.spacing, screen.width/5)
implicitHeight: Math.max(iconColumn.height, contentColumn.height)+Config.spacing+Config.spacing
implicitWidth: screen.width/7
// implicitHeight: screen.height/7
implicitHeight: contentRowRectangle.height+(notification.actions.length>0?actionRowRectangle.height:0)+(notification.hasInlineReply?inlineReplyRectangle.height:0)+progressBar.height
color: Qt.alpha(Colors.primaryContainer, 0.75)
color: textBGColor
border.width: Config.border_width
border.color: Colors.primary
border.color: textColor
property string textColor: urgency != 3 ? Colors.primary : Colors.tertiary
property string textBGColor: urgency != 3 ? Qt.alpha(Colors.primaryContainer, 0.75) : Qt.alpha(Colors.tertiaryContainer, 0.75)
function closeNotification(dismiss){
if (closing) {
return
}
closing = true
root.dismissed(root.notification, dismiss)
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
dismissed(root.notification, true)
}
// Row {
// spacing: 10
// Rectangle {
// width: 80
// height: 80
// border.width: 2
// color: "transparent"
// Image {
// anchors.centerIn: parent
// width: 64
// height: 64
// source: "image://icon/org.mozilla.Thunderbird"
// fillMode: Image.PreserveAspectFit
// }
// Component.onCompleted: {
// print("Signal:", Quickshell.iconPath("signal-desktop"))
// print("Thunderbird:", Quickshell.iconPath("org.mozilla.Thunderbird"))
// print("Signal exists:",
// Quickshell.hasThemeIcon("signal-desktop"))
// print("Thunderbird exists:",
// Quickshell.hasThemeIcon("org.mozilla.Thunderbird"))
// }
// }
// Rectangle {
// width: 80
// height: 80
// border.width: 2
// color: "transparent"
// Image {
// anchors.centerIn: parent
// width: 64
// height: 64
// source: Quickshell.iconPath("org.mozilla.Thunderbird")
// fillMode: Image.PreserveAspectFit
// }
// }
// Rectangle {
// width: 80
// height: 80
// border.width: 2
// color: "transparent"
// Image {
// anchors.centerIn: parent
// width: 64
// height: 64
// source: "/usr/share/icons/hicolor/128x128/apps/org.mozilla.Thunderbird.png"
// fillMode: Image.PreserveAspectFit
// }
// }
// }
Row {
id: contentRow
anchors.fill: parent
anchors.margins: 10
spacing: Config.spacing
// Left side: icon + icon information
Column {
id: iconColumn
height: Math.max(iconImage.height+summaryText.height+3*Config.spacing, contentColumn.height)+Config.spacing
width: iconImage.width
spacing: Config.spacing
Image {
id: iconImage
width: screen.width/22
height: iconImage.width
source: (notification.appIcon != "" ? Quickshell.iconPath(notification.appIcon) : notification.image)
fillMode: Image.PreserveAspectFit
asynchronous: true
}
Text {
id: summaryText
Layout.fillWidth: true
width: iconImage.width
text: root.notification?.summary ?? ""
font.family: Config.font
font.pixelSize: 22
color: Colors.primary
wrapMode: Text.Wrap
horizontalAlignment: Text.AlignHCenter
}
}
// Right side: notification information
Column {
id: contentColumn
width: Math.max(bodyText.width + Config.spacing, iconColumn.width)
spacing: Config.spacing
Text {
id: bodyText
text: root.notification?.body ?? ""
width: Math.min(implicitWidth, iconColumn.width*2)
font.family: Config.font
font.pixelSize: 22
color: Colors.primary
wrapMode: Text.Wrap
}
// Text {
// id: appNameText
// width: parent.width
// text: root.notification?.id + ": " +
// (root.notification?.appName ?? "")
// font.family: Config.font
// font.pixelSize: 18
// color: Colors.primary
// elide: Text.ElideRight
// }
// Text {
// id: inlineReplyPlaceholderText
// width: parent.width
// text: "inlineReplyPlaceholder: " + (root.notification?.inlineReplyPlaceholder ?? "")
// font.family: Config.font
// font.pixelSize: 16
// color: Colors.primary
// wrapMode: Text.Wrap
// }
// Text {
// id: iconPathText
// width: parent.width
// text: "iconPath: " + (root.notification?.iconPath ?? "")
// font.family: Config.font
// font.pixelSize: 16
// color: Colors.primary
// wrapMode: Text.Wrap
// }
// Text {
// id: expireTimeoutText
// width: parent.width
// text: "expireTimeout: " +
// (root.notification?.expireTimeout ?? "")
// font.family: Config.font
// font.pixelSize: 16
// color: Colors.primary
// wrapMode: Text.Wrap
// }
// Text {
// id: residentText
// width: parent.width
// text: "resident: " + (root.notification?.resident ?? "")
// font.family: Config.font
// font.pixelSize: 16
// color: Colors.primary
// wrapMode: Text.Wrap
// }
// Text {
// id: urgencyText
// width: parent.width
// text: "urgency: " + (root.notification?.urgency ?? "")
// font.family: Config.font
// font.pixelSize: 16
// color: Colors.primary
// wrapMode: Text.Wrap
// }
// Text {
// id: desktopEntryText
// width: parent.width
// text: "desktopEntry: " +
// (root.notification?.desktopEntry ?? "")
// font.family: Config.font
// font.pixelSize: 16
// color: Colors.primary
// wrapMode: Text.Wrap
// }
// Text {
// id: hintsText
// width: parent.width
// text: "hints: " + (root.notification?.hints ?? "")
// font.family: Config.font
// font.pixelSize: 16
// color: Colors.primary
// wrapMode: Text.Wrap
// }
// Text {
// id: transientText
// width: parent.width
// text: "transient: " + (root.notification?.transient ?? "")
// font.family: Config.font
// font.pixelSize: 16
// color: Colors.primary
// wrapMode: Text.Wrap
// }
// Text {
// id: hasInlineReplyText
// width: parent.width
// text: "hasInlineReply: " +
// (root.notification?.hasInlineReply ?? "")
// font.family: Config.font
// font.pixelSize: 16
// color: Colors.primary
// wrapMode: Text.Wrap
// }
// Text {
// id: hasActionIconsText
// width: parent.width
// text: "hasActionIcons: " +
// (root.notification?.hasActionIcons ?? "")
// font.family: Config.font
// font.pixelSize: 16
// color: Colors.primary
// wrapMode: Text.Wrap
// }
}
root.closeNotification(true)
}
}
Column {
id: contentColumn
anchors.fill: parent
spacing: 0
// spacing: Config.spacing
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
Row {
id: contentRow
anchors.fill: parent
anchors.margins: 10
spacing: Config.spacing*4
// Timeout progress bar
Rectangle {
id: progressBar
anchors.bottom: parent.bottom
anchors.left: parent.left
height: Math.min(10, 0.1 * root.height)
color: Colors.primary
// 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*128
spacing: Config.spacing
property real progress: 1.0
width: root.width * progress
Image {
id: iconImage
NumberAnimation on progress {
id: anim
running: root.duration > 0
from: 1.0
to: 0.0
// If your duration property comes in seconds (e.g., 5), change to: (root.duration * 1000)
duration: root.duration
paused: mouseArea.containsMouse
width: screen.width/30
height: iconImage.width
anchors.horizontalCenter: parent.horizontalCenter
onFinished: root.dismissed(root.notification, false)
source: (
notification.appIcon ? Quickshell.iconPath(notification.appIcon) :
notification.image ? notification.image :
Quickshell.iconPath(DesktopEntries.byId(notification.desktopEntry).icon) ? Quickshell.iconPath(DesktopEntries.byId(notification.desktopEntry).icon) :
Quickshell.iconPath("notifications")
)
fillMode: Image.PreserveAspectFit
asynchronous: true
}
Text {
id: summaryText
// height: implicitHeight + font.pixelSize + Config.spacing
text: root.notification.summary
visible: root.notification.summary ? true : false
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: childrenRect.width
height: childrenRect.height
color: "transparent"
Column {
id: contentBodyColumn
width: root.width - iconColumn.width
spacing: Config.spacing
Text {
id: bodyText
text: root.notification.body
visible: root.notification.body ? true : false
width: contentBodyColumn.width
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
Repeater {
id: notificationActionRepeater
model: notification.actions
delegate: MouseArea{
id: actionMouseArea
width: actionsRow.width/notification.actions.length
height: actionRectangle.height
anchors.verticalCenter: parent.verticalCenter
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
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: {
modelData.invoke()
if (!notification.resident) {
root.closeNotification(true)
} else {
root.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) {
console.log("BEFORE sendInlineReply", notification.id, notification.resident)
notification.sendInlineReply(message)
inlineReplyTextField.focus = false
console.log("AFTER sendInlineReply", notification.id)
if (!notification.resident) {
root.closeNotification(true)
} else {
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
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: {
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
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: mouseArea.containsMouse
onFinished: root.closeNotification(false)
}
}
}
Component.onCompleted: {
if(Config.debug == "Notification"){
console.log("\x1b[31m[NotificationBody]:"+"\x1b[0m")
console.log("\x1b[31m\t"+"inlineReplyPlaceholder: " + notification.inlineReplyPlaceholder +"\x1b[0m")
console.log("\x1b[31m\t"+"body: " + notification.body+"\x1b[0m")
console.log("\x1b[31m\t"+"lastGeneration: " + notification.lastGeneration+"\x1b[0m")
console.log("\x1b[31m\t"+"appName: " + notification.appName+"\x1b[0m")
console.log("\x1b[31m\t"+"image: " + notification.image+"\x1b[0m")
console.log("\x1b[31m\t"+"expireTimeout: " + notification.expireTimeout+"\x1b[0m")
console.log("\x1b[31m\t"+"resident: " + notification.resident+"\x1b[0m")
console.log("\x1b[31m\t"+"id: " + notification.id+"\x1b[0m")
console.log("\x1b[31m\t"+"actions: " + notification.actions+"\x1b[0m")
console.log("\x1b[31m\t"+"urgency: " + notification.urgency+"\x1b[0m")
console.log("\x1b[31m\t"+"appIcon: " + notification.appIcon + " | " + Quickshell.iconPath(notification.appIcon)+"\x1b[0m")
console.log("\x1b[31m\t"+"desktopEntry: " + notification.desktopEntry+"\x1b[0m")
console.log("\x1b[31m\t"+"hints: " + notification.hints+"\x1b[0m")
for (const item of Object.keys(notification.hints)) {
console.log("\x1b[31m\t"+"hints-"+ item +": " + notification.hints[item]+"\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"+"summary: " + notification.summary+"\x1b[0m")
console.log("\x1b[31m\t"+"transient: " + notification.transient+"\x1b[0m")
console.log("\x1b[31m\t"+"hasInlineReply: " + notification.hasInlineReply+"\x1b[0m")
console.log("\x1b[31m\t"+"hasActionIcons: " + notification.hasActionIcons+"\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")
}
}
}
@@ -26,7 +26,7 @@ Item {
function play() {
if (running)
return
console.log(
Config.debug == "Notification" && console.log(
"[NotificationSound] Playing:", Config.configDir + "/modules/notification/assets/notification.ogg"
)
notificationSound.startDetached()
@@ -55,7 +55,7 @@ Item {
// return
// }
notification.tracked = true
console.log(
Config.debug == "Notification" && console.log(
"[NotificationServer] Notification received:",
notification.appName, notification.id, notification.summary, notification.body
)
@@ -93,6 +93,6 @@ Item {
Component.onCompleted: {
focusedMonitor = Hyprland.focusedMonitor
console.log("[NotificationServer]: Component completed")
Config.debug == "Notification" && console.log("[NotificationServer]: Component completed")
}
}
+9 -1
View File
@@ -55,6 +55,7 @@ PanelWindow {
color: "white"
placeholderTextColor: "#888"
font.family: Config.font
background: Rectangle {
@@ -67,7 +68,7 @@ PanelWindow {
Keys.onReleased: (event) => {
if (event.key === Qt.Key_Escape) {
console.log("Escape pressed inside TextField")
console.log("Pressed Escape, closing Wallpaper Picker")
// console.log("Pressed Escape, closing Wallpaper Picker")
// wallpaperLoader.active = false
filterText.text = ""
filterText.focus = false
@@ -75,6 +76,13 @@ PanelWindow {
pickerScope.focus = true
}
}
onAccepted: {
console.log("Enter pressed inside TextField")
filterText.text = ""
filterText.focus = false
event.accepted = true
pickerScope.focus = true
}
}