UIT RadioButton

This commit is contained in:
Zach Fox 2019-05-13 11:07:39 -07:00
parent 51cbadcad1
commit feb5021372
2 changed files with 41 additions and 41 deletions

View file

@ -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

View file

@ -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
}
}