Bar: SysMon wrapped in a rounded rectangle

This commit is contained in:
quadbyte 2025-08-17 21:16:10 -04:00
parent a3f830c3fc
commit 9661712829
4 changed files with 153 additions and 65 deletions

View file

@ -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

View file

@ -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

View file

@ -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
// }
// }
// }

View file

@ -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
}
}