diff --git a/Modules/Notification/NotificationHistoryPanel.qml b/Modules/Notification/NotificationHistoryPanel.qml index 7bc2378..0d4bff9 100644 --- a/Modules/Notification/NotificationHistoryPanel.qml +++ b/Modules/Notification/NotificationHistoryPanel.qml @@ -25,6 +25,7 @@ NPanel { anchors.margins: Style.marginL * scaling spacing: Style.marginM * scaling + // Header section RowLayout { Layout.fillWidth: true spacing: Style.marginM * scaling @@ -78,38 +79,36 @@ NPanel { } // Empty state when no notifications - Item { + ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true + Layout.alignment: Qt.AlignCenter visible: NotificationService.historyModel.count === 0 + spacing: Style.marginM * scaling - ColumnLayout { - anchors.centerIn: parent - spacing: Style.marginM * scaling + NIcon { + text: "notifications_off" + font.pointSize: Style.fontSizeXXXL * scaling + color: Color.mOnSurface + Layout.alignment: Qt.AlignHCenter + } - NIcon { - text: "notifications_off" - font.pointSize: Style.fontSizeXXXL * scaling - color: Color.mOnSurface - Layout.alignment: Qt.AlignHCenter - } + NText { + text: "No notifications" + font.pointSize: Style.fontSizeL * scaling + color: Color.mOnSurface + Layout.alignment: Qt.AlignHCenter + } - NText { - text: "No notifications" - font.pointSize: Style.fontSizeL * scaling - color: Color.mOnSurface - Layout.alignment: Qt.AlignHCenter - } - - NText { - text: "Your notifications will show up here as they arrive." - font.pointSize: Style.fontSizeNormal * scaling - color: Color.mOnSurfaceVariant - Layout.alignment: Qt.AlignHCenter - } + NText { + text: "Your notifications will show up here as they arrive." + font.pointSize: Style.fontSizeNormal * scaling + color: Color.mOnSurfaceVariant + Layout.alignment: Qt.AlignHCenter } } + // Notification list ListView { id: notificationList Layout.fillWidth: true @@ -121,21 +120,21 @@ NPanel { visible: NotificationService.historyModel.count > 0 delegate: Rectangle { - width: notificationList ? notificationList.width : 380 * scaling - height: Math.max(80, notificationContent.height + 30) + width: notificationList.width + height: notificationLayout.implicitHeight + (Style.marginM * scaling * 2) radius: Style.radiusM * scaling color: notificationMouseArea.containsMouse ? Color.mSecondary : Color.mSurfaceVariant + border.color: Qt.alpha(Color.mOutline, Style.opacityMedium) + border.width: Math.max(1, Style.borderS * scaling) RowLayout { - anchors { - fill: parent - margins: Style.marginM * scaling - } + id: notificationLayout + anchors.fill: parent + anchors.margins: Style.marginM * scaling spacing: Style.marginM * scaling - // Notification content - Column { - id: notificationContent + // Notification content column + ColumnLayout { Layout.fillWidth: true Layout.alignment: Qt.AlignVCenter spacing: Style.marginXXS * scaling @@ -146,7 +145,8 @@ NPanel { font.weight: Font.Medium color: notificationMouseArea.containsMouse ? Color.mSurface : Color.mPrimary wrapMode: Text.Wrap - width: parent.width - 60 + Layout.fillWidth: true + Layout.maximumWidth: parent.width maximumLineCount: 2 elide: Text.ElideRight } @@ -156,23 +156,27 @@ NPanel { font.pointSize: Style.fontSizeXS * scaling color: notificationMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface wrapMode: Text.Wrap - width: parent.width - 60 + Layout.fillWidth: true + Layout.maximumWidth: parent.width maximumLineCount: 3 elide: Text.ElideRight + visible: text.length > 0 } NText { text: NotificationService.formatTimestamp(timestamp) font.pointSize: Style.fontSizeXS * scaling color: notificationMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface + Layout.fillWidth: true } } - // Trash icon button + // Delete button NIconButton { icon: "delete" tooltipText: "Delete notification" sizeRatio: 0.7 + Layout.alignment: Qt.AlignTop onClicked: { Logger.log("NotificationHistory", "Removing notification:", summary) @@ -185,7 +189,7 @@ NPanel { MouseArea { id: notificationMouseArea anchors.fill: parent - anchors.rightMargin: Style.marginL * 3 * scaling + anchors.rightMargin: Style.marginXL * scaling hoverEnabled: true } }