added component for media progress bar

idea: add components PlayerButtons.qml and PlayerControlPannel.qml
This commit is contained in:
Anika Raemer 2018-12-07 08:31:44 +01:00
parent 470e95f57f
commit 056bdb8298
3 changed files with 49 additions and 33 deletions

41
LenaPi/MediaProgress.qml Normal file
View file

@ -0,0 +1,41 @@
import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Item {
id: container
property var model
Label{
anchors.right: progress.right
anchors.bottom: progress.top
font.pointSize: 9
color: "grey"
text: model.pTime + " / " + model.pMediaLength
}
ProgressBar{
id: progress
anchors.top: parent.top
anchors.left: parent.left
value: model.pProgress
style:ProgressBarStyle {
background: Rectangle {
radius: 5
color: "white"
border.color: "grey"
border.width: 1
implicitWidth: container.width
implicitHeight: 10
}
progress: Rectangle {
color: "blue"
border.color: "blue"
radius: 5
implicitHeight: 8
}
}
}
}

View file

@ -1,6 +1,4 @@
import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0
Item{
@ -49,38 +47,14 @@ Item{
color: "#99ffffff"
height: 140
Label{
anchors.right: progress.right
anchors.bottom: progress.top
font.pointSize: 9
color: "grey"
text: musicModel.pTime + " / " + musicModel.pMediaLength
}
MediaProgress{
id: progress
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: container.margins
ProgressBar{
id: progress
anchors.top: parent.top
anchors.left: parent.left
anchors.margins: container.margins
value: musicModel.pProgress
style:ProgressBarStyle {
background: Rectangle {
radius: 5
color: "lightgrey"
border.color: "grey"
border.width: 1
implicitWidth: controlPannel.width - 2*container.margins
implicitHeight: 10
}
progress: Rectangle {
color: "blue"
border.color: "blue"
radius: 5
implicitHeight: 8
}
}
model: musicModel
}
Item{

View file

@ -7,5 +7,6 @@
<file>RoundButton.qml</file>
<file>Navigation.qml</file>
<file>MusicPlayer.qml</file>
<file>MediaProgress.qml</file>
</qresource>
</RCC>