From a2cd3778370b74546a786231e8ed9de231863c9c Mon Sep 17 00:00:00 2001 From: ItsLemmy Date: Sun, 12 Oct 2025 15:25:09 -0400 Subject: [PATCH] New scaling wip --- Commons/Style.qml | 44 +++++++++++-------- Modules/ControlCenter/Cards/ProfileCard.qml | 8 ++-- .../ControlCenter/Cards/SystemMonitorCard.qml | 10 +++-- Modules/ControlCenter/ControlCenterPanel.qml | 40 +++++++++-------- Modules/Settings/Tabs/AboutTab.qml | 3 +- Modules/Settings/Tabs/BarTab.qml | 3 ++ Widgets/NIcon.qml | 2 +- Widgets/NIconButton.qml | 2 +- Widgets/NText.qml | 2 +- 9 files changed, 65 insertions(+), 49 deletions(-) diff --git a/Commons/Style.qml b/Commons/Style.qml index c5a028a79..3b09b3a01 100644 --- a/Commons/Style.qml +++ b/Commons/Style.qml @@ -36,7 +36,7 @@ Singleton { property int radiusL: Math.round(20 * Settings.data.general.radiusRatio) //screen Radii - property int screenRadius: 20 * Settings.data.general.screenRadiusRatio + property int screenRadius: Math.round(20 * Settings.data.general.screenRadiusRatio) // Border property int borderS: 1 @@ -44,12 +44,14 @@ Singleton { property int borderL: 3 // Margins (for margins and spacing) - property int marginXXS: 2 - property int marginXS: 4 - property int marginS: 6 - property int marginM: 9 - property int marginL: 13 - property int marginXL: 18 + property int marginXXS: Math.round(2 * uiScaleRatio) + property int marginXS: Math.round(4 * uiScaleRatio) + property int marginS: Math.round(6 * uiScaleRatio) + property int marginM: Math.round(9 * uiScaleRatio) + property int marginL: Math.round(13 * uiScaleRatio) + property int marginXL: Math.round(18 * uiScaleRatio) + + property real uiScaleRatio: 0.8 // Opacity property real opacityNone: 0.0 @@ -76,25 +78,29 @@ Singleton { // Bar Dimensions property real barHeight: { - if (Settings.data.bar.density === "compact") { + switch (Settings.data.bar.density) { + case "mini": + return (Settings.data.bar.position === "left" || Settings.data.bar.position === "right") ? 22 : 20 + case "compact": return (Settings.data.bar.position === "left" || Settings.data.bar.position === "right") ? 27 : 25 - } - if (Settings.data.bar.density === "default") { - return (Settings.data.bar.position === "left" || Settings.data.bar.position === "right") ? 33 : 31 - } - if (Settings.data.bar.density === "comfortable") { + case "comfortable": return (Settings.data.bar.position === "left" || Settings.data.bar.position === "right") ? 39 : 37 + default: + case "default": + return (Settings.data.bar.position === "left" || Settings.data.bar.position === "right") ? 33 : 31 } } property real capsuleHeight: { - if (Settings.data.bar.density === "compact") { + switch (Settings.data.bar.density) { + case "mini": + return barHeight * 1.0 + case "compact": return barHeight * 0.85 - } - if (Settings.data.bar.density === "default") { - return barHeight * 0.82 - } - if (Settings.data.bar.density === "comfortable") { + case "comfortable": return barHeight * 0.73 + default: + case "default": + return barHeight * 0.82 } } } diff --git a/Modules/ControlCenter/Cards/ProfileCard.qml b/Modules/ControlCenter/Cards/ProfileCard.qml index 51ea1025b..70f330dc5 100644 --- a/Modules/ControlCenter/Cards/ProfileCard.qml +++ b/Modules/ControlCenter/Cards/ProfileCard.qml @@ -17,20 +17,21 @@ NBox { property string uptimeText: "--" RowLayout { - id: content anchors.left: parent.left anchors.right: parent.right anchors.top: parent.top + anchors.bottom: parent.bottom anchors.margins: Style.marginM spacing: Style.marginM NImageCircled { - width: Style.baseWidgetSize * 1.25 - height: Style.baseWidgetSize * 1.25 + width: Math.round(Style.baseWidgetSize * 1.25 * Style.uiScaleRatio) + height: width imagePath: Settings.data.general.avatarImage fallbackIcon: "person" borderColor: Color.mPrimary borderWidth: Math.max(1, Style.borderM) + } ColumnLayout { @@ -84,6 +85,7 @@ NBox { } } + // ---------------------------------- // Uptime Timer { diff --git a/Modules/ControlCenter/Cards/SystemMonitorCard.qml b/Modules/ControlCenter/Cards/SystemMonitorCard.qml index 7a6e12106..3e23aa893 100644 --- a/Modules/ControlCenter/Cards/SystemMonitorCard.qml +++ b/Modules/ControlCenter/Cards/SystemMonitorCard.qml @@ -14,6 +14,8 @@ NBox { anchors.fill: parent anchors.margins: Style.marginS + property int widgetHeight: Math.round(65 * Style.uiScaleRatio) + ColumnLayout { anchors.centerIn: parent spacing: 0 @@ -23,7 +25,7 @@ NBox { icon: "cpu-usage" flat: true contentScale: 0.8 - height: 65 + height: content.widgetHeight Layout.alignment: Qt.AlignHCenter } NCircleStat { @@ -32,7 +34,7 @@ NBox { icon: "cpu-temperature" flat: true contentScale: 0.8 - height: 65 + height: content.widgetHeight Layout.alignment: Qt.AlignHCenter } NCircleStat { @@ -40,7 +42,7 @@ NBox { icon: "memory" flat: true contentScale: 0.8 - height: 65 + height: content.widgetHeight Layout.alignment: Qt.AlignHCenter } NCircleStat { @@ -48,7 +50,7 @@ NBox { icon: "storage" flat: true contentScale: 0.8 - height: 65 + height: content.widgetHeight Layout.alignment: Qt.AlignHCenter } } diff --git a/Modules/ControlCenter/ControlCenterPanel.qml b/Modules/ControlCenter/ControlCenterPanel.qml index 030bcc1ed..cb1bdec65 100644 --- a/Modules/ControlCenter/ControlCenterPanel.qml +++ b/Modules/ControlCenter/ControlCenterPanel.qml @@ -10,8 +10,8 @@ import qs.Widgets NPanel { id: root - preferredWidth: 460 - preferredHeight: 790 + preferredWidth: Math.round(460 * Style.uiScaleRatio) + preferredHeight: (profileHeight + weatherHeight + mediaSysMonHeight + audioHeight + bottomHeight) + 6 * Style.marginL panelKeyboardFocus: true // Positioning @@ -23,35 +23,39 @@ NPanel { panelAnchorBottom: controlCenterPosition !== "close_to_bar_button" && controlCenterPosition.startsWith("bottom_") panelAnchorTop: controlCenterPosition !== "close_to_bar_button" && controlCenterPosition.startsWith("top_") + readonly property int profileHeight: Math.round(64 * Style.uiScaleRatio) + readonly property int weatherHeight: Math.round(190 * Style.uiScaleRatio) + readonly property int mediaSysMonHeight: Math.round(260 * Style.uiScaleRatio) + readonly property int audioHeight: Math.round(120 * Style.uiScaleRatio) + readonly property int bottomHeight: Math.round(60 * Style.uiScaleRatio) + panelContent: Item { id: content - property real cardSpacing: Style.marginL - // Layout content ColumnLayout { id: layout - x: content.cardSpacing - y: content.cardSpacing - width: parent.width - (2 * content.cardSpacing) - spacing: content.cardSpacing + x: Style.marginL + y: Style.marginL + width: parent.width - (Style.marginL * 2) + spacing: Style.marginL // Cards (consistent inter-card spacing via ColumnLayout spacing) ProfileCard { Layout.fillWidth: true - Layout.preferredHeight: Math.max(64) + Layout.preferredHeight: profileHeight } WeatherCard { Layout.fillWidth: true - Layout.preferredHeight: Math.max(190) + Layout.preferredHeight: weatherHeight } // Middle section: media + stats column RowLayout { Layout.fillWidth: true - Layout.preferredHeight: Math.max(260) - spacing: content.cardSpacing + Layout.preferredHeight: mediaSysMonHeight + spacing: Style.marginL // Media card MediaCard { @@ -61,7 +65,7 @@ NPanel { // System monitors combined in one card SystemMonitorCard { - Layout.preferredWidth: Style.baseWidgetSize * 2.625 + Layout.preferredWidth: Math.round(Style.baseWidgetSize * 2.625) Layout.fillHeight: true } } @@ -69,27 +73,27 @@ NPanel { // Audio card below media and system monitor AudioCard { Layout.fillWidth: true - Layout.preferredHeight: Math.max(120) + Layout.preferredHeight: audioHeight } // Bottom actions (two grouped rows of round buttons) RowLayout { Layout.fillWidth: true - Layout.preferredHeight: Math.max(60) - spacing: content.cardSpacing + Layout.preferredHeight: bottomHeight + spacing: Style.marginL // Power Profiles switcher PowerProfilesCard { Layout.fillWidth: true Layout.fillHeight: true - spacing: content.cardSpacing + spacing: Style.marginL } // Utilities buttons UtilitiesCard { Layout.fillWidth: true Layout.fillHeight: true - spacing: content.cardSpacing + spacing: Style.marginL } } } diff --git a/Modules/Settings/Tabs/AboutTab.qml b/Modules/Settings/Tabs/AboutTab.qml index 5e0b42aa2..289eef329 100644 --- a/Modules/Settings/Tabs/AboutTab.qml +++ b/Modules/Settings/Tabs/AboutTab.qml @@ -110,11 +110,10 @@ ColumnLayout { const rows = Math.ceil(root.contributors.length / columns) return rows * cellHeight } - cellWidth: Math.round(Style.baseWidgetSize * 7) + cellWidth: Math.round(Style.baseWidgetSize * 7) cellHeight: Math.round(Style.baseWidgetSize * 2.5) model: root.contributors - delegate: Rectangle { width: contributorsGrid.cellWidth - Style.marginM height: contributorsGrid.cellHeight - Style.marginM diff --git a/Modules/Settings/Tabs/BarTab.qml b/Modules/Settings/Tabs/BarTab.qml index a221f9bc3..b98e3100e 100644 --- a/Modules/Settings/Tabs/BarTab.qml +++ b/Modules/Settings/Tabs/BarTab.qml @@ -71,6 +71,9 @@ ColumnLayout { label: I18n.tr("settings.bar.appearance.density.label") description: I18n.tr("settings.bar.appearance.density.description") model: [{ + "key": "mini", + "name": I18n.tr("options.bar.density.mini") + }, { "key": "compact", "name": I18n.tr("options.bar.density.compact") }, { diff --git a/Widgets/NIcon.qml b/Widgets/NIcon.qml index f1606d9b6..65cfa9b52 100644 --- a/Widgets/NIcon.qml +++ b/Widgets/NIcon.qml @@ -22,7 +22,7 @@ Text { return Icons.get(icon) } font.family: Icons.fontFamily - font.pointSize: root.pointSize + font.pointSize: root.pointSize * Style.uiScaleRatio color: Color.mOnSurface verticalAlignment: Text.AlignVCenter } diff --git a/Widgets/NIconButton.qml b/Widgets/NIconButton.qml index 614c06feb..1f09e1d53 100644 --- a/Widgets/NIconButton.qml +++ b/Widgets/NIconButton.qml @@ -7,7 +7,7 @@ import qs.Services Rectangle { id: root - property real baseSize: Style.baseWidgetSize + property real baseSize: Style.baseWidgetSize * Style.uiScaleRatio property string icon property string tooltipText diff --git a/Widgets/NText.qml b/Widgets/NText.qml index 30b95ea5b..9069f2411 100644 --- a/Widgets/NText.qml +++ b/Widgets/NText.qml @@ -10,7 +10,7 @@ Text { property string family: Settings.data.ui.fontDefault property real pointSize: Style.fontSizeM property real fontScale: { - return (root.family === Settings.data.ui.fontDefault ? Settings.data.ui.fontDefaultScale : Settings.data.ui.fontFixedScale) + return (root.family === Settings.data.ui.fontDefault ? Settings.data.ui.fontDefaultScale * Style.uiScaleRatio: Settings.data.ui.fontFixedScale * Style.uiScaleRatio) } font.family: root.family