Commit ee0a8cec authored by Matthieu Gallien's avatar Matthieu Gallien 🎵
Browse files

big improvement on UI: makes it more fluid and improve look of playlist

parent c0c43eca
......@@ -65,108 +65,86 @@ Item {
anchors.fill: parent
spacing: 0
RowLayout {
Layout.fillHeight: true
NavigationActionBar {
id: navBar
height: Screen.pixelDensity * 25.
Layout.preferredHeight: height
Layout.minimumHeight: height
Layout.maximumHeight: height
Layout.fillWidth: true
spacing: 0
parentStackView: topListing.stackView
playList: topListing.playListModel
artist: topListing.artistName
album: topListing.albumName
image: topListing.albumArtUrl
tracksCount: topListing.tracksCount
}
ColumnLayout {
Layout.preferredWidth: topListing.width / 2
Layout.fillHeight: true
Rectangle {
border.width: 1
border.color: "#DDDDDD"
color: "#DDDDDD"
spacing: 0
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
NavigationActionBar {
id: navBar
Layout.fillWidth: parent
height: Screen.pixelDensity * 25.
Layout.leftMargin: Screen.pixelDensity * 2.5
Layout.rightMargin: Screen.pixelDensity * 2.5
Layout.preferredHeight: height
Layout.minimumHeight: height
Layout.maximumHeight: height
Layout.fillWidth: true
Layout.preferredHeight: 1
Layout.minimumHeight: 1
Layout.maximumHeight: 1
}
parentStackView: topListing.stackView
playList: topListing.playListModel
artist: topListing.artistName
album: topListing.albumName
image: topListing.albumArtUrl
tracksCount: topListing.tracksCount
}
TableView {
id: contentDirectoryView
TableView {
id: contentDirectoryView
model: DelegateModel {
model: contentModel
delegate: AudioTrackDelegate {
height: Screen.pixelDensity * 15.
width: contentDirectoryView.width
databaseId: model.databaseId
playList: topListing.playListModel
title: if (model != undefined && model.title !== undefined)
model.title
else
''
artist: if (model != undefined && model.artist !== undefined)
model.artist
else
''
album: albumName
duration: if (model != undefined && model.duration !== undefined)
model.duration
else
''
trackNumber: if (model != undefined && model.trackNumber !== undefined)
model.trackNumber
else
''
}
}
backgroundVisible: false
headerVisible: false
frameVisible: false
focus: true
rowDelegate: rowDelegate
TableViewColumn {
role: "title"
title: "Title"
}
Layout.fillHeight: true
Layout.fillWidth: true
}
}
Layout.fillHeight: true
Layout.fillWidth: true
Rectangle {
border.width: 1
border.color: "#DDDDDD"
color: "#DDDDDD"
model: DelegateModel {
model: contentModel
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
delegate: AudioTrackDelegate {
height: Screen.pixelDensity * 15.
width: contentDirectoryView.width
Layout.preferredHeight: parent.height - Screen.pixelDensity * 5.
Layout.preferredWidth: 1
Layout.minimumWidth: 1
Layout.maximumWidth: 1
}
databaseId: model.databaseId
playList: topListing.playListModel
ContextView {
id: albumContext
title: if (model != undefined && model.title !== undefined)
model.title
else
''
artist: if (model != undefined && model.artist !== undefined)
model.artist
else
''
album: albumName
duration: if (model != undefined && model.duration !== undefined)
model.duration
else
''
trackNumber: if (model != undefined && model.trackNumber !== undefined)
model.trackNumber
else
''
}
}
Layout.preferredWidth: topListing.width / 2
Layout.fillHeight: true
backgroundVisible: false
headerVisible: false
frameVisible: false
focus: true
rowDelegate: rowDelegate
albumArtUrl: topListing.albumArtUrl
albumName: topListing.albumName
tracksCount: topListing.tracksCount
artistName: topListing.artistName
TableViewColumn {
role: "title"
title: "Title"
}
}
}
......
......@@ -33,11 +33,6 @@ Item {
property alias randomPlayChecked: shuffleOption.checked
property alias repeatPlayChecked: repeatOption.checked
property alias albumName: albumContext.albumName
property alias artistName: albumContext.artistName
property alias albumArtUrl: albumContext.albumArtUrl
property alias tracksCount: albumContext.tracksCount
id: topItem
Component {
......@@ -61,6 +56,9 @@ Item {
Layout.fillWidth: true
Layout.leftMargin: Screen.pixelDensity * 1.
Layout.rightMargin: Screen.pixelDensity * 1.
CheckBox {
id: shuffleOption
......@@ -104,158 +102,81 @@ Item {
Layout.preferredHeight: 1
Layout.minimumHeight: 1
Layout.maximumHeight: 1
Layout.leftMargin: Screen.pixelDensity * 2.5
Layout.rightMargin: Screen.pixelDensity * 2.5
}
RowLayout {
id: contentLayout
spacing: 0
TableView {
id: playListView
Layout.fillHeight: true
Layout.fillWidth: true
Layout.fillHeight: true
TableView {
id: playListView
Layout.minimumWidth: if (topItem.width < 300)
topItem.width
model: DelegateModel {
model: playListModel
delegate: DraggableItem {
PlayListEntry {
height: (model.hasAlbumHeader ? Screen.pixelDensity * 22.5 : Screen.pixelDensity * 6.)
width: playListView.width
hasAlbumHeader: if (model != undefined && model.hasAlbumHeader !== undefined)
model.hasAlbumHeader
else
true
title: if (model != undefined && model.title !== undefined)
model.title
else
''
artist: if (model != undefined && model.artist !== undefined)
model.artist
else
''
itemDecoration: if (model != undefined && model.image !== undefined)
model.image
else
''
duration: if (model != undefined && model.duration !== undefined)
model.duration
else
''
trackNumber: if (model != undefined && model.trackNumber !== undefined)
model.trackNumber
else
topItem.width / 2
Layout.maximumWidth: if (topItem.width < 300)
topItem.width
else
topItem.width / 2
Layout.preferredWidth: if (topItem.width < 300)
topItem.width
else
topItem.width / 2
''
album: if (model != undefined && model.album !== undefined)
model.album
else
''
isPlaying: model.isPlaying
showHoverButtons: false
Layout.fillWidth: true
Layout.fillHeight: true
model: DelegateModel {
model: playListModel
delegate: DraggableItem {
PlayListEntry {
height: Screen.pixelDensity * 15.
width: playListView.width
title: if (model != undefined && model.title !== undefined)
model.title
else
''
artist: if (model != undefined && model.artist !== undefined)
model.artist
else
''
itemDecoration: if (model != undefined && model.image !== undefined)
model.image
else
''
duration: if (model != undefined && model.duration !== undefined)
model.duration
else
''
trackNumber: if (model != undefined && model.trackNumber !== undefined)
model.trackNumber
else
''
album: albumContext.albumName
isPlaying: model.isPlaying
showHoverButtons: false
hoverAction: Action {
id: playListRemove
iconSource: 'image://icon/list-remove'
onTriggered: playListModel.removeRows(index, 1, playListView.model.rootIndex)
}
}
hoverAction: Action {
id: playListRemove
draggedItemParent: topItem
iconSource: 'image://icon/list-remove'
onMoveItemRequested: {
playListModel.move(from, to, 1);
onTriggered: playListModel.removeRows(index, 1, playListView.model.rootIndex)
}
}
}
backgroundVisible: false
headerVisible: false
frameVisible: false
focus: true
rowDelegate: rowDelegate
draggedItemParent: topItem
TableViewColumn {
role: "title"
title: "Title"
}
Behavior on width {
NumberAnimation {
duration: 300
easing.type: Easing.InOutQuad
onMoveItemRequested: {
playListModel.move(from, to, 1);
}
}
}
Rectangle {
id: viewSeparatorItem
border.width: 1
border.color: "#DDDDDD"
color: "#DDDDDD"
visible: Layout.minimumWidth != 0
backgroundVisible: false
headerVisible: false
frameVisible: false
focus: true
rowDelegate: rowDelegate
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
Layout.preferredHeight: parent.height - Screen.pixelDensity * 5.
Layout.preferredWidth: if (topItem.width > 300)
1
else
0
Layout.minimumWidth: if (topItem.width > 300)
1
else
0
Layout.maximumWidth: if (topItem.width > 300)
1
else
0
Behavior on width {
NumberAnimation {
duration: 300
easing.type: Easing.InOutQuad
}
}
}
ContextView {
id: albumContext
visible: Layout.minimumWidth != 0
Layout.minimumWidth: if (topItem.width > 300)
topItem.width / 2
else
0
Layout.maximumWidth: if (topItem.width > 300)
topItem.width / 2
else
0
Layout.preferredWidth: if (topItem.width > 300)
topItem.width / 2
else
0
Layout.fillHeight: true
Behavior on width {
NumberAnimation {
duration: 300
easing.type: Easing.InOutQuad
}
}
TableViewColumn {
role: "title"
title: "Title"
}
}
}
......
This diff is collapsed.
......@@ -35,24 +35,29 @@ Item {
property int trackNumber
property alias isPlaying : playIcon.visible
property bool showHoverButtons
property bool hasAlbumHeader
property Action hoverAction
RowLayout {
width: parent.width
height: parent.height
ColumnLayout {
spacing: 0
ColumnLayout {
Layout.preferredWidth: parent.height
Layout.preferredHeight: parent.height
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
spacing: 0
anchors.fill: parent
anchors.leftMargin: Screen.pixelDensity * 1.5
anchors.rightMargin: Screen.pixelDensity * 5.5
anchors.topMargin: 0
anchors.bottomMargin: 1
Item {
Layout.preferredHeight: 1
Layout.minimumHeight: 1
Layout.maximumHeight: 1
}
RowLayout {
id: headerRow
spacing: Screen.pixelDensity * 1.5
Layout.fillWidth: true
Layout.preferredHeight: Screen.pixelDensity * 15.
Layout.minimumHeight: Screen.pixelDensity * 15.
Layout.maximumHeight: Screen.pixelDensity * 15.
visible: hasAlbumHeader
Image {
id: mainIcon
......@@ -60,8 +65,9 @@ Item {
Layout.preferredWidth: parent.height - 2
Layout.preferredHeight: parent.height - 2
width: parent.height - 2
sourceSize.width: width
sourceSize.height: width
height: parent.height - 2
sourceSize.width: parent.height - 2
sourceSize.height: parent.height - 2
fillMode: Image.PreserveAspectFit
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
......@@ -114,120 +120,93 @@ Item {
}
}
Item {
Layout.preferredHeight: 1
Layout.minimumHeight: 1
Layout.maximumHeight: 1
}
}
ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
Item {
Layout.preferredWidth: Screen.pixelDensity * 2
Layout.minimumWidth: Screen.pixelDensity * 2
Layout.maximumWidth: Screen.pixelDensity * 2
width: Screen.pixelDensity * 2
}
spacing: 0
ColumnLayout {
Layout.preferredWidth: Screen.pixelDensity * 3.
Layout.preferredHeight: viewAlbumDelegate.height
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
spacing: 0
Item {
Layout.preferredHeight: Screen.pixelDensity * 3.
Layout.minimumHeight: Screen.pixelDensity * 3.
Layout.maximumHeight: Screen.pixelDensity * 3.
}
Item {
height: Screen.pixelDensity * 1.5
}
Label {
id: mainLabel
text: trackNumber + ' - ' + title
font.weight: Font.Bold
Layout.preferredWidth: Screen.pixelDensity * 12
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft
elide: "ElideRight"
}
Label {
id: mainLabel
text: album
font.weight: Font.Bold
horizontalAlignment: "AlignHCenter"
Layout.fillWidth: true
Layout.alignment: Qt.AlignCenter
elide: "ElideRight"
}
Item {
Layout.fillHeight: true
}
Item {
Layout.fillHeight: true
}
Label {
id: authorLabel
text: artist + ' - ' + album
font.weight: Font.Light
Layout.preferredWidth: Screen.pixelDensity * 3
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft
elide: "ElideRight"
}
Label {
id: authorLabel
text: artist
font.weight: Font.Light
horizontalAlignment: "AlignHCenter"
Layout.fillWidth: true
Layout.alignment: Qt.AlignCenter
elide: "ElideRight"
}
Item {
Layout.preferredHeight: Screen.pixelDensity * 3.
Layout.minimumHeight: Screen.pixelDensity * 3.
Layout.maximumHeight: Screen.pixelDensity * 3.
Item {
height: Screen.pixelDensity * 1.5
}
}
}
Item {
Layout.preferredWidth: width
Layout.minimumWidth: width
Layout.maximumWidth: width
width: Screen.pixelDensity * 2
Layout.preferredHeight: (hasAlbumHeader ? Screen.pixelDensity * 1.5 : 0)
Layout.minimumHeight: (hasAlbumHeader ? Screen.pixelDensity * 1.5 : 0)
Layout.maximumHeight: (hasAlbumHeader ? Screen.pixelDensity * 1.5 : 0)
visible: hasAlbumHeader
}
Button {
id: playButton
iconName: 'media-playback-start'
visible: showHoverButtons && !isPlaying
RowLayout {
id: trackRow
Layout.preferredWidth: parent.height * 0.5
Layout.preferredHeight: parent.height * 0.5
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
Layout.maximumWidth: parent.height * 0.7
Layout.maximumHeight: parent.height * 0.7
width: parent.height * 0.7
height: parent.height * 0.7
}
Layout.fillWidth: true
Layout.preferredHeight: Screen.pixelDensity * 5.
Layout.minimumHeight: Screen.pixelDensity * 5.
Layout.maximumHeight: Screen.pixelDensity * 5.
Image {
id: playIcon
source: 'image://icon/media-playback-start'
Layout.preferredWidth: parent.height * 0.5
Layout.preferredHeight: parent.height * 0.5
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
Layout.maximumWidth: parent.height * 0.7
Layout.maximumHeight: parent.height * 0.7
width: parent.height * 0.7
height: parent.height * 0.7
sourceSize.width: width
sourceSize.height: width
fillMode: Image.PreserveAspectFit
visible: isPlaying
}
spacing: Screen.pixelDensity * 1.
Item {
Layout.preferredWidth: width
Layout.minimumWidth: width
Layout.maximumWidth: width
width: Screen.pixelDensity * 12
}
Label {
id: mainCompactLabel