Commit d0caa3dd authored by Camilo Higuita's avatar Camilo Higuita

first prototype

parents
QT += quick
CONFIG += c++11
# The following define makes your compiler emit warnings if you use
# any feature of Qt which as been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS
# You can also make your code fail to compile if you use deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0
SOURCES += main.cpp
RESOURCES += qml.qrc
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =
# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =
# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
DISTFILES +=
[Dolphin]
PreviewsShown=true
Timestamp=2017,12,26,12,33,5
Version=4
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Item
{
}
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QFontDatabase>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QFontDatabase::addApplicationFont(":/utils/materialdesignicons-webfont.ttf");
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty())
return -1;
return app.exec();
}
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtLocation 5.9
import QtQuick.Layouts 1.3
import "view_models"
import "widgets"
ApplicationWindow
{
visible: true
width: 400
height: 500
title: qsTr("Babe")
header: BabeBar
{
id: mainToolbar
visible: true
currentIndex: swipeView.currentIndex
onTracksViewClicked: swipeView.currentIndex = 1
onAlbumsViewClicked: swipeView.currentIndex = 2
onArtistsViewClicked: swipeView.currentIndex = 3
onPlaylistsViewClicked: swipeView.currentIndex = 4
onInfoViewClicked: swipeView.currentIndex = 0
}
SwipeView
{
id: swipeView
anchors.fill: parent
currentIndex: 1
Pane
{
width: swipeView.width
height: swipeView.height
Column
{
spacing: 40
width: parent.width
Label
{
width: parent.width
wrapMode: Label.Wrap
horizontalAlignment: Qt.AlignHCenter
text: "info view"
}
}
}
TracksView
{
}
AlbumsView
{
}
ArtistsView
{
}
}
}
<RCC>
<qresource prefix="/">
<file>main.qml</file>
<file>qtquickcontrols2.conf</file>
<file>view_models/BabeAlbum.qml</file>
<file>view_models/BabeGrid.qml</file>
<file>view_models/BabeTable.qml</file>
<file>utils/Icon.qml</file>
<file>widgets/BabeBar.qml</file>
<file>utils/Icons.js</file>
<file>utils/materialdesignicons-webfont.ttf</file>
<file>widgets/TracksView.qml</file>
<file>widgets/PlaylistsView.qml</file>
<file>widgets/InfoView.qml</file>
<file>widgets/ArtistsView.qml</file>
<file>widgets/AlbumsView.qml</file>
<file>view_models/TableDelegate.qml</file>
<file>assets/cover.png</file>
<file>data_models/db_model.qml</file>
</qresource>
</RCC>
; This file can be edited to change the style of the application
; Read "Qt Quick Controls 2 Configuration File" for details:
; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html
[Controls]
Style=Material
[Universal]
Theme=Light
;Accent=Steel
[Material]
Theme=Light
;Accent=BlueGrey
;Primary=BlueGray
import QtQuick 2.3
Text
{
id: text
property string iconColor
font.family: "Material Design Icons"
font.pixelSize: 24
anchors.centerIn: parent
}
This diff is collapsed.
import QtQuick 2.9
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Item
{
signal albumClicked(int index)
property int albumSize : 120
property int borderRadius : 4
property string fillColor: "#31363b"
width: albumSize
height: parseInt(albumSize+(albumSize*0.4))
Rectangle
{
anchors.fill: parent
color: fillColor
radius: borderRadius
border.color: "#222"
}
ColumnLayout
{
Row
{
Layout.fillWidth: true
Image
{
id: img
width: albumSize
height: albumSize
fillMode: Image.PreserveAspectFit
source: icon
layer.enabled: true
layer.effect: OpacityMask
{
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: Math.min(width, height)
}
}
}
}
}
Row
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.leftMargin: 5
Label
{
width: parent.width
text: album
elide: Text.ElideRight
font.pointSize: 10
font.bold: true
color: "white"
lineHeight: 0.7
}
}
Row
{
spacing: 0
Layout.fillWidth: true
Layout.fillHeight: true
Layout.leftMargin: 5
Label
{
width: parent.width
text: artist
elide: Text.ElideRight
font.pointSize: 9
color: "white"
}
}
}
MouseArea {
anchors.fill: parent
onClicked: {
parent.GridView.view.currentIndex = index
console.log(index)
albumClicked(index)
}
}
}
import QtQuick.Controls 2.2
import QtQuick 2.9
Rectangle
{
property int albumSize : 120
property int albumSpacing: 20
property int gridMargin: 50
property int borderRadius : 4
signal albumCoverClicked(string album, string artist)
width: 500
height: 400
ListModel
{
id: appModel
ListElement { album: "Continium"; artist:"John Mayer"; icon: "qrc:/assets/cover.png" }
ListElement { album: "Channel Orange"; artist: "Frank Ocean"; icon: "qrc:/assets/cover.png" }
ListElement { album: "Coloring Book"; artist: "Chance the Rapper"; icon: "qrc:/assets/cover.png" }
ListElement { album: "The Lonely Hour"; artist: "Sam Smith"; icon: "qrc:/assets/cover.png" }
ListElement { album: "Messaging"; artist: "Sam Smith"; icon: "qrc:/assets/cover.png" }
ListElement { album: "Lil Empire"; artist: "Petite Meller"; icon: "qrc:/assets/cover.png" }
ListElement { album: "Lost Generation"; artist: "Unkown";icon: "qrc:/assets/cover.png" }
}
GridView
{
id: grid
anchors.fill: parent
anchors.centerIn: parent
anchors.leftMargin: gridMargin
anchors.topMargin: 20
cellWidth: albumSize+albumSpacing
cellHeight: parseInt(albumSize+(albumSize*0.6))
focus: true
model: appModel
highlight: Rectangle
{
id: highlight
width: albumSize;
height: albumSize;
color: "lightsteelblue"
radius: borderRadius
}
onWidthChanged:
{
var amount = parseInt(grid.width/(albumSize+albumSpacing),10)
var leftSpace = parseInt(grid.width-(amount*albumSize), 10)
var size = parseInt(albumSize+(parseInt(leftSpace/amount, 10)), 10)
size = size > albumSize+albumSpacing ? size : albumSize+albumSpacing
grid.cellWidth = size
// grid.cellHeight = size
console.log(parseInt(size,10))
}
delegate: BabeAlbum
{
id: delegate
albumSize: albumSize
borderRadius: borderRadius
Connections
{
target: delegate
onAlbumClicked:
{
var album = grid.model.get(index).album
var artist = grid.model.get(index).artist
albumCoverClicked(album, artist)
}
}
}
}
}
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
ListView
{
property int currentRow : -1
signal rowClicked(int index)
signal rowPressed(int index)
width: 320
height: 480
focus: true
boundsBehavior: Flickable.StopAtBounds
id: list
flickableDirection: Flickable.AutoFlickDirection
snapMode: ListView.SnapToItem
Menu
{
id: contextMenu
x: parent.width / 2 - width / 2
y: parent.height / 2 - height / 2
modal: true
Label
{
padding: 10
font.bold: true
width: parent.width
horizontalAlignment: Qt.AlignHCenter
elide: Text.ElideRight
text: currentRow >= 0 ? list.model.get(currentRow).title : ""
}
MenuItem
{
text: qsTr("Edit...")
onTriggered: ;
}
MenuItem
{
text: qsTr("Remove")
onTriggered: ;
}
MenuItem
{
text: qsTr("Edit...")
onTriggered: ;
}
MenuItem
{
text: qsTr("Remove")
onTriggered: ;
}
MenuItem
{
text: qsTr("Edit...")
onTriggered: ;
}
MenuItem
{
text: qsTr("Remove")
onTriggered: ;
}
}
ListModel
{
id: listModel
ListElement
{
trackNumber: "2"
title: "Slow Dancing In A Burning Room"
artist: "Jhon Mayer"
album: "Continium"
date: "555 3264"
genre: "555 3264"
rate: "555 3264"
babe: "555 3264"
}
ListElement
{
trackNumber: "3"
title: "Gravity"
artist: "Jhon Mayer"
}
ListElement
{
trackNumber: "3"
title: "Gravity"
artist: "Jhon Mayer"
}
ListElement
{
trackNumber: "3"
title: "Gravity"
artist: "Jhon Mayer"
}
ListElement
{
trackNumber: "3"
title: "Gravity"
artist: "Jhon Mayer"
}
ListElement
{
trackNumber: "3"
title: "Gravity"
artist: "Jhon Mayer"
}
ListElement
{
trackNumber: "3"
title: "Gravity"
artist: "Jhon Mayer"
}
ListElement
{
trackNumber: "3"
title: "Gravity"
artist: "Jhon Mayer"
}
ListElement
{
trackNumber: "3"
title: "Gravity"
artist: "Jhon Mayer"
}
ListElement
{
trackNumber: "3"
title: "Gravity"
artist: "Jhon Mayer"
}
ListElement
{
trackNumber: "3"
title: "Gravity"
artist: "Jhon Mayer"
}
}
model: listModel
delegate: TableDelegate
{
id: delegate
width: list.width
Connections
{
target: delegate
onPressAndHold:
{
currentRow = index
contextMenu.open()
list.rowPressed(index)
}
onClicked:
{
console.log(list.model.get(index).title)
list.rowClicked(index)
}
}
}
ScrollBar.vertical: ScrollBar { }
}
import QtQuick 2.9
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.2
ItemDelegate
{
id: delegate
signal rowSelected(int index)
checkable: true
contentItem: ColumnLayout
{
spacing: 2
Label
{
id: trackTitle
text: title
font.bold: true
elide: Text.ElideRight
Layout.fillWidth: true
font.pointSize: 10
}
Label
{
id: trackInfo
text: artist + " | " + album
font.bold: false
elide: Text.ElideRight
Layout.fillWidth: true
font.pointSize: 9
}
}
// GridLayout
// {
// id: grid
// visible: false
// columns: 2
// rowSpacing: 10
// columnSpacing: 10
// Label
// {
// text: qsTr("Address:")
// Layout.leftMargin: 60
// }
// Label
// {
// text: address
// font.bold: true
// elide: Text.ElideRight
// Layout.fillWidth: true
// }
// Label
// {
// text: qsTr("City:")
// Layout.leftMargin: 60
// }
// Label
// {
// text: city
// font.bold: true
// elide: Text.ElideRight
// Layout.fillWidth: true
// }
// Label
// {
// text: qsTr("Number:")
// Layout.leftMargin: 60
// }
// Label
// {
// text: number
// font.bold: true
// elide: Text.ElideRight
// Layout.fillWidth: true
// }
// }
// }
// states: [
// State
// {
// name: "expanded"
// when: delegate.checked
// PropertyChanges
// {
// target: grid
// visible: true
// }
// }
// ]
}
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import "../view_models"
import "../utils/Icons.js" as MdiFont
import "../utils"
BabeGrid
{
id:albumsView
visible: true
albumSize: 120
borderRadius: 20
Drawer
{
id: drawer
height: parent.height * 0.4
width: parent.width
edge: Qt.BottomEdge
interactive: false
ColumnLayout
{
width: parent.width
height: parent.height
Row
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 20
Label
{
id: albumTitle
width: parent.width - closeBtn
text: ""
elide: Text.ElideRight
font.pointSize: 12
font.bold: true
lineHeight: 0.7
}
ToolButton
{
id: closeBtn
width: 64
height: 16
Icon
{
text: MdiFont.Icon.close
}
onClicked:
{
drawer.close()
console.log("close drawer")
}
}
}
Row
{
Layout.fillWidth: true
Layout.fillHeight: true
BabeTable
{
id: drawerList
width: parent.width
}
}
}
}
onAlbumCoverClicked:
{
albumTitle.text = album
drawer.open()