[vlc-devel] [PATCH 09/15] qml: redesign music expand delegate
Prince Gupta
guptaprince8832 at gmail.com
Tue Jul 21 14:18:07 CEST 2020
qml: add close icons to expand delegates
---
.../gui/qt/medialibrary/qml/MusicAlbums.qml | 13 +-
.../qml/MusicAlbumsGridExpandDelegate.qml | 113 ++++++++++++------
2 files changed, 87 insertions(+), 39 deletions(-)
diff --git a/modules/gui/qt/medialibrary/qml/MusicAlbums.qml b/modules/gui/qt/medialibrary/qml/MusicAlbums.qml
index 3d331d92db..807fb8b1b4 100644
--- a/modules/gui/qt/medialibrary/qml/MusicAlbums.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicAlbums.qml
@@ -113,6 +113,8 @@ Widgets.NavigableFocusScope {
delegate: AudioGridItem {
id: audioGridItem
+ opacity: gridView_id.expandIndex !== -1 && gridView_id.expandIndex !== audioGridItem.index ? .7 : 1
+
onItemClicked : {
selectionModel.updateSelection( modifier , root.currentIndex, index)
gridView_id.currentIndex = index
@@ -122,19 +124,22 @@ Widgets.NavigableFocusScope {
onItemDoubleClicked: {
if ( model.id !== undefined ) { medialib.addAndPlay( model.id ) }
}
+
+ Behavior on opacity {
+ NumberAnimation {
+ duration: 100
+ }
+ }
}
expandDelegate: MusicAlbumsGridExpandDelegate {
id: expandDelegateId
- width: root.width
-
- implicitHeight: gridView_id.height - gridView_id.cellHeight
+ onRetract: gridView_id.retract()
navigationParent: root
navigationCancel: function() { gridView_id.retract() }
navigationUp: function() { gridView_id.retract() }
navigationDown: function() {}
-
}
onActionAtIndex: {
diff --git a/modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml b/modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
index 3b0512c8d0..810e9ab9f1 100644
--- a/modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
@@ -27,22 +27,42 @@ import "qrc:///style/"
Widgets.NavigableFocusScope {
id: root
+
property variant model: MLAlbumModel{}
- implicitHeight: layout.implicitHeight
+ implicitHeight: artAndControl.height + ( layout.anchors.margins * 2 )
implicitWidth: layout.implicitWidth
+ signal retract()
clip: true
property int currentItemY
property int currentItemHeight
+ Rectangle {
+ anchors.fill: parent
+ color: VLCStyle.colors.bgAlt
+
+ Widgets.IconLabel {
+ text: VLCIcons.close
+ color: VLCStyle.colors.caption
+ anchors.right: parent.right
+ anchors.top: parent.top
+ anchors.margins: VLCStyle.margin_normal
+
+ MouseArea {
+ anchors.fill: parent
+ onClicked: root.retract()
+ }
+ }
+ }
+
RowLayout {
id: layout
anchors.fill: parent
- implicitHeight: Math.max(expand_infos_id.height, artAndControl.height)
+ anchors.margins: VLCStyle.margin_normal
- spacing: VLCStyle.margin_xsmall
+ spacing: VLCStyle.margin_normal
FocusScope {
id: artAndControl
@@ -56,25 +76,23 @@ Widgets.NavigableFocusScope {
Column {
id: artAndControlLayout
- anchors.margins: VLCStyle.margin_small
-
- spacing: VLCStyle.margin_small
+ spacing: VLCStyle.margin_normal
/* A bigger cover for the album */
Image {
id: expand_cover_id
- height: VLCStyle.cover_large
- width: VLCStyle.cover_large
+ height: VLCStyle.expandCover_music_height
+ width: VLCStyle.expandCover_music_width
source: model.cover || VLCStyle.noArtAlbum
sourceSize: Qt.size(width, height)
}
- Widgets.NavigableCol {
+ Widgets.NavigableRow {
id: actionButtons
focus: true
-
width: expand_cover_id.width
+ spacing: VLCStyle.margin_large
Layout.alignment: Qt.AlignCenter
@@ -82,20 +100,16 @@ Widgets.NavigableFocusScope {
Widgets.TabButtonExt {
id: playActionBtn
- width: actionButtons.width
-
- iconTxt: VLCIcons.play
- text: i18n.qtr("Play album")
+ iconTxt: VLCIcons.play_outline
+ text: i18n.qtr("Play")
onClicked: medialib.addAndPlay( model.id )
}
Widgets.TabButtonExt {
id: enqueueActionBtn
- width: actionButtons.width
-
- iconTxt: VLCIcons.add
- text: i18n.qtr("Enqueue album")
+ iconTxt: VLCIcons.enqueue
+ text: i18n.qtr("Enqueue")
onClicked: medialib.addToPlaylist( model.id )
}
}
@@ -111,35 +125,32 @@ Widgets.NavigableFocusScope {
ColumnLayout {
id: expand_infos_id
+ spacing: 0
+
Layout.fillWidth: true
Layout.fillHeight: true
- spacing: VLCStyle.margin_xsmall
-
/* The title of the albums */
- Text {
+ Widgets.SubtitleLabel {
id: expand_infos_title_id
+ text: model.title || i18n.qtr("Unknown title")
+
Layout.fillWidth: true
Layout.preferredHeight: implicitHeight
-
- text: "<b>"+(model.title || i18n.qtr("Unknown title") )+"</b>"
- font.pixelSize: VLCStyle.fontSize_xxlarge
- color: VLCStyle.colors.text
}
- Text {
+ Widgets.CaptionLabel {
id: expand_infos_subtitle_id
- Layout.fillWidth: true
- Layout.preferredHeight: implicitHeight
-
- text: i18n.qtr("By %1 - %2 - %3")
- .arg(model.main_artist || i18n.qtr("Unknown title"))
+ text: i18n.qtr("%1 - %2 - %3")
+ .arg(model.main_artist || i18n.qtr("Unknown artist"))
.arg(model.release_year || "")
.arg(model.duration || "")
- font.pixelSize: VLCStyle.fontSize_large
- color: VLCStyle.colors.text
+
+ Layout.fillWidth: true
+ Layout.preferredHeight: implicitHeight
+ Layout.topMargin: VLCStyle.margin_xxsmall
}
/* The list of the tracks available */
@@ -148,10 +159,43 @@ Widgets.NavigableFocusScope {
readonly property int _nbCols: VLCStyle.gridColumnsForWidth(expand_track_id.availableRowWidth)
+ property Component titleDelegate: RowLayout {
+ property var rowModel: parent.rowModel
+
+ anchors.fill: parent
+
+ Widgets.ListLabel {
+ text: rowModel.track_number
+
+ Layout.fillHeight: true
+ Layout.preferredWidth: VLCStyle.margin_large
+ }
+
+ Widgets.ListLabel {
+ text: rowModel.title
+
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+ }
+ }
+
+ property Component titleHeaderDelegate: Row {
+
+ Widgets.CaptionLabel {
+ text: "#"
+ width: VLCStyle.margin_large
+ }
+
+ Widgets.CaptionLabel {
+ text: i18n.qtr("Title")
+ }
+ }
+
section.property: ""
Layout.fillWidth: true
Layout.fillHeight: true
+ Layout.topMargin: VLCStyle.margin_normal
headerColor: VLCStyle.colors.bgAlt
@@ -167,8 +211,7 @@ Widgets.NavigableFocusScope {
}
sortModel: [
- { criteria: "track_number", width: VLCStyle.colWidth(1), visible: true, text: i18n.qtr("#"), showSection: "" },
- { isPrimary: true, criteria: "title", width: VLCStyle.colWidth(Math.max(expand_track_id._nbCols - 2, 1)), visible: true, text: i18n.qtr("Title"), showSection: "" },
+ { isPrimary: true, criteria: "title", width: VLCStyle.colWidth(Math.max(expand_track_id._nbCols - 1, 1)), visible: true, text: i18n.qtr("Title"), showSection: "", colDelegate: titleDelegate, headerDelegate: titleHeaderDelegate },
{ criteria: "durationShort", width: VLCStyle.colWidth(1), visible: true, showSection: "", colDelegate: tableColumns.timeColDelegate, headerDelegate: tableColumns.timeHeaderDelegate },
]
--
2.25.1
More information about the vlc-devel
mailing list