Bar: SysMon wrapped in a rounded rectangle

Modules/Bar/ActiveWindow.qml

@@ -38,12 +38,8 @@ Row {
     }
   }
 
-  function getFocusedWindow() {
-    return CompositorService.getFocusedWindow()
-  }
-
   function getTitle() {
-    const focusedWindow = getFocusedWindow()
+    const focusedWindow = CompositorService.getFocusedWindow()
     return focusedWindow ? (focusedWindow.title || focusedWindow.appId || "") : ""
   }
 
@@ -58,7 +54,7 @@ Row {
   Rectangle {
     // Let the Rectangle size itself based on its content (the Row)
     width: row.width + Style.marginMedium * scaling * 2
-    height: row.height + Style.marginSmall * scaling
+    height: row.height
     color: Color.mSurfaceVariant
     radius: Style.radiusSmall * scaling
     anchors.verticalCenter: parent.verticalCenter

Modules/Bar/MediaMini.qml

@@ -27,7 +27,7 @@ Row {
   Rectangle {
     // Let the Rectangle size itself based on its content (the Row)
     width: row.width + Style.marginMedium * scaling * 2
-    height: row.height + Style.marginSmall * scaling
+    height: row.height
     color: Color.mSurfaceVariant
     radius: Style.radiusSmall * scaling
     anchors.verticalCenter: parent.verticalCenter

Modules/Bar/SystemMonitor.qml

@@ -5,72 +5,162 @@ import qs.Services
 import qs.Widgets
 
 Row {
-  id: layout
+  id: root
   anchors.verticalCenter: parent.verticalCenter
   spacing: Style.marginSmall * scaling
-  visible: Settings.data.bar.showSystemInfo
+  visible: (Settings.data.bar.showSystemInfo)
 
-  // Ensure our width is an integer
-  width: Math.floor(cpuUsageLayout.width + cpuTempLayout.width + memoryUsageLayout.width + (2 * 10))
+  Rectangle {
+    // Let the Rectangle size itself based on its content (the Row)
+    width: row.width + Style.marginMedium * scaling * 2
+    height: row.height
+    color: Color.mSurfaceVariant
 
-  Row {
-    id: cpuUsageLayout
-    spacing: Style.marginTiny * scaling
+    radius: Style.radiusSmall * scaling
+    anchors.verticalCenter: parent.verticalCenter
 
-    NIcon {
-      id: cpuUsageIcon
-      text: "speed"
-      anchors.verticalCenter: parent.verticalCenter
-    }
+    Item {
+      id: mainContainer
+      anchors.fill: parent
+      anchors.leftMargin: Style.marginSmall * scaling
+      anchors.rightMargin: Style.marginSmall * scaling
 
-    NText {
-      id: cpuUsageText
-      text: `${SystemStatService.cpuUsage}%`
-      font.pointSize: Style.fontSizeReduced * scaling
-      font.weight: Style.fontWeightBold
-      anchors.verticalCenter: parent.verticalCenter
-      verticalAlignment: Text.AlignVCenter
-      color: Color.mPrimary
-    }
-  }
+      Row {
+        id: row
+        anchors.verticalCenter: parent.verticalCenter
+        spacing: Style.marginTiny * scaling
+        Row {
+          id: cpuUsageLayout
+          spacing: Style.marginTiny * scaling
 
-  // CPU Temperature Component
-  Row {
-    id: cpuTempLayout
-    spacing: Style.marginTiny * scaling
+          NIcon {
+            id: cpuUsageIcon
+            text: "speed"
+            anchors.verticalCenter: parent.verticalCenter
+          }
 
-    NIcon {
-      text: "thermometer"
-      anchors.verticalCenter: parent.verticalCenter
-    }
+          NText {
+            id: cpuUsageText
+            text: `${SystemStatService.cpuUsage}%`
+            font.pointSize: Style.fontSizeReduced * scaling
+            font.weight: Style.fontWeightBold
+            anchors.verticalCenter: parent.verticalCenter
+            verticalAlignment: Text.AlignVCenter
+            color: Color.mPrimary
+          }
+        }
 
-    NText {
-      text: `${SystemStatService.cpuTemp}°C`
-      font.pointSize: Style.fontSizeReduced * scaling
-      font.weight: Style.fontWeightBold
-      anchors.verticalCenter: parent.verticalCenter
-      verticalAlignment: Text.AlignVCenter
-      color: Color.mPrimary
-    }
-  }
+        // CPU Temperature Component
+        Row {
+          id: cpuTempLayout
+          spacing: Style.marginTiny * scaling
 
-  // Memory Usage Component
-  Row {
-    id: memoryUsageLayout
-    spacing: Style.marginTiny * scaling
+          NIcon {
+            text: "thermometer"
+            anchors.verticalCenter: parent.verticalCenter
+          }
 
-    NIcon {
-      text: "memory"
-      anchors.verticalCenter: parent.verticalCenter
-    }
+          NText {
+            text: `${SystemStatService.cpuTemp}°C`
+            font.pointSize: Style.fontSizeReduced * scaling
+            font.weight: Style.fontWeightBold
+            anchors.verticalCenter: parent.verticalCenter
+            verticalAlignment: Text.AlignVCenter
+            color: Color.mPrimary
+          }
+        }
 
-    NText {
-      text: `${SystemStatService.memoryUsageGb}G`
-      font.pointSize: Style.fontSizeReduced * scaling
-      font.weight: Style.fontWeightBold
-      anchors.verticalCenter: parent.verticalCenter
-      verticalAlignment: Text.AlignVCenter
-      color: Color.mPrimary
+        // Memory Usage Component
+        Row {
+          id: memoryUsageLayout
+          spacing: Style.marginTiny * scaling
+
+          NIcon {
+            text: "memory"
+            anchors.verticalCenter: parent.verticalCenter
+          }
+
+          NText {
+            text: `${SystemStatService.memoryUsageGb}G`
+            font.pointSize: Style.fontSizeReduced * scaling
+            font.weight: Style.fontWeightBold
+            anchors.verticalCenter: parent.verticalCenter
+            verticalAlignment: Text.AlignVCenter
+            color: Color.mPrimary
+          }
+        }
+      }
     }
   }
 }
+// Row {
+//   id: layout
+//   anchors.verticalCenter: parent.verticalCenter
+//   spacing: Style.marginSmall * scaling
+//   visible: Settings.data.bar.showSystemInfo
+
+//   // Ensure our width is an integer
+//   width: Math.floor(cpuUsageLayout.width + cpuTempLayout.width + memoryUsageLayout.width + (2 * 10))
+
+//   Row {
+//     id: cpuUsageLayout
+//     spacing: Style.marginTiny * scaling
+
+//     NIcon {
+//       id: cpuUsageIcon
+//       text: "speed"
+//       anchors.verticalCenter: parent.verticalCenter
+//     }
+
+//     NText {
+//       id: cpuUsageText
+//       text: `${SystemStatService.cpuUsage}%`
+//       font.pointSize: Style.fontSizeReduced * scaling
+//       font.weight: Style.fontWeightBold
+//       anchors.verticalCenter: parent.verticalCenter
+//       verticalAlignment: Text.AlignVCenter
+//       color: Color.mPrimary
+//     }
+//   }
+
+//   // CPU Temperature Component
+//   Row {
+//     id: cpuTempLayout
+//     spacing: Style.marginTiny * scaling
+
+//     NIcon {
+//       text: "thermometer"
+//       anchors.verticalCenter: parent.verticalCenter
+//     }
+
+//     NText {
+//       text: `${SystemStatService.cpuTemp}°C`
+//       font.pointSize: Style.fontSizeReduced * scaling
+//       font.weight: Style.fontWeightBold
+//       anchors.verticalCenter: parent.verticalCenter
+//       verticalAlignment: Text.AlignVCenter
+//       color: Color.mPrimary
+//     }
+//   }
+
+//   // Memory Usage Component
+//   Row {
+//     id: memoryUsageLayout
+//     spacing: Style.marginTiny * scaling
+
+//     NIcon {
+//       text: "memory"
+//       anchors.verticalCenter: parent.verticalCenter
+//     }
+
+//     NText {
+//       text: `${SystemStatService.memoryUsageGb}G`
+//       font.pointSize: Style.fontSizeReduced * scaling
+//       font.weight: Style.fontWeightBold
+//       anchors.verticalCenter: parent.verticalCenter
+//       verticalAlignment: Text.AlignVCenter
+//       color: Color.mPrimary
+//     }
+//   }
+// }
+