mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2026-01-24 21:42:51 -05:00
Redesign of the notification center
This commit is contained in:
purian23
405
Widgets/NotificationCompactGroup.qml
Normal file
405
Widgets/NotificationCompactGroup.qml
Normal file
@@ -0,0 +1,405 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Effects
|
||||
import "../Common"
|
||||
import "../Services"
|
||||
|
||||
// Compact notification group component for Android 16-style collapsed groups
|
||||
Rectangle {
|
||||
id: root
|
||||
|
||||
property var groupData
|
||||
property bool isHovered: false
|
||||
property bool showExpandButton: groupData ? groupData.totalCount > 1 : false
|
||||
property int groupPriority: groupData ? (groupData.priority || NotificationGroupingService.priorityNormal) : NotificationGroupingService.priorityNormal
|
||||
property int notificationType: groupData ? (groupData.notificationType || NotificationGroupingService.typeNormal) : NotificationGroupingService.typeNormal
|
||||
|
||||
signal expandRequested()
|
||||
signal groupClicked()
|
||||
signal groupDismissed()
|
||||
|
||||
width: parent.width
|
||||
height: getCompactHeight()
|
||||
radius: Theme.cornerRadius
|
||||
color: getBackgroundColor()
|
||||
|
||||
// Enhanced elevation effect for high priority
|
||||
layer.enabled: groupPriority === NotificationGroupingService.priorityHigh
|
||||
layer.effect: MultiEffect {
|
||||
shadowEnabled: true
|
||||
shadowHorizontalOffset: 0
|
||||
shadowVerticalOffset: 1
|
||||
shadowBlur: 0.2
|
||||
shadowColor: Qt.rgba(0, 0, 0, 0.08)
|
||||
}
|
||||
|
||||
function getCompactHeight() {
|
||||
if (notificationType === NotificationGroupingService.typeMedia) {
|
||||
return 72 // Slightly taller for media controls
|
||||
}
|
||||
return groupPriority === NotificationGroupingService.priorityHigh ? 64 : 56
|
||||
}
|
||||
|
||||
function getBackgroundColor() {
|
||||
if (isHovered) {
|
||||
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
|
||||
}
|
||||
|
||||
if (groupPriority === NotificationGroupingService.priorityHigh) {
|
||||
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.04)
|
||||
}
|
||||
|
||||
return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.06)
|
||||
}
|
||||
|
||||
// Priority indicator strip
|
||||
Rectangle {
|
||||
width: 3
|
||||
height: parent.height - 8
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 2
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
radius: 1.5
|
||||
color: getPriorityColor()
|
||||
visible: groupPriority === NotificationGroupingService.priorityHigh
|
||||
}
|
||||
|
||||
function getPriorityColor() {
|
||||
if (notificationType === NotificationGroupingService.typeConversation) {
|
||||
return Theme.primary
|
||||
} else if (notificationType === NotificationGroupingService.typeMedia) {
|
||||
return "#FF6B35" // Orange for media
|
||||
}
|
||||
return Theme.primary
|
||||
}
|
||||
|
||||
Row {
|
||||
anchors.fill: parent
|
||||
anchors.margins: Theme.spacingM
|
||||
anchors.leftMargin: groupPriority === NotificationGroupingService.priorityHigh ? Theme.spacingM + 6 : Theme.spacingM
|
||||
spacing: Theme.spacingM
|
||||
|
||||
// App Icon
|
||||
Rectangle {
|
||||
width: getIconSize()
|
||||
height: width
|
||||
radius: width / 2
|
||||
color: getIconBackgroundColor()
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
// Subtle glow for high priority
|
||||
layer.enabled: groupPriority === NotificationGroupingService.priorityHigh
|
||||
layer.effect: MultiEffect {
|
||||
shadowEnabled: true
|
||||
shadowBlur: 0.4
|
||||
shadowColor: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2)
|
||||
}
|
||||
|
||||
function getIconSize() {
|
||||
if (groupPriority === NotificationGroupingService.priorityHigh) {
|
||||
return 40
|
||||
}
|
||||
return 32
|
||||
}
|
||||
|
||||
function getIconBackgroundColor() {
|
||||
if (notificationType === NotificationGroupingService.typeConversation) {
|
||||
return Theme.primaryContainer
|
||||
} else if (notificationType === NotificationGroupingService.typeMedia) {
|
||||
return Qt.rgba(1, 0.42, 0.21, 0.2) // Orange tint for media
|
||||
}
|
||||
return Theme.primaryContainer
|
||||
}
|
||||
|
||||
// App icon or fallback
|
||||
Loader {
|
||||
anchors.fill: parent
|
||||
sourceComponent: groupData && groupData.appIcon ? iconComponent : fallbackComponent
|
||||
}
|
||||
|
||||
Component {
|
||||
id: iconComponent
|
||||
IconImage {
|
||||
width: parent.width * 0.7
|
||||
height: width
|
||||
anchors.centerIn: parent
|
||||
asynchronous: true
|
||||
source: {
|
||||
if (!groupData || !groupData.appIcon) return ""
|
||||
if (groupData.appIcon.startsWith("file://") || groupData.appIcon.startsWith("/")) {
|
||||
return groupData.appIcon
|
||||
}
|
||||
return Quickshell.iconPath(groupData.appIcon, "image-missing")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: fallbackComponent
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: getDefaultIcon()
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: parent.width * 0.5
|
||||
color: Theme.primaryText
|
||||
|
||||
function getDefaultIcon() {
|
||||
if (notificationType === NotificationGroupingService.typeConversation) {
|
||||
return "chat"
|
||||
} else if (notificationType === NotificationGroupingService.typeMedia) {
|
||||
return "music_note"
|
||||
} else if (notificationType === NotificationGroupingService.typeSystem) {
|
||||
return "settings"
|
||||
}
|
||||
return "apps"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Content area
|
||||
Column {
|
||||
width: parent.width - parent.spacing - 40 - (showExpandButton ? 40 : 0) - (notificationType === NotificationGroupingService.typeMedia ? 100 : 0)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 2
|
||||
|
||||
// App name and count
|
||||
Row {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingS
|
||||
|
||||
Text {
|
||||
text: groupData ? groupData.appName : "App"
|
||||
font.pixelSize: groupPriority === NotificationGroupingService.priorityHigh ? Theme.fontSizeLarge : Theme.fontSizeMedium
|
||||
color: Theme.surfaceText
|
||||
font.weight: groupPriority === NotificationGroupingService.priorityHigh ? Font.DemiBold : Font.Medium
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
// Count badge
|
||||
Rectangle {
|
||||
width: Math.max(countText.width + 6, 18)
|
||||
height: 18
|
||||
radius: 9
|
||||
color: Theme.primary
|
||||
visible: groupData && groupData.totalCount > 1
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
Text {
|
||||
id: countText
|
||||
anchors.centerIn: parent
|
||||
text: groupData ? groupData.totalCount.toString() : "0"
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Theme.primaryText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
}
|
||||
|
||||
// Time indicator
|
||||
Text {
|
||||
text: getTimeText()
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.6)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
function getTimeText() {
|
||||
if (!groupData || !groupData.latestNotification) return ""
|
||||
return NotificationGroupingService.formatTimestamp(groupData.latestNotification.timestamp)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Summary text
|
||||
Text {
|
||||
text: getSummaryText()
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.8)
|
||||
width: parent.width
|
||||
elide: Text.ElideRight
|
||||
maximumLineCount: 1
|
||||
visible: text.length > 0
|
||||
|
||||
function getSummaryText() {
|
||||
if (!groupData) return ""
|
||||
|
||||
if (groupData.totalCount === 1) {
|
||||
const notif = groupData.latestNotification
|
||||
return notif ? (notif.summary || notif.body || "") : ""
|
||||
}
|
||||
|
||||
// Use smart summary for multiple notifications
|
||||
return NotificationGroupingService.generateGroupSummary(groupData)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Media controls (if applicable)
|
||||
Loader {
|
||||
active: notificationType === NotificationGroupingService.typeMedia
|
||||
width: active ? 100 : 0
|
||||
height: parent.height
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
sourceComponent: Row {
|
||||
spacing: Theme.spacingS
|
||||
anchors.centerIn: parent
|
||||
|
||||
Rectangle {
|
||||
width: 28
|
||||
height: 28
|
||||
radius: 14
|
||||
color: Theme.primaryContainer
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "skip_previous"
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: 16
|
||||
color: Theme.primaryText
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
// Handle previous track
|
||||
console.log("Previous track clicked")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 28
|
||||
height: 28
|
||||
radius: 14
|
||||
color: Theme.primary
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "pause" // Could be "play_arrow" based on state
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: 16
|
||||
color: Theme.primaryText
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
// Handle play/pause
|
||||
console.log("Play/pause clicked")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 28
|
||||
height: 28
|
||||
radius: 14
|
||||
color: Theme.primaryContainer
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "skip_next"
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: 16
|
||||
color: Theme.primaryText
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
// Handle next track
|
||||
console.log("Next track clicked")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Expand button
|
||||
Rectangle {
|
||||
width: showExpandButton ? 32 : 0
|
||||
height: 32
|
||||
radius: 16
|
||||
color: expandArea.containsMouse ? Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) : "transparent"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
visible: showExpandButton
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "expand_more"
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: 18
|
||||
color: expandArea.containsMouse ? Theme.primary : Theme.surfaceText
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: expandArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
onClicked: {
|
||||
expandRequested()
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on width {
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Main interaction area
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
anchors.rightMargin: showExpandButton ? 40 : 0
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
onEntered: {
|
||||
isHovered = true
|
||||
}
|
||||
|
||||
onExited: {
|
||||
isHovered = false
|
||||
}
|
||||
|
||||
onClicked: {
|
||||
if (showExpandButton) {
|
||||
expandRequested()
|
||||
} else {
|
||||
groupClicked()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Swipe gesture for dismissal
|
||||
DragHandler {
|
||||
target: null
|
||||
acceptedDevices: PointerDevice.TouchScreen | PointerDevice.Mouse
|
||||
|
||||
property real startX: 0
|
||||
property real threshold: 100
|
||||
|
||||
onActiveChanged: {
|
||||
if (active) {
|
||||
startX = centroid.position.x
|
||||
} else {
|
||||
const deltaX = centroid.position.x - startX
|
||||
if (deltaX < -threshold) {
|
||||
groupDismissed()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -48,7 +48,7 @@ PanelWindow {
|
||||
color: Theme.popupBackground()
|
||||
radius: Theme.cornerRadiusLarge
|
||||
border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.08)
|
||||
border.width: 1
|
||||
border.width: 0.5
|
||||
|
||||
// TopBar dropdown animation - slide down from bar (consistent with other TopBar widgets)
|
||||
transform: [
|
||||
@@ -225,46 +225,128 @@ PanelWindow {
|
||||
|
||||
property var groupData: model
|
||||
property bool isExpanded: model.expanded || false
|
||||
property int groupPriority: model.priority || NotificationGroupingService.priorityNormal
|
||||
property int notificationType: model.notificationType || NotificationGroupingService.typeNormal
|
||||
|
||||
// Group Header
|
||||
// Group Header with enhanced visual hierarchy
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 56
|
||||
height: getGroupHeaderHeight()
|
||||
radius: Theme.cornerRadius
|
||||
color: groupHeaderArea.containsMouse ?
|
||||
Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) :
|
||||
Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08)
|
||||
color: getGroupHeaderColor()
|
||||
|
||||
// App Icon
|
||||
// Enhanced elevation effect based on priority
|
||||
layer.enabled: groupPriority === NotificationGroupingService.priorityHigh
|
||||
layer.effect: MultiEffect {
|
||||
shadowEnabled: true
|
||||
shadowHorizontalOffset: 0
|
||||
shadowVerticalOffset: 2
|
||||
shadowBlur: 0.4
|
||||
shadowColor: Qt.rgba(0, 0, 0, 0.1)
|
||||
}
|
||||
|
||||
// Priority indicator strip
|
||||
Rectangle {
|
||||
width: 32
|
||||
height: 32
|
||||
radius: width / 2
|
||||
color: Theme.primaryContainer
|
||||
width: 4
|
||||
height: parent.height
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingM
|
||||
radius: 2
|
||||
color: getPriorityColor()
|
||||
visible: groupPriority === NotificationGroupingService.priorityHigh
|
||||
}
|
||||
|
||||
function getGroupHeaderHeight() {
|
||||
// Dynamic height based on content length and priority
|
||||
// Calculate height based on message content length
|
||||
const bodyText = (model.latestNotification && model.latestNotification.body) ? model.latestNotification.body : ""
|
||||
const bodyLines = Math.min(Math.ceil((bodyText.length / 50)), 4) // Estimate lines needed
|
||||
const bodyHeight = bodyLines * 16 // 16px per line
|
||||
const indicatorHeight = model.totalCount > 1 ? 16 : 0
|
||||
const paddingTop = Theme.spacingM
|
||||
const paddingBottom = Theme.spacingS
|
||||
|
||||
let calculatedHeight = paddingTop + 20 + bodyHeight + indicatorHeight + paddingBottom
|
||||
|
||||
// Minimum height based on priority
|
||||
const minHeight = groupPriority === NotificationGroupingService.priorityHigh ? 90 : 80
|
||||
|
||||
return Math.max(calculatedHeight, minHeight)
|
||||
}
|
||||
|
||||
function getGroupHeaderColor() {
|
||||
if (groupHeaderArea.containsMouse) {
|
||||
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
|
||||
}
|
||||
|
||||
// Different background colors based on priority
|
||||
if (groupPriority === NotificationGroupingService.priorityHigh) {
|
||||
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.05)
|
||||
}
|
||||
|
||||
return Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08)
|
||||
}
|
||||
|
||||
function getPriorityColor() {
|
||||
if (notificationType === NotificationGroupingService.typeConversation) {
|
||||
return Theme.primary
|
||||
} else if (notificationType === NotificationGroupingService.typeMedia) {
|
||||
return "#FF6B35" // Orange for media
|
||||
}
|
||||
return Theme.primary
|
||||
}
|
||||
|
||||
// App Icon with enhanced styling
|
||||
Rectangle {
|
||||
width: groupPriority === NotificationGroupingService.priorityHigh ? 40 : 32
|
||||
height: width
|
||||
radius: width / 2
|
||||
color: getIconBackgroundColor()
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: groupPriority === NotificationGroupingService.priorityHigh ? Theme.spacingM + 4 : Theme.spacingM
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
// Material icon fallback
|
||||
// Removed glow effect as requested
|
||||
|
||||
function getIconBackgroundColor() {
|
||||
if (notificationType === NotificationGroupingService.typeConversation) {
|
||||
return Theme.primaryContainer
|
||||
} else if (notificationType === NotificationGroupingService.typeMedia) {
|
||||
return Qt.rgba(1, 0.42, 0.21, 0.2) // Orange tint for media
|
||||
}
|
||||
return Theme.primaryContainer
|
||||
}
|
||||
|
||||
// Material icon fallback with type-specific icons
|
||||
Loader {
|
||||
active: !model.appIcon || model.appIcon === ""
|
||||
anchors.fill: parent
|
||||
sourceComponent: Text {
|
||||
anchors.centerIn: parent
|
||||
text: "apps"
|
||||
text: getDefaultIcon()
|
||||
font.family: Theme.iconFont
|
||||
font.pixelSize: 16
|
||||
font.pixelSize: groupPriority === NotificationGroupingService.priorityHigh ? 20 : 16
|
||||
color: Theme.primaryText
|
||||
|
||||
function getDefaultIcon() {
|
||||
if (notificationType === NotificationGroupingService.typeConversation) {
|
||||
return "chat"
|
||||
} else if (notificationType === NotificationGroupingService.typeMedia) {
|
||||
return "music_note"
|
||||
} else if (notificationType === NotificationGroupingService.typeSystem) {
|
||||
return "settings"
|
||||
}
|
||||
return "apps"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// App icon
|
||||
// App icon with priority-based sizing
|
||||
Loader {
|
||||
active: model.appIcon && model.appIcon !== ""
|
||||
anchors.centerIn: parent
|
||||
sourceComponent: IconImage {
|
||||
width: 24
|
||||
height: 24
|
||||
width: groupPriority === NotificationGroupingService.priorityHigh ? 28 : 24
|
||||
height: width
|
||||
asynchronous: true
|
||||
source: {
|
||||
if (!model.appIcon) return ""
|
||||
@@ -277,14 +359,14 @@ PanelWindow {
|
||||
}
|
||||
}
|
||||
|
||||
// App Name and Summary
|
||||
// App Name and Summary with enhanced layout
|
||||
Column {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingM + 32 + Theme.spacingM // Icon + spacing
|
||||
anchors.leftMargin: Theme.spacingM + (groupPriority === NotificationGroupingService.priorityHigh ? 48 : 40) + Theme.spacingM
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 80 // Space for buttons
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 2
|
||||
anchors.rightMargin: 32 // Maximum available width for message content
|
||||
anchors.verticalCenter: parent.verticalCenter // Center the entire content vertically
|
||||
spacing: groupPriority === NotificationGroupingService.priorityHigh ? 4 : 2
|
||||
|
||||
Row {
|
||||
width: parent.width
|
||||
@@ -292,20 +374,29 @@ PanelWindow {
|
||||
|
||||
Text {
|
||||
text: model.appName || "App"
|
||||
font.pixelSize: Theme.fontSizeMedium
|
||||
font.pixelSize: groupPriority === NotificationGroupingService.priorityHigh ? Theme.fontSizeLarge : Theme.fontSizeMedium
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
font.weight: groupPriority === NotificationGroupingService.priorityHigh ? Font.DemiBold : Font.Medium
|
||||
}
|
||||
|
||||
// Notification count badge
|
||||
// Enhanced notification count badge
|
||||
Rectangle {
|
||||
width: Math.max(countText.width + 8, 20)
|
||||
height: 20
|
||||
radius: 10
|
||||
color: Theme.primary
|
||||
color: getBadgeColor()
|
||||
visible: model.totalCount > 1
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
// Removed glow effect as requested
|
||||
|
||||
function getBadgeColor() {
|
||||
if (groupPriority === NotificationGroupingService.priorityHigh) {
|
||||
return Theme.primary
|
||||
}
|
||||
return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.8)
|
||||
}
|
||||
|
||||
Text {
|
||||
id: countText
|
||||
anchors.centerIn: parent
|
||||
@@ -317,29 +408,67 @@ PanelWindow {
|
||||
}
|
||||
}
|
||||
|
||||
// Latest message summary (title)
|
||||
Text {
|
||||
text: model.latestNotification ?
|
||||
(model.latestNotification.summary || model.latestNotification.body || "") : ""
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
|
||||
text: getLatestMessageTitle()
|
||||
font.pixelSize: groupPriority === NotificationGroupingService.priorityHigh ? Theme.fontSizeMedium : Theme.fontSizeSmall
|
||||
color: Theme.surfaceText
|
||||
width: parent.width
|
||||
elide: Text.ElideRight
|
||||
visible: text.length > 0
|
||||
font.weight: Font.Medium
|
||||
|
||||
function getLatestMessageTitle() {
|
||||
if (model.latestNotification) {
|
||||
return model.latestNotification.summary || ""
|
||||
}
|
||||
return ""
|
||||
}
|
||||
}
|
||||
|
||||
// Latest message body (content)
|
||||
Text {
|
||||
text: getLatestMessageBody()
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.8)
|
||||
width: parent.width
|
||||
wrapMode: Text.WordWrap
|
||||
elide: Text.ElideRight
|
||||
visible: text.length > 0
|
||||
maximumLineCount: groupPriority === NotificationGroupingService.priorityHigh ? 3 : 2
|
||||
|
||||
function getLatestMessageBody() {
|
||||
if (model.latestNotification) {
|
||||
return model.latestNotification.body || ""
|
||||
}
|
||||
return ""
|
||||
}
|
||||
}
|
||||
|
||||
// Additional messages indicator removed - moved below as floating text
|
||||
}
|
||||
|
||||
// Expand/Collapse Icon
|
||||
// Enhanced Expand/Collapse Icon - moved up more for better spacing
|
||||
Rectangle {
|
||||
id: expandCollapseButton
|
||||
width: 32
|
||||
width: model.totalCount > 1 ? 32 : 0
|
||||
height: 32
|
||||
radius: 16
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 40 // More space from close button
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.rightMargin: 6 // Reduced right margin to add left padding
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 16 // Moved up even more for better spacing
|
||||
color: expandButtonArea.containsMouse ?
|
||||
Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12) :
|
||||
"transparent"
|
||||
visible: model.totalCount > 1
|
||||
|
||||
Behavior on width {
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
@@ -348,11 +477,8 @@ PanelWindow {
|
||||
font.pixelSize: 20
|
||||
color: expandButtonArea.containsMouse ? Theme.primary : Theme.surfaceText
|
||||
|
||||
Behavior on rotation {
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
Behavior on text {
|
||||
enabled: false // Disable animation on text change to prevent flicker
|
||||
}
|
||||
}
|
||||
|
||||
@@ -361,6 +487,7 @@ PanelWindow {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
enabled: model.totalCount > 1
|
||||
|
||||
onClicked: {
|
||||
NotificationGroupingService.toggleGroupExpansion(index)
|
||||
@@ -416,14 +543,16 @@ PanelWindow {
|
||||
MouseArea {
|
||||
id: groupHeaderArea
|
||||
anchors.fill: parent
|
||||
anchors.rightMargin: 76 // Exclude both expand and close button areas
|
||||
anchors.rightMargin: 32 // Adjusted for maximum content width
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
cursorShape: model.totalCount > 1 ? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||
preventStealing: false
|
||||
propagateComposedEvents: true
|
||||
|
||||
onClicked: {
|
||||
NotificationGroupingService.toggleGroupExpansion(index)
|
||||
if (model.totalCount > 1) {
|
||||
NotificationGroupingService.toggleGroupExpansion(index)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -435,16 +564,75 @@ PanelWindow {
|
||||
}
|
||||
}
|
||||
|
||||
// Expanded Notifications List
|
||||
// Floating "More messages" indicator - positioned below the main group
|
||||
Rectangle {
|
||||
width: Math.min(parent.width * 0.8, 200)
|
||||
height: 24
|
||||
radius: 12
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.topMargin: 1
|
||||
color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
|
||||
border.color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.2)
|
||||
border.width: 1
|
||||
visible: model.totalCount > 1 && !isExpanded
|
||||
|
||||
// Smooth fade animation
|
||||
opacity: (model.totalCount > 1 && !isExpanded) ? 1.0 : 0.0
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: getFloatingIndicatorText()
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.9)
|
||||
font.weight: Font.Medium
|
||||
|
||||
function getFloatingIndicatorText() {
|
||||
if (model.totalCount > 1) {
|
||||
const additionalCount = model.totalCount - 1
|
||||
return `${additionalCount} more message${additionalCount > 1 ? "s" : ""} • Tap to expand`
|
||||
}
|
||||
return ""
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
NotificationGroupingService.toggleGroupExpansion(index)
|
||||
}
|
||||
}
|
||||
|
||||
// Subtle hover effect
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Expanded Notifications List with enhanced animation
|
||||
Item {
|
||||
width: parent.width
|
||||
height: isExpanded ? expandedContent.height : 0
|
||||
height: isExpanded ? expandedContent.height + Theme.spacingS : 0
|
||||
clip: true
|
||||
|
||||
// Enhanced staggered animation
|
||||
Behavior on height {
|
||||
NumberAnimation {
|
||||
duration: Theme.mediumDuration
|
||||
easing.type: Theme.emphasizedEasing
|
||||
SequentialAnimation {
|
||||
NumberAnimation {
|
||||
duration: Theme.mediumDuration
|
||||
easing.type: Theme.emphasizedEasing
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -453,10 +641,13 @@ PanelWindow {
|
||||
width: parent.width
|
||||
spacing: Theme.spacingXS
|
||||
opacity: isExpanded ? 1.0 : 0.0
|
||||
topPadding: Theme.spacingS
|
||||
bottomPadding: Theme.spacingM
|
||||
|
||||
// Enhanced opacity animation
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
duration: Theme.mediumDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
@@ -465,6 +656,8 @@ PanelWindow {
|
||||
model: groupData.notifications
|
||||
|
||||
delegate: Rectangle {
|
||||
// Skip the first (latest) notification since it's shown in the header
|
||||
visible: index > 0
|
||||
width: parent.width
|
||||
height: 80
|
||||
radius: Theme.cornerRadius
|
||||
@@ -472,6 +665,37 @@ PanelWindow {
|
||||
Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08) :
|
||||
Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.08)
|
||||
|
||||
// Subtle left border for nested notifications
|
||||
Rectangle {
|
||||
width: 2
|
||||
height: parent.height - 16
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 8
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.3)
|
||||
radius: 1
|
||||
}
|
||||
|
||||
// Smooth appearance animation
|
||||
opacity: isExpanded ? 1.0 : 0.0
|
||||
transform: Translate {
|
||||
y: isExpanded ? 0 : -10
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on transform {
|
||||
NumberAnimation {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
}
|
||||
|
||||
// Individual notification close button
|
||||
Rectangle {
|
||||
width: 24
|
||||
@@ -508,6 +732,7 @@ PanelWindow {
|
||||
Row {
|
||||
anchors.fill: parent
|
||||
anchors.margins: Theme.spacingM
|
||||
anchors.leftMargin: Theme.spacingM + 8 // Extra space for border
|
||||
anchors.rightMargin: 36
|
||||
spacing: Theme.spacingM
|
||||
|
||||
|
||||
@@ -242,7 +242,7 @@ PanelWindow {
|
||||
}
|
||||
}
|
||||
|
||||
// Small dismiss button - bottom right corner
|
||||
// Small dismiss button - bottom right corner with better positioning
|
||||
Rectangle {
|
||||
width: 60
|
||||
height: 18
|
||||
@@ -257,7 +257,7 @@ PanelWindow {
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.rightMargin: 12
|
||||
anchors.bottomMargin: 10
|
||||
anchors.bottomMargin: 14 // Moved up for better padding
|
||||
|
||||
Row {
|
||||
anchors.centerIn: parent
|
||||
@@ -312,7 +312,7 @@ PanelWindow {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 12
|
||||
anchors.rightMargin: 32
|
||||
anchors.bottomMargin: 6 // Reduced bottom margin to account for dismiss button
|
||||
anchors.bottomMargin: 24 // Even more space to ensure 2px+ margin above dismiss button
|
||||
spacing: 12
|
||||
|
||||
// Notification icon based on EXAMPLE NotificationAppIcon pattern
|
||||
@@ -426,17 +426,52 @@ PanelWindow {
|
||||
// Text content
|
||||
Column {
|
||||
width: parent.width - 68
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 4
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 4 // Move content up slightly
|
||||
spacing: 3
|
||||
|
||||
Text {
|
||||
text: root.activeNotification ? (root.activeNotification.summary || "") : ""
|
||||
font.pixelSize: 14
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
// Title and timestamp row
|
||||
Row {
|
||||
width: parent.width
|
||||
elide: Text.ElideRight
|
||||
visible: text.length > 0
|
||||
spacing: 8
|
||||
|
||||
Text {
|
||||
text: root.activeNotification ? (root.activeNotification.summary || "") : ""
|
||||
font.pixelSize: 14
|
||||
color: Theme.surfaceText
|
||||
font.weight: Font.Medium
|
||||
width: parent.width - timestampText.width - parent.spacing
|
||||
elide: Text.ElideRight
|
||||
visible: text.length > 0
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Text {
|
||||
id: timestampText
|
||||
text: root.activeNotification ? formatNotificationTime(root.activeNotification.timestamp) : ""
|
||||
font.pixelSize: 9
|
||||
color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.5)
|
||||
visible: text.length > 0
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
function formatNotificationTime(timestamp) {
|
||||
if (!timestamp) return ""
|
||||
|
||||
const now = new Date()
|
||||
const notifTime = new Date(timestamp)
|
||||
const diffMs = now.getTime() - notifTime.getTime()
|
||||
const diffMinutes = Math.floor(diffMs / 60000)
|
||||
|
||||
if (diffMinutes < 1) {
|
||||
return "now"
|
||||
} else if (diffMinutes < 60) {
|
||||
return `${diffMinutes}m`
|
||||
} else {
|
||||
const diffHours = Math.floor(diffMs / 3600000)
|
||||
return `${diffHours}h`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
|
||||
@@ -33,15 +33,16 @@ Rectangle {
|
||||
width: 18
|
||||
height: 18
|
||||
source: {
|
||||
let icon = trayItem?.icon || "";
|
||||
if (!icon) return "";
|
||||
|
||||
if (icon.includes("?path=")) {
|
||||
const [name, path] = icon.split("?path=");
|
||||
const fileName = name.substring(name.lastIndexOf("/") + 1);
|
||||
return `file://${path}/${fileName}`;
|
||||
let icon = trayItem?.icon;
|
||||
if (typeof icon === 'string' || icon instanceof String) {
|
||||
if (icon.includes("?path=")) {
|
||||
const [name, path] = icon.split("?path=");
|
||||
const fileName = name.substring(name.lastIndexOf("/") + 1);
|
||||
return `file://${path}/${fileName}`;
|
||||
}
|
||||
return icon;
|
||||
}
|
||||
return icon;
|
||||
return ""; // Return empty string if icon is not a string
|
||||
}
|
||||
asynchronous: true
|
||||
smooth: true
|
||||
|
||||
@@ -2,6 +2,7 @@ TopBar 1.0 TopBar/TopBar.qml
|
||||
TrayMenuPopup 1.0 TrayMenuPopup.qml
|
||||
NotificationPopup 1.0 NotificationPopup.qml
|
||||
NotificationHistoryPopup 1.0 NotificationHistoryPopup.qml
|
||||
NotificationCompactGroup 1.0 NotificationCompactGroup.qml
|
||||
WifiPasswordDialog 1.0 WifiPasswordDialog.qml
|
||||
AppLauncher 1.0 AppLauncher.qml
|
||||
ClipboardHistory 1.0 ClipboardHistory.qml
|
||||
|
||||
Reference in New Issue
Block a user