Create Styled things and finish notifications module

This commit is contained in:
Amaro Lopes
2025-10-09 22:32:48 -03:00
parent eddae605d4
commit db1ab727a7
13 changed files with 380 additions and 190 deletions

View File

@@ -2,134 +2,137 @@ import Quickshell
import QtQuick
import QtQuick.Layouts
import Quickshell.Widgets
import qs.Common.Styled
Rectangle {
BackgroundRectangle {
id: notificationWrapper
signal dismissed
signal timedout
property bool hasImage: notification?.image ? true : false
property bool clicked: false
property var notification: null
property bool startTimer: false
property int timerDuration: 2000
property bool firstTime: true
property string image: {
if (hasImage) {
return notification.image;
return notification?.image;
}
if (notification?.appIcon === "") {
return "";
}
return Quickshell.iconPath(notification?.appIcon);
}
property real targetHeight: notifLayout.implicitHeight + 20
implicitWidth: 400
implicitHeight: notifLayout.implicitHeight
topLeftRadius: image ? 100 : 20
bottomLeftRadius: image ? 100 : 20
topRightRadius: 20
bottomRightRadius: 20
color: "#80000000"
implicitHeight: 0
// implicitHeight: Math.max(notifLayout.implicitHeight, 100)
Component.onCompleted: {
notificationWrapper.implicitHeight = targetHeight
}
clip: true
Behavior on implicitHeight {
SequentialAnimation {
NumberAnimation {
duration: 150
easing.type: Easing.OutCubic
}
ScriptAction {
script: {
if(clicked) notificationWrapper.dismissed()
if(notificationWrapper.implicitHeight === 0) notificationWrapper.timedout()
}
}
}
}
MouseArea {
anchors.fill: parent
onClicked: {
notificationWrapper.dismissed();
notificationWrapper.clicked = true
notificationWrapper.implicitHeight = 0
}
}
Timer {
id: notifTimer
interval: timerDuration
running: notificationWrapper.startTimer
onTriggered: {
notificationWrapper.implicitHeight = 0;
}
}
RowLayout {
id: notifLayout
implicitHeight: Math.max(iconImage.implicitHeight, gridRoot.implicitHeight)
anchors {
fill: parent
}
ClippingRectangle {
IconImage {
id: iconImage
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
implicitWidth: 100
implicitHeight: 100
visible: notificationWrapper.image ? true : false
color: "grey"
radius: 100
IconImage {
anchors.centerIn: parent
implicitSize: 100
source: notificationWrapper.image
}
Layout.alignment: Qt.AlignLeft| Qt.AlignVCenter
Layout.leftMargin: 10
implicitSize: 80
visible: notificationWrapper.image? true: false
source: notificationWrapper.image
}
ColumnLayout {
id: gridRoot
Layout.leftMargin: 10
Layout.rightMargin: 10
implicitHeight: summaryRectangle.implicitHeight + bodyRectangle.implicitHeight
spacing: 5
ForegroundRectangle {
id: summaryRectangle
Rectangle {
Layout.fillWidth: true
implicitHeight: summaryText.implicitHeight + 10
radius: 20
color: "#50ffffff"
Rectangle {
anchors {
left: parent.left
top: parent.top
bottom: parent.bottom
}
visible: summaryText.text ? true : false
implicitWidth: parent.width
radius: parent.radius
color: "white"
StyledText {
id: summaryText
Text {
id: summaryText
anchors.fill: parent
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: 12
wrapMode: Text.WordWrap
textFormat: Text.MarkdownText
text: notificationWrapper.notification.summary
}
text: notificationWrapper.notification? notificationWrapper.notification.summary : ""
}
}
Rectangle {
ForegroundRectangle {
id: bodyRectangle
Layout.fillWidth: true
Layout.columnSpan: 5
implicitHeight: bodyText.implicitHeight + 10
radius: 20
Rectangle {
anchors {
left: parent.left
top: parent.top
bottom: parent.bottom
}
visible: bodyText.text ? true : false
implicitWidth: parent.width
radius: parent.radius
color: "white"
StyledText {
id: bodyText
Text {
id: bodyText
anchors.fill: parent
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: 14
wrapMode: Text.WordWrap
textFormat: Text.MarkdownText
text: notificationWrapper.notification.body
onLinkActivated: link => Qt.openUrlExternally(link)
}
text: notificationWrapper.notification? notificationWrapper.notification.body : ""
}
}
}