chaos/VideoPlayer
1
0
Fork 0
Code Activity

[UI] Added some hover effects to progressBar.

Browse source
This commit is contained in:
Kitteh 2018-11-07 08:32:33 +00:00
parent 0d2b5e2b5a
commit 641b13d2c9
1 changed files with 30 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/qml/main.qml
View file

@ -151,7 +151,8 @@ ApplicationWindow {
function setProgressBarValue(val) { function setProgressBarValue(val) {
progressBar.value = val progressBar.value = val
timeLabel.text = player.createTimestamp(val) + " / " + player.createTimestamp( timeLabel.text = player.createTimestamp(
val) + " / " + player.createTimestamp(
progressBar.to) + " (" + parseFloat( progressBar.to) + " (" + parseFloat(
player.getProperty("speed").toFixed(2)) + "x)" player.getProperty("speed").toFixed(2)) + "x)"
} }
@ -1102,22 +1103,42 @@ ApplicationWindow {
player.command(["seek", progressBar.value, "absolute"]) player.command(["seek", progressBar.value, "absolute"])
} }
function getProgressBarHeight(nyan, isMouse) {
var x = Math.max(Screen.height / 256, fun.nyanCat ? 12 : 2)
return isMouse & !fun.nyanCat ? x * 2 : x
}
MouseArea {
id: mouseAreaProgressBar
y: parent.height
width: parent.width
height: parent.height
anchors.fill: parent
hoverEnabled: true
propagateComposedEvents: true
acceptedButtons: Qt.NoButton
}
background: Rectangle { background: Rectangle {
id: progressBackground id: progressBackground
x: progressBar.leftPadding x: progressBar.leftPadding
y: progressBar.topPadding + progressBar.availableHeight / 2 - height / 2 y: progressBar.topPadding + progressBar.availableHeight / 2 - height / 2
implicitHeight: Math.max(Screen.height / 256, implicitHeight: progressBar.getProgressBarHeight(
fun.nyanCat ? 12 : 2) fun.nyanCat,
mouseAreaProgressBar.containsMouse)
width: progressBar.availableWidth width: progressBar.availableWidth
height: implicitHeight height: implicitHeight
color: Qt.rgba(255, 255, 255, 0.6) color: Qt.rgba(255, 255, 255, 0.6)
radius: height
Rectangle { Rectangle {
id: progressLength id: progressLength
width: progressBar.visualPosition * parent.width width: progressBar.visualPosition * parent.width
height: parent.height height: parent.height
color: "red" color: "red"
opacity: 1 opacity: 1
radius: height
anchors.leftMargin: 100
Image { Image {
visible: fun.nyanCat visible: fun.nyanCat
id: rainbow id: rainbow
@ -1131,6 +1152,7 @@ ApplicationWindow {
Rectangle { Rectangle {
id: cachedLength id: cachedLength
z: 10 z: 10
radius: height
anchors.left: progressLength.right anchors.left: progressLength.right
anchors.leftMargin: progressBar.handle.width - 2 anchors.leftMargin: progressBar.handle.width - 2
//anchors.left: progressBar.handle.horizontalCenter //anchors.left: progressBar.handle.horizontalCenter
@ -1143,13 +1165,14 @@ ApplicationWindow {
} }
handle: Rectangle { handle: Rectangle {
id: handleRect id: handleRect
x: progressBar.leftPadding + progressBar.visualPosition x: progressBar.leftPadding + progressBar.visualPosition
* (progressBar.availableWidth - width) * (progressBar.availableWidth - width)
y: progressBar.topPadding + progressBar.availableHeight / 2 - height / 2 y: progressBar.topPadding + progressBar.availableHeight / 2 - height / 2
implicitHeight: 12 implicitHeight: radius
implicitWidth: 12 implicitWidth: radius
radius: 12 radius: 12 + (progressBackground.height / 2)
color: fun.nyanCat ? "transparent" : "red" color: fun.nyanCat ? "transparent" : "red"
//border.color: "red" //border.color: "red"
AnimatedImage { AnimatedImage {