mirror of
https://github.com/tomahawk-player/tomahawk.git
synced 2025-08-28 08:10:47 +02:00
some more work on stations merged
This commit is contained in:
Michael Zanetti
@@ -2,8 +2,6 @@ import QtQuick 1.1
|
||||
|
||||
Item {
|
||||
id: root
|
||||
width: 500
|
||||
height: 10
|
||||
|
||||
property int min: 0
|
||||
property int max: 100
|
||||
@@ -16,71 +14,144 @@ Item {
|
||||
|
||||
/** Should the floating label indicating the current position be shown? */
|
||||
property bool showFloatingLabel: true
|
||||
property bool minMaxLabelsVisible: true
|
||||
|
||||
property int lowerSliderPos: 25
|
||||
property int upperSliderPos: 75
|
||||
|
||||
onUpperSliderPosChanged: print("fooooooooo", upperSliderPos)
|
||||
|
||||
signal valueChanged()
|
||||
|
||||
QtObject {
|
||||
id: priv
|
||||
|
||||
property int steps: root.max - root.min + 1
|
||||
|
||||
property int sliderHeight: root.height
|
||||
property int sliderWidth: root.height / 2
|
||||
}
|
||||
|
||||
Row {
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: defaultFontHeight * 1.2
|
||||
anchors.bottomMargin: defaultFontHeight * 1.2
|
||||
spacing: 10
|
||||
|
||||
Text {
|
||||
id: minText
|
||||
text: root.minLabel.length > 0 ? root.minLabel : min
|
||||
color: "white"
|
||||
visible: root.minMaxLabelsVisible
|
||||
}
|
||||
|
||||
Item {
|
||||
id: sliderRect
|
||||
height: root.height
|
||||
width: parent.width - minText.width - maxText.width - parent.spacing * 2
|
||||
property int maxWidth: parent.width - (minText.visible ? minText.width : 0) - (maxText.visible ? maxText.width : 0) - parent.spacing * 2
|
||||
width: maxWidth - (maxWidth % priv.steps)
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
function sliderPosToValue( sliderPos ) {
|
||||
var percent = sliderPos * 100 / (sliderRect.width - lowerSlider.width);
|
||||
return Math.floor(percent * (root.max - root.min) / 100) + root.min
|
||||
var percent = sliderPos * 100 / (sliderRect.width - priv.sliderWidth/2);
|
||||
return Math.floor(percent * (priv.steps-1) / 100) + root.min
|
||||
}
|
||||
|
||||
function valueToSloderPos( value ) {
|
||||
var percent = (value - root.min) * 100 / (root.max - root.min)
|
||||
return percent * (sliderRect.width - lowerSlider.width) / 100
|
||||
var percent = (value - root.min) * 100 / (priv.steps-1)
|
||||
return percent * (sliderRect.width - priv.sliderWidth/2) / 100
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: sliderBase
|
||||
height: root.height / 5
|
||||
width: parent.width
|
||||
height: root.height / 1.5
|
||||
width: parent.width + defaultFontHeight * 1.5
|
||||
color: "white"
|
||||
radius: height / 2
|
||||
anchors.centerIn: parent
|
||||
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 0.0; color: "#ffffffff" }
|
||||
GradientStop { position: 1.0; color: "#aaffffff" }
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: sliderBase
|
||||
anchors.leftMargin: lowerSlider.x + priv.sliderWidth
|
||||
anchors.rightMargin: sliderBase.width - upperSlider.x - priv.sliderWidth
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 0.0; color: "#aa962c26" }
|
||||
GradientStop { position: 1.0; color: "#962c26" }
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
id: stepRow
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: defaultFontHeight - lineWidth/2
|
||||
anchors.rightMargin: defaultFontHeight - lineWidth/2
|
||||
property int stepCount: root.max - root.min + 1
|
||||
property int lineHeight: height
|
||||
property int lineWidth: lineHeight / 15
|
||||
spacing: (width - (stepCount * lineWidth)) / stepCount
|
||||
|
||||
Repeater {
|
||||
model: stepRow.stepCount
|
||||
|
||||
Rectangle {
|
||||
id: marker
|
||||
height: stepRow.lineHeight * (isHighlight ? 1.2 : 1)
|
||||
width: stepRow.lineWidth
|
||||
color: "black"
|
||||
|
||||
property bool isHighlight: index % 10 === 0
|
||||
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 0.0; color: marker.isHighlight ? "white" : "black" }
|
||||
GradientStop { position: 1.0; color: marker.isHighlight ? "#aaffffff" : "black" }
|
||||
}
|
||||
|
||||
Text {
|
||||
text: root.min + index
|
||||
visible: marker.isHighlight
|
||||
anchors.horizontalCenter: marker.horizontalCenter
|
||||
anchors.top: marker.bottom
|
||||
anchors.topMargin: defaultFontHeight / 2
|
||||
color: "white"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: lowerSlider
|
||||
height: root.height
|
||||
width: height
|
||||
height: priv.sliderHeight
|
||||
width: priv.sliderWidth
|
||||
anchors.top: root.top
|
||||
radius: height/2
|
||||
radius: height/4
|
||||
border.color: "black"
|
||||
border.width: 2
|
||||
x: sliderRect.valueToSloderPos(root.lowerSliderPos)
|
||||
x: sliderRect.valueToSloderPos(root.lowerSliderPos) - priv.sliderWidth/2
|
||||
|
||||
Rectangle {
|
||||
id: lowerFloatingRect
|
||||
color: "white"
|
||||
anchors.bottom: lowerSlider.top
|
||||
anchors.bottomMargin: 10
|
||||
visible: root.showFloatingLabel && lowerSliderMouseArea.pressed
|
||||
// visible: root.showFloatingLabel && lowerSliderMouseArea.pressed
|
||||
width: lowerFloatingText.width * 1.2
|
||||
height: lowerFloatingText.height + height * 1.2
|
||||
x: -(width - lowerSlider.width) / 2
|
||||
radius: height / 4
|
||||
x: -(width - priv.sliderWidth) / 2
|
||||
radius: height / 8
|
||||
|
||||
Text {
|
||||
id: lowerFloatingText
|
||||
anchors.centerIn: parent
|
||||
text: sliderRect.sliderPosToValue(lowerSlider.x)
|
||||
text: sliderRect.sliderPosToValue(lowerSlider.x + priv.sliderWidth/2)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -89,10 +160,10 @@ Item {
|
||||
anchors.fill: lowerSlider
|
||||
drag.target: lowerSlider
|
||||
drag.axis: "XAxis"
|
||||
drag.minimumX: 0
|
||||
drag.maximumX: upperSlider.x - lowerSlider.width
|
||||
drag.minimumX: -priv.sliderWidth / 2
|
||||
drag.maximumX: upperSlider.x - priv.sliderWidth
|
||||
onReleased: {
|
||||
root.lowerSliderPos = sliderRect.sliderPosToValue( lowerSlider.x );
|
||||
root.lowerSliderPos = sliderRect.sliderPosToValue( lowerSlider.x + priv.sliderWidth/2 );
|
||||
root.valueChanged();
|
||||
}
|
||||
}
|
||||
@@ -100,9 +171,9 @@ Item {
|
||||
Rectangle {
|
||||
id: upperSlider
|
||||
height: root.height
|
||||
width: height
|
||||
width: height / 2
|
||||
anchors.top: root.top
|
||||
radius: height/2
|
||||
radius: height / 4
|
||||
border.color: "black"
|
||||
border.width: 2
|
||||
x: sliderRect.valueToSloderPos(root.upperSliderPos)
|
||||
@@ -111,16 +182,16 @@ Item {
|
||||
color: "white"
|
||||
anchors.bottom: upperSlider.top
|
||||
anchors.bottomMargin: 10
|
||||
visible: root.showFloatingLabel && upperSliderMouseArea.pressed
|
||||
// visible: root.showFloatingLabel && upperSliderMouseArea.pressed
|
||||
width: upperFloatingText.width * 1.2
|
||||
height: upperFloatingText.height + height * 1.2
|
||||
radius: height / 4
|
||||
x: -(width - upperSlider.width) / 2
|
||||
x: -(width - priv.sliderWidth) / 2
|
||||
|
||||
Text {
|
||||
id: upperFloatingText
|
||||
anchors.centerIn: parent
|
||||
text: sliderRect.sliderPosToValue(upperSlider.x)
|
||||
text: sliderRect.sliderPosToValue(upperSlider.x + priv.sliderWidth/2)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -131,14 +202,16 @@ Item {
|
||||
onClicked: print("button pressed")
|
||||
drag.target: upperSlider
|
||||
drag.axis: "XAxis"
|
||||
drag.minimumX: lowerSlider.x + lowerSlider.width
|
||||
drag.maximumX: parent.width - upperSlider.width
|
||||
drag.minimumX: lowerSlider.x + priv.sliderWidth
|
||||
drag.maximumX: parent.width - priv.sliderWidth
|
||||
onReleased: {
|
||||
root.upperSliderPos = sliderRect.sliderPosToValue( upperSlider.x );
|
||||
root.upperSliderPos = sliderRect.sliderPosToValue( upperSlider.x + priv.sliderWidth/2 );
|
||||
root.valueChanged();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -146,6 +219,7 @@ Item {
|
||||
id: maxText
|
||||
text: root.maxLabel.length > 0 ? root.maxLabel : max
|
||||
color: "white"
|
||||
visible: root.minMaxLabelsVisible
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user