1 files changed, 286 insertions, 0 deletions
diff --git a/modules/controlcenter/appearance/sections/FontsSection.qml b/modules/controlcenter/appearance/sections/FontsSection.qml
new file mode 100644
index 0000000..57b10ff
--- /dev/null
+++ b/modules/controlcenter/appearance/sections/FontsSection.qml
@@ -0,0 +1,286 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import "../../components"
+import qs.components
+import qs.components.controls
+import qs.components.containers
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+CollapsibleSection {
+    id: root
+
+    required property var rootPane
+
+    title: qsTr("Fonts")
+    showBackground: true
+
+    CollapsibleSection {
+        id: materialFontSection
+        title: qsTr("Material font family")
+        expanded: true
+        showBackground: true
+        nested: true
+
+        Loader {
+            id: materialFontLoader
+            Layout.fillWidth: true
+            Layout.preferredHeight: item ? Math.min(item.contentHeight, 300) : 0
+            asynchronous: true
+            active: materialFontSection.expanded
+
+            sourceComponent: StyledListView {
+                id: materialFontList
+                property alias contentHeight: materialFontList.contentHeight
+
+                clip: true
+                spacing: Appearance.spacing.small / 2
+                model: Qt.fontFamilies()
+
+                StyledScrollBar.vertical: StyledScrollBar {
+                    flickable: materialFontList
+                }
+
+                delegate: StyledRect {
+                    required property string modelData
+                    required property int index
+
+                    width: ListView.view.width
+
+                    readonly property bool isCurrent: modelData === rootPane.fontFamilyMaterial
+                    color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
+                    radius: Appearance.rounding.normal
+                    border.width: isCurrent ? 1 : 0
+                    border.color: Colours.palette.m3primary
+
+                    StateLayer {
+                        function onClicked(): void {
+                            rootPane.fontFamilyMaterial = modelData;
+                            rootPane.saveConfig();
+                        }
+                    }
+
+                    RowLayout {
+                        id: fontFamilyMaterialRow
+
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.margins: Appearance.padding.normal
+
+                        spacing: Appearance.spacing.normal
+
+                        StyledText {
+                            text: modelData
+                            font.pointSize: Appearance.font.size.normal
+                        }
+
+                        Item {
+                            Layout.fillWidth: true
+                        }
+
+                        Loader {
+                            active: isCurrent
+                            asynchronous: true
+
+                            sourceComponent: MaterialIcon {
+                                text: "check"
+                                color: Colours.palette.m3onSurfaceVariant
+                                font.pointSize: Appearance.font.size.large
+                            }
+                        }
+                    }
+
+                    implicitHeight: fontFamilyMaterialRow.implicitHeight + Appearance.padding.normal * 2
+                }
+            }
+        }
+    }
+
+    CollapsibleSection {
+        id: monoFontSection
+        title: qsTr("Monospace font family")
+        expanded: false
+        showBackground: true
+        nested: true
+
+        Loader {
+            Layout.fillWidth: true
+            Layout.preferredHeight: item ? Math.min(item.contentHeight, 300) : 0
+            asynchronous: true
+            active: monoFontSection.expanded
+
+            sourceComponent: StyledListView {
+                id: monoFontList
+                property alias contentHeight: monoFontList.contentHeight
+
+                clip: true
+                spacing: Appearance.spacing.small / 2
+                model: Qt.fontFamilies()
+
+                StyledScrollBar.vertical: StyledScrollBar {
+                    flickable: monoFontList
+                }
+
+                delegate: StyledRect {
+                    required property string modelData
+                    required property int index
+
+                    width: ListView.view.width
+
+                    readonly property bool isCurrent: modelData === rootPane.fontFamilyMono
+                    color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
+                    radius: Appearance.rounding.normal
+                    border.width: isCurrent ? 1 : 0
+                    border.color: Colours.palette.m3primary
+
+                    StateLayer {
+                        function onClicked(): void {
+                            rootPane.fontFamilyMono = modelData;
+                            rootPane.saveConfig();
+                        }
+                    }
+
+                    RowLayout {
+                        id: fontFamilyMonoRow
+
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.margins: Appearance.padding.normal
+
+                        spacing: Appearance.spacing.normal
+
+                        StyledText {
+                            text: modelData
+                            font.pointSize: Appearance.font.size.normal
+                        }
+
+                        Item {
+                            Layout.fillWidth: true
+                        }
+
+                        Loader {
+                            active: isCurrent
+                            asynchronous: true
+
+                            sourceComponent: MaterialIcon {
+                                text: "check"
+                                color: Colours.palette.m3onSurfaceVariant
+                                font.pointSize: Appearance.font.size.large
+                            }
+                        }
+                    }
+
+                    implicitHeight: fontFamilyMonoRow.implicitHeight + Appearance.padding.normal * 2
+                }
+            }
+        }
+    }
+
+    CollapsibleSection {
+        id: sansFontSection
+        title: qsTr("Sans-serif font family")
+        expanded: false
+        showBackground: true
+        nested: true
+
+        Loader {
+            Layout.fillWidth: true
+            Layout.preferredHeight: item ? Math.min(item.contentHeight, 300) : 0
+            asynchronous: true
+            active: sansFontSection.expanded
+
+            sourceComponent: StyledListView {
+                id: sansFontList
+                property alias contentHeight: sansFontList.contentHeight
+
+                clip: true
+                spacing: Appearance.spacing.small / 2
+                model: Qt.fontFamilies()
+
+                StyledScrollBar.vertical: StyledScrollBar {
+                    flickable: sansFontList
+                }
+
+                delegate: StyledRect {
+                    required property string modelData
+                    required property int index
+
+                    width: ListView.view.width
+
+                    readonly property bool isCurrent: modelData === rootPane.fontFamilySans
+                    color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
+                    radius: Appearance.rounding.normal
+                    border.width: isCurrent ? 1 : 0
+                    border.color: Colours.palette.m3primary
+
+                    StateLayer {
+                        function onClicked(): void {
+                            rootPane.fontFamilySans = modelData;
+                            rootPane.saveConfig();
+                        }
+                    }
+
+                    RowLayout {
+                        id: fontFamilySansRow
+
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.margins: Appearance.padding.normal
+
+                        spacing: Appearance.spacing.normal
+
+                        StyledText {
+                            text: modelData
+                            font.pointSize: Appearance.font.size.normal
+                        }
+
+                        Item {
+                            Layout.fillWidth: true
+                        }
+
+                        Loader {
+                            active: isCurrent
+                            asynchronous: true
+
+                            sourceComponent: MaterialIcon {
+                                text: "check"
+                                color: Colours.palette.m3onSurfaceVariant
+                                font.pointSize: Appearance.font.size.large
+                            }
+                        }
+                    }
+
+                    implicitHeight: fontFamilySansRow.implicitHeight + Appearance.padding.normal * 2
+                }
+            }
+        }
+    }
+
+    SectionContainer {
+        contentSpacing: Appearance.spacing.normal
+
+        SliderInput {
+            Layout.fillWidth: true
+            
+            label: qsTr("Font size scale")
+            value: rootPane.fontSizeScale
+            from: 0.7
+            to: 1.5
+            decimals: 2
+            suffix: "×"
+            validator: DoubleValidator { bottom: 0.7; top: 1.5 }
+            
+            onValueModified: (newValue) => {
+                rootPane.fontSizeScale = newValue;
+                rootPane.saveConfig();
+            }
+        }
+    }
+}
+