From 69613a3b14f5703947edd5b2cd92c399f2d39380 Mon Sep 17 00:00:00 2001 From: lucy Date: Tue, 27 Jan 2026 23:47:09 +0100 Subject: [PATCH] add floating toggle to settings app --- modules/widgets/MainWindow.qml | 1 - modules/widgets/settingsapp/Appearance.qml | 61 ++++++++++++---------- reusables/CustomButton.qml | 23 ++++++++ reusables/CustomSwitch.qml | 17 +++--- 4 files changed, 65 insertions(+), 37 deletions(-) diff --git a/modules/widgets/MainWindow.qml b/modules/widgets/MainWindow.qml index f17a7e1..841fb93 100644 --- a/modules/widgets/MainWindow.qml +++ b/modules/widgets/MainWindow.qml @@ -79,7 +79,6 @@ FloatingWindow { acceptedButtons: Qt.LeftButton onClicked: { contentLoader.source = parent.modelData.source; - console.log(parent.index); pageView.currentIndex = parent.index; } } diff --git a/modules/widgets/settingsapp/Appearance.qml b/modules/widgets/settingsapp/Appearance.qml index 6c40ccc..7dccba5 100644 --- a/modules/widgets/settingsapp/Appearance.qml +++ b/modules/widgets/settingsapp/Appearance.qml @@ -31,55 +31,62 @@ ClippingWrapperRectangle { ColumnLayout { id: verticalLayout - Rectangle { + anchors.margins: 20 + anchors.fill: parent + ClippingWrapperRectangle { id: fontWrapper - radius: 14 + leftMargin: 10 + rightMargin: 10 + implicitWidth: 300 + topLeftRadius: 12 + topRightRadius: 12 + bottomRightRadius: 4 + bottomLeftRadius: 4 + color: Colors.surfaceContainerHigh implicitHeight: 30 - implicitWidth: 300 - RowLayout { + child: RowLayout { id: fontLayout - anchors.verticalCenter: parent.verticalCenter - anchors.fill: parent - clip: true - spacing: 10 + spacing: 40 CustomText { id: fontText - Layout.leftMargin: 20 - Layout.alignment: Qt.AlignLeft - font.bold: true text: "current font: " + Settings.config.font + Layout.fillWidth: true + } + CustomButton { + id: fontPickerButton + customText: "pick font" + implicitHeight: fontWrapper.implicitHeight - 10 + onClicked: fontPicker.open() } } } - Rectangle { + ClippingWrapperRectangle { id: floatingWrapper - radius: 14 - color: Colors.surfaceContainerHigh + leftMargin: 10 + rightMargin: 10 implicitHeight: 30 implicitWidth: 300 - RowLayout { + bottomLeftRadius: 12 + bottomRightRadius: 12 + topRightRadius: 4 + topLeftRadius: 4 + color: Colors.surfaceContainerHigh + child: RowLayout { id: floatingToggleLayout - anchors.fill: parent - anchors.verticalCenter: parent.verticalCenter - clip: true - spacing: 10 + spacing: 40 CustomText { id: floatingToggleText - Layout.leftMargin: 20 - Layout.alignment: Qt.AlignLeft - font.bold: true text: "top bar floating" + Layout.fillWidth: true } CustomSwitch { - Layout.alignment: Qt.AlignRight - Layout.rightMargin: 20 - implicitHeight: 15 - implicitWidth: 30 - + implicitHeight: floatingWrapper.implicitHeight - 10 + implicitWidth: 34 onToggled: { Settings.config.floating = !Settings.config.floating; } + Layout.rightMargin: 5 } } } diff --git a/reusables/CustomButton.qml b/reusables/CustomButton.qml index e69de29..4c76463 100644 --- a/reusables/CustomButton.qml +++ b/reusables/CustomButton.qml @@ -0,0 +1,23 @@ +import QtQuick +import qs +import QtQuick.Controls.Basic + +Button { + id: control + property bool showText: false + property string customText + + contentItem: CustomText { + id: contentText + text: control.customText + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + background: Rectangle { + id: contentBackground + border.color: control.down ? Colors.primaryFixed : Colors.primary + border.width: 1 + radius: parent.implicitHeight / 2 + color: "transparent" + } +} diff --git a/reusables/CustomSwitch.qml b/reusables/CustomSwitch.qml index 41381b6..decad5e 100644 --- a/reusables/CustomSwitch.qml +++ b/reusables/CustomSwitch.qml @@ -5,23 +5,22 @@ import qs Switch { id: control indicator: Rectangle { - implicitWidth: parent.implicitWidth - implicitHeight: parent.implicitHeight anchors.verticalCenter: parent.verticalCenter x: control.leftPadding y: parent.height / 2 - height / 2 - radius: 13 - color: control.checked ? Colors.surfaceContainerHighest : Colors.surfaceContainerHighest + implicitWidth: parent.implicitWidth + implicitHeight: parent.implicitHeight + radius: 26 + color: Colors.surfaceContainerLow border.color: control.checked ? Colors.primary : Colors.onSurfaceColor Rectangle { - x: control.checked ? parent.width - width : 0 + implicitHeight: parent.implicitHeight - 6 + implicitWidth: parent.implicitWidth / 2 - 3 + x: control.checked ? parent.width - width - 3 : 3 anchors.verticalCenter: parent.verticalCenter - width: parent.implicitWidth / 2 - height: parent.implicitHeight - radius: 13 + radius: 24 color: control.down ? Colors.surfaceContainerHighest : Colors.primary - border.color: control.checked ? (control.down ? Colors.onSurfaceColor : Colors.primary) : "#999999" } } }