fix and style notifications

modules/notifications/NotiCard.qml

@@ -9,34 +9,65 @@ import qs.widgets
 WrapperRectangle {
     id: root
     required property var notification
-    implicitWidth: 300
-    implicitHeight: 100
+    required property ShellScreen nScreen
+    implicitWidth: nScreen.width / 6
+    implicitHeight: 80
     radius: Config.rounding
     anchors.right: parent?.right
     color: Colors.base01
+    clip: true
     child: WrapperMouseArea {
-        RowLayout {
-            anchors.fill: parent
+        id: mouseHandler
+        child: RowLayout {
+            spacing: 10
             IconImage {
                 id: appIcon
-                Layout.leftMargin: 16
-                source: root.notification.image ? root.notification.image : ''
-                implicitSize: 48
+                Layout.leftMargin: 8
+                visible: root.notification?.image ? true : false
+                source: root.notification?.image ? root.notification.image : ''
+                implicitSize: 64
             }
             ColumnLayout {
                 Layout.alignment: Qt.AlignLeft
+                Layout.fillWidth: true
+                Layout.preferredWidth: 0
+                Layout.fillHeight: true
+                Layout.leftMargin: appIcon.visible ? 0 : 16
+                RowLayout {
+                    MaterialIcon {
+                        text: "\ue7f4"
+                        font.pixelSize: 12
+                    }
+                    StyledText {
+                        id: appId
+                        text: root.notification?.appName ? root.notification.appName : ''
+                        opacity: 0.4
+                    }
+                }
                 StyledText {
                     id: title
                     text: root.notification?.summary == null ? '' : root.notification.summary
+                    elide: Text.ElideRight
+                    Layout.fillWidth: true
                 }
                 StyledText {
                     id: body
-                    text: root.notification.body ? root.notification.body : ''
+                    text: root.notification?.body ? root.notification.body : ''
+                    elide: Text.ElideRight
+                    Layout.fillWidth: true
+                    opacity: 0.6
                 }
             }
         }
         acceptedButtons: Qt.LeftButton
         cursorShape: Qt.PointingHandCursor
+        hoverEnabled: true
+        onEntered: {
+            root.color = Colors.base03;
+        }
+        onExited: {
+            root.color = Colors.base01;
+        }
         onClicked: {
             root.notification.dismiss();
         }

modules/notifications/NotiPopup.qml

@@ -29,7 +29,7 @@ WlrLayershell {
     margins.top: Config.barHeight + 8
     margins.right: 8
     implicitHeight: notiList.contentHeight
-    implicitWidth: activeScreen.width / 8
+    implicitWidth: activeScreen.width / 6
     color: 'transparent'
     visible: NotiServer.notifications.values.length > 0
 
@@ -40,6 +40,7 @@ WlrLayershell {
         spacing: 6
         delegate: NotiCard {
             required property var modelData
+            nScreen: notiPopup.activeScreen
             notification: modelData
         }
     }