feat: multi-height delegates

quickshell/Components/NotificationDisplay.qml

@@ -1,191 +0,0 @@
-import Quickshell
-import Quickshell.Widgets
-import Quickshell.Io
-import QtQuick
-import QtQuick.Layouts
-import QtQuick.Controls
-import "root:/DataSources"
-import "root:/Helpers"
-import Quickshell.Services.Notifications
-
-Item {
-  id: root
-  Layout.alignment: Qt.AlignVCenter;
-  implicitWidth: 25
-  implicitHeight: parent.height
-  Rectangle {
-    anchors.centerIn: parent
-    id: rootContainer
-    color: "transparent"
-    width: 30
-    height: 30
-    radius: 50
-    Text {
-      id: rootIcon
-      text: ""
-      color: Stylix.base05
-      anchors.centerIn: parent
-    }
-  }
-  function updateDisplay() {
-    if (Notifications.list.length > 0) {
-      rootContainer.color = Stylix.base08
-      rootIcon.color = Stylix.base00
-    } else {
-      rootContainer.color = "transparent"
-      rootIcon.color = Stylix.base05
-    }
-  }
-  Timer {
-    interval: 1000
-    running:  true
-    repeat: true
-    onTriggered: root.updateDisplay()
-  }
-  MouseArea {
-    id: ma
-    anchors.fill: parent
-    hoverEnabled: true
-
-    onClicked: function(mouseEvent) {
-      var m = root.QsWindow.mapFromItem(ma, ma.width/2.0, ma.height/2.0);
-      var offset = notificationLoader.item.width / 2.0;
-      notificationLoader.item.clicky = m.x - offset;
-      notificationLoader.item.visible = !notificationLoader.item.visible
-    }
-  }
-
-  LazyLoader {
-    id: notificationLoader
-
-    loading: true
-
-    PopupWindow {
-      property real clicky
-      id: wrapperPopup
-      visible: false
-      anchor.window: root.QsWindow.window
-      anchor.rect.y: parentWindow?.height ?? 0
-      anchor.rect.x: clicky
-      color: "transparent"
-
-      implicitWidth: 400
-      implicitHeight: 600
-
-      Rectangle {
-        anchors.fill: parent
-        color: Stylix.base01
-        bottomLeftRadius: 5
-        bottomRightRadius: 5
-        ColumnLayout {
-          anchors.fill: parent
-          RowLayout {
-            Layout.alignment: Qt.AlignHCenter
-            spacing: 10
-            Text {
-              font.bold: true
-              Layout.preferredHeight: 26
-              Layout.alignment: Qt.AlignVCenter
-              verticalAlignment: Text.AlignVCenter
-              text: "Notifications"
-              color: Stylix.base05
-              font.pixelSize: 16
-            }
-            Text {
-              Layout.preferredHeight: 26
-              Layout.alignment: Qt.AlignVCenter
-              verticalAlignment: Text.AlignBottom
-              id: clear
-              text: "󱏧"
-              color: Stylix.base08
-              font.pixelSize: 16
-              ToolTip {
-                id: clearTooltip
-                visible: false
-                delay: 500
-                timeout: 1000
-                text: "Clear notifications"
-              }
-              MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                  if (Notifications.list.length >= 0) {
-                    Notifications.clear()
-                    root.updateDisplay()
-                  }
-                }
-              }
-
-              HoverHandler {
-                id: clearHover
-                onHoveredChanged: {
-                  clearTooltip.visible = hovered
-                }
-              }
-            }
-          }
-          ClippingRectangle {
-              color: "transparent"
-              Layout.alignment: Qt.AlignBottom
-              Layout.preferredWidth: parent.width
-              Layout.preferredHeight: parent.height - 24
-              ListView {
-                anchors.fill: parent
-              id: notificationList
-              model: Notifications.list
-              spacing: 10
-              ScrollBar.vertical: ScrollBar {}
-
-              delegate: Item {
-                required property Notification modelData
-
-                height: 100
-                width: 400
-
-                Rectangle {
-                  id: indivNotif
-                  color: Stylix.base02
-                  radius: 5
-                  anchors {
-                    fill: parent
-                    leftMargin: 5
-                    rightMargin: 5
-                  }
-                  RowLayout {
-                    anchors {
-                      fill: parent
-                    }
-                    NotificationImage {
-                      image: modelData.image
-                    }
-                    ColumnLayout {
-                      Layout.leftMargin: 5
-                      Layout.rightMargin: 5
-                      Layout.fillWidth: true
-                      NotificationHeader {
-                        modelData_: modelData
-                      }
-                      Text {
-                        font.pointSize: 10
-                        wrapMode: Text.WordWrap
-                        Layout.fillWidth: true
-                        Layout.preferredWidth: modelData.image != "" ? indivNotif.width - 80 : indivNotif.width
-                        Layout.maximumWidth: indivNotif.width
-                        elide: Text.ElideRight
-                        text: modelData.body
-                        color: Stylix.base05
-                      }
-                    }
-                    NotificationActions {
-                      modelData_: modelData
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

quickshell/Components/NotificationSystem/NotificationActions.qml

@@ -13,33 +13,27 @@ RowLayout {
   required property Notification modelData_
 
   Layout.minimumHeight: 0
-  Layout.preferredHeight: modelData_.actions != [] ? 30 : 0
+  Layout.preferredHeight: modelData_.actions.length > 0 ? 30 : 0
-  visible: modelData_.actions != []
+  visible: modelData_.actions.length > 0
   spacing: 5
   Repeater {
     model: modelData_.actions
 
-    Item {
+    delegate: Item {
-      required property NotificationAction actionData
+      required property NotificationAction modelData
 
       width: 100
       height: 30
 
-      anchors {
-        left: parent.left
-        leftMargin: 5
-        top: parent.top
-        topMargin: 5
-      }
-
       Rectangle {
         anchors.fill: parent
-        color: Stylix.base02
+        color: Stylix.base00
         radius: 5
 
         Text {
-          text: actionData.text
+          text: modelData.text
           color: Stylix.base05
+          anchors.centerIn: parent
           font.pixelSize: 12
 
           anchors {
@@ -51,7 +45,7 @@ RowLayout {
 
         MouseArea {
           anchors.fill: parent
-          onClicked: actionData.invoke()
+          onClicked: modelData.invoke()
         }
       }
     }

quickshell/Components/NotificationSystem/NotificationDisplay.qml

@@ -0,0 +1,81 @@
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import "root:/DataSources"
+import "root:/Helpers"
+import Quickshell.Services.Notifications
+
+Item {
+  id: root
+  Layout.alignment: Qt.AlignVCenter;
+  implicitWidth: 30
+  implicitHeight: parent.height
+  Rectangle {
+    anchors.centerIn: parent
+    id: rootContainer
+    color: "transparent"
+    width: 60
+    height: 30
+    radius: 50
+    RowLayout {
+      spacing: 5
+      anchors.centerIn: parent
+      Text {
+        verticalAlignment: Text.AlignVCenter
+        id: rootIcon
+        text: ""
+        color: Stylix.base05
+      }
+      Text {
+        verticalAlignment: Text.AlignVCenter
+        id: count
+        text: ""
+        font.bold: true
+        color: Stylix.base05
+      }
+    }
+  }
+  function updateDisplay() {
+    if (Notifications.list.length > 0) {
+      rootContainer.color = Stylix.base08
+      rootIcon.color = Stylix.base00
+      count.color = Stylix.base00
+      count.text = Notifications.list.length
+      rootContainer.width = 60
+      root.implicitWidth = 60
+      count.visible = true
+    } else {
+      rootContainer.width = 30
+      root.implicitWidth = 30
+      rootContainer.color = "transparent"
+      rootIcon.color = Stylix.base05
+      count.color = Stylix.base05
+      count.visible = false
+    }
+  }
+  Timer {
+    interval: 1000
+    running:  true
+    repeat: true
+    onTriggered: root.updateDisplay()
+  }
+  MouseArea {
+    id: ma
+    anchors.fill: parent
+    hoverEnabled: true
+
+    onClicked: function(mouseEvent) {
+      var m = root.QsWindow.mapFromItem(ma, ma.width/2.0, ma.height/2.0);
+      var offset = notificationLoader.item.width / 2.0;
+      notificationLoader.item.clicky = m.x - offset;
+      notificationLoader.item.visible = !notificationLoader.item.visible
+    }
+  }
+
+  NotificationWindow {
+    id: notificationLoader
+  }
+}

quickshell/Components/NotificationSystem/NotificationHeader.qml

@@ -13,17 +13,16 @@ RowLayout {
   required property Notification modelData_
   IconImage {
     function getIcon() {
-      console.log(modelData_.appIcon)
       if (modelData_.appIcon != "") {
-        return Quickshell.iconPath(modelData_.appIcon)
+        return Quickshell.iconPath(modelData_.appIcon.replace("file://", ""))
       } else {
-        return iconForId(modelData_.appName)
+        return ThemeIcons.iconForAppId(modelData_.appName)
       }
     }
     width: 24
     height: 24
-    visible: modelData_.appIcon != ""
+    visible: source != ""
-    source: Quickshell.iconPath(modelData_.appIcon)
+    source: getIcon()
   }
   Text {
     font.bold: true

quickshell/Components/NotificationSystem/NotificationImage.qml

@@ -20,6 +20,6 @@ ClippingWrapperRectangle {
     fillMode: Image.PreserveAspectFit
     Layout.preferredWidth: 80
     Layout.preferredHeight: parent.height
-    source: image
+    source: image.replace("file://", "")
   }
 }

quickshell/Components/NotificationSystem/NotificationItem.qml

@@ -0,0 +1,76 @@
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import "root:/DataSources"
+import "root:/Helpers"
+import Quickshell.Services.Notifications
+
+Item {
+  required property Notification modelData
+
+  function calculateHeight() {
+    if (modelData.actions.length > 0) {
+      return 150
+    } else if (modelData.image != "") {
+      return 100
+    } else {
+      return 60
+    }
+  }
+
+  function calculateBodyHeight() {
+    if (modelData.image != "" || modelData.actions.length > 0) {
+      return 40
+    } else {
+      return 20
+    }
+  }
+
+  height: calculateHeight()
+  width: 450
+
+  Rectangle {
+    id: indivNotif
+    color: Stylix.base02
+    radius: 5
+    anchors {
+      fill: parent
+      leftMargin: 5
+      rightMargin: 5
+    }
+    RowLayout {
+      anchors {
+        fill: parent
+      }
+      NotificationImage {
+        image: modelData.image
+      }
+      ColumnLayout {
+        Layout.alignment: Qt.AlignVCenter
+        Layout.leftMargin: 5
+        Layout.rightMargin: 5
+        Layout.fillWidth: true
+        NotificationHeader {
+          modelData_: modelData
+        }
+        Text {
+          font.pointSize: 10
+          wrapMode: Text.WordWrap
+          Layout.fillWidth: true
+          Layout.preferredWidth: modelData.image != "" ? indivNotif.width - 80 : indivNotif.width
+          Layout.maximumHeight: calculateBodyHeight()
+          Layout.maximumWidth: indivNotif.width
+          elide: Text.ElideRight
+          text: modelData.body
+          color: Stylix.base05
+        }
+        NotificationActions {
+          modelData_: modelData
+        }
+      }
+    }
+  }
+}

quickshell/Components/NotificationSystem/NotificationWindow.qml

@@ -0,0 +1,58 @@
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import "root:/DataSources"
+import "root:/Helpers"
+import Quickshell.Services.Notifications
+
+LazyLoader {
+  id: notificationLoader
+
+  loading: true
+
+  PopupWindow {
+    property real clicky
+    id: wrapperPopup
+    visible: false
+    anchor.window: root.QsWindow.window
+    anchor.rect.y: parentWindow?.height ?? 0
+    anchor.rect.x: clicky
+    color: "transparent"
+
+    implicitWidth: 450
+    implicitHeight: 600
+
+    Rectangle {
+      anchors.fill: parent
+      color: Stylix.base01
+      bottomLeftRadius: 5
+      bottomRightRadius: 5
+      ColumnLayout {
+        anchors.fill: parent
+        NotificationWindowHeader {
+          Layout.topMargin: 5
+          Layout.bottomMargin: 5
+        }
+        ClippingRectangle {
+          color: "transparent"
+          Layout.alignment: Qt.AlignBottom
+          Layout.preferredWidth: parent.width
+          Layout.preferredHeight: parent.height - 34
+          ListView {
+            cacheBuffer: 30
+            anchors.fill: parent
+            id: notificationList
+            model: Notifications.list
+            spacing: 10
+            ScrollBar.vertical: ScrollBar {}
+
+            delegate: NotificationItem {}
+          }
+        }
+      }
+    }
+  }
+}

quickshell/Components/NotificationSystem/NotificationWindowHeader.qml

@@ -0,0 +1,54 @@
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import "root:/DataSources"
+import "root:/Helpers"
+import Quickshell.Services.Notifications
+
+RowLayout {
+  Layout.alignment: Qt.AlignHCenter
+  spacing: 10
+  Text {
+    font.bold: true
+    Layout.preferredHeight: 26
+    Layout.alignment: Qt.AlignVCenter
+    verticalAlignment: Text.AlignVCenter
+    text: "Notifications"
+    color: Stylix.base05
+    font.pixelSize: 16
+  }
+  Text {
+    Layout.preferredHeight: 26
+    Layout.alignment: Qt.AlignVCenter
+    verticalAlignment: Text.AlignBottom
+    id: clear
+    text: "󱏧"
+    color: Stylix.base08
+    font.pixelSize: 16
+    ToolTip {
+      id: clearTooltip
+      visible: false
+      delay: 500
+      timeout: 1000
+      text: "Clear notifications"
+    }
+    MouseArea {
+      anchors.fill: parent
+      onClicked: {
+        if (Notifications.list.length >= 0) {
+          Notifications.clear()
+          root.updateDisplay()
+        }
+      }
+    }
+    HoverHandler {
+      id: clearHover
+      onHoveredChanged: {
+        clearTooltip.visible = hovered
+      }
+    }
+  }
+}

quickshell/Modules/Bar.qml

@@ -5,6 +5,7 @@ import QtQuick.Layouts
 import QtQuick.Controls
 import "root:/DataSources"
 import "root:/Components"
+import "root:/Components/NotificationSystem"
 
 Scope {
   id: root
@@ -70,9 +71,9 @@ Scope {
 
           spacing: 15
 
-          NotificationDisplay {}
           SystemTrayWrapper {}
           Clock {}
+          NotificationDisplay {}
           DistroIcon {}
         }
       }