diff --git a/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml b/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml index c2b9d1d6c6..8157407f0f 100644 --- a/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml +++ b/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml @@ -22,13 +22,25 @@ QtObject { readonly property QtObject controls: QtObject { readonly property QtObject radioButton: QtObject { - readonly property QtObject checked: QtObject { - readonly property color startColor: "#7d7d7d" - readonly property color checkboxFinish: "#6b6a6b" + readonly property QtObject background: QtObject { + readonly property color startColor: "#828282" + readonly property real startPosition: 0.15 + readonly property color endColor: "#6A6A6A" + readonly property real endPosition: 1.0 + readonly property real disabledOpacity: 0.5 } - readonly property QtObject unchecked: QtObject { - readonly property color startColor: "#7d7d7d" - readonly property color checkboxFinish: "#6b6a6b" + readonly property QtObject hover: QtObject { + readonly property color outerBorderColor: "#00B4EF" + readonly property color innerColor: "#00B4EF" + readonly property color innerBorderColor: "#36CDFF" + readonly property real innerOpacity: 0.5 + } + readonly property QtObject active: QtObject { + readonly property color color: "#00B4EF" + } + readonly property QtObject checked: QtObject { + readonly property color innerColor: "#00B4EF" + readonly property color innerBorderColor: "#36CDFF" } } readonly property QtObject slider: QtObject { @@ -151,6 +163,10 @@ QtObject { readonly property int labelTextSize: 14 readonly property int backgroundHeight: 8 } + readonly property QtObject radioButton: QtObject { + readonly property int outerBorderWidth: 1 + readonly property int innerBorderWidth: 1 + } readonly property QtObject simplifiedSwitch: QtObject { readonly property int switchBackgroundHeight: 18 readonly property int switchBackgroundWidth: 47 diff --git a/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/RadioButton.qml b/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/RadioButton.qml index 14508e219f..b1e4958f48 100644 --- a/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/RadioButton.qml +++ b/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/RadioButton.qml @@ -46,58 +46,42 @@ RadioButton { implicitHeight: root.radioButtonRadius radius: root.radioButtonRadius y: parent.height / 2 - height / 2 - border.width: 1 - border.color: pressed || hovered - ? hifi.colors.checkboxCheckedBorder - : hifi.colors.checkboxDarkFinish + border.width: root.hovered ? simplifiedUI.sizes.controls.radioButton.outerBorderWidth : 0 + border.color: simplifiedUI.colors.controls.radioButton.hover.outerBorderColor + opacity: root.disabled ? 0.5 : 1.0 gradient: Gradient { GradientStop { - position: 0.2 - color: pressed || hovered - ? hifi.colors.checkboxLightStart - : hifi.colors.checkboxDarkStart + position: simplifiedUI.colors.controls.radioButton.background.startPosition + color: simplifiedUI.colors.controls.radioButton.background.startColor } GradientStop { - position: 1.0 - color: pressed || hovered - ? hifi.colors.checkboxLightFinish - : hifi.colors.checkboxDarkFinish + position: simplifiedUI.colors.controls.radioButton.background.endPosition + color: simplifiedUI.colors.controls.radioButton.background.endColor } } Rectangle { id: innerBox - visible: pressed || hovered + visible: root.checked || root.hovered anchors.centerIn: parent - width: checkSize - 4 + width: root.checkSize height: width radius: checkSize / 2 - color: hifi.colors.checkboxCheckedBorder + border.width: simplifiedUI.sizes.controls.radioButton.innerBorderWidth + border.color: root.hovered ? simplifiedUI.colors.controls.radioButton.hover.innerBorderColor : simplifiedUI.colors.controls.radioButton.checked.innerBorderColor + color: root.hovered ? simplifiedUI.colors.controls.radioButton.hover.innerColor : simplifiedUI.colors.controls.radioButton.hover.innerColor + opacity: root.hovered ? simplifiedUI.colors.controls.radioButton.hover.innerOpacity : 1.0 } Rectangle { - id: check - width: checkSize - height: checkSize - radius: checkSize / 2 + id: pressedBox + visible: root.pressed + width: parent.width + height: parent.height + radius: parent.radius anchors.centerIn: parent - color: hifi.colors.checkboxChecked - border.width: 2 - border.color: hifi.colors.checkboxCheckedBorder - visible: checked && !pressed || !checked && pressed - } - - Rectangle { - id: disabledOverlay - visible: !enabled - width: root.radioButtonRadius - height: root.radioButtonRadius - radius: root.radioButtonRadius / 2 - border.width: 1 - border.color: hifi.colors.baseGrayHighlight - color: hifi.colors.baseGrayHighlight - opacity: 0.5 + color: simplifiedUI.colors.controls.radioButton.active.color } }