Commit 27be160a authored by Camilo Higuita's avatar Camilo Higuita

rework the footer playback controls and add floating disk to th ui/ux design

parent c45e9650
This diff is collapsed.
......@@ -85,5 +85,6 @@
<file>services/web/Spotify/Spotify.qml</file>
<file>services/web/Spotify/LoginForm.qml</file>
<file>services/web/Spotify/spotify.html</file>
<file>widgets/FloatingDisk.qml</file>
</qresource>
</RCC>
......@@ -95,8 +95,8 @@ ItemDelegate
anchors.centerIn: parent
sourceSize.width: width
sourceSize.height: height
sourceSize.width: parent.width
sourceSize.height: parent.height
fillMode: Image.PreserveAspectFit
cache: true
......
......@@ -108,13 +108,16 @@ ItemDelegate
{
visible: !sameAlbum
anchors.fill: parent
flat: true
Image
{
id: artworkCover
anchors.fill: parent
anchors.centerIn: parent
height: parent.height * 0.8
width: height
sourceSize.width: parent.height
sourceSize.width: parent.width
sourceSize.height: parent.height
source: typeof artwork === 'undefined' ?
......@@ -125,8 +128,27 @@ ItemDelegate
fillMode: Image.PreserveAspectFit
cache: true
antialiasing: false
smooth: true
// antialiasing: true
// smooth: true
layer.enabled: coverArt
layer.effect: OpacityMask
{
maskSource: Item
{
width: artworkCover.width
height: artworkCover.height
Rectangle
{
anchors.centerIn: parent
width: artworkCover.adapt ? artworkCover.width : Math.min(artworkCover.width, artworkCover.height)
height: artworkCover.adapt ? artworkCover.height : width
radius: Kirigami.Units.devicePixelRatio *3
border.color: altColor
border.width: Kirigami.Units.devicePixelRatio *3
}
}
}
}
onDoubleClicked: artworkCoverDoubleClicked()
......
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
Item
{
height: miniArtSize * 1.1
width: height
x: contentMargins
y: parent.height - (playbackControls.height*0.5)
z: progressBar.z + 1
property bool isHovered : false
ToolTip.delay: 1000
ToolTip.timeout: 5000
ToolTip.visible: isHovered && !isMobile
ToolTip.text: currentTrack.title + " - " + currentTrack.artist
DropShadow
{
anchors.fill: diskBg
visible: diskBg.visible
horizontalOffset: 3
verticalOffset: 5
radius: 8.0
samples: 17
color: "#80000000"
source: diskBg
}
Rectangle
{
id: diskBg
visible: miniArtwork.visible
anchors.centerIn: parent
height: parent.height
width: height
color: darkTextColor
opacity: opacityLevel
z: -999
radius: Math.min(width, height)
}
RotationAnimator on rotation
{
from: 0
to: 360
duration: 5000
loops: Animation.Infinite
running: miniArtwork.visible && isPlaying
}
Image
{
id: miniArtwork
visible: ((!pageStack.wideMode
&& pageStack.currentIndex !== 0)
|| !mainPlaylist.cover.visible) && !mainlistEmpty
focus: true
height: miniArtSize
width: miniArtSize
// anchors.left: parent.left
anchors.centerIn: parent
source:
{
if (currentArtwork)
(currentArtwork.length > 0 && currentArtwork
!== "NONE") ? "file://" + encodeURIComponent(
currentArtwork) : "qrc:/assets/cover.png"
else
"qrc:/assets/cover.png"
}
fillMode: Image.PreserveAspectFit
cache: false
antialiasing: true
layer.enabled: true
layer.effect: OpacityMask
{
maskSource: Item
{
width: miniArtwork.width
height: miniArtwork.height
Rectangle {
anchors.centerIn: parent
width: miniArtwork.adapt ? miniArtwork.width : Math.min(
miniArtwork.width,
miniArtwork.height)
height: miniArtwork.adapt ? miniArtwork.height : width
radius: Math.min(width, height)
}
}
}
}
MouseArea
{
anchors.fill: parent
drag.target: parent
drag.axis: Drag.XAndYAxis
drag.minimumX: 0
drag.maximumX: playbackControls.width - parent.width
drag.minimumY: 0
drag.maximumY: playbackControls.y
onClicked:
{
if (!isMobile && pageStack.wideMode)
root.width = columnWidth
pageStack.currentIndex = 0
}
hoverEnabled: !isMobile
onEntered: isHovered = true
onExited: isHovered = false
}
}
......@@ -54,11 +54,11 @@ Page
TextEdit
{
id: lyricsText
text: currentTrack.lyrics
width: infoRoot.width // ensure correct width
height: implicitHeight
readOnly: true
padding: 20
text: ""
color: darkTextColor
font.pointSize: fontSizes.big
horizontalAlignment: Qt.AlignHCenter
......
......@@ -14,22 +14,29 @@ ListView
currentIndex: currentTrackIndex
highlightFollowsCurrentItem: true
highlightMoveDuration: 0
// snapMode: ListView.SnapOneItem
snapMode: ListView.SnapOneItem
cacheBuffer: width
model : ListModel{}
onMovementEnded:
{
var index = indexAt(contentX, contentY)
if(index !== currentTrackIndex)
Player.playAt(index)
}
delegate: BabeAlbum
{
id: delegate
itemHeight: coverSize
itemWidth: coverSize + space.big
itemWidth: albumsRollRoot.width
albumSize : coverSize
albumRadius : 0
showLabels: false
showIndicator: true
hideRepeated: true
anchors.verticalCenter: parent.verticalCenter
increaseCurrentItem : true
// increaseCurrentItem : true
Connections
{
......
......@@ -73,13 +73,13 @@ Item
{
visible: cover.visible
anchors.fill: parent
color: "transparent"
color: viewBackgroundColor
z: -999
Image
{
id: artwork
visible: false
visible: true
anchors.fill: parent
sourceSize.height: coverSize * 0.2
sourceSize.width: coverSize * 0.2
......
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