Merge pull request #98 from kounkou/clean-up

(chore) cleanup and factorize Switch component
kounkou · Nov 5, 2024 · 48aca46 · 48aca46
2 parents 4615044 + 6dad9dd
commit 48aca46
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 141 deletions.
diff --git 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
@@ -162,102 +162,29 @@ 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"
                             }
                         }
                     }
 
                     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
@@ -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
@@ -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
@@ -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
@@ -14,6 +14,7 @@
         <file alias="Session.qml">qml/Session.qml</file>
         <file alias="LoginPage.qml">qml/LoginPage.qml</file>
         <file alias="SettingsPage.qml">qml/SettingsPage.qml</file>
+        <file alias="ToggleSwitch.qml">qml/ToggleSwitch.qml</file>
         <file alias="handler.js">logic/handler.js</file>
 
         <file alias="adsense-ad.html">qml/adsense-ad.html</file>