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
+  Rectangle {
-  width: Math.floor(cpuUsageLayout.width + cpuTempLayout.width + memoryUsageLayout.width + (2 * 10))
+    // 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 {
+    radius: Style.radiusSmall * scaling
-    id: cpuUsageLayout
+    anchors.verticalCenter: parent.verticalCenter
-    spacing: Style.marginTiny * scaling
 
-    NIcon {
+    Item {
-      id: cpuUsageIcon
+      id: mainContainer
-      text: "speed"
+      anchors.fill: parent
-      anchors.verticalCenter: parent.verticalCenter
+      anchors.leftMargin: Style.marginSmall * scaling
-    }
+      anchors.rightMargin: Style.marginSmall * scaling
 
-    NText {
+      Row {
-      id: cpuUsageText
+        id: row
-      text: `${SystemStatService.cpuUsage}%`
+        anchors.verticalCenter: parent.verticalCenter
-      font.pointSize: Style.fontSizeReduced * scaling
+        spacing: Style.marginTiny * scaling
-      font.weight: Style.fontWeightBold
+        Row {
-      anchors.verticalCenter: parent.verticalCenter
+          id: cpuUsageLayout
-      verticalAlignment: Text.AlignVCenter
+          spacing: Style.marginTiny * scaling
-      color: Color.mPrimary
-    }
-  }
 
-  // CPU Temperature Component
+          NIcon {
-  Row {
+            id: cpuUsageIcon
-    id: cpuTempLayout
+            text: "speed"
-    spacing: Style.marginTiny * scaling
+            anchors.verticalCenter: parent.verticalCenter
+          }
 
-    NIcon {
+          NText {
-      text: "thermometer"
+            id: cpuUsageText
-      anchors.verticalCenter: parent.verticalCenter
+            text: `${SystemStatService.cpuUsage}%`
-    }
+            font.pointSize: Style.fontSizeReduced * scaling
+            font.weight: Style.fontWeightBold
+            anchors.verticalCenter: parent.verticalCenter
+            verticalAlignment: Text.AlignVCenter
+            color: Color.mPrimary
+          }
+        }
 
-    NText {
+        // CPU Temperature Component
-      text: `${SystemStatService.cpuTemp}°C`
+        Row {
-      font.pointSize: Style.fontSizeReduced * scaling
+          id: cpuTempLayout
-      font.weight: Style.fontWeightBold
+          spacing: Style.marginTiny * scaling
-      anchors.verticalCenter: parent.verticalCenter
-      verticalAlignment: Text.AlignVCenter
-      color: Color.mPrimary
-    }
-  }
 
-  // Memory Usage Component
+          NIcon {
-  Row {
+            text: "thermometer"
-    id: memoryUsageLayout
+            anchors.verticalCenter: parent.verticalCenter
-    spacing: Style.marginTiny * scaling
+          }
 
-    NIcon {
+          NText {
-      text: "memory"
+            text: `${SystemStatService.cpuTemp}°C`
-      anchors.verticalCenter: parent.verticalCenter
+            font.pointSize: Style.fontSizeReduced * scaling
-    }
+            font.weight: Style.fontWeightBold
+            anchors.verticalCenter: parent.verticalCenter
+            verticalAlignment: Text.AlignVCenter
+            color: Color.mPrimary
+          }
+        }
 
-    NText {
+        // Memory Usage Component
-      text: `${SystemStatService.memoryUsageGb}G`
+        Row {
-      font.pointSize: Style.fontSizeReduced * scaling
+          id: memoryUsageLayout
-      font.weight: Style.fontWeightBold
+          spacing: Style.marginTiny * scaling
-      anchors.verticalCenter: parent.verticalCenter
+
-      verticalAlignment: Text.AlignVCenter
+          NIcon {
-      color: Color.mPrimary
+            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
+//     }
+//   }
+// }
+

Modules/LockScreen/LockScreen.qml

@@ -694,7 +694,8 @@ WlSessionLock {
         width: 64 * scaling
         height: 64 * scaling
         radius: Style.radiusLarge * scaling
-        color: shutdownArea.containsMouse ? Color.applyOpacity(Color.mError, "DD") : Color.applyOpacity(Color.mError, "22")
+        color: shutdownArea.containsMouse ? Color.applyOpacity(Color.mError,
+                                                               "DD") : Color.applyOpacity(Color.mError, "22")
         border.color: Color.mError
         border.width: Math.max(1, Style.borderMedium * scaling)
 
@@ -748,7 +749,8 @@ WlSessionLock {
         width: 64 * scaling
         height: 64 * scaling
         radius: Style.radiusLarge * scaling
-        color: rebootArea.containsMouse ? Color.applyOpacity(Color.mPrimary, "DD") : Color.applyOpacity(Color.mPrimary, "22")
+        color: rebootArea.containsMouse ? Color.applyOpacity(Color.mPrimary,
+                                                             "DD") : Color.applyOpacity(Color.mPrimary, "22")
         border.color: Color.mPrimary
         border.width: Math.max(1, Style.borderMedium * scaling)
 
@@ -801,7 +803,8 @@ WlSessionLock {
         width: 64 * scaling
         height: 64 * scaling
         radius: Style.radiusLarge * scaling
-        color: logoutArea.containsMouse ? Color.applyOpacity(Color.mSecondary, "DD") : Color.applyOpacity(Color.mSecondary, "22")
+        color: logoutArea.containsMouse ? Color.applyOpacity(Color.mSecondary,
+                                                             "DD") : Color.applyOpacity(Color.mSecondary, "22")
         border.color: Color.mSecondary
         border.width: Math.max(1, Style.borderMedium * scaling)
 
@@ -849,7 +852,6 @@ WlSessionLock {
           }
         }
         scale: logoutArea.containsMouse ? 1.1 : 1.0
-
       }
     }