From c85a309aeb9c78db3e20e1bc2d8747b5bdeaffa2 Mon Sep 17 00:00:00 2001 From: LemmyCook Date: Fri, 5 Sep 2025 17:23:02 -0400 Subject: [PATCH 1/2] MediaMini: converted to Layout --- Modules/Bar/Widgets/MediaMini.qml | 258 +++++++++++++----------------- 1 file changed, 111 insertions(+), 147 deletions(-) diff --git a/Modules/Bar/Widgets/MediaMini.qml b/Modules/Bar/Widgets/MediaMini.qml index 7d2ffb7..6ce7a59 100644 --- a/Modules/Bar/Widgets/MediaMini.qml +++ b/Modules/Bar/Widgets/MediaMini.qml @@ -7,7 +7,7 @@ import qs.Commons import qs.Services import qs.Widgets -Row { +RowLayout { id: root property ShellScreen screen @@ -15,7 +15,7 @@ Row { readonly property real minWidth: 160 readonly property real maxWidth: 400 - anchors.verticalCenter: parent.verticalCenter + Layout.alignment: Qt.AlignVCenter spacing: Style.marginS * scaling visible: MediaService.currentPlayer !== null && MediaService.canPlay width: MediaService.currentPlayer !== null && MediaService.canPlay ? implicitWidth : 0 @@ -24,7 +24,6 @@ Row { return MediaService.trackTitle + (MediaService.trackArtist !== "" ? ` - ${MediaService.trackArtist}` : "") } - // A hidden text element to safely measure the full title width NText { id: fullTitleMetrics visible: false @@ -34,169 +33,134 @@ Row { Rectangle { id: mediaMini - - // Let the Rectangle size itself based on its content (the Row) - width: row.width + Style.marginM * 2 * scaling - + width: contentLayout.implicitWidth + Style.marginS * 2 * scaling height: Math.round(Style.capsuleHeight * scaling) radius: Math.round(Style.radiusM * scaling) color: Color.mSurfaceVariant + Layout.alignment: Qt.AlignVCenter - anchors.verticalCenter: parent.verticalCenter - - // Used to anchor the tooltip, so the tooltip does not move when the content expands - Item { - id: anchor - height: parent.height - width: 200 * scaling + // --- Visualizer Loaders --- + Loader { + anchors.centerIn: parent + active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "linear" + && MediaService.isPlaying && MediaService.trackLength > 0 + z: 0 + sourceComponent: LinearSpectrum { + width: mediaMini.width - Style.marginS * scaling + height: 20 * scaling + values: CavaService.values + fillColor: Color.mOnSurfaceVariant + opacity: 0.4 + } } - Item { - id: mainContainer - anchors.fill: parent + Loader { + anchors.centerIn: parent + active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "mirrored" + && MediaService.isPlaying && MediaService.trackLength > 0 + z: 0 + sourceComponent: MirroredSpectrum { + width: mediaMini.width - Style.marginS * scaling + height: mediaMini.height - Style.marginS * scaling + values: CavaService.values + fillColor: Color.mOnSurfaceVariant + opacity: 0.4 + } + } + + Loader { + anchors.centerIn: parent + active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "wave" + && MediaService.isPlaying && MediaService.trackLength > 0 + z: 0 + sourceComponent: WaveSpectrum { + width: mediaMini.width - Style.marginS * scaling + height: mediaMini.height - Style.marginS * scaling + values: CavaService.values + fillColor: Color.mOnSurfaceVariant + opacity: 0.4 + } + } + + // --- Main Content Layout --- + RowLayout { + id: contentLayout + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter anchors.leftMargin: Style.marginS * scaling - anchors.rightMargin: Style.marginS * scaling + spacing: Style.marginS * scaling + z: 1 - Loader { - anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: parent.horizontalCenter - active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "linear" - && MediaService.isPlaying && MediaService.trackLength > 0 - z: 0 + NIcon { + id: windowIcon + text: MediaService.isPlaying ? "pause" : "play_arrow" + font.pointSize: Style.fontSizeL * scaling + Layout.alignment: Qt.AlignVCenter + visible: !Settings.data.audio.showMiniplayerAlbumArt && getTitle() !== "" && !trackArt.visible + } - sourceComponent: LinearSpectrum { - width: mainContainer.width - Style.marginS * scaling - height: 20 * scaling - values: CavaService.values - fillColor: Color.mOnSurfaceVariant - opacity: 0.4 - } + NImageCircled { + id: trackArt + imagePath: MediaService.trackArtUrl + fallbackIcon: MediaService.isPlaying ? "pause" : "play_arrow" + borderWidth: 0 + border.color: Color.transparent + Layout.preferredWidth: Math.round(18 * scaling) + Layout.preferredHeight: Math.round(18 * scaling) + Layout.alignment: Qt.AlignVCenter + visible: Settings.data.audio.showMiniplayerAlbumArt + } - Loader { - anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: parent.horizontalCenter - active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "mirrored" - && MediaService.isPlaying && MediaService.trackLength > 0 - z: 0 - - sourceComponent: MirroredSpectrum { - width: mainContainer.width - Style.marginS * scaling - height: mainContainer.height - Style.marginS * scaling - values: CavaService.values - fillColor: Color.mOnSurfaceVariant - opacity: 0.4 + NText { + id: titleText + Layout.preferredWidth: { + if (mouseArea.containsMouse) { + return Math.round(Math.min(fullTitleMetrics.contentWidth, root.maxWidth * scaling)) + } else { + return Math.round(Math.min(fullTitleMetrics.contentWidth, root.minWidth * scaling)) } } + text: getTitle() + font.pointSize: Style.fontSizeS * scaling + font.weight: Style.fontWeightMedium + elide: Text.ElideRight + color: Color.mTertiary + Layout.alignment: Qt.AlignVCenter - Loader { - anchors.verticalCenter: parent.verticalCenter - anchors.horizontalCenter: parent.horizontalCenter - active: Settings.data.audio.showMiniplayerCava && Settings.data.audio.visualizerType == "wave" - && MediaService.isPlaying && MediaService.trackLength > 0 - z: 0 - - sourceComponent: WaveSpectrum { - width: mainContainer.width - Style.marginS * scaling - height: mainContainer.height - Style.marginS * scaling - values: CavaService.values - fillColor: Color.mOnSurfaceVariant - opacity: 0.4 + Behavior on Layout.preferredWidth { + NumberAnimation { + duration: Style.animationSlow + easing.type: Easing.InOutCubic } } } + } - Row { - id: row - anchors.verticalCenter: parent.verticalCenter - spacing: Style.marginS * scaling - z: 1 // Above the visualizer - - NIcon { - id: windowIcon - text: MediaService.isPlaying ? "pause" : "play_arrow" - font.pointSize: Style.fontSizeL * scaling - verticalAlignment: Text.AlignVCenter - anchors.verticalCenter: parent.verticalCenter - visible: !Settings.data.audio.showMiniplayerAlbumArt && getTitle() !== "" && !trackArt.visible - } - - Column { - anchors.verticalCenter: parent.verticalCenter - visible: Settings.data.audio.showMiniplayerAlbumArt - - Item { - width: Math.round(18 * scaling) - height: Math.round(18 * scaling) - - NImageCircled { - id: trackArt - anchors.fill: parent - imagePath: MediaService.trackArtUrl - fallbackIcon: MediaService.isPlaying ? "pause" : "play_arrow" - borderWidth: 0 - border.color: Color.transparent - } - } - } - - NText { - id: titleText - - // For short titles, show full. For long titles, truncate and expand on hover - width: { - if (mouseArea.containsMouse) { - return Math.round(Math.min(fullTitleMetrics.contentWidth, root.maxWidth * scaling)) - } else { - return Math.round(Math.min(fullTitleMetrics.contentWidth, root.minWidth * scaling)) - } - } - text: getTitle() - font.pointSize: Style.fontSizeS * scaling - font.weight: Style.fontWeightMedium - elide: Text.ElideRight - anchors.verticalCenter: parent.verticalCenter - verticalAlignment: Text.AlignVCenter - color: Color.mTertiary - - Behavior on width { - NumberAnimation { - duration: Style.animationSlow - easing.type: Easing.InOutCubic - } - } - } - } - - // Mouse area for hover detection - MouseArea { - id: mouseArea - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton - onClicked: mouse => { - if (mouse.button === Qt.LeftButton) { - MediaService.playPause() - } else if (mouse.button == Qt.RightButton) { - MediaService.next() - // Need to hide the tooltip instantly - tooltip.visible = false - } else if (mouse.button == Qt.MiddleButton) { - MediaService.previous() - // Need to hide the tooltip instantly - tooltip.visible = false - } + MouseArea { + id: mouseArea + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton + onClicked: mouse => { + if (mouse.button === Qt.LeftButton) { + MediaService.playPause() + } else if (mouse.button == Qt.RightButton) { + MediaService.next() + tooltip.visible = false + } else if (mouse.button == Qt.MiddleButton) { + MediaService.previous() + tooltip.visible = false } - - onEntered: { - if (tooltip.text !== "") { - tooltip.show() - } - } - onExited: { - tooltip.hide() + } + onEntered: { + if (tooltip.text !== "") { + tooltip.show() } } + onExited: { + tooltip.hide() + } } } @@ -212,7 +176,7 @@ Row { } return str } - target: anchor + target: mediaMini positionAbove: Settings.data.bar.position === "bottom" } } From 94293e4c6378be2c5d352d6184a6db172b727829 Mon Sep 17 00:00:00 2001 From: LemmyCook Date: Fri, 5 Sep 2025 17:44:04 -0400 Subject: [PATCH 2/2] Bar SysMon: converted to Layout --- Modules/Bar/Widgets/SystemMonitor.qml | 207 +++++++++++++------------- Services/SystemStatService.qml | 2 +- 2 files changed, 105 insertions(+), 104 deletions(-) diff --git a/Modules/Bar/Widgets/SystemMonitor.qml b/Modules/Bar/Widgets/SystemMonitor.qml index ce16aa3..6c2346c 100644 --- a/Modules/Bar/Widgets/SystemMonitor.qml +++ b/Modules/Bar/Widgets/SystemMonitor.qml @@ -1,145 +1,146 @@ import QtQuick +import QtQuick.Layouts import Quickshell import qs.Commons import qs.Services import qs.Widgets -Row { +RowLayout { id: root property ShellScreen screen property real scaling: 1.0 - anchors.verticalCenter: parent.verticalCenter + Layout.alignment: Qt.AlignVCenter spacing: Style.marginS * scaling Rectangle { - // Let the Rectangle size itself based on its content (the Row) - width: row.width + Style.marginM * scaling * 2 + Layout.preferredHeight: Math.round(Style.capsuleHeight * scaling) + Layout.preferredWidth: mainLayout.implicitWidth + Style.marginM * scaling * 2 + Layout.alignment: Qt.AlignVCenter - height: Math.round(Style.capsuleHeight * scaling) radius: Math.round(Style.radiusM * scaling) color: Color.mSurfaceVariant - anchors.verticalCenter: parent.verticalCenter - - Item { - id: mainContainer + RowLayout { + id: mainLayout anchors.fill: parent anchors.leftMargin: Style.marginS * scaling anchors.rightMargin: Style.marginS * scaling + spacing: Style.marginS * scaling - Row { - id: row - anchors.verticalCenter: parent.verticalCenter - spacing: Style.marginS * scaling - Row { - id: cpuUsageLayout - spacing: Style.marginXS * scaling + // CPU Usage Component + RowLayout { + id: cpuUsageLayout + spacing: Style.marginXS * scaling + Layout.alignment: Qt.AlignVCenter - NIcon { - id: cpuUsageIcon - text: "speed" - anchors.verticalCenter: parent.verticalCenter - } - - NText { - id: cpuUsageText - text: `${SystemStatService.cpuUsage}%` - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeS * scaling - font.weight: Style.fontWeightMedium - anchors.verticalCenter: parent.verticalCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary - } + NIcon { + id: cpuUsageIcon + text: "speed" + Layout.alignment: Qt.AlignVCenter } - // CPU Temperature Component - Row { - id: cpuTempLayout - // spacing is thin here to compensate for the vertical thermometer icon - spacing: Style.marginXXS * scaling + NText { + id: cpuUsageText + text: `${SystemStatService.cpuUsage}%` + font.family: Settings.data.ui.fontFixed + font.pointSize: Style.fontSizeS * scaling + font.weight: Style.fontWeightMedium + Layout.alignment: Qt.AlignVCenter + verticalAlignment: Text.AlignVCenter + color: Color.mPrimary + } + } - NIcon { - text: "thermometer" - anchors.verticalCenter: parent.verticalCenter - } + // CPU Temperature Component + RowLayout { + id: cpuTempLayout + // spacing is thin here to compensate for the vertical thermometer icon + spacing: Style.marginXXS * scaling + Layout.alignment: Qt.AlignVCenter - NText { - text: `${SystemStatService.cpuTemp}°C` - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeS * scaling - font.weight: Style.fontWeightMedium - anchors.verticalCenter: parent.verticalCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary - } + NIcon { + text: "thermometer" + Layout.alignment: Qt.AlignVCenter } - // Memory Usage Component - Row { - id: memoryUsageLayout - spacing: Style.marginXS * scaling + NText { + text: `${SystemStatService.cpuTemp}°C` + font.family: Settings.data.ui.fontFixed + font.pointSize: Style.fontSizeS * scaling + font.weight: Style.fontWeightMedium + Layout.alignment: Qt.AlignVCenter + verticalAlignment: Text.AlignVCenter + color: Color.mPrimary + } + } - NIcon { - text: "memory" - anchors.verticalCenter: parent.verticalCenter - } + // Memory Usage Component + RowLayout { + id: memoryUsageLayout + spacing: Style.marginXS * scaling + Layout.alignment: Qt.AlignVCenter - NText { - text: `${SystemStatService.memoryUsageGb}G` - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeS * scaling - font.weight: Style.fontWeightMedium - anchors.verticalCenter: parent.verticalCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary - } + NIcon { + text: "memory" + Layout.alignment: Qt.AlignVCenter } - // Network Download Speed Component - Row { - id: networkDownloadLayout - spacing: Style.marginXS * scaling - visible: Settings.data.bar.showNetworkStats + NText { + text: `${SystemStatService.memoryUsageGb}G` + font.family: Settings.data.ui.fontFixed + font.pointSize: Style.fontSizeS * scaling + font.weight: Style.fontWeightMedium + Layout.alignment: Qt.AlignVCenter + verticalAlignment: Text.AlignVCenter + color: Color.mPrimary + } + } - NIcon { - text: "download" - anchors.verticalCenter: parent.verticalCenter - } + // Network Download Speed Component + RowLayout { + id: networkDownloadLayout + spacing: Style.marginXS * scaling + Layout.alignment: Qt.AlignVCenter + visible: Settings.data.bar.showNetworkStats - NText { - text: SystemStatService.formatSpeed(SystemStatService.rxSpeed) - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeS * scaling - font.weight: Style.fontWeightMedium - anchors.verticalCenter: parent.verticalCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary - } + NIcon { + text: "download" + Layout.alignment: Qt.AlignVCenter } - // Network Upload Speed Component - Row { - id: networkUploadLayout - spacing: Style.marginXS * scaling - visible: Settings.data.bar.showNetworkStats + NText { + text: SystemStatService.formatSpeed(SystemStatService.rxSpeed) + font.family: Settings.data.ui.fontFixed + font.pointSize: Style.fontSizeS * scaling + font.weight: Style.fontWeightMedium + Layout.alignment: Qt.AlignVCenter + verticalAlignment: Text.AlignVCenter + color: Color.mPrimary + } + } - NIcon { - text: "upload" - anchors.verticalCenter: parent.verticalCenter - } + // Network Upload Speed Component + RowLayout { + id: networkUploadLayout + spacing: Style.marginXS * scaling + Layout.alignment: Qt.AlignVCenter + visible: Settings.data.bar.showNetworkStats - NText { - text: SystemStatService.formatSpeed(SystemStatService.txSpeed) - font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeS * scaling - font.weight: Style.fontWeightMedium - anchors.verticalCenter: parent.verticalCenter - verticalAlignment: Text.AlignVCenter - color: Color.mPrimary - } + NIcon { + text: "upload" + Layout.alignment: Qt.AlignVCenter + } + + NText { + text: SystemStatService.formatSpeed(SystemStatService.txSpeed) + font.family: Settings.data.ui.fontFixed + font.pointSize: Style.fontSizeS * scaling + font.weight: Style.fontWeightMedium + Layout.alignment: Qt.AlignVCenter + verticalAlignment: Text.AlignVCenter + color: Color.mPrimary } } } diff --git a/Services/SystemStatService.qml b/Services/SystemStatService.qml index 57a7346..4f09c1d 100644 --- a/Services/SystemStatService.qml +++ b/Services/SystemStatService.qml @@ -22,7 +22,7 @@ Singleton { if (bytesPerSecond < 1024) { return bytesPerSecond.toFixed(0) + "B/s" } else if (bytesPerSecond < 1024 * 1024) { - return (bytesPerSecond / 1024).toFixed(1) + "KB/s" + return (bytesPerSecond / 1024).toFixed(0) + "KB/s" } else if (bytesPerSecond < 1024 * 1024 * 1024) { return (bytesPerSecond / (1024 * 1024)).toFixed(1) + "MB/s" } else {