feat: Enhance VerticalRadioButton with improved styling and disabled states

This commit is contained in:
aiamnezia 2025-02-19 16:03:24 +04:00
parent 8e2e3a916a
commit 13fd957647
2 changed files with 27 additions and 8 deletions

View file

@ -20,7 +20,11 @@ RadioButton {
property string selectedColor: AmneziaStyle.color.transparent property string selectedColor: AmneziaStyle.color.transparent
property string textColor: AmneziaStyle.color.paleGray property string textColor: AmneziaStyle.color.paleGray
property string textDisabledColor: AmneziaStyle.color.mutedGray
property string selectedTextColor: AmneziaStyle.color.goldenApricot 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 string borderFocusedColor: AmneziaStyle.color.paleGray
property int borderFocusedWidth: 1 property int borderFocusedWidth: 1
@ -30,6 +34,12 @@ RadioButton {
property bool isFocusable: true 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: { Keys.onTabPressed: {
FocusController.nextKeyTabItem() FocusController.nextKeyTabItem()
} }
@ -94,14 +104,15 @@ RadioButton {
if (showImage) { if (showImage) {
return imageSource return imageSource
} else if (root.pressed) { } else if (root.pressed) {
return "qrc:/images/controls/radio-button-inner-circle-pressed.png" return root.radioButtonInnerCirclePressedSource
} else if (root.checked) { } else if (root.checked) {
return "qrc:/images/controls/radio-button-inner-circle.png" return root.radioButtonInnerCircleSource
} }
return "" return ""
} }
opacity: root.enabled ? 1.0 : 0.3
anchors.centerIn: parent anchors.centerIn: parent
width: 24 width: 24
@ -113,12 +124,13 @@ RadioButton {
if (showImage) { if (showImage) {
return "" return ""
} else if (root.pressed || root.checked) { } else if (root.pressed || root.checked) {
return "qrc:/images/controls/radio-button-pressed.svg" return root.radioButtonPressedSource
} else { } else {
return "qrc:/images/controls/radio-button.svg" return root.radioButtonDefaultSource
} }
} }
opacity: root.enabled ? 1.0 : 0.3
anchors.centerIn: parent anchors.centerIn: parent
width: 24 width: 24
@ -148,10 +160,11 @@ RadioButton {
elide: root.textElide elide: root.textElide
color: { color: {
if (root.checked) { if (root.enabled) {
return selectedTextColor return root.checked ? selectedTextColor : textColor
} else {
return root.checked ? selectedTextDisabledColor : textDisabledColor
} }
return textColor
} }
Layout.fillWidth: true Layout.fillWidth: true
@ -164,7 +177,7 @@ RadioButton {
CaptionTextType { CaptionTextType {
id: description id: description
color: AmneziaStyle.color.mutedGray color: root.enabled ? root.descriptionColor : root.descriptionDisabledColor
text: root.descriptionText text: root.descriptionText
visible: root.descriptionText !== "" visible: root.descriptionText !== ""

View file

@ -62,6 +62,9 @@ PageType {
Layout.leftMargin: 16 Layout.leftMargin: 16
Layout.rightMargin: 16 Layout.rightMargin: 16
selectedTextColor: AmneziaStyle.color.paleGray
selectedTextDisabledColor: AmneziaStyle.color.mutedGray
radioButtonPressedSource: "qrc:/images/controls/radio-button.svg"
enabled: SettingsController.isKillSwitchEnabled && !ConnectionController.isConnected enabled: SettingsController.isKillSwitchEnabled && !ConnectionController.isConnected
checked: !SettingsController.strictKillSwitchEnabled checked: !SettingsController.strictKillSwitchEnabled
@ -81,6 +84,9 @@ PageType {
Layout.leftMargin: 16 Layout.leftMargin: 16
Layout.rightMargin: 16 Layout.rightMargin: 16
selectedTextColor: AmneziaStyle.color.paleGray
selectedTextDisabledColor: AmneziaStyle.color.mutedGray
radioButtonPressedSource: "qrc:/images/controls/radio-button.svg"
enabled: SettingsController.isKillSwitchEnabled && !ConnectionController.isConnected enabled: SettingsController.isKillSwitchEnabled && !ConnectionController.isConnected
checked: SettingsController.strictKillSwitchEnabled checked: SettingsController.strictKillSwitchEnabled