diff --git a/Modules/ControlCenter/Cards/MediaCard.qml b/Modules/ControlCenter/Cards/MediaCard.qml index f1cc47d5..768fcc44 100644 --- a/Modules/ControlCenter/Cards/MediaCard.qml +++ b/Modules/ControlCenter/Cards/MediaCard.qml @@ -119,7 +119,7 @@ NBox { ColumnLayout { anchors.fill: parent - anchors.margins: Style.marginL * scaling + anchors.margins: Style.marginM * scaling // No media player detected ColumnLayout { @@ -225,7 +225,7 @@ NBox { id: main visible: MediaService.currentPlayer && MediaService.canPlay - spacing: Style.marginM * scaling + spacing: Style.marginS * scaling // Player selector Rectangle { @@ -296,7 +296,7 @@ NBox { // Spacer to push content down Item { - Layout.fillHeight: true + Layout.preferredHeight: Style.marginM * scaling } // Metadata at the bottom left @@ -308,7 +308,7 @@ NBox { NText { visible: MediaService.trackTitle !== "" text: MediaService.trackTitle - pointSize: Style.fontSizeXL * scaling + pointSize: Style.fontSizeM * scaling font.weight: Style.fontWeightBold elide: Text.ElideRight wrapMode: Text.Wrap @@ -320,7 +320,7 @@ NBox { visible: MediaService.trackArtist !== "" text: MediaService.trackArtist color: Color.mPrimary - pointSize: Style.fontSizeL * scaling + pointSize: Style.fontSizeS * scaling elide: Text.ElideRight Layout.fillWidth: true } @@ -410,7 +410,7 @@ NBox { // Media controls RowLayout { - spacing: Style.marginM * scaling + spacing: Style.marginS * scaling Layout.fillWidth: true Layout.alignment: Qt.AlignHCenter diff --git a/Modules/ControlCenter/Cards/SystemMonitorCard.qml b/Modules/ControlCenter/Cards/SystemMonitorCard.qml index 67ca2c68..351d4c68 100644 --- a/Modules/ControlCenter/Cards/SystemMonitorCard.qml +++ b/Modules/ControlCenter/Cards/SystemMonitorCard.qml @@ -9,24 +9,22 @@ import qs.Widgets NBox { id: root - ColumnLayout { + GridLayout { id: content - anchors.left: parent.left - anchors.right: parent.right - anchors.top: parent.top - anchors.leftMargin: Style.marginS * scaling - anchors.rightMargin: Style.marginS * scaling - anchors.topMargin: Style.marginXS * scaling - anchors.bottomMargin: Style.marginM * scaling - spacing: Style.marginS * scaling + anchors.fill: parent + anchors.margins: Style.marginXS * scaling + columns: 2 + rows: 2 + columnSpacing: Style.marginS * scaling + rowSpacing: Style.marginS * scaling NCircleStat { value: SystemStatService.cpuUsage icon: "cpu-usage" flat: true contentScale: 0.8 - width: 72 * scaling - height: 68 * scaling + Layout.fillWidth: true + Layout.fillHeight: true } NCircleStat { value: SystemStatService.cpuTemp @@ -34,24 +32,24 @@ NBox { icon: "cpu-temperature" flat: true contentScale: 0.8 - width: 72 * scaling - height: 68 * scaling + Layout.fillWidth: true + Layout.fillHeight: true } NCircleStat { value: SystemStatService.memPercent icon: "memory" flat: true contentScale: 0.8 - width: 72 * scaling - height: 68 * scaling + Layout.fillWidth: true + Layout.fillHeight: true } NCircleStat { value: SystemStatService.diskPercent icon: "storage" flat: true contentScale: 0.8 - width: 72 * scaling - height: 68 * scaling + Layout.fillWidth: true + Layout.fillHeight: true } } } diff --git a/Modules/ControlCenter/ControlCenterPanel.qml b/Modules/ControlCenter/ControlCenterPanel.qml index 2840abc2..1568ba55 100644 --- a/Modules/ControlCenter/ControlCenterPanel.qml +++ b/Modules/ControlCenter/ControlCenterPanel.qml @@ -11,7 +11,7 @@ NPanel { id: root preferredWidth: 460 - preferredHeight: 688 + preferredHeight: 580 panelKeyboardFocus: true // Positioning @@ -51,19 +51,19 @@ NPanel { // Media + stats column RowLayout { Layout.fillWidth: true - Layout.preferredHeight: Math.max(304 * scaling) + Layout.preferredHeight: Math.max(196 * scaling) spacing: content.cardSpacing // Media card MediaCard { - Layout.fillWidth: true + Layout.preferredWidth: Math.max(260 * scaling) Layout.fillHeight: true } // System monitors combined in one card SystemMonitorCard { - Layout.preferredWidth: Style.baseWidgetSize * 2.625 * scaling - Layout.fillHeight: true + Layout.preferredWidth: Math.max(160 * scaling) + Layout.preferredHeight: Math.max(196 * scaling) } } } diff --git a/Widgets/NCircleStat.qml b/Widgets/NCircleStat.qml index 3367c61a..53177d07 100644 --- a/Widgets/NCircleStat.qml +++ b/Widgets/NCircleStat.qml @@ -11,7 +11,6 @@ Rectangle { property real value: 0 // 0..100 (or any range visually mapped) property string icon: "" property string suffix: "%" - // When nested inside a parent group (NBox), you can make it flat property bool flat: false // Scales the internal content (labels, gauge, icon) without changing the @@ -47,25 +46,31 @@ Rectangle { id: gauge anchors.fill: parent renderStrategy: Canvas.Cooperative + onPaint: { const ctx = getContext("2d") const w = width, h = height const cx = w / 2, cy = h / 2 const r = Math.min(w, h) / 2 - 5 * scaling * contentScale - // 240° arc with a 120° gap centered on the right side - // Start at 60° and end at 300° → balanced right-side opening - const start = Math.PI / 3 - const endBg = Math.PI * 5 / 3 + + // Rotated 90° to the right: gap at the bottom + // Start at 150° and end at 390° (30°) → bottom opening + const start = Math.PI * 5 / 6 // 150° + const endBg = Math.PI * 13 / 6 // 390° (equivalent to 30°) + ctx.reset() ctx.lineWidth = 6 * scaling * contentScale + // Track uses surfaceVariant for stronger contrast ctx.strokeStyle = Color.mSurface ctx.beginPath() ctx.arc(cx, cy, r, start, endBg) ctx.stroke() + // Value arc const ratio = Math.max(0, Math.min(1, root.value / 100)) const end = start + (endBg - start) * ratio + ctx.strokeStyle = Color.mPrimary ctx.beginPath() ctx.arc(cx, cy, r, start, end) @@ -77,6 +82,7 @@ Rectangle { NText { id: valueLabel anchors.centerIn: parent + anchors.verticalCenterOffset: -4 * scaling * contentScale text: `${root.value}${root.suffix}` pointSize: Style.fontSizeM * scaling * contentScale font.weight: Style.fontWeightBold @@ -84,24 +90,23 @@ Rectangle { horizontalAlignment: Text.AlignHCenter } - // Tiny circular badge for the icon, positioned using anchors within the gauge + // Tiny circular badge for the icon, positioned inside below the percentage Rectangle { id: iconBadge - width: iconText.implicitWidth + Style.marginXS * scaling + width: iconText.implicitWidth + Style.marginXXS * scaling height: width radius: width / 2 color: Color.mPrimary - anchors.right: parent.right - anchors.top: parent.top - anchors.rightMargin: -2 * scaling - anchors.topMargin: -2 * scaling + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: valueLabel.bottom + anchors.topMargin: 8 * scaling * contentScale NIcon { id: iconText anchors.centerIn: parent icon: root.icon color: Color.mOnPrimary - pointSize: Style.fontSizeM * scaling + pointSize: Style.fontSizeS * scaling horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter }