zach/z-bar-qt
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

notification sizing changes, better popup layout

Browse Source
This commit is contained in:
Zacharias-Brohn
2025-11-15 23:43:46 +01:00
parent 800fff4fcc
commit e6a06349e0
8 changed files with 158 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Bar.qml
-12
View File
@@ -50,31 +50,19 @@ Scope {
Workspaces { Workspaces {
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
Layout.fillHeight: true
Layout.topMargin: 6
Layout.bottomMargin: 6
bar: bar bar: bar
} }
AudioWidget { AudioWidget {
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
Layout.fillHeight: true
Layout.topMargin: 6
Layout.bottomMargin: 6
} }
Resources { Resources {
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
Layout.fillHeight: true
Layout.topMargin: 6
Layout.bottomMargin: 6
} }
UpdatesWidget { UpdatesWidget {
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
Layout.fillHeight: true
Layout.topMargin: 6
Layout.bottomMargin: 6
countUpdates: Updates.availableUpdates countUpdates: Updates.availableUpdates
} }
} }
Modules/AudioWidget.qml
+5 -2
View File
@@ -9,7 +9,7 @@ import qs.Modules
Item { Item {
id: root id: root
implicitWidth: expanded ? 300 : 150 implicitWidth: expanded ? 300 : 150
implicitHeight: 100 implicitHeight: 34
property bool expanded: false property bool expanded: false
@@ -29,7 +29,10 @@ Item {
} }
Rectangle { Rectangle {
anchors.fill: parent anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.right: parent.right
height: 22
radius: height / 2 radius: height / 2
color: "#40000000" color: "#40000000"
Modules/NotifServer.qml
+9 -13
View File
@@ -1,21 +1,14 @@
pragma ComponentBehavior: Bound pragma ComponentBehavior: Bound
import Quickshell import Quickshell
import Quickshell.Services.Notifications import Quickshell.Services.Notifications
import QtQuick import QtQuick
import qs.Modules import qs.Modules
Rectangle { Scope {
id: root id: root
Text {
text: "\ue7f4"
font.family: "Material Symbols Rounded"
font.pixelSize: 16
color: "white"
anchors.centerIn: parent
}
property list<int> notifIds: [] property list<int> notifIds: []
property list<TrackedNotification> notifications;
NotificationServer { NotificationServer {
id: notificationServer id: notificationServer
imageSupported: true imageSupported: true
@@ -23,20 +16,23 @@ Rectangle {
persistenceSupported: true persistenceSupported: true
bodyImagesSupported: true bodyImagesSupported: true
bodySupported: true bodySupported: true
onNotification: { onNotification: notification => {
notification.tracked = true; notification.tracked = true;
notification.receivedTime = Date.now(); notification.receivedTime = Date.now();
root.notifIds.push(notification.id); root.notifIds.push(notification.id);
notificationComponent.createObject(root, { notif: notification, visible: !notificationCenter.doNotDisturb }); const notif = notificationComponent.createObject(root, { notif: notification, visible: !notificationCenter.doNotDisturb });
root.notifications.push(notif);
} }
} }
Component { Component {
id: notificationComponent id: notificationComponent
Notification { TrackedNotification {
centerX: notificationCenter.posX centerX: notificationCenter.posX
notifIndex: root.notifIds notifIndex: root.notifIds
notifList: root.notifications
onNotifDestroy: { onNotifDestroy: {
root.notifications.shift();
root.notifIds.shift(); root.notifIds.shift();
} }
} }
Modules/NotificationCenter.qml
+53 -12
View File
@@ -234,12 +234,43 @@ PanelWindow {
property bool shouldShow: false property bool shouldShow: false
property bool isExpanded: false property bool isExpanded: false
move: Transition { Behavior on height {
Anim {}
}
add: Transition {
id: addTrans
SequentialAnimation {
PauseAnimation {
duration: ( addTrans.ViewTransition.index - addTrans.ViewTransition.targetIndexes[ 0 ]) * 50
}
ParallelAnimation {
NumberAnimation { NumberAnimation {
properties: "y,x"; properties: "y";
from: addTrans.ViewTransition.destination.y - (height / 2);
to: addTrans.ViewTransition.destination.y;
duration: 100; duration: 100;
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
} }
NumberAnimation {
properties: "opacity";
from: 0;
to: 1;
duration: 100;
easing.type: Easing.OutCubic
}
}
}
}
move: Transition {
id: moveTrans
NumberAnimation {
properties: "opacity";
duration: 100;
to: 0;
easing.type: Easing.OutCubic
}
} }
RowLayout { RowLayout {
@@ -287,12 +318,13 @@ PanelWindow {
required property var modelData required property var modelData
required property var index required property var index
width: parent.width width: parent.width
height: groupColumn.isExpanded ? ( modelData.actions.length > 1 ? 130 : 80 ) : ( groupColumn.notifications.length === 1 ? ( modelData.actions.length > 1 ? 130 : 80 ) : 80 ) height: contentColumn.height + 20
color: Config.baseBgColor color: Config.baseBgColor
border.color: "#555555" border.color: "#555555"
border.width: 1 border.width: 1
radius: 8 radius: 8
visible: groupColumn.notifications[0].id === modelData.id || groupColumn.isExpanded visible: groupColumn.notifications[0].id === modelData.id || groupColumn.isExpanded
opacity: groupColumn.notifications[0].id === modelData.id ? 1 : 0
Connections { Connections {
target: groupColumn target: groupColumn
@@ -307,6 +339,9 @@ PanelWindow {
if ( visible ) { if ( visible ) {
// expandAnim.start(); // expandAnim.start();
} else { } else {
if ( groupColumn.notifications[0].id !== modelData.id ) {
groupHeader.opacity = 0;
}
groupColumn.isExpanded = false; groupColumn.isExpanded = false;
} }
} }
@@ -325,10 +360,15 @@ PanelWindow {
} }
Column { Column {
anchors.fill: parent id: contentColumn
anchors.margins: 10 anchors.centerIn: parent
width: parent.width - 20
spacing: 10
// anchors.left: parent.left
// anchors.right: parent.right
// anchors.leftMargin: 10
// anchors.rightMargin: 10
RowLayout { RowLayout {
height: 80
width: parent.width width: parent.width
spacing: 10 spacing: 10
@@ -338,31 +378,32 @@ PanelWindow {
Layout.preferredHeight: 48 Layout.preferredHeight: 48
Layout.alignment: Qt.AlignTop | Qt.AlignLeft Layout.alignment: Qt.AlignTop | Qt.AlignLeft
Layout.topMargin: 5 Layout.topMargin: 5
visible: groupHeader.modelData.image !== ""
} }
ColumnLayout { ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
spacing: 4 spacing: 2
Text { Text {
text: groupHeader.modelData.summary text: groupHeader.modelData.summary
color: "white" color: "white"
font.bold: true font.bold: true
font.pointSize: 12 font.pointSize: 16
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
} }
Text { Text {
text: groupHeader.modelData.body text: groupHeader.modelData.body
font.pointSize: 10 font.pointSize: 12
color: "#dddddd" color: "#dddddd"
elide: Text.ElideRight elide: Text.ElideRight
lineHeightMode: Text.FixedHeight lineHeightMode: Text.FixedHeight
lineHeight: 14 lineHeight: 20
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
maximumLineCount: 3 maximumLineCount: 5
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
} }
@@ -380,7 +421,7 @@ PanelWindow {
RowLayout { RowLayout {
spacing: 2 spacing: 2
visible: groupColumn.isExpanded ? ( groupHeader.modelData.actions.length > 1 ? true : false ) : ( groupColumn.notifications.length === 1 ? ( groupHeader.modelData.actions.length > 1 ? true : false ) : false ) visible: groupColumn.isExpanded ? ( groupHeader.modelData.actions.length > 1 ? true : false ) : ( groupColumn.notifications.length === 1 ? ( groupHeader.modelData.actions.length > 1 ? true : false ) : false )
height: 15 height: 30
width: parent.width width: parent.width
Repeater { Repeater {
Modules/Resources.qml
+37 -1
View File
@@ -6,9 +6,15 @@ import qs.Modules
Item { Item {
id: root id: root
implicitWidth: rowLayout.implicitWidth + rowLayout.anchors.leftMargin + rowLayout.anchors.rightMargin implicitWidth: rowLayout.implicitWidth + rowLayout.anchors.leftMargin + rowLayout.anchors.rightMargin
implicitHeight: 34
Rectangle { Rectangle {
anchors.fill: parent anchors {
left: parent.left
right: parent.right
verticalCenter: parent.verticalCenter
}
implicitHeight: 22
color: "#40000000" color: "#40000000"
radius: height / 2 radius: height / 2
RowLayout { RowLayout {
@@ -70,4 +76,34 @@ Item {
} }
} }
} }
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
}
Loader {
anchors.left: parent.left
sourceComponent: mouseArea.containsMouse ? resourcePopout : null
}
Component {
id: resourcePopout
PanelWindow {
anchors {
left: true
top: true
right: true
bottom: true
}
color: "transparent"
Rectangle {
x: mapFromItem(root, 0, 0).x
implicitHeight: 300
implicitWidth: root.implicitWidth
color: "#80000000"
radius: 12
}
}
}
} }
Modules/Notification.qml → Modules/TrackedNotification.qml
+24 -13
View File
@@ -21,11 +21,15 @@ PanelWindow {
required property Notification notif required property Notification notif
required property int centerX required property int centerX
required property list<int> notifIndex required property list<int> notifIndex
required property list<TrackedNotification> notifList
property int index: notifIndex.indexOf(notif.id) property int index: notifIndex.indexOf(notif.id)
property alias y: backgroundRect.y
property alias notifHeight: backgroundRect.implicitHeight
signal notifDestroy() signal notifDestroy()
Component.onCompleted: { Component.onCompleted: {
openAnim.start(); openAnim.start();
console.log(root.index);
} }
Timer { Timer {
@@ -64,9 +68,9 @@ PanelWindow {
Rectangle { Rectangle {
id: backgroundRect id: backgroundRect
implicitWidth: 400 implicitWidth: 400
implicitHeight: 90 implicitHeight: contentLayout.childrenRect.height + 16
x: root.centerX - implicitWidth - 20 x: root.centerX - implicitWidth - 20
y: 34 + 20 + ( root.index * ( implicitHeight + 10 )) y: !root.notifList[ root.index - 1 ] ? 34 + 20 : root.notifList[ root.index - 1 ].y + root.notifList[ root.index - 1 ].notifHeight + 10
color: Config.baseBgColor color: Config.baseBgColor
border.color: "#555555" border.color: "#555555"
radius: 8 radius: 8
@@ -78,28 +82,34 @@ PanelWindow {
} }
} }
Column {
id: contentLayout
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.margins: 10
spacing: 8
RowLayout { RowLayout {
anchors.fill: parent
anchors.margins: 8
spacing: 12 spacing: 12
IconImage { IconImage {
source: root.notif.image source: root.notif.image
Layout.preferredWidth: 64 Layout.preferredWidth: 48
Layout.preferredHeight: 64 Layout.preferredHeight: 48
Layout.alignment: Qt.AlignHCenter | Qt.AlignLeft Layout.alignment: Qt.AlignHCenter | Qt.AlignLeft
visible: root.notif.image !== "" visible: root.notif.image !== ""
} }
ColumnLayout { ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.leftMargin: root.notif.image !== "" ? 0 : 16 Layout.fillHeight: true
Layout.leftMargin: 0
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
Text { Text {
text: root.notif.appName text: root.notif.appName
color: "white" color: "white"
font.bold: true font.bold: true
font.pointSize: 12 font.pointSize: 14
elide: Text.ElideRight elide: Text.ElideRight
wrapMode: Text.NoWrap wrapMode: Text.NoWrap
Layout.fillWidth: true Layout.fillWidth: true
@@ -108,22 +118,23 @@ PanelWindow {
Text { Text {
text: root.notif.summary text: root.notif.summary
color: "white" color: "white"
font.pointSize: 10 font.pointSize: 12
font.bold: true font.bold: true
elide: Text.ElideRight elide: Text.ElideRight
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
} }
}
}
Text { Text {
text: root.notif.body text: root.notif.body
color: "#dddddd" color: "#dddddd"
font.pointSize: 10 font.pointSize: 14
elide: Text.ElideRight elide: Text.ElideRight
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true maximumLineCount: 4
Layout.fillHeight: true width: parent.width
}
} }
} }
Modules/TrayItem.qml
-4
View File
@@ -25,10 +25,6 @@ MouseArea {
Image { Image {
id: icon id: icon
Component.onCompleted: {
console.log(root.item.icon);
}
property bool batteryHDPI: root.bar.screen.x < 0 && root.item.icon.includes("battery") property bool batteryHDPI: root.bar.screen.x < 0 && root.item.icon.includes("battery")
property bool nmHDPI: root.bar.screen.x < 0 && root.item.icon.includes("nm-") property bool nmHDPI: root.bar.screen.x < 0 && root.item.icon.includes("nm-")
Modules/Workspaces.qml
+1 -1
View File
@@ -14,7 +14,7 @@ Rectangle {
property HyprlandMonitor monitor: Hyprland.monitorFor( root.bar?.screen ) property HyprlandMonitor monitor: Hyprland.monitorFor( root.bar?.screen )
implicitWidth: workspacesRow.implicitWidth + 6 implicitWidth: workspacesRow.implicitWidth + 6
implicitHeight: workspacesRow.implicitHeight + 7 implicitHeight: 22
function shouldShow(monitor) { function shouldShow(monitor) {
Hyprland.refreshWorkspaces(); Hyprland.refreshWorkspaces();