status-desktop/ui/app/mainui/activitycenter/views/ActivityNotificationBase.qml

90 lines
3.1 KiB
QML

import QtQuick 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import shared 1.0
import utils 1.0
Item {
id: root
/* required */ property int filteredIndex
/* required */ property var notification
/* required */ property var store
/* required */ property var activityCenterStore
property alias bodyComponent: bodyLoader.sourceComponent
property alias badgeComponent: badgeLoader.sourceComponent
property alias ctaComponent: ctaLoader.sourceComponent
signal closeActivityCenter()
implicitHeight: Math.max(60, bodyLoader.height + bodyLoader.anchors.topMargin * 2 +
(dateGroupLabel.visible ? dateGroupLabel.height : 0) +
(badgeLoader.item ? badgeLoader.height + Style.current.smallPadding : 0))
StatusDateGroupLabel {
id: dateGroupLabel
anchors.top: parent.top
anchors.right: parent.right
anchors.left: parent.left
messageTimestamp: notification ? notification.timestamp : 0
previousMessageTimestamp: !notification || filteredIndex === 0 || !notification.previousTimestamp ?
0 : notification.previousTimestamp
visible: text !== ""
}
Rectangle {
id: backgroundRect
anchors.fill: parent
anchors.topMargin: dateGroupLabel.visible ? dateGroupLabel.height : 0
radius: 6
color: notification && !notification.read ? Theme.palette.primaryColor3 : "transparent"
Behavior on color { ColorAnimation { duration: 200 } }
}
Loader {
id: bodyLoader
anchors.top: dateGroupLabel.visible ? dateGroupLabel.bottom : parent.top
anchors.topMargin: Style.current.smallPadding
anchors.right: ctaLoader.left
anchors.rightMargin: Style.current.smallPadding
anchors.left: parent.left
clip: true
}
Loader {
id: badgeLoader
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.current.smallPadding
anchors.left: parent.left
anchors.leftMargin: 50 // TODO find a way to align with the text of the message
}
Loader {
id: ctaLoader
anchors.verticalCenter: bodyLoader.verticalCenter
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
sourceComponent: StatusFlatRoundButton {
icon.width: 20
icon.height: 20
icon.name: "checkmark"
icon.color: notification && notification.read ? icon.disabledColor : Theme.palette.primaryColor1
tooltip.text: notification && notification.read ? qsTr("Mark as Unread") : qsTr("Mark as Read")
tooltip.orientation: StatusToolTip.Orientation.Left
tooltip.x: -tooltip.width - Style.current.padding
tooltip.y: 4
onClicked: {
notification.read ?
root.activityCenterStore.markActivityCenterNotificationUnread(root.notification) :
root.activityCenterStore.markActivityCenterNotificationRead(root.notification)
}
}
}
}