From 35eccc54a37c94a6da56d4509312c640a3c11978 Mon Sep 17 00:00:00 2001 From: Lemmy Date: Fri, 26 Dec 2025 10:24:34 -0500 Subject: [PATCH] NComboBox+SearchableComboBox: improved look when uiScaleRatio is not 100% --- Modules/Panels/Settings/Tabs/GeneralTab.qml | 2 -- Widgets/NComboBox.qml | 16 ++++++++-------- Widgets/NSearchableComboBox.qml | 20 ++++++++++---------- 3 files changed, 18 insertions(+), 20 deletions(-) diff --git a/Modules/Panels/Settings/Tabs/GeneralTab.qml b/Modules/Panels/Settings/Tabs/GeneralTab.qml index cc928f725..45b789485 100644 --- a/Modules/Panels/Settings/Tabs/GeneralTab.qml +++ b/Modules/Panels/Settings/Tabs/GeneralTab.qml @@ -90,7 +90,6 @@ ColumnLayout { placeholder: I18n.tr("settings.general.fonts.default.placeholder") searchPlaceholder: I18n.tr("settings.general.fonts.default.search-placeholder") popupHeight: 420 - minimumWidth: 300 isSettings: true defaultValue: Settings.getDefaultValue("ui.fontDefault") settingsPath: "ui.fontDefault" @@ -105,7 +104,6 @@ ColumnLayout { placeholder: I18n.tr("settings.general.fonts.monospace.placeholder") searchPlaceholder: I18n.tr("settings.general.fonts.monospace.search-placeholder") popupHeight: 320 - minimumWidth: 300 isSettings: true defaultValue: Settings.getDefaultValue("ui.fontFixed") settingsPath: "ui.fontFixed" diff --git a/Widgets/NComboBox.qml b/Widgets/NComboBox.qml index 43ff42b8f..b084c92ca 100644 --- a/Widgets/NComboBox.qml +++ b/Widgets/NComboBox.qml @@ -7,8 +7,8 @@ import qs.Widgets RowLayout { id: root - property real minimumWidth: 200 * Style.uiScaleRatio - property real popupHeight: 180 * Style.uiScaleRatio + property real minimumWidth: 200 + property real popupHeight: 180 property string label: "" property string description: "" @@ -19,7 +19,7 @@ RowLayout { property var defaultValue: "" property string settingsPath: "" - readonly property real preferredHeight: Style.baseWidgetSize * 1.1 * Style.uiScaleRatio + readonly property real preferredHeight: Math.round(Style.baseWidgetSize * 1.1) readonly property var comboBox: combo signal selected(string key) @@ -135,8 +135,8 @@ RowLayout { ComboBox { id: combo - Layout.minimumWidth: root.minimumWidth - Layout.preferredHeight: root.preferredHeight + Layout.minimumWidth: Math.round(root.minimumWidth * Style.uiScaleRatio) + Layout.preferredHeight: Math.round(root.preferredHeight * Style.uiScaleRatio) implicitWidth: Layout.minimumWidth model: root.model currentIndex: root.findIndexByKey(root.currentKey) @@ -148,8 +148,8 @@ RowLayout { } background: Rectangle { - implicitWidth: Style.baseWidgetSize * 3.75 - implicitHeight: root.preferredHeight + implicitWidth: Math.round(Style.baseWidgetSize * 3.75 * Style.uiScaleRatio) + implicitHeight: Math.round(root.preferredHeight * Style.uiScaleRatio) color: Color.mSurface border.color: combo.activeFocus ? Color.mSecondary : Color.mOutline border.width: Style.borderS @@ -188,7 +188,7 @@ RowLayout { popup: Popup { y: combo.height implicitWidth: combo.width - Style.marginM - implicitHeight: Math.min(root.popupHeight, listView.contentHeight + Style.marginM * 2) + implicitHeight: Math.min(Math.round(root.popupHeight * Style.uiScaleRatio), listView.contentHeight + Style.marginM * 2) padding: Style.marginM contentItem: ListView { diff --git a/Widgets/NSearchableComboBox.qml b/Widgets/NSearchableComboBox.qml index 3eec852de..4863b5e13 100644 --- a/Widgets/NSearchableComboBox.qml +++ b/Widgets/NSearchableComboBox.qml @@ -8,8 +8,8 @@ import qs.Widgets RowLayout { id: root - property real minimumWidth: 280 * Style.uiScaleRatio - property real popupHeight: 180 * Style.uiScaleRatio + property real minimumWidth: 280 + property real popupHeight: 180 property string label: "" property string description: "" @@ -22,7 +22,7 @@ RowLayout { property var defaultValue: "" property string settingsPath: "" - readonly property real preferredHeight: Style.baseWidgetSize * 1.1 + readonly property real preferredHeight: Math.round(Style.baseWidgetSize * 1.1) signal selected(string key) @@ -171,8 +171,8 @@ RowLayout { ComboBox { id: combo - Layout.minimumWidth: root.minimumWidth - Layout.preferredHeight: root.preferredHeight + Layout.minimumWidth: Math.round(root.minimumWidth * Style.uiScaleRatio) + Layout.preferredHeight: Math.round(root.preferredHeight * Style.uiScaleRatio) implicitWidth: Layout.minimumWidth model: root.activeModel currentIndex: findIndexInActiveModel(currentKey) @@ -183,8 +183,8 @@ RowLayout { } background: Rectangle { - implicitWidth: Style.baseWidgetSize * 3.75 * Style.uiScaleRatio - implicitHeight: preferredHeight + implicitWidth: Math.round(Style.baseWidgetSize * 3.75 * Style.uiScaleRatio) + implicitHeight: Math.round(root.preferredHeight * Style.uiScaleRatio) color: Color.mSurface border.color: combo.activeFocus ? Color.mSecondary : Color.mOutline border.width: Style.borderS @@ -222,7 +222,7 @@ RowLayout { popup: Popup { y: combo.height width: combo.width - height: root.popupHeight + 60 + height: Math.round((root.popupHeight + 60) * Style.uiScaleRatio) padding: Style.marginM contentItem: ColumnLayout { @@ -334,8 +334,8 @@ RowLayout { return Style.fontSizeXS; } color: highlighted ? Color.mOnHover : (badgeData && badgeData.color ? badgeData.color : Color.mOnSurface) - Layout.preferredWidth: Style.baseWidgetSize * 0.6 - Layout.preferredHeight: Style.baseWidgetSize * 0.6 + Layout.preferredWidth: Math.round(Style.baseWidgetSize * 0.6) + Layout.preferredHeight: Math.round(Style.baseWidgetSize * 0.6) visible: badgeData && badgeData.icon !== undefined && badgeData.icon !== "" } }