Commit 4780dbdd authored by Camilo Higuita's avatar Camilo Higuita

ui improvements and better qml code layout for babetable

parent 5ccc5d30
......@@ -234,6 +234,30 @@ int Babe::lastPlaylistPos()
return BAE::loadSettings("PLAYLIST_POS","MAINWINDOW",QVariant(0)).toInt();
}
QString Babe::baseColor()
{
#if defined(Q_OS_ANDROID)
return "#24282c";
#elif defined(Q_OS_LINUX)
QWidget widget;
return widget.palette().color(QPalette::Base).name();
#elif defined(Q_OS_WIN32)
return "#24282c";
#endif
}
QString Babe::darkColor()
{
#if defined(Q_OS_ANDROID)
return "#24282c";
#elif defined(Q_OS_LINUX)
QWidget widget;
return widget.palette().color(QPalette::Dark).name();
#elif defined(Q_OS_WIN32)
return "#24282c";
#endif
}
QString Babe::backgroundColor()
{
#if defined(Q_OS_ANDROID)
......@@ -284,6 +308,18 @@ QString Babe::hightlightColor()
QString Babe::midColor()
{
#if defined(Q_OS_ANDROID)
return "#3e444b";
#elif defined(Q_OS_LINUX)
QWidget widget;
return widget.palette().color(QPalette::Mid).name();
#elif defined(Q_OS_WIN32)
return "#3e444b";
#endif
}
QString Babe::midLightColor()
{
#if defined(Q_OS_ANDROID)
return "#3e444b";
#elif defined(Q_OS_LINUX)
......@@ -294,6 +330,18 @@ QString Babe::midColor()
#endif
}
QString Babe::shadowColor()
{
#if defined(Q_OS_ANDROID)
return "#3e444b";
#elif defined(Q_OS_LINUX)
QWidget widget;
return widget.palette().color(QPalette::Shadow).name();
#elif defined(Q_OS_WIN32)
return "#3e444b";
#endif
}
QString Babe::altColor()
{
#if defined(Q_OS_ANDROID)
......
......@@ -64,11 +64,15 @@ public:
Q_INVOKABLE static void savePlaylistPos(const int &pos);
Q_INVOKABLE static int lastPlaylistPos();
Q_INVOKABLE static QString baseColor();
Q_INVOKABLE static QString darkColor();
Q_INVOKABLE static QString backgroundColor();
Q_INVOKABLE static QString foregroundColor();
Q_INVOKABLE static QString textColor();
Q_INVOKABLE static QString hightlightColor();
Q_INVOKABLE static QString midColor();
Q_INVOKABLE static QString midLightColor();
Q_INVOKABLE static QString shadowColor();
Q_INVOKABLE static QString altColor();
Q_INVOKABLE static QString babeColor();
......
......@@ -5,6 +5,7 @@ import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
//import org.kde.kirigami 2.0 as Kirigami
import "db/Queries.js" as Q
import "utils/Icons.js" as MdiFont
import "utils/Player.js" as Player
import "utils"
......@@ -25,6 +26,7 @@ ApplicationWindow
// property int columnWidth: Kirigami.Units.gridUnit * 13
property int columnWidth: Math.sqrt(root.width*root.height)*0.4
property int currentView : 0
property int iconSize
......@@ -33,7 +35,15 @@ ApplicationWindow
// pageStack.defaultColumnWidth: columnWidth
// pageStack.initialPage: [playlistPage, views]
// overlay.modal: Rectangle
// {
// color: "transparent"
// }
// overlay.modeless: Rectangle
// {
// color: "transparent"
// }
onWidthChanged: if(bae.isMobile())
{
......@@ -50,15 +60,24 @@ ApplicationWindow
if(searchInput.text)
{
var query = searchInput.text
searchView.headerTitle = query
var queries = query.split(",")
var res = bae.searchFor(queries)
searchView.searchRes = bae.searchFor(queries)
searchView.populate(res)
searchView.populate(searchView.searchRes)
// albumsView.filter(res)
currentView = 5
}
}
function clearSearch()
{
searchInput.clear()
searchView.clearTable()
searchView.searchRes = []
currentView = 0
}
Connections
{
target: player
......@@ -112,7 +131,7 @@ ApplicationWindow
id: searchBox
width: parent.width
height: 48
color: bae.midColor()
color: bae.midLightColor()
TextInput
{
......@@ -147,6 +166,24 @@ ApplicationWindow
}
ToolButton
{
anchors.right: parent.right
BabeIcon
{
visible: searchInput.text
text: MdiFont.Icon.eraser
color: bae.foregroundColor()
}
onClicked: clearSearch()
}
// onTextChanged:
// {
// if(searchInput.text.length===0)
......@@ -208,8 +245,8 @@ ApplicationWindow
Connections
{
target: mainPlaylist
onCoverPressed: Player.appendAlbum(tracks)
onCoverDoubleClicked: Player.playAlbum(tracks)
onCoverPressed: Player.appendAll(tracks)
onCoverDoubleClicked: Player.playAll(tracks)
}
}
......@@ -222,6 +259,8 @@ ApplicationWindow
target: tracksView
onRowClicked: Player.addTrack(tracksView.model.get(index))
onQuickPlayTrack: Player.quickPlay(tracksView.model.get(index))
onPlayAll: Player.playAll(bae.get(Q.Query.allTracks))
onAppendAll: Player.appendAll(bae.get(Q.Query.allTracks))
}
}
......@@ -233,8 +272,8 @@ ApplicationWindow
{
target: albumsView
onRowClicked: Player.addTrack(track)
onPlayAlbum: Player.playAlbum(tracks)
onAppendAlbum: Player.appendAlbum(tracks)
onPlayAlbum: Player.playAll(tracks)
onAppendAlbum: Player.appendAll(tracks)
onPlayTrack: Player.quickPlay(track)
}
}
......@@ -247,8 +286,8 @@ ApplicationWindow
{
target: artistsView
onRowClicked: Player.addTrack(track)
onPlayAlbum: Player.playAlbum(tracks)
onAppendAlbum: Player.appendAlbum(tracks)
onPlayAlbum: Player.playAll(tracks)
onAppendAlbum: Player.appendAll(tracks)
onPlayTrack: Player.quickPlay(track)
}
}
......@@ -264,6 +303,9 @@ ApplicationWindow
target: searchView
onRowClicked: Player.addTrack(searchView.model.get(index))
onQuickPlayTrack: Player.quickPlay(searchView.model.get(index))
onPlayAll: Player.playAll(searchView.searchRes)
onAppendAll: Player.appendAll(searchView.searchRes)
onHeaderClosed: clearSearch()
}
}
......
......@@ -125,7 +125,7 @@ function addTrack(track)
root.mainPlaylist.list.positionViewAtEnd()
}
function appendAlbum(tracks)
function appendAll(tracks)
{
for(var i in tracks)
appendTrack(tracks[i])
......@@ -136,7 +136,8 @@ function savePlaylist()
{
var list = []
var n = root.mainPlaylist.list.count
for(var i=0 ; i<n; i++)
n = n > 15 ? 15 : n
for(var i=0 ; i < n; i++)
{
var url = root.mainPlaylist.list.model.get(i).url
list.push(url)
......@@ -165,7 +166,7 @@ function cleanPlaylist()
}
}
function playAlbum(tracks)
function playAll(tracks)
{
root.mainPlaylist.list.clearTable()
root.currentView = 0
......
......@@ -10,7 +10,7 @@ Item
signal albumClicked(int index)
property int albumSize : 150
property int borderRadius : 2
property string fillColor: bae.midColor()
property string fillColor: bae.midLightColor()
property string textColor: bae.foregroundColor()
property int fontSize : bae.isMobile()? 12 : 10
property bool hide : false
......
......@@ -115,7 +115,28 @@ Pane
}
}
ScrollBar.vertical: ScrollBar{ visible: !bae.isMobile()}
ScrollBar.vertical: ScrollBar
{
id: scrollBar
visible: !bae.isMobile()
size: 0.3
position: 0.2
active: true
background : Rectangle
{
radius: 12
color: bae.backgroundColor()
}
contentItem: Rectangle
{
implicitWidth: 6
implicitHeight: 100
radius: width / 2
color: scrollBar.pressed ? bae.hightlightColor() : bae.darkColor()
}
}
}
}
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import "../utils/Icons.js" as MdiFont
import "../utils"
ListView
{
......@@ -8,6 +10,8 @@ ListView
id: list
property int currentRow : -1
property bool headerBar: false
property bool trackNumberVisible
property bool quickBtnsVisible : true
property bool quickPlayVisible : true
......@@ -15,11 +19,20 @@ ListView
property bool trackDuration
property bool trackRating
property string headerTitle
property bool headerClose : false
// default property alias customItem : customItem.children
property alias holder : holder
signal rowClicked(int index)
signal rowPressed(int index)
signal quickPlayTrack(int index)
signal queueTrack(int index)
signal headerClosed()
signal playAll()
signal appendAll()
width: 320
height: 480
......@@ -54,6 +67,74 @@ ListView
z: -999
}
headerPositioning: ListView.OverlayHeader
header: Rectangle
{
id: tableHeader
width: parent.width
height: headerBar ? 48 : 0
color: bae.midLightColor()
visible: headerBar
z: 999
RowLayout
{
anchors.fill: parent
ToolButton
{
id: closeBtn
visible: headerClose
width: parent.height
height: parent.height
BabeIcon { text: MdiFont.Icon.close }
onClicked: headerClosed()
}
Label
{
text: headerTitle || ""
Layout.fillHeight: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignCenter
elide: Text.ElideRight
font.pointSize: 12
font.bold: true
lineHeight: 0.7
color: bae.foregroundColor()
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
ToolButton
{
id: appendBtn
Layout.fillHeight: true
width: parent.height
height: parent.height
BabeIcon {text: MdiFont.Icon.playlistPlus}
onClicked: appendAll()
}
ToolButton
{
id: playAllBtn
Layout.fillHeight: true
width: parent.height
height: parent.height
BabeIcon {text: MdiFont.Icon.playBoxOutline}
onClicked: playAll()
}
}
}
Component
{
id: highlight
......@@ -133,7 +214,27 @@ ListView
}
}
ScrollBar.vertical: ScrollBar { }
ScrollBar.vertical: ScrollBar
{
id: scrollBar
size: 0.3
position: 0.2
active: true
background : Rectangle
{
radius: 12
color: bae.backgroundColor()
}
contentItem: Rectangle
{
implicitWidth: 6
implicitHeight: 100
radius: width / 2
color: scrollBar.pressed ? bae.hightlightColor() : bae.darkColor()
}
}
}
......@@ -25,10 +25,16 @@ ItemDelegate
background: Rectangle
{
color: Qt.lighter(trackMood, 1.5) || "transparent"
opacity: 0.4
}
color:
{
if(trackMood.length>0)
Qt.lighter(trackMood)
else
index % 2 === 0 ? bae.midColor() : "transparent"
}
opacity: 0.3
}
MouseArea
{
anchors.fill: parent
......
......@@ -58,9 +58,9 @@ Menu
implicitWidth: 200
implicitHeight: 40
color: bae.altColor()
border.color: bae.midColor()
border.color: bae.midLightColor()
border.width: 1
radius: 4
radius: 3
}
......
......@@ -40,6 +40,7 @@ BabeGrid
Drawer
{
id: drawer
height: parent.height * 0.4
width: parent.width
edge: Qt.BottomEdge
......@@ -53,103 +54,22 @@ BabeGrid
anchors.fill: parent
z: -999
color: bae.altColor()
}
Column
{
anchors.fill: parent
Rectangle
{
id: titleBar
width: parent.width
height: 48
z: 1
color: bae.midColor()
Row
{
anchors.fill: parent
ToolButton
{
id: playAllBtn
width: parent.height
height: parent.height
BabeIcon {text: MdiFont.Icon.playBoxOutline}
onClicked:
{
drawer.close()
var data = albumsViewGrid.gridModel.get(albumsViewGrid.grid.currentIndex)
var query = Q.Query.albumTracks_.arg(data.album)
query = query.arg(data.artist)
var tracks = bae.get(query)
albumsViewGrid.playAlbum(tracks)
}
}
ToolButton
{
id: appendBtn
width: parent.height
height: parent.height
BabeIcon {text: MdiFont.Icon.playlistPlus}
onClicked:
{
var data = albumsView.gridModel.get(albumsViewGrid.grid.currentIndex)
var query = Q.Query.albumTracks_.arg(data.album)
query = query.arg(data.artist)
var tracks = bae.get(query)
albumsViewGrid.appendAlbum(tracks)
drawer.close()
}
}
Label
{
id: albumTitle
width: parent.width - closeBtn.width - playAllBtn.width - appendBtn.width
height: parent.height
elide: Text.ElideRight
font.pointSize: 12
font.bold: true
lineHeight: 0.7
color: bae.foregroundColor()
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
ToolButton
{
id: closeBtn
width: parent.height
height: parent.height
BabeIcon { text: MdiFont.Icon.close }
onClicked: drawer.close()
}
}
}
BabeTable
{
id: drawerList
width: parent.width
height: parent.height - titleBar.height
height: parent.height
trackNumberVisible: true
headerBar: true
headerClose: true
onRowClicked:
{
drawer.close()
......@@ -167,6 +87,30 @@ BabeGrid
albumsViewGrid.queueTrack(model.get(index))
drawer.close()
}
onPlayAll:
{
drawer.close()
var data = albumsViewGrid.gridModel.get(albumsViewGrid.grid.currentIndex)
var query = Q.Query.albumTracks_.arg(data.album)
query = query.arg(data.artist)
var tracks = bae.get(query)
albumsViewGrid.playAlbum(tracks)
}
onAppendAll:
{
var data = albumsView.gridModel.get(albumsViewGrid.grid.currentIndex)
var query = Q.Query.albumTracks_.arg(data.album)
query = query.arg(data.artist)
var tracks = bae.get(query)
albumsViewGrid.appendAlbum(tracks)
drawer.close()
}
onHeaderClosed: drawer.close()
}
}
......@@ -174,7 +118,7 @@ BabeGrid
onAlbumCoverClicked:
{
albumTitle.text = album
drawerList.headerTitle = album
drawer.open()
drawerList.clearTable()
......
......@@ -35,7 +35,7 @@ BabeGrid
}
onBgClicked: if(drawer.visible) drawer.close()
onFocusChanged: drawer.close()
onFocusChanged: drawer.close()
Drawer
{
......@@ -49,8 +49,6 @@ BabeGrid
dragMargin: 0
clip: true
background: Rectangle
{
anchors.fill: parent
......@@ -62,99 +60,14 @@ BabeGrid
{
anchors.fill: parent
Rectangle
{
id: titleBar
width: parent.width
height: 48
z: 1
color: bae.midColor()
Row
{
anchors.fill: parent
ToolButton
{
width: parent.height
height: parent.height
id: playAllBtn
BabeIcon {text: MdiFont.Icon.playBoxOutline}
onClicked:
{
drawer.close()
var data = artistsViewGrid.gridModel.get(artistsViewGrid.grid.currentIndex)
var query = Q.Query.artistTracks_.arg(data.artist)
var tracks = bae.get(query)
artistsViewGrid.playAlbum(tracks)
}
}
ToolButton
{
id: appendBtn
width: parent.height
height: parent.height
BabeIcon {text: MdiFont.Icon.playlistPlus}
onClicked:
{
var data = artistsViewGrid.gridModel.get(artistsViewGrid.grid.currentIndex)
var query = Q.Query.artistTracks_.arg(data.artist)
var tracks = bae.get(query)
artistsViewGrid.appendAlbum(tracks)
drawer.close()
}
}
Label
{
id: artistTitle
width: parent.width - closeBtn.width - playAllBtn.width - appendBtn.width
height: parent.height
elide: Text.ElideRight
font.pointSize: 12
font.bold: true
lineHeight: 0.7
color: bae.foregroundColor()
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
ToolButton
{
id: closeBtn
width: parent.height
height: parent.height
BabeIcon
{
text: MdiFont.Icon.close
}
onClicked:
{
drawer.close()
console.log("close drawer")
}
}
}
}
BabeTable
{
id: drawerList
width: parent.width
height: parent.height - titleBar.height
height: parent.height
trackNumberVisible: true
quickBtnsVisible: true
headerBar: true
onRowClicked:
{
drawer.close()
......@@ -172,13 +85,32 @@ BabeGrid
drawer.close()
artistsViewGrid.queueTrack(model.get(index))
}
onPlayAll:
{
drawer.close()
var data = artistsViewGrid.gridModel.get(artistsViewGrid.grid.currentIndex)
var query = Q.Query.artistTracks_.arg(data.artist)
var tracks = bae.get(query)
artistsViewGrid.playAlbum(tracks)