From 6dad9ddd70ed14ffd48bc6a2decbca2fd14d92a1 Mon Sep 17 00:00:00 2001 From: jacques Date: Mon, 4 Nov 2024 22:00:34 -0800 Subject: [PATCH] (chore) cleanup and factorize Switch component --- qml/PracticePage.qml | 2 +- qml/SettingsPage.qml | 85 ++++---------------------------------------- qml/Theme.qml | 3 ++ qml/ToggleSwitch.qml | 64 +++++++++++++++++++++++++++++++++ qml/WelcomePage.qml | 67 ++++------------------------------ resources.qrc | 1 + 6 files changed, 81 insertions(+), 141 deletions(-) create mode 100644 qml/ToggleSwitch.qml diff --git a/qml/PracticePage.qml b/qml/PracticePage.qml index 577c624..35f0cfc 100644 --- a/qml/PracticePage.qml +++ b/qml/PracticePage.qml @@ -621,7 +621,7 @@ Rectangle { contentItem: Text { text: languageComboBox.currentText - font: languageComboBox.font + font.bold: sessionObject.isFontBold elide: Text.ElideRight horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter diff --git a/qml/SettingsPage.qml b/qml/SettingsPage.qml index d738d2a..3ab13eb 100644 --- a/qml/SettingsPage.qml +++ b/qml/SettingsPage.qml @@ -162,52 +162,16 @@ Rectangle { Component { id: appaeranceSwitchComponent - SwitchDelegate { + ToggleSwitch { id: control - checked: itemName === "Automatic theme" ? sessionObject.automaticThemeSetting : sessionObject.fontSetting - - onToggled: { + switchChecked: itemName === "Automatic theme" ? sessionObject.automaticThemeSetting : sessionObject.fontSetting + onCheckedChangedExternally: { if (itemName === "Automatic theme") { sessionObject.automaticThemeSetting = checked; } else { sessionObject.fontSetting = checked; } - sessionObject.saveSession(); - } - - indicator: Rectangle { - implicitWidth: 50 - implicitHeight: 26 - x: control.width - width - control.rightPadding + 3 - y: parent.height / 2 - height / 2 - radius: 13 - color: control.checked ? themeObject.buttonEasyColor : "#cccccc" - border.color: control.checked ? themeObject.buttonEasyColor : "#cccccc" - - Rectangle { - x: control.checked ? parent.width - width - 3 : 3 - width: 22 - height: 22 - radius: 11 - anchors.verticalCenter: parent.verticalCenter - color: control.down ? "#cccccc" : "#ffffff" - border.color: control.checked ? (control.down ? themeObject.buttonEasyColor : "#21be2b") : "#999999" - - Behavior on x { - NumberAnimation { - duration: 200 - easing.type: Easing.InOutQuad - } - } - } - } - - background: Rectangle { - implicitWidth: 100 - implicitHeight: 40 - visible: false - color: control.down ? "#bdbebf" : "#eeeeee" } } } @@ -215,49 +179,12 @@ Rectangle { Component { id: boldTextSwitchComponent - SwitchDelegate { + ToggleSwitch { id: control - checked: sessionObject.isFontBold - - onToggled: { + switchChecked: sessionObject.isFontBold + onCheckedChangedExternally: { sessionObject.isFontBold = checked - sessionObject.saveSession(); - } - - indicator: Rectangle { - implicitWidth: 50 - implicitHeight: 26 - x: control.width - width - control.rightPadding + 3 - y: parent.height / 2 - height / 2 - radius: 13 - color: control.checked ? themeObject.buttonEasyColor : "#cccccc" - border.color: control.checked ? themeObject.buttonEasyColor : "#cccccc" - opacity: enabled ? 1.0 : 0.5 - - Rectangle { - x: control.checked ? parent.width - width - 3 : 3 - width: 22 - height: 22 - radius: 11 - anchors.verticalCenter: parent.verticalCenter - color: control.down ? "#cccccc" : "#ffffff" - border.color: control.checked ? (control.down ? themeObject.buttonEasyColor : "#21be2b") : "#999999" - - Behavior on x { - NumberAnimation { - duration: 200 - easing.type: Easing.InOutQuad - } - } - } - } - - background: Rectangle { - implicitWidth: 100 - implicitHeight: 40 - visible: false - color: control.down ? "#bdbebf" : "#eeeeee" } } } diff --git a/qml/Theme.qml b/qml/Theme.qml index 600c177..58bc42e 100644 --- a/qml/Theme.qml +++ b/qml/Theme.qml @@ -28,5 +28,8 @@ QtObject { property color codeTextColor: theme === "light" ? "#333333" : "#E0E0E0" // Dark grey for light theme, soft grey for dark theme property color averageLineColor: theme === "light" ? "#2E7D32" : "#66BB6A" + + property color buttonDownColor: theme === "light" ? "#CCCCCC" : "#CCCCCC" + property color buttonUpColor: theme === "light" ? "#FFFFFF" : "#FFFFFF" } diff --git a/qml/ToggleSwitch.qml b/qml/ToggleSwitch.qml new file mode 100644 index 0000000..321deb2 --- /dev/null +++ b/qml/ToggleSwitch.qml @@ -0,0 +1,64 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 + +SwitchDelegate { + id: root + + property alias switchText: root.text + property alias switchChecked: root.checked + property alias switchEnabled: root.enabled + + signal checkedChangedExternally(bool checked) + + font.bold: sessionObject.isFontBold + anchors.horizontalCenter: parent.horizontalCenter + + contentItem: Text { + rightPadding: root.indicator.width + root.spacing + text: root.text + font: root.font + opacity: root.enabled ? 1.0 : 0.5 + color: themeObject.textColor + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } + + onCheckedChanged: { + checkedChangedExternally(root.checked) + sessionObject.saveSession() + } + + indicator: Rectangle { + implicitWidth: 50 + implicitHeight: 26 + x: root.width - width - root.rightPadding + 3 + y: parent.height / 2 - height / 2 + radius: 13 + color: root.checked ? themeObject.buttonEasyColor : themeObject.buttonDownColor + border.color: root.checked ? themeObject.buttonEasyColor : themeObject.buttonDownColor + opacity: root.enabled ? 1.0 : 0.5 + + Rectangle { + x: root.checked ? parent.width - width - 3 : 3 + width: 22 + height: 22 + radius: 11 + anchors.verticalCenter: parent.verticalCenter + color: root.down ? themeObject.buttonDownColor : themeObject.buttonUpColor + border.color: root.checked ? (root.down ? themeObject.buttonEasyColor : "#21be2b") : "#999999" + + Behavior on x { + NumberAnimation { + duration: 200 + easing.type: Easing.InOutQuad + } + } + } + } + + background: Rectangle { + implicitWidth: 100 + implicitHeight: 40 + visible: false + } +} diff --git a/qml/WelcomePage.qml b/qml/WelcomePage.qml index 1d0e295..986235f 100644 --- a/qml/WelcomePage.qml +++ b/qml/WelcomePage.qml @@ -37,6 +37,7 @@ Rectangle { Text { text: "What would you like to do?" + font.bold: sessionObject.isFontBold font.pixelSize: 14 color: themeObject.textColor anchors.horizontalCenter: parent.horizontalCenter @@ -58,13 +59,6 @@ Rectangle { page: practicePage } - // CustomButton { - // id: reviewButton - - // buttonText: "Review algorithms" - // page: reviewPage - // } - CustomButton { id: stats anchors.horizontalCenter: parent.horizontalCenter @@ -90,63 +84,14 @@ Rectangle { page: aboutPage } - SwitchDelegate { + ToggleSwitch { id: themeToggle - font.bold: sessionObject.isFontBold - text: themeObject.theme === "light" ? "Light Theme" : "Dark Theme" - checked: themeObject.theme === "dark" - anchors.horizontalCenter: parent.horizontalCenter - enabled: !sessionObject.automaticThemeSetting - - contentItem: Text { - rightPadding: themeToggle.indicator.width + themeToggle.spacing - text: themeToggle.text - font: themeToggle.font - opacity: enabled ? 1.0 : 0.5 - color: themeObject.textColor - elide: Text.ElideRight - verticalAlignment: Text.AlignVCenter - } - - onCheckedChanged: { + switchText: themeObject.theme === "light" ? "Light Theme" : "Dark Theme" + switchChecked: themeObject.theme === "dark" + switchEnabled: !sessionObject.automaticThemeSetting + onCheckedChangedExternally: { themeObject.theme = checked ? "dark" : "light" - sessionObject.saveSession() - } - - indicator: Rectangle { - implicitWidth: 50 - implicitHeight: 26 - x: themeToggle.width - width - themeToggle.rightPadding + 3 - y: parent.height / 2 - height / 2 - radius: 13 - color: themeToggle.checked ? themeObject.buttonEasyColor : "#cccccc" - border.color: themeToggle.checked ? themeObject.buttonEasyColor : "#cccccc" - opacity: enabled ? 1.0 : 0.5 - - Rectangle { - x: themeToggle.checked ? parent.width - width - 3 : 3 - width: 22 - height: 22 - radius: 11 - anchors.verticalCenter: parent.verticalCenter - color: themeToggle.down ? "#cccccc" : "#ffffff" - border.color: themeToggle.checked ? (themeToggle.down ? themeObject.buttonEasyColor : "#21be2b") : "#999999" - - Behavior on x { - NumberAnimation { - duration: 200 - easing.type: Easing.InOutQuad - } - } - } - } - - background: Rectangle { - implicitWidth: 100 - implicitHeight: 40 - visible: false - color: themeToggle.down ? "#bdbebf" : "#eeeeee" } } } diff --git a/resources.qrc b/resources.qrc index 847e5ec..e24f59d 100644 --- a/resources.qrc +++ b/resources.qrc @@ -14,6 +14,7 @@ qml/Session.qml qml/LoginPage.qml qml/SettingsPage.qml + qml/ToggleSwitch.qml logic/handler.js qml/adsense-ad.html