styled progress bar; moved to correct position

still todo: show time and lenght as formatted number
refactor MusicPlayer.qml into components
This commit is contained in:
Anika Raemer 2018-12-06 12:46:46 +01:00
parent b013b69e8d
commit 0b84a6e6b6
2 changed files with 88 additions and 84 deletions

View file

@ -40,37 +40,6 @@ Item{
} }
} }
ProgressBar{
anchors.top: parent.top
anchors.right: parent.right
anchors.margins: container.margins
/*anchors.bottom: buttons.top
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 40
anchors.rightMargin: 40
anchors.topMargin: 10
anchors.bottomMargin: 10
*/
z:99
value: musicModel.pProgress
style:ProgressBarStyle {
background: Rectangle {
radius: 2
color: "magenta"
border.color: "gray"
border.width: 1
implicitWidth: 200
implicitHeight: 24
}
progress: Rectangle {
color: "lightsteelblue"
border.color: "steelblue"
}
}
}
Rectangle { Rectangle {
id: controlPannel id: controlPannel
@ -78,63 +47,95 @@ Item{
anchors.right: parent.right anchors.right: parent.right
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
color: "#99ffffff" color: "#99ffffff"
height: 120 height: 140
Row{ ProgressBar{
id: buttons id: progress
spacing: 20 anchors.top: parent.top
anchors.centerIn: parent anchors.left: parent.left
anchors.margins: container.margins
RoundButton{ value: musicModel.pProgress
id: previous
anchors.verticalCenter: parent.verticalCenter
width: 60 style:ProgressBarStyle {
imageSource: "qrc:/icon_previous" background: Rectangle {
radius: 5
enabled: musicModel.pHasPrevious color: "lightgrey"
border.color: "grey"
onClicked:{ border.width: 1
musicModel.playPrevious(); implicitWidth: controlPannel.width - 2*container.margins
implicitHeight: 10
} }
} progress: Rectangle {
RoundButton{ color: "blue"
id: playPause border.color: "blue"
anchors.verticalCenter: parent.verticalCenter radius: 5
width: 80 implicitHeight: 8
imageSource: musicModel.pIsPlaying ? "qrc:/icon_pause" : "qrc:/icon_play"
onClicked:{
musicModel.playPause();
}
}
RoundButton{
id: stop
anchors.verticalCenter: parent.verticalCenter
width: 60
imageSource: "qrc:/icon_stop"
enabled: musicModel.pIsPlaying
onClicked:{
musicModel.stopMusic();
}
}
RoundButton{
id: next
anchors.verticalCenter: parent.verticalCenter
width: 60
imageSource: "qrc:/icon_next"
enabled: musicModel.pHasNext
onClicked:{
musicModel.playNext();
} }
} }
} }
Item{
anchors.left: parent.left
anchors.right: parent.right
anchors.top: progress.bottom
anchors.bottom: parent.bottom
Row{
id: buttons
spacing: 20
anchors.centerIn: parent
RoundButton{
id: previous
anchors.verticalCenter: parent.verticalCenter
width: 60
imageSource: "qrc:/icon_previous"
enabled: musicModel.pHasPrevious
onClicked:{
musicModel.playPrevious();
}
}
RoundButton{
id: playPause
anchors.verticalCenter: parent.verticalCenter
width: 80
imageSource: musicModel.pIsPlaying ? "qrc:/icon_pause" : "qrc:/icon_play"
onClicked:{
musicModel.playPause();
}
}
RoundButton{
id: stop
anchors.verticalCenter: parent.verticalCenter
width: 60
imageSource: "qrc:/icon_stop"
enabled: musicModel.pIsPlaying
onClicked:{
musicModel.stopMusic();
}
}
RoundButton{
id: next
anchors.verticalCenter: parent.verticalCenter
width: 60
imageSource: "qrc:/icon_next"
enabled: musicModel.pHasNext
onClicked:{
musicModel.playNext();
}
}
} //Row
}// Item
} }
} }

View file

@ -62,13 +62,16 @@ void MusicModel::stopMusic()
{ {
if(mIsPlaying){ if(mIsPlaying){
mIsPlaying = false; mIsPlaying = false;
emit isPlayingChanged();
mHasNext = false; mHasNext = false;
mHasPrevious = false; mHasPrevious = false;
mCurrentMediaItemProgress = 0.0;
emit progressChanged();
emit hasNextChanged(); emit hasNextChanged();
emit hasPreviousChanged(); emit hasPreviousChanged();
emit isPlayingChanged();
mCurrentMediaItemProgress = 0.0;
emit progressChanged();
emit stop(); emit stop();
} }
} }