Simlpified Slider (not totally working; position is off)

This commit is contained in:
Zach Fox 2019-05-13 15:58:04 -07:00
parent f799f96fba
commit 7bb2d6871b
2 changed files with 40 additions and 26 deletions

View file

@ -52,14 +52,24 @@ QtObject {
} }
} }
readonly property QtObject handle: QtObject { readonly property QtObject handle: QtObject {
readonly property color border: "#000000" readonly property color disabledBorder: "#2A2A2A"
readonly property color enabledBorder: "#00B4EF"
readonly property QtObject disabled: QtObject {
readonly property color start: "#2A2A2A"
readonly property color finish: "#2A2A2A"
}
readonly property QtObject normal: QtObject { readonly property QtObject normal: QtObject {
readonly property color start: "#828282" readonly property color start: "#828282"
readonly property color finish: "#6A6A6A" readonly property color finish: "#6A6A6A"
} }
readonly property QtObject hover: QtObject {
readonly property color start: "#48C7F4"
readonly property color finish: "#48C7F4"
}
readonly property QtObject pressed: QtObject { readonly property QtObject pressed: QtObject {
readonly property color start: "#6A6A6A" readonly property color start: "#48C7F4"
readonly property color finish: "#828282" readonly property color finish: "#48C7F4"
readonly property color border: "#00B4EF"
} }
} }
} }
@ -160,7 +170,7 @@ QtObject {
readonly property QtObject sizes: QtObject { readonly property QtObject sizes: QtObject {
readonly property QtObject controls: QtObject { readonly property QtObject controls: QtObject {
readonly property QtObject slider: QtObject { readonly property QtObject slider: QtObject {
readonly property int height: 14 readonly property int height: 16
readonly property int labelTextSize: 14 readonly property int labelTextSize: 14
readonly property int backgroundHeight: 8 readonly property int backgroundHeight: 8
} }

View file

@ -53,6 +53,7 @@ Item {
width: root.width * 0.6 width: root.width * 0.6
enabled: root.enabled enabled: root.enabled
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: sliderHandle.width / 2
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
onPressedChanged: { onPressedChanged: {
@ -76,7 +77,7 @@ Item {
color: simplifiedUI.colors.controls.slider.background.empty color: simplifiedUI.colors.controls.slider.background.empty
Rectangle { Rectangle {
width: sliderControl.visualPosition * sliderControl.width width: sliderControl.visualPosition * sliderBackground.width
height: parent.height height: parent.height
radius: height / 2 radius: height / 2
gradient: Gradient { gradient: Gradient {
@ -87,35 +88,38 @@ Item {
} }
handle: Rectangle { handle: Rectangle {
visible: root.enabled id: sliderHandle
width: sliderControl.height width: sliderControl.height
height: sliderControl.height height: width
x: sliderControl.visualPosition * (sliderControl.width - width) x: sliderControl.visualPosition * (sliderBackground.width - (sliderHandle.width / 2))
y: sliderControl.height / 2 - height / 2 y: sliderControl.height / 2 - height / 2
radius: height / 2 radius: height / 2
gradient: Gradient { color: "#000000"
GradientStop { border.width: 1
position: 0.0 border.color: sliderControl.hovered || sliderControl.pressed ? simplifiedUI.colors.controls.slider.handle.enabledBorder : simplifiedUI.colors.controls.slider.handle.disabledBorder
color: sliderControl.pressed
? (simplifiedUI.colors.controls.slider.handle.pressed.start)
: (simplifiedUI.colors.controls.slider.handle.normal.start)
}
GradientStop {
position: 1.0
color: sliderControl.pressed
? (simplifiedUI.colors.controls.slider.handle.pressed.finish)
: (simplifiedUI.colors.controls.slider.handle.normal.finish)
}
}
Rectangle { Rectangle {
height: parent.height - 2 visible: root.enabled
height: sliderControl.pressed ? parent.height : parent.height - 4
width: height width: height
radius: height / 2 radius: height / 2
anchors.centerIn: parent anchors.centerIn: parent
color: "transparent" gradient: Gradient {
border.width: 1 GradientStop {
border.color: simplifiedUI.colors.controls.slider.handle.border position: 0.2
color: sliderControl.enabled ? (sliderControl.hovered ? simplifiedUI.colors.controls.slider.handle.hover.start :
(sliderControl.pressed
? (simplifiedUI.colors.controls.slider.handle.pressed.start)
: (simplifiedUI.colors.controls.slider.handle.normal.start))) : simplifiedUI.colors.controls.slider.handle.disabled.start
}
GradientStop {
position: 1.0
color: sliderControl.enabled ? (sliderControl.hovered ? simplifiedUI.colors.controls.slider.handle.hover.finish :
(sliderControl.pressed
? (simplifiedUI.colors.controls.slider.handle.pressed.finish)
: (simplifiedUI.colors.controls.slider.handle.normal.finish))) : simplifiedUI.colors.controls.slider.handle.disabled.finish
}
}
} }
} }
} }