From 13fd957647efb1890d28fa45143439dcd3b1e88c Mon Sep 17 00:00:00 2001
From: aiamnezia <ai@amnezia.org>
Date: Wed, 19 Feb 2025 16:03:24 +0400
Subject: [PATCH] feat: Enhance VerticalRadioButton with improved styling and
 disabled states

---
 .../ui/qml/Controls2/VerticalRadioButton.qml  | 29 ++++++++++++++-----
 .../ui/qml/Pages2/PageSettingsKillSwitch.qml  |  6 ++++
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/client/ui/qml/Controls2/VerticalRadioButton.qml b/client/ui/qml/Controls2/VerticalRadioButton.qml
index bee8ef7b..1c878f15 100644
--- a/client/ui/qml/Controls2/VerticalRadioButton.qml
+++ b/client/ui/qml/Controls2/VerticalRadioButton.qml
@@ -20,7 +20,11 @@ RadioButton {
     property string selectedColor: AmneziaStyle.color.transparent
 
     property string textColor: AmneziaStyle.color.paleGray
+    property string textDisabledColor: AmneziaStyle.color.mutedGray
     property string selectedTextColor: AmneziaStyle.color.goldenApricot
+    property string selectedTextDisabledColor: AmneziaStyle.color.burntOrange
+    property string descriptionColor: AmneziaStyle.color.mutedGray
+    property string descriptionDisabledColor: AmneziaStyle.color.charcoalGray
 
     property string borderFocusedColor: AmneziaStyle.color.paleGray
     property int borderFocusedWidth: 1
@@ -30,6 +34,12 @@ RadioButton {
 
     property bool isFocusable: true
 
+    
+    property string radioButtonInnerCirclePressedSource: "qrc:/images/controls/radio-button-inner-circle-pressed.png"
+    property string radioButtonInnerCircleSource: "qrc:/images/controls/radio-button-inner-circle.png"
+    property string radioButtonPressedSource: "qrc:/images/controls/radio-button-pressed.svg"
+    property string radioButtonDefaultSource: "qrc:/images/controls/radio-button.svg"
+
     Keys.onTabPressed: {
         FocusController.nextKeyTabItem()
     }
@@ -94,14 +104,15 @@ RadioButton {
                 if (showImage) {
                     return imageSource
                 } else if (root.pressed) {
-                    return "qrc:/images/controls/radio-button-inner-circle-pressed.png"
+                    return root.radioButtonInnerCirclePressedSource
                 } else if (root.checked) {
-                    return "qrc:/images/controls/radio-button-inner-circle.png"
+                    return root.radioButtonInnerCircleSource
                 }
 
                 return ""
             }
 
+            opacity: root.enabled ? 1.0 : 0.3
             anchors.centerIn: parent
 
             width: 24
@@ -113,12 +124,13 @@ RadioButton {
                 if (showImage) {
                     return ""
                 } else if (root.pressed || root.checked) {
-                    return "qrc:/images/controls/radio-button-pressed.svg"
+                    return root.radioButtonPressedSource
                 } else {
-                    return "qrc:/images/controls/radio-button.svg"
+                    return root.radioButtonDefaultSource
                 }
             }
 
+            opacity: root.enabled ? 1.0 : 0.3
             anchors.centerIn: parent
 
             width: 24
@@ -148,10 +160,11 @@ RadioButton {
                 elide: root.textElide
 
                 color: {
-                    if (root.checked) {
-                        return selectedTextColor
+                    if (root.enabled) {
+                        return root.checked ? selectedTextColor : textColor
+                    } else {
+                        return root.checked ? selectedTextDisabledColor : textDisabledColor
                     }
-                    return textColor
                 }
 
                 Layout.fillWidth: true
@@ -164,7 +177,7 @@ RadioButton {
             CaptionTextType {
                 id: description
 
-                color: AmneziaStyle.color.mutedGray
+                color: root.enabled ? root.descriptionColor : root.descriptionDisabledColor
                 text: root.descriptionText
 
                 visible: root.descriptionText !== ""
diff --git a/client/ui/qml/Pages2/PageSettingsKillSwitch.qml b/client/ui/qml/Pages2/PageSettingsKillSwitch.qml
index 62f8dd71..08b06397 100644
--- a/client/ui/qml/Pages2/PageSettingsKillSwitch.qml
+++ b/client/ui/qml/Pages2/PageSettingsKillSwitch.qml
@@ -62,6 +62,9 @@ PageType {
                 Layout.leftMargin: 16
                 Layout.rightMargin: 16
 
+                selectedTextColor: AmneziaStyle.color.paleGray
+                selectedTextDisabledColor: AmneziaStyle.color.mutedGray
+                radioButtonPressedSource: "qrc:/images/controls/radio-button.svg"
                 enabled: SettingsController.isKillSwitchEnabled && !ConnectionController.isConnected
                 checked: !SettingsController.strictKillSwitchEnabled
 
@@ -81,6 +84,9 @@ PageType {
                 Layout.leftMargin: 16
                 Layout.rightMargin: 16
 
+                selectedTextColor: AmneziaStyle.color.paleGray
+                selectedTextDisabledColor: AmneziaStyle.color.mutedGray
+                radioButtonPressedSource: "qrc:/images/controls/radio-button.svg"
                 enabled: SettingsController.isKillSwitchEnabled && !ConnectionController.isConnected
                 checked: SettingsController.strictKillSwitchEnabled