From 6b8ae3f2913a64702611ac1855f5375c6239091c Mon Sep 17 00:00:00 2001 From: zach Date: Thu, 23 Apr 2026 01:00:57 +0200 Subject: [PATCH] font list + search --- Modules/Settings/Categories.qml | 2 +- Modules/Settings/Categories/Appearance.qml | 22 +-- Modules/Settings/Controls/SettingInput.qml | 4 +- Modules/Settings/Controls/SettingListView.qml | 140 ++++++++++++++++++ 4 files changed, 145 insertions(+), 23 deletions(-) create mode 100644 Modules/Settings/Controls/SettingListView.qml diff --git a/Modules/Settings/Categories.qml b/Modules/Settings/Categories.qml index 11f8fc8..8e23c27 100644 --- a/Modules/Settings/Categories.qml +++ b/Modules/Settings/Categories.qml @@ -153,7 +153,7 @@ Item { required property string name implicitHeight: 42 - implicitWidth: 200 + implicitWidth: 250 radius: Appearance.rounding.normal - Appearance.padding.smaller RowLayout { diff --git a/Modules/Settings/Categories/Appearance.qml b/Modules/Settings/Categories/Appearance.qml index 3114b2e..1fbbe43 100644 --- a/Modules/Settings/Categories/Appearance.qml +++ b/Modules/Settings/Categories/Appearance.qml @@ -76,7 +76,7 @@ SettingsPage { name: "Fonts" } - SettingInput { + SettingListView { name: "Sans family" object: Config.appearance.font.family setting: "sans" @@ -85,29 +85,11 @@ SettingsPage { Separator { } - SettingInput { + SettingListView { name: "Monospace family" object: Config.appearance.font.family setting: "mono" } - - Separator { - } - - SettingInput { - name: "Material family" - object: Config.appearance.font.family - setting: "material" - } - - Separator { - } - - SettingInput { - name: "Clock family" - object: Config.appearance.font.family - setting: "clock" - } } SettingsSection { diff --git a/Modules/Settings/Controls/SettingInput.qml b/Modules/Settings/Controls/SettingInput.qml index b5e7c15..bbe8cec 100644 --- a/Modules/Settings/Controls/SettingInput.qml +++ b/Modules/Settings/Controls/SettingInput.qml @@ -59,7 +59,7 @@ Item { id: rect Layout.preferredHeight: 33 - Layout.preferredWidth: Math.max(Math.min(textField.contentWidth + Appearance.padding.normal * 2, 550), 50) + Layout.preferredWidth: Math.max(Math.min(textField.contentWidth + Appearance.padding.large * 2, 550), 50) color: DynamicColors.tPalette.m3surfaceContainerHigh radius: Appearance.rounding.full @@ -68,7 +68,7 @@ Item { anchors.centerIn: parent horizontalAlignment: Text.AlignHCenter - implicitWidth: Math.min(contentWidth, 550) + implicitWidth: Math.min(contentWidth + Appearance.padding.normal * 2, 550) text: root.formattedValue() onEditingFinished: { diff --git a/Modules/Settings/Controls/SettingListView.qml b/Modules/Settings/Controls/SettingListView.qml new file mode 100644 index 0000000..2e6fc55 --- /dev/null +++ b/Modules/Settings/Controls/SettingListView.qml @@ -0,0 +1,140 @@ +pragma ComponentBehavior: Bound + +import Quickshell +import QtQuick +import QtQuick.Layouts +import qs.Config +import qs.Components + +Item { + id: root + + required property string name + required property var object + required property string setting + + Layout.fillWidth: true + Layout.preferredHeight: row.height + + RowLayout { + id: row + + anchors.left: parent.left + anchors.margins: Appearance.padding.small + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + + CustomText { + id: text + + Layout.fillWidth: true + font.pointSize: Appearance.font.size.larger + text: root.name + } + + CustomClippingRect { + id: fontArea + + Layout.preferredHeight: 42 * 6 + Appearance.padding.normal * 2 + Appearance.spacing.small * 5 + Layout.preferredWidth: 500 + color: DynamicColors.tPalette.m3surfaceContainer + radius: 21 + Appearance.padding.normal + + CustomRect { + id: searchBox + + anchors.left: parent.left + anchors.margins: Appearance.padding.normal + anchors.right: parent.right + anchors.top: parent.top + color: DynamicColors.tPalette.m3surfaceContainer + implicitHeight: 42 + radius: Appearance.rounding.full + + MaterialIcon { + id: searchIcon + + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.leftMargin: Appearance.padding.large + anchors.top: parent.top + font.pointSize: Appearance.font.size.large + text: "search" + verticalAlignment: Text.AlignVCenter + } + + CustomTextField { + id: fontSearch + + anchors.left: searchIcon.right + anchors.leftMargin: Appearance.spacing.small + anchors.right: parent.right + anchors.rightMargin: Appearance.spacing.normal + anchors.verticalCenter: parent.verticalCenter + placeholderText: "Search..." + } + } + + CustomClippingRect { + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.margins: Appearance.padding.normal + anchors.right: parent.right + anchors.top: searchBox.bottom + bottomLeftRadius: 21 + bottomRightRadius: 21 + + CustomListView { + anchors.fill: parent + clip: true + spacing: Appearance.spacing.small + + delegate: CustomRect { + id: fontDelegate + + required property string modelData + + anchors.left: parent.left + anchors.right: parent.right + implicitHeight: 42 + radius: Appearance.rounding.smallest + + CustomText { + anchors.fill: parent + anchors.leftMargin: Appearance.padding.normal + text: modelData + verticalAlignment: Text.AlignVCenter + } + + MaterialIcon { + anchors.fill: parent + anchors.rightMargin: Appearance.padding.normal + color: DynamicColors.palette.m3primary + font.pointSize: Appearance.font.size.large + horizontalAlignment: Text.AlignRight + text: "check_circle" + verticalAlignment: Text.AlignVCenter + visible: root.object[root.setting] === fontDelegate.modelData + } + + StateLayer { + onClicked: { + root.object[root.setting] = fontDelegate.modelData; + Config.save(); + } + } + } + model: ScriptModel { + values: { + const fonts = Qt.fontFamilies(); + const search = fontSearch.text; + var regex = new RegExp(search, "i"); + + return fonts.filter(n => regex.test(n)); + } + } + } + } + } + } +}