Members of the KDE Community are recommended to subscribe to the kde-community mailing list at https://mail.kde.org/mailman/listinfo/kde-community to allow them to participate in important discussions and receive other important announcements

Commit a71d4ede authored by camilo higuita's avatar camilo higuita

testing new albums view delegates

parent f1ebb00c
......@@ -8,7 +8,7 @@ import org.kde.mauikit 1.0 as Maui
Maui.ItemDelegate
{
id: babeAlbumRoot
id: control
property int albumSize : Maui.Style.iconSizes.huge
property int albumRadius : 0
......@@ -19,7 +19,7 @@ Maui.ItemDelegate
property bool showIndicator : false
property bool hideRepeated : false
property bool increaseCurrentItem : false
isCurrentItem: GridView.isCurrentItem
isCurrentItem: GridView.isCurrentItem
// height: typeof album === 'undefined' ? parseInt(albumSize+(albumSize*0.3)) : parseInt(albumSize+(albumSize*0.4))
readonly property bool sameAlbum :
......@@ -38,129 +38,169 @@ isCurrentItem: GridView.isCurrentItem
visible: !sameAlbum
ColumnLayout
Item
{
anchors.fill: parent
spacing: 0
anchors.margins: Maui.Style.space.tiny
Item
DropShadow
{
Layout.alignment: Qt.AlignCenter
Layout.fillHeight: true
Layout.minimumHeight: albumSize
Layout.preferredWidth: albumSize
anchors.fill: card
visible: card.visible
horizontalOffset: 0
verticalOffset: 0
radius: 8.0
samples: 17
color: "#80000000"
source: card
}
Rectangle
{
id: card
z: -999
visible: albumCard
anchors.centerIn: img
anchors.fill: img
color: fillColor
radius: albumRadius
}
DropShadow
Image
{
id: img
width: parent.width
height: width
sourceSize.width: width
sourceSize.height: height
fillMode: Image.PreserveAspectFit
smooth: true
asynchronous: true
source:
{
anchors.fill: card
visible: card.visible
horizontalOffset: 0
verticalOffset: 0
radius: 8.0
samples: 17
color: "#80000000"
source: card
if(artwork)
(artwork.length > 0 && artwork !== "NONE")? "file://"+encodeURIComponent(artwork) : "qrc:/assets/cover.png"
else "qrc:/assets/cover.png"
}
Rectangle
layer.enabled: albumRadius
layer.effect: OpacityMask
{
id: card
z: -999
visible: albumCard
anchors.centerIn: img
anchors.fill: img
color: fillColor
radius: albumRadius
maskSource: Item
{
width: img.width
height: img.height
Rectangle
{
anchors.centerIn: parent
width: img.adapt ? img.width : Math.min(img.width, img.height)
height: img.adapt ? img.height : width
radius: albumRadius
}
}
}
}
Rectangle
{
visible : showIndicator && currentTrackIndex === index
Image
height: img.height * 0.1
width: img.width * 0.1
anchors.bottom: parent.bottom
anchors.bottomMargin: Maui.Style.space.big
anchors.horizontalCenter:parent.horizontalCenter
radius: Math.min(width, height)
color: "#f84172"
AnimatedImage
{
id: img
source: "qrc:/assets/heart_indicator_white.gif"
anchors.centerIn: parent
width: albumSize
height: width
sourceSize.width: width
sourceSize.height: height
fillMode: Image.PreserveAspectFit
smooth: true
asynchronous: true
source:
height: parent.height * 0.6
width: parent.width * 0.6
playing: parent.visible
}
}
Item
{
id: _labelBg
height: Math.min (parent.height * 0.3, _labelsLayout.implicitHeight ) + Maui.Style.space.medium
width: parent.width
anchors.bottom: parent.bottom
visible: showLabels
Kirigami.Theme.inherit: false
Kirigami.Theme.backgroundColor: "#333";
Kirigami.Theme.textColor: "#fafafa"
FastBlur
{
id: blur
anchors.fill: parent
radius: 120
opacity: 1
source: ShaderEffectSource
{
if(artwork)
(artwork.length > 0 && artwork !== "NONE")? "file://"+encodeURIComponent(artwork) : "qrc:/assets/cover.png"
else "qrc:/assets/cover.png"
sourceItem: img
sourceRect:Qt.rect(0,
img.height - _labelBg.height,
_labelBg.width,
_labelBg.height)
}
layer.enabled: albumRadius
layer.effect: OpacityMask
Rectangle
{
maskSource: Item
{
width: img.width
height: img.height
Rectangle
{
anchors.centerIn: parent
width: img.adapt ? img.width : Math.min(img.width, img.height)
height: img.adapt ? img.height : width
radius: albumRadius
}
}
anchors.fill: parent
color: _labelBg.Kirigami.Theme.backgroundColor
opacity: 0.2
}
}
Rectangle
ColumnLayout
{
visible : showIndicator && currentTrackIndex === index
id: _labelsLayout
anchors.centerIn: parent
width: parent.width * 0.9
spacing: 0
height: img.height * 0.1
width: img.width * 0.1
anchors.bottom: parent.bottom
anchors.bottomMargin: Maui.Style.space.big
anchors.horizontalCenter:parent.horizontalCenter
radius: Math.min(width, height)
color: "#f84172"
Label
{
Layout.fillWidth: visible
Layout.fillHeight: visible
text: list.query === Albums.ALBUMS ? model.album : model.artist
visible: text && control.width > 50
horizontalAlignment: Qt.AlignLeft
elide: Text.ElideRight
font.pointSize: Maui.Style.fontSizes.default
font.bold: true
font.weight: Font.Bold
color: Kirigami.Theme.textColor
wrapMode: Text.NoWrap
}
AnimatedImage
Label
{
source: "qrc:/assets/heart_indicator_white.gif"
anchors.centerIn: parent
height: parent.height * 0.6
width: parent.width * 0.6
playing: parent.visible
Layout.fillWidth: visible
Layout.fillHeight: visible
text: list.query === Albums.ALBUMS ? model.artist : undefined
visible: text && (control.width > 70)
horizontalAlignment: Qt.AlignLeft
elide: Text.ElideRight
font.pointSize: Maui.Style.fontSizes.medium
color: Kirigami.Theme.textColor
wrapMode: Text.NoWrap
}
}
}
}
Label
{
Layout.fillWidth: true
Layout.fillHeight: true
text: list.query === Albums.ALBUMS ? model.album : model.artist
visible: showLabels && (albumSize > 50)
horizontalAlignment: Qt.AlignHCenter
elide: Text.ElideRight
font.pointSize: Maui.Style.fontSizes.default
font.bold: true
font.weight: Font.Bold
color: Kirigami.Theme.textColor
wrapMode: Text.NoWrap
}
Label
{
Layout.fillWidth: true
Layout.fillHeight: true
text: list.query === Albums.ALBUMS ? model.artist : undefined
visible: showLabels && text && (albumSize > 70)
horizontalAlignment: Qt.AlignHCenter
elide: Text.ElideRight
font.pointSize: Maui.Style.fontSizes.medium
color: Kirigami.Theme.textColor
wrapMode: Text.NoWrap
}
}
}
......@@ -55,36 +55,44 @@ Maui.Page
holder.visible: count === 0
model: _albumsModel
delegate: BabeAlbum
delegate: Item
{
id: albumDelegate
height: grid.cellHeight
width: grid.cellWidth
albumSize : height * 0.6
albumRadius: albumCoverRadius
albumCard: albumCardVisible
padding: Maui.Style.space.small
property bool isCurrentItem: GridView.isCurrentItem
height: grid.cellHeight
width: grid.cellWidth
Connections
BabeAlbum
{
target: albumDelegate
onClicked:
id: albumDelegate
anchors.centerIn: parent
albumRadius: albumCoverRadius
albumCard: albumCardVisible
padding: Maui.Style.space.small
height: parent.height
width: height
isCurrentItem: parent.isCurrentItem
Connections
{
var album = _albumsList.get(index).album
var artist = _albumsList.get(index).artist
albumCoverClicked(album, artist)
grid.currentIndex = index
}
onPressAndHold:
{
var album = grid.model.get(index).album
var artist = grid.model.get(index).artist
albumCoverPressed(album, artist)
target: albumDelegate
onClicked:
{
var album = _albumsList.get(index).album
var artist = _albumsList.get(index).artist
albumCoverClicked(album, artist)
grid.currentIndex = index
}
onPressAndHold:
{
var album = grid.model.get(index).album
var artist = grid.model.get(index).artist
albumCoverPressed(album, artist)
}
}
}
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment