Commit 0e1cf750 authored by Camilo Higuita's avatar Camilo Higuita

ux animatiions on buttons and footer and update to kirigami drawer handle for settings view button

parent 11455cc0
kirigami @ afd05a51
Subproject commit 7f743390899b2418d4694d49b1eab4d360c25990
Subproject commit afd05a512f7ef820763aa45411a20fa3781a808e
......@@ -265,7 +265,7 @@ QString Babe::baseColor()
QString Babe::darkColor()
{
#if defined(Q_OS_ANDROID)
return "#24282c";
return "#111";
#elif defined(Q_OS_LINUX)
QWidget widget;
return widget.palette().color(QPalette::Dark).name();
......
......@@ -99,6 +99,15 @@ Kirigami.ApplicationWindow
readonly property int headerHeight: rowHeight
readonly property int contentMargins : 15
readonly property var viewsIndex : ({
"babeit": 0,
"tracks" : 1,
"albums" : 2,
"artists" : 3,
"playlists" : 4,
"search" : 5
})
/*PROPS*/
property int toolBarIconSize: bae.loadSetting("ICON_SIZE", "BABE", isMobile ? 24 : 22)
property int toolBarHeight : isMobile ? 48 : toolBarIconSize *2
......@@ -106,7 +115,7 @@ Kirigami.ApplicationWindow
property int columnWidth: Kirigami.Units.gridUnit * 20
property int coverSize: isMobile ? Math.sqrt(root.width*root.height)*0.4 : columnWidth * 0.65
property int currentView : 0
property int currentView : viewsIndex.tracks
property alias mainPlaylist : mainPlaylist
......@@ -244,7 +253,7 @@ Kirigami.ApplicationWindow
// root.width = wideSize
pageStack.currentIndex = 1
currentView = 0
currentView = viewsIndex.tracks
}
onAlbumsViewClicked:
......@@ -253,7 +262,7 @@ Kirigami.ApplicationWindow
// root.width = wideSize
pageStack.currentIndex = 1
currentView = 1
currentView = viewsIndex.albums
}
onArtistsViewClicked:
......@@ -262,7 +271,7 @@ Kirigami.ApplicationWindow
// root.width = wideSize
pageStack.currentIndex = 1
currentView = 2
currentView = viewsIndex.artists
}
onPlaylistsViewClicked:
......@@ -271,7 +280,7 @@ Kirigami.ApplicationWindow
// root.width = wideSize
pageStack.currentIndex = 1
currentView = 3
currentView = viewsIndex.playlists
}
onBabeViewClicked:
......@@ -280,19 +289,21 @@ Kirigami.ApplicationWindow
// root.width = wideSize
pageStack.currentIndex = 1
currentView = 4
currentView = viewsIndex.babeit
}
onSearchViewClicked:
{
pageStack.currentIndex = 1
currentView = 5
currentView = viewsIndex.search
}
}
property alias playIcon: playIcon
property alias babeBtnIcon: babeBtnIcon
property alias progressBar : progressBar
property alias animFooter : animFooter
property string durationTimeLabel : "00:00"
property string progressTimeLabel : "00:00"
......@@ -318,6 +329,7 @@ Kirigami.ApplicationWindow
Rectangle
{
id: footerBg
anchors.fill: parent
color: midLightColor
opacity: opacityLevel
......@@ -339,6 +351,20 @@ Kirigami.ApplicationWindow
top: parent.top
}
}
SequentialAnimation
{
id: animFooter
PropertyAnimation
{
target: footerBg
property: "color"
easing.type: Easing.InOutQuad
from: darkColor
to: midLightColor
duration: 500
}
}
}
Slider
......@@ -629,18 +655,22 @@ Kirigami.ApplicationWindow
currentIndex: currentView
onCurrentItemChanged:
{
currentItem.forceActiveFocus();
}
onCurrentItemChanged: currentItem.forceActiveFocus()
onCurrentIndexChanged:
{
currentView = currentIndex
if(currentView === 0) mainPlaylist.list.forceActiveFocus()
else if(currentView === 1) tracksView.forceActiveFocus()
if(pageStack.currentIndex === 0) mainPlaylist.list.forceActiveFocus()
else if(currentView === viewsIndex.tracks) tracksView.forceActiveFocus()
else if(currentView === viewsIndex.search) searchView.forceActiveFocus()
}
LogginForm
{
id: babeView
}
TracksView
{
id: tracksView
......@@ -653,7 +683,6 @@ Kirigami.ApplicationWindow
onAppendAll: Player.appendAll(bae.get(Q.GET.allTracks))
}
}
AlbumsView
......@@ -705,12 +734,6 @@ Kirigami.ApplicationWindow
}
}
LogginForm
{
id: babeView
}
SearchTable
{
id: searchView
......
......@@ -24,7 +24,7 @@ function playTrack(track)
if(!root.active)
bae.notifySong(root.currentTrack.url)
}
}
var lyrics = root.currentTrack.lyrics
......@@ -104,7 +104,7 @@ function playAt(index)
function quickPlay(track)
{
// root.pageStack.currentIndex = 0
// root.pageStack.currentIndex = 0
appendTrack(track)
playAt(root.mainPlaylist.list.count-1)
root.mainPlaylist.list.positionViewAtEnd()
......@@ -120,7 +120,6 @@ function appendTracksAt(tracks, at)
root.mainPlaylist.list.model.insert(parseInt(at)+parseInt(i), tracks[i])
}
}
function appendTrack(track)
......@@ -128,13 +127,12 @@ function appendTrack(track)
if(track)
{
root.mainPlaylist.list.model.append(track)
root.animFooter.running = true
if(root.sync === true)
{
{
root.infoMsgAnim()
addToPlaylist([track.url], root.syncPlaylist)
}
}
// if(track)
......@@ -242,8 +240,8 @@ function addToPlaylist(urls, playlist)
if(!isMobile)
bae.notify(playlist, urls.length + " tracks added to the playlist:\n"+urls.join("\n"))
// else
// babeNotify.notify(urls.length + " tracks added to " +playlist)
// else
// babeNotify.notify(urls.length + " tracks added to " +playlist)
}
}
......
......@@ -11,11 +11,13 @@ ToolButton
property int iconSize : toolBarIconSize
property color iconColor: foregroundColor
readonly property string defaultColor : foregroundColor
property bool anim : false
// icon.name: isMobile ? "" : babeButton.iconName
// icon.width: isMobile ? 0 : babeButton.iconSize
// // icon.height: isMobile ? 0 : babeButton.iconSize
// icon.color: isMobile ? "transparent" : (iconColor || defaultColor)
onClicked: if(anim) animIcon.running = true
// icon.name: isMobile ? "" : babeButton.iconName
// icon.width: isMobile ? 0 : babeButton.iconSize
// // icon.height: isMobile ? 0 : babeButton.iconSize
// icon.color: isMobile ? "transparent" : (iconColor || defaultColor)
Kirigami.Icon
{
......@@ -39,6 +41,19 @@ ToolButton
iconSize: babeButton.iconSize
}
SequentialAnimation
{
id: animIcon
PropertyAnimation
{
target: babeIcon
property: "color"
easing.type: Easing.InOutQuad
from: babeColor
to: iconColor
duration: 500
}
}
}
......@@ -73,41 +73,41 @@ BabeList
id: closeBtn
width: rowHeight
visible: headerClose
iconName: "window-close" //"dialog-close"
onClicked: headerClosed()
anim : true
iconName : "window-close" //"dialog-close"
onClicked : headerClosed()
}
BabeButton
{
id: playAllBtn
visible: headerBar && count > 0
iconName: /*"amarok_clock"*/ "media-playback-start"
onClicked: playAll()
id : playAllBtn
visible : headerBar && count > 0
anim : true
iconName : /*"amarok_clock"*/ "media-playback-start"
onClicked : playAll()
}
Label
{
text: headerTitle || count +" tracks"
Layout.fillHeight: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignCenter
text : headerTitle || count +" tracks"
Layout.fillHeight : true
Layout.fillWidth : true
Layout.alignment : Qt.AlignCenter
elide: Text.ElideRight
elide : Text.ElideRight
// font.pointSize: 8
font.bold: false
color: foregroundColor
font.bold : false
color : foregroundColor
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
horizontalAlignment : Text.AlignHCenter
verticalAlignment : Text.AlignVCenter
}
BabeButton
{
id: appendBtn
visible: headerBar && count > 0
anim : true
iconName : "archive-insert"//"media-repeat-track-amarok"
onClicked: appendAll()
}
......
......@@ -133,6 +133,7 @@ ItemDelegate
iconName: "media-playback-start"
iconColor: textColor
onClicked: play()
anim: true
}
}
......
......@@ -20,7 +20,7 @@ ToolBar
signal artistsViewClicked()
signal playlistsViewClicked()
signal babeViewClicked()
// signal playlistViewClicked()
// signal playlistViewClicked()
signal searchViewClicked()
signal settingsViewClicked()
......@@ -56,16 +56,16 @@ ToolBar
BabeButton
{
id: settingsView
iconName: /*"headphones"*/ /*"media-optical-audio"*/ "application-menu"
iconColor: settingsDrawer.visible ? babeColor : textColor/*(pageStack.wideMode || pageStack.currentIndex === 0 ) && !isMobile ? accentColor : textColor*/
onClicked: settingsViewClicked()/*playlistViewClicked()*/
iconName: "love"
iconColor: accent && currentIndex === viewsIndex.babeit ? accentColor : textColor
onClicked: babeViewClicked()
hoverEnabled: !isMobile
ToolTip.delay: 1000
ToolTip.timeout: 5000
ToolTip.visible: hovered && !isMobile
ToolTip.text: qsTr("Settings")
ToolTip.text: qsTr("Babe")
}
Item
......@@ -78,7 +78,7 @@ ToolBar
id: tracksView
iconName: /*"musicnote"*/ "filename-filetype-amarok"
iconColor: accent && currentIndex === 0? accentColor : textColor
iconColor: accent && currentIndex === viewsIndex.tracks ? accentColor : textColor
onClicked: tracksViewClicked()
hoverEnabled: true
......@@ -93,7 +93,7 @@ ToolBar
id: albumsView
iconName: /*"album" */ "media-album-cover"
iconColor: accent && currentIndex === 1 ? accentColor : textColor
iconColor: accent && currentIndex === viewsIndex.albums ? accentColor : textColor
onClicked: albumsViewClicked()
hoverEnabled: true
......@@ -108,7 +108,7 @@ ToolBar
id: artistsView
iconName: /*"artist" */ "view-media-artist"
iconColor: accent && currentIndex === 2? accentColor : textColor
iconColor: accent && currentIndex === viewsIndex.artists ? accentColor : textColor
onClicked: artistsViewClicked()
hoverEnabled: true
......@@ -123,7 +123,7 @@ ToolBar
id: playlistsView
iconName: /*"library-music"*/ "view-media-playlist"
iconColor: accent && currentIndex === 3? accentColor : textColor
iconColor: accent && currentIndex === viewsIndex.playlists ? accentColor : textColor
onClicked: playlistsViewClicked()
......@@ -141,8 +141,8 @@ ToolBar
BabeButton
{
id: searchView
iconColor: accent && currentIndex === 5? accentColor : textColor
// visible: !(searchInput.focus || searchInput.text)
iconColor: accent && currentIndex === viewsIndex.search ? accentColor : textColor
iconName: "edit-find" //"search"
onClicked: searchViewClicked()
hoverEnabled: !isMobile
......@@ -152,24 +152,6 @@ ToolBar
ToolTip.text: qsTr("Search")
}
// BabeButton
// {
// iconName: "love"
// iconColor: accent && currentIndex === 4? accentColor : textColor
// onClicked: babeViewClicked()
// hoverEnabled: !isMobile
// ToolTip.delay: 1000
// ToolTip.timeout: 5000
// ToolTip.visible: hovered && !isMobile
// ToolTip.text: qsTr("Babe")
// }
}
}
......@@ -58,10 +58,10 @@ BabeList
BabeButton
{
id: createPlaylistBtn
iconName: "list-add"
onClicked: newPlaylistDialog.open()
id : createPlaylistBtn
anim : true
iconName : "list-add"
onClicked : newPlaylistDialog.open()
}
......
......@@ -8,7 +8,7 @@ import org.kde.kirigami 2.2 as Kirigami
Kirigami.GlobalDrawer
{
id: settingsView
handleVisible: false
handleVisible: true
signal iconSizeChanged(int size)
readonly property bool activeBrainz : bae.brainzState()
......
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