feat: multi-height delegates

2026-02-09 04:19:19 -08:00 · 2025-12-07 21:34:18 -08:00 · 2025-12-07 21:34:18 -08:00 · 9ae22c832f
commit 9ae22c832f
parent b15bb36dae
9 changed files with 284 additions and 212 deletions
--- a/quickshell/Components/NotificationDisplay.qml
+++ b/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
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
--- a/quickshell/Components/NotificationSystem/NotificationActions.qml
+++ b/quickshell/Components/NotificationSystem/NotificationActions.qml
@ -13,33 +13,27 @@ RowLayout {
  required property Notification modelData_

  Layout.minimumHeight: 0
-  Layout.preferredHeight: modelData_.actions != [] ? 30 : 0
-  visible: modelData_.actions != []
+  Layout.preferredHeight: modelData_.actions.length > 0 ? 30 : 0
+  visible: modelData_.actions.length > 0
  spacing: 5
  Repeater {
    model: modelData_.actions

-    Item {
-      required property NotificationAction actionData
+    delegate: Item {
+      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()
        }
      }
    }
--- a/quickshell/Components/NotificationSystem/NotificationDisplay.qml
+++ b/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
+  }
+}
--- a/quickshell/Components/NotificationSystem/NotificationHeader.qml
+++ b/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 != ""
-    source: Quickshell.iconPath(modelData_.appIcon)
+    visible: source != ""
+    source: getIcon()
  }
  Text {
    font.bold: true
--- a/quickshell/Components/NotificationSystem/NotificationImage.qml
+++ b/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://", "")
  }
 }
--- a/quickshell/Components/NotificationSystem/NotificationItem.qml
+++ b/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
+        }
+      }
+    }
+  }
+}
--- a/quickshell/Components/NotificationSystem/NotificationWindow.qml
+++ b/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 {}
+          }
+        }
+      }
+    }
+  }
+}
--- a/quickshell/Components/NotificationSystem/NotificationWindowHeader.qml
+++ b/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
+      }
+    }
+  }
+}
--- a/quickshell/Modules/Bar.qml
+++ b/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 {}
        }
      }