I Have made some more progress. Redisign, borderless, better organization, sliding full menu sidebar. Added a QSqlRelationalTabelModel, search, filtering and an RSS News feed reader. As well as better overall document structuring.
Here is the way I have used the implemented the project in case anybody wants to do something similar:
PokeUI2.pro
QT += qml sql quick widgets network
LIBS += -LC:/OpenSSL-Win64/lib -llibeay32
LIBS += -LC:/OpenSSL-Win64/lib -lssleay32
INCLUDEPATH += C:/OpenSSL-Win64/include
CONFIG += c++11
SOURCES += main.cpp \
cardsmodel.cpp \
pokeapp.cpp \
albumsmodel.cpp \
albummodel.cpp \
proxymodel.cpp
RESOURCES += qml.qrc
RC_ICONS = appIcon.ico
# 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 =
# 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
# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
HEADERS += \
cursorposprovider.h \
cardsmodel.h \
pokeapp.h \
albumsmodel.h \
albummodel.h \
proxymodel.h
QT += qml sql quick widgets network
LIBS += -LC:/OpenSSL-Win64/lib -llibeay32
LIBS += -LC:/OpenSSL-Win64/lib -lssleay32
INCLUDEPATH += C:/OpenSSL-Win64/include
CONFIG += c++11
SOURCES += main.cpp \
cardsmodel.cpp \
pokeapp.cpp \
albumsmodel.cpp \
albummodel.cpp \
proxymodel.cpp
RESOURCES += qml.qrc
RC_ICONS = appIcon.ico
# 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 =
# 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
# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
HEADERS += \
cursorposprovider.h \
cardsmodel.h \
pokeapp.h \
albumsmodel.h \
albummodel.h \
proxymodel.h
To copy to clipboard, switch view to plain text mode
main.cpp
#include <QGuiApplication>
#include <QApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QDebug>
#include <QSqlError>
#include "cursorposprovider.h"
#include "pokeapp.h"
int main(int argc, char *argv[])
{
QQmlApplicationEngine engine;
qmlRegisterType<PokeApp>("PokeApp.Classes.Core", 1, 0, "PokeApp");
PokeApp pokeApp;
CursorPosProvider mousePosProvider;
QQmlContext *ctxt0 = engine.rootContext();
ctxt0->setContextProperty("pokeApp", &pokeApp);
QQmlContext *ctxt1 = engine.rootContext();
ctxt1->setContextProperty("mousePosition", &mousePosProvider);
QQmlContext *ctxt2 = engine.rootContext();
ctxt2->setContextProperty("albumsModel", pokeApp.getAlbumsModel());
QQmlContext *ctxt3 = engine.rootContext();
ctxt3->setContextProperty("cardsModel", pokeApp.getCardsModel());
QQmlContext *ctxt4 = engine.rootContext();
ctxt4->setContextProperty("proxyModel", pokeApp.getProxyModel());
return app.exec();
}
#include <QGuiApplication>
#include <QApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QDebug>
#include <QSqlError>
#include "cursorposprovider.h"
#include "pokeapp.h"
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDp iScaling);
QApplication app(argc, argv);
QQmlApplicationEngine engine;
qmlRegisterType<PokeApp>("PokeApp.Classes.Core", 1, 0, "PokeApp");
PokeApp pokeApp;
CursorPosProvider mousePosProvider;
QQmlContext *ctxt0 = engine.rootContext();
ctxt0->setContextProperty("pokeApp", &pokeApp);
QQmlContext *ctxt1 = engine.rootContext();
ctxt1->setContextProperty("mousePosition", &mousePosProvider);
QQmlContext *ctxt2 = engine.rootContext();
ctxt2->setContextProperty("albumsModel", pokeApp.getAlbumsModel());
QQmlContext *ctxt3 = engine.rootContext();
ctxt3->setContextProperty("cardsModel", pokeApp.getCardsModel());
QQmlContext *ctxt4 = engine.rootContext();
ctxt4->setContextProperty("proxyModel", pokeApp.getProxyModel());
engine.load(QUrl(QLatin1String("qrc:/main.qml")));
return app.exec();
}
To copy to clipboard, switch view to plain text mode
albumsmodel.h
#ifndef ALBUMSMODEL_H
#define ALBUMSMODEL_H
#include <QSqlRelationalTableModel>
{
Q_OBJECT
Q_PROPERTY( int count READ rowCount() NOTIFY countChanged())
public:
explicit AlbumsModel
(const AlbumsModel
&other,
QObject *parent
= 0);
~AlbumsModel();
virtual void setTable
( const QString &table_name
);
virtual QHash<int, QByteArray> roleNames() const;
void generateRoleNames();
signals:
void countChanged();
private:
int count;
QHash<int, QByteArray> roles;
};
#endif // ALBUMSMODEL_H
#ifndef ALBUMSMODEL_H
#define ALBUMSMODEL_H
#include <QSqlRelationalTableModel>
class AlbumsModel : public QSqlRelationalTableModel
{
Q_OBJECT
Q_PROPERTY( int count READ rowCount() NOTIFY countChanged())
public:
explicit AlbumsModel(const AlbumsModel &other, QObject *parent = 0);
explicit AlbumsModel(QObject *parent = 0, QSqlDatabase db = QSqlDatabase());
~AlbumsModel();
Q_INVOKABLE QVariant data(const QModelIndex &index, int role=Qt::DisplayRole ) const;
virtual void setTable ( const QString &table_name );
virtual QHash<int, QByteArray> roleNames() const;
void generateRoleNames();
signals:
void countChanged();
private:
int count;
QHash<int, QByteArray> roles;
};
#endif // ALBUMSMODEL_H
To copy to clipboard, switch view to plain text mode
albumsmodel.cpp
#include "albumsmodel.h"
AlbumsModel
::AlbumsModel(const AlbumsModel
&other,
QObject *parent
){
}
{
}
AlbumsModel::~AlbumsModel()
{
}
{
if(index.row() >= rowCount())
{
}
if(role < Qt::UserRole)
{
}
QModelIndex modelIndex
= this
->index
(index.
row(), role
- Qt
::UserRole - 1 );
}
void AlbumsModel::generateRoleNames()
{
roles.clear();
for (int i = 0; i < columnCount(); i++)
{
roles
[Qt
::UserRole + i
+ 1] = QVariant(headerData
(i, Qt
::Horizontal).
toString()).
toByteArray();
}
}
QHash<int, QByteArray> AlbumsModel::roleNames() const
{
return roles;
}
void AlbumsModel
::setTable ( const QString &table_name
) {
generateRoleNames();
}
#include "albumsmodel.h"
AlbumsModel::AlbumsModel(const AlbumsModel &other, QObject *parent)
: QSqlRelationalTableModel(parent,other.database())
{
}
AlbumsModel::AlbumsModel(QObject *parent, QSqlDatabase db)
: QSqlRelationalTableModel(parent,db)
{
}
AlbumsModel::~AlbumsModel()
{
}
QVariant AlbumsModel::data( const QModelIndex & index, int role ) const
{
if(index.row() >= rowCount())
{
return QString("");
}
if(role < Qt::UserRole)
{
return QSqlRelationalTableModel::data(index, role);
}
QModelIndex modelIndex = this->index(index.row(), role - Qt::UserRole - 1 );
return QSqlQueryModel::data(modelIndex, Qt::EditRole);
}
void AlbumsModel::generateRoleNames()
{
roles.clear();
for (int i = 0; i < columnCount(); i++)
{
roles[Qt::UserRole + i + 1] = QVariant(headerData(i, Qt::Horizontal).toString()).toByteArray();
}
}
QHash<int, QByteArray> AlbumsModel::roleNames() const
{
return roles;
}
void AlbumsModel::setTable ( const QString &table_name )
{
QSqlRelationalTableModel::setTable(table_name);
generateRoleNames();
}
To copy to clipboard, switch view to plain text mode
cardsmodel.h
#ifndef CARDSMODEL_H
#define CARDSMODEL_H
#include <QSqlRelationalTableModel>
{
Q_OBJECT
Q_PROPERTY( int count READ rowCount() NOTIFY countChanged())
public:
explicit CardsModel
(const CardsModel
&other,
QObject *parent
= 0);
~CardsModel();
virtual void setTable
( const QString &table_name
);
virtual QHash<int, QByteArray> roleNames() const;
void generateRoleNames();
signals:
void countChanged();
private:
int count;
QHash<int, QByteArray> roles;
};
#endif // CARDSMODEL_H
#ifndef CARDSMODEL_H
#define CARDSMODEL_H
#include <QSqlRelationalTableModel>
class CardsModel : public QSqlRelationalTableModel
{
Q_OBJECT
Q_PROPERTY( int count READ rowCount() NOTIFY countChanged())
public:
explicit CardsModel(const CardsModel &other, QObject *parent = 0);
explicit CardsModel(QObject *parent = 0, QSqlDatabase db = QSqlDatabase());
~CardsModel();
Q_INVOKABLE QVariant data(const QModelIndex &index, int role=Qt::DisplayRole ) const;
virtual void setTable ( const QString &table_name );
virtual QHash<int, QByteArray> roleNames() const;
void generateRoleNames();
signals:
void countChanged();
private:
int count;
QHash<int, QByteArray> roles;
};
#endif // CARDSMODEL_H
To copy to clipboard, switch view to plain text mode
cardsmodel.cpp
#include "cardsmodel.h"
CardsModel
::CardsModel(const CardsModel
&other,
QObject *parent
){
}
{
}
CardsModel::~CardsModel()
{
}
{
if(index.row() >= rowCount())
{
}
if(role < Qt::UserRole)
{
}
QModelIndex modelIndex
= this
->index
(index.
row(), role
- Qt
::UserRole - 1 );
}
void CardsModel::generateRoleNames()
{
roles.clear();
for (int i = 0; i < columnCount(); i++)
{
roles
[Qt
::UserRole + i
+ 1] = QVariant(headerData
(i, Qt
::Horizontal).
toString()).
toByteArray();
}
}
QHash<int, QByteArray> CardsModel::roleNames() const
{
return roles;
}
void CardsModel
::setTable ( const QString &table_name
) {
generateRoleNames();
}
#include "cardsmodel.h"
CardsModel::CardsModel(const CardsModel &other, QObject *parent)
: QSqlRelationalTableModel(parent,other.database())
{
}
CardsModel::CardsModel(QObject *parent, QSqlDatabase db)
: QSqlRelationalTableModel(parent,db)
{
}
CardsModel::~CardsModel()
{
}
QVariant CardsModel::data( const QModelIndex & index, int role ) const
{
if(index.row() >= rowCount())
{
return QString("");
}
if(role < Qt::UserRole)
{
return QSqlRelationalTableModel::data(index, role);
}
QModelIndex modelIndex = this->index(index.row(), role - Qt::UserRole - 1 );
return QSqlQueryModel::data(modelIndex, Qt::EditRole);
}
void CardsModel::generateRoleNames()
{
roles.clear();
for (int i = 0; i < columnCount(); i++)
{
roles[Qt::UserRole + i + 1] = QVariant(headerData(i, Qt::Horizontal).toString()).toByteArray();
}
}
QHash<int, QByteArray> CardsModel::roleNames() const
{
return roles;
}
void CardsModel::setTable ( const QString &table_name )
{
QSqlRelationalTableModel::setTable(table_name);
generateRoleNames();
}
To copy to clipboard, switch view to plain text mode
cursorposprovider.h
#ifndef CURSORPOSPROVIDER_H
#define CURSORPOSPROVIDER_H
#include <Qobject>
#include <QPointF>
#include <QCursor>
class CursorPosProvider
: public QObject{
Q_OBJECT
public:
explicit CursorPosProvider
(QObject *parent
= nullptr
) : QObject(parent
) {
}
virtual ~CursorPosProvider() = default;
{
}
};
#endif // CURSORPOSPROVIDER_H
#ifndef CURSORPOSPROVIDER_H
#define CURSORPOSPROVIDER_H
#include <Qobject>
#include <QPointF>
#include <QCursor>
class CursorPosProvider : public QObject
{
Q_OBJECT
public:
explicit CursorPosProvider(QObject *parent = nullptr) : QObject(parent)
{
}
virtual ~CursorPosProvider() = default;
Q_INVOKABLE QPointF cursorPos()
{
return QCursor::pos();
}
};
#endif // CURSORPOSPROVIDER_H
To copy to clipboard, switch view to plain text mode
pokeapp.h
#ifndef POKEAPP_H
#define POKEAPP_H
#include <QtQml>
#include <QSqlError>
#include <QObject>
#include <QDebug>
#include <QPixmap>
#include <QSqlRelationalTableModel>
#include <QSortFilterProxyModel>
#include "cardsmodel.h"
#include "albumsmodel.h"
#include "proxymodel.h"
{
Q_OBJECT
// Models
Q_PROPERTY(AlbumsModel *albumsModel READ getAlbumsModel)
Q_PROPERTY(CardsModel *cardsModel READ getCardsModel)
Q_PROPERTY(ProxyModel *proxyModel READ getProxyModel)
public:
explicit PokeApp
(QObject *parent
= 0);
~PokeApp();
// Getters
AlbumsModel* getAlbumsModel() const;
CardsModel* getCardsModel() const;
ProxyModel* getProxyModel() const;
private:
AlbumsModel* albumsModel;
CardsModel* cardsModel;
ProxyModel* proxyModel;
};
#endif // !POKEAPP_H
#ifndef POKEAPP_H
#define POKEAPP_H
#include <QtQml>
#include <QSqlError>
#include <QObject>
#include <QDebug>
#include <QPixmap>
#include <QSqlRelationalTableModel>
#include <QSortFilterProxyModel>
#include "cardsmodel.h"
#include "albumsmodel.h"
#include "proxymodel.h"
class PokeApp: public QObject
{
Q_OBJECT
// Models
Q_PROPERTY(AlbumsModel *albumsModel READ getAlbumsModel)
Q_PROPERTY(CardsModel *cardsModel READ getCardsModel)
Q_PROPERTY(ProxyModel *proxyModel READ getProxyModel)
public:
explicit PokeApp(QObject *parent = 0);
~PokeApp();
// Getters
AlbumsModel* getAlbumsModel() const;
CardsModel* getCardsModel() const;
ProxyModel* getProxyModel() const;
private:
QSqlDatabase db;
AlbumsModel* albumsModel;
CardsModel* cardsModel;
ProxyModel* proxyModel;
};
#endif // !POKEAPP_H
To copy to clipboard, switch view to plain text mode
pokeapp.cpp
#include "pokeapp.h"
{
// Register Types
qmlRegisterType<AlbumsModel>("PokeApp.Classes.Core", 1, 0, "AlbumsModel");
qmlRegisterType<CardsModel>("PokeApp.Classes.Core", 1, 0, "CardsModel");
qmlRegisterType<ProxyModel>("PokeApp.Classes.Core", 1, 0, "ProxyModel");
// Database
QString serverName
= "LOCALHOST\\SQLEXPRESS";
this->db.setConnectOptions();
QString dsn
= QString("DRIVER={SQL SERVER};SERVER=%1;DATABASE=%2;Trusted_Connection=Yes;").
arg(serverName
).
arg(dbName
);
db.setDatabaseName(dsn);
if(db.open())
{
qDebug() << "Connection to database opened.";
}
else
{
qDebug() << "ERROR: Couldn't connect to database!\n" << db.lastError();
}
// ProxyModel
this->proxyModel = new ProxyModel();
// AlbumsModel
this->albumsModel = new AlbumsModel(0,db.database());
this->albumsModel->setTable("Albums2");
this->albumsModel->select();
// CardsModel
this->cardsModel = new CardsModel(0,db.database());
this->cardsModel->setTable("Cards3");
this
->cardsModel
->setRelation
(1,
QSqlRelation("Albums2",
"ID",
"albumName"));
this->cardsModel->select();
}
AlbumsModel* PokeApp::getAlbumsModel() const
{
return albumsModel;
}
CardsModel* PokeApp::getCardsModel() const
{
return cardsModel;
}
ProxyModel* PokeApp::getProxyModel() const
{
return proxyModel;
}
PokeApp::~PokeApp()
{
this->db.close();
qDebug() << "Connection to database closed.";
}
#include "pokeapp.h"
PokeApp::PokeApp(QObject *parent): QObject(parent)
{
// Register Types
qmlRegisterType<AlbumsModel>("PokeApp.Classes.Core", 1, 0, "AlbumsModel");
qmlRegisterType<CardsModel>("PokeApp.Classes.Core", 1, 0, "CardsModel");
qmlRegisterType<ProxyModel>("PokeApp.Classes.Core", 1, 0, "ProxyModel");
// Database
QString serverName = "LOCALHOST\\SQLEXPRESS";
QString dbName = "pokeManager";
this->db = QSqlDatabase::addDatabase("QODBC");
this->db.setConnectOptions();
QString dsn = QString("DRIVER={SQL SERVER};SERVER=%1;DATABASE=%2;Trusted_Connection=Yes;").arg(serverName).arg(dbName);
db.setDatabaseName(dsn);
if(db.open())
{
qDebug() << "Connection to database opened.";
}
else
{
qDebug() << "ERROR: Couldn't connect to database!\n" << db.lastError();
}
// ProxyModel
this->proxyModel = new ProxyModel();
// AlbumsModel
this->albumsModel = new AlbumsModel(0,db.database());
this->albumsModel->setTable("Albums2");
this->albumsModel->select();
// CardsModel
this->cardsModel = new CardsModel(0,db.database());
this->cardsModel->setTable("Cards3");
this->cardsModel->setRelation(1, QSqlRelation("Albums2", "ID", "albumName"));
this->cardsModel->select();
}
AlbumsModel* PokeApp::getAlbumsModel() const
{
return albumsModel;
}
CardsModel* PokeApp::getCardsModel() const
{
return cardsModel;
}
ProxyModel* PokeApp::getProxyModel() const
{
return proxyModel;
}
PokeApp::~PokeApp()
{
this->db.close();
qDebug() << "Connection to database closed.";
}
To copy to clipboard, switch view to plain text mode
proxymodel.h
#ifndef PROXYMODEL_H
#define PROXYMODEL_H
#include <QtCore/qsortfilterproxymodel.h>
#include <QtQml/qqmlparserstatus.h>
#include <QtQml/qjsvalue.h>
{
Q_OBJECT
Q_INTERFACES(QQmlParserStatus)
Q_PROPERTY(int count READ count NOTIFY countChanged)
Q_PROPERTY(QObject *source READ source WRITE setSource
)
Q_PROPERTY(QByteArray sortRole READ sortRole WRITE setSortRole
) Q_PROPERTY(Qt::SortOrder sortOrder READ sortOrder WRITE setSortOrder)
Q_PROPERTY(QByteArray filterRole READ filterRole WRITE setFilterRole
) Q_PROPERTY(QString filterString READ filterString WRITE setFilterString
) Q_PROPERTY(FilterSyntax filterSyntax READ filterSyntax WRITE setFilterSyntax)
Q_ENUMS(FilterSyntax)
public:
explicit ProxyModel
(QObject *parent
= 0);
void setSortOrder(Qt::SortOrder order);
void setFilterString
(const QString &filter
);
enum FilterSyntax {
RegExp,
Wildcard,
FixedString
};
FilterSyntax filterSyntax() const;
void setFilterSyntax(FilterSyntax syntax);
int count() const;
Q_INVOKABLE QJSValue get(int index) const;
void classBegin();
void componentComplete();
signals:
void countChanged();
protected:
QHash<int, QByteArray> roleNames() const;
bool filterAcceptsRow
(int sourceRow,
const QModelIndex &sourceParent
) const;
private:
bool m_complete;
};
#endif // PROXYMODEL_H
#ifndef PROXYMODEL_H
#define PROXYMODEL_H
#include <QtCore/qsortfilterproxymodel.h>
#include <QtQml/qqmlparserstatus.h>
#include <QtQml/qjsvalue.h>
class ProxyModel : public QSortFilterProxyModel, public QQmlParserStatus
{
Q_OBJECT
Q_INTERFACES(QQmlParserStatus)
Q_PROPERTY(int count READ count NOTIFY countChanged)
Q_PROPERTY(QObject *source READ source WRITE setSource)
Q_PROPERTY(QByteArray sortRole READ sortRole WRITE setSortRole)
Q_PROPERTY(Qt::SortOrder sortOrder READ sortOrder WRITE setSortOrder)
Q_PROPERTY(QByteArray filterRole READ filterRole WRITE setFilterRole)
Q_PROPERTY(QString filterString READ filterString WRITE setFilterString)
Q_PROPERTY(FilterSyntax filterSyntax READ filterSyntax WRITE setFilterSyntax)
Q_ENUMS(FilterSyntax)
public:
explicit ProxyModel(QObject *parent = 0);
QObject *source() const;
void setSource(QObject *source);
QByteArray sortRole() const;
void setSortRole(const QByteArray &role);
void setSortOrder(Qt::SortOrder order);
QByteArray filterRole() const;
void setFilterRole(const QByteArray &role);
QString filterString() const;
void setFilterString(const QString &filter);
enum FilterSyntax {
RegExp,
Wildcard,
FixedString
};
FilterSyntax filterSyntax() const;
void setFilterSyntax(FilterSyntax syntax);
int count() const;
Q_INVOKABLE QJSValue get(int index) const;
void classBegin();
void componentComplete();
signals:
void countChanged();
protected:
int roleKey(const QByteArray &role) const;
QHash<int, QByteArray> roleNames() const;
bool filterAcceptsRow(int sourceRow, const QModelIndex &sourceParent) const;
private:
bool m_complete;
QByteArray m_sortRole;
QByteArray m_filterRole;
};
#endif // PROXYMODEL_H
To copy to clipboard, switch view to plain text mode
proxymodel.cpp
#include "proxymodel.h"
#include <QtDebug>
#include <QtQml>
{
connect(this,
SIGNAL(rowsInserted
(QModelIndex,
int,
int)),
this,
SIGNAL(countChanged
()));
connect(this,
SIGNAL(rowsRemoved
(QModelIndex,
int,
int)),
this,
SIGNAL(countChanged
()));
}
int ProxyModel::count() const
{
return rowCount();
}
QObject *ProxyModel
::source() const {
return sourceModel();
}
void ProxyModel
::setSource(QObject *source
) {
setSourceModel(qobject_cast<QAbstractItemModel *>(source));
}
{
return m_sortRole;
}
void ProxyModel
::setSortRole(const QByteArray &role
) {
if (m_sortRole != role) {
m_sortRole = role;
if (m_complete)
}
}
void ProxyModel::setSortOrder(Qt::SortOrder order)
{
}
{
return m_filterRole;
}
void ProxyModel
::setFilterRole(const QByteArray &role
) {
if (m_filterRole != role) {
m_filterRole = role;
if (m_complete)
}
}
QString ProxyModel
::filterString() const {
return filterRegExp().pattern();
}
void ProxyModel
::setFilterString(const QString &filter
) {
setFilterRegExp
(QRegExp(filter, filterCaseSensitivity
(), static_cast<QRegExp
::PatternSyntax>
(filterSyntax
())));
}
ProxyModel::FilterSyntax ProxyModel::filterSyntax() const
{
return static_cast<FilterSyntax>(filterRegExp().patternSyntax());
}
void ProxyModel::setFilterSyntax(ProxyModel::FilterSyntax syntax)
{
setFilterRegExp
(QRegExp(filterString
(), filterCaseSensitivity
(), static_cast<QRegExp
::PatternSyntax>
(syntax
)));
}
QJSValue ProxyModel::get(int idx) const
{
QJSEngine *engine = qmlEngine(this);
QJSValue value = engine->newObject();
if (idx >= 0 && idx < count()) {
QHash<int, QByteArray> roles = roleNames();
QHashIterator<int, QByteArray> it(roles);
while (it.hasNext()) {
it.next();
value.
setProperty(QString::fromUtf8(it.
value()), data
(index
(idx,
0), it.
key()).
toString());
}
}
return value;
}
void ProxyModel::classBegin()
{
}
void ProxyModel::componentComplete()
{
m_complete = true;
if (!m_sortRole.isEmpty())
if (!m_filterRole.isEmpty())
}
int ProxyModel
::roleKey(const QByteArray &role
) const {
QHash<int, QByteArray> roles = roleNames();
QHashIterator<int, QByteArray> it(roles);
while (it.hasNext()) {
it.next();
if (it.value() == role)
return it.key();
}
return -1;
}
QHash<int, QByteArray> ProxyModel::roleNames() const
{
return source->roleNames();
return QHash<int, QByteArray>();
}
bool ProxyModel
::filterAcceptsRow(int sourceRow,
const QModelIndex &sourceParent
) const {
if (rx.isEmpty())
return true;
if (filterRole().isEmpty()) {
QHash<int, QByteArray> roles = roleNames();
QHashIterator<int, QByteArray> it(roles);
while (it.hasNext()) {
it.next();
QModelIndex sourceIndex
= model
->index
(sourceRow,
0, sourceParent
);
QString key
= model
->data
(sourceIndex, it.
key()).
toString();
if (key.contains(rx))
return true;
}
return false;
}
QModelIndex sourceIndex
= model
->index
(sourceRow,
0, sourceParent
);
if (!sourceIndex.isValid())
return true;
QString key
= model
->data
(sourceIndex, roleKey
(filterRole
())).
toString();
return key.contains(rx);
}
#include "proxymodel.h"
#include <QtDebug>
#include <QtQml>
ProxyModel::ProxyModel(QObject *parent) : QSortFilterProxyModel(parent), m_complete(false)
{
connect(this, SIGNAL(rowsInserted(QModelIndex,int,int)), this, SIGNAL(countChanged()));
connect(this, SIGNAL(rowsRemoved(QModelIndex,int,int)), this, SIGNAL(countChanged()));
}
int ProxyModel::count() const
{
return rowCount();
}
QObject *ProxyModel::source() const
{
return sourceModel();
}
void ProxyModel::setSource(QObject *source)
{
setSourceModel(qobject_cast<QAbstractItemModel *>(source));
}
QByteArray ProxyModel::sortRole() const
{
return m_sortRole;
}
void ProxyModel::setSortRole(const QByteArray &role)
{
if (m_sortRole != role) {
m_sortRole = role;
if (m_complete)
QSortFilterProxyModel::setSortRole(roleKey(role));
}
}
void ProxyModel::setSortOrder(Qt::SortOrder order)
{
QSortFilterProxyModel::sort(0, order);
}
QByteArray ProxyModel::filterRole() const
{
return m_filterRole;
}
void ProxyModel::setFilterRole(const QByteArray &role)
{
if (m_filterRole != role) {
m_filterRole = role;
if (m_complete)
QSortFilterProxyModel::setFilterRole(roleKey(role));
}
}
QString ProxyModel::filterString() const
{
return filterRegExp().pattern();
}
void ProxyModel::setFilterString(const QString &filter)
{
setFilterRegExp(QRegExp(filter, filterCaseSensitivity(), static_cast<QRegExp::PatternSyntax>(filterSyntax())));
}
ProxyModel::FilterSyntax ProxyModel::filterSyntax() const
{
return static_cast<FilterSyntax>(filterRegExp().patternSyntax());
}
void ProxyModel::setFilterSyntax(ProxyModel::FilterSyntax syntax)
{
setFilterRegExp(QRegExp(filterString(), filterCaseSensitivity(), static_cast<QRegExp::PatternSyntax>(syntax)));
}
QJSValue ProxyModel::get(int idx) const
{
QJSEngine *engine = qmlEngine(this);
QJSValue value = engine->newObject();
if (idx >= 0 && idx < count()) {
QHash<int, QByteArray> roles = roleNames();
QHashIterator<int, QByteArray> it(roles);
while (it.hasNext()) {
it.next();
value.setProperty(QString::fromUtf8(it.value()), data(index(idx, 0), it.key()).toString());
}
}
return value;
}
void ProxyModel::classBegin()
{
}
void ProxyModel::componentComplete()
{
m_complete = true;
if (!m_sortRole.isEmpty())
QSortFilterProxyModel::setSortRole(roleKey(m_sortRole));
if (!m_filterRole.isEmpty())
QSortFilterProxyModel::setFilterRole(roleKey(m_filterRole));
}
int ProxyModel::roleKey(const QByteArray &role) const
{
QHash<int, QByteArray> roles = roleNames();
QHashIterator<int, QByteArray> it(roles);
while (it.hasNext()) {
it.next();
if (it.value() == role)
return it.key();
}
return -1;
}
QHash<int, QByteArray> ProxyModel::roleNames() const
{
if (QAbstractItemModel *source = sourceModel())
return source->roleNames();
return QHash<int, QByteArray>();
}
bool ProxyModel::filterAcceptsRow(int sourceRow, const QModelIndex &sourceParent) const
{
QRegExp rx = filterRegExp();
if (rx.isEmpty())
return true;
QAbstractItemModel *model = sourceModel();
if (filterRole().isEmpty()) {
QHash<int, QByteArray> roles = roleNames();
QHashIterator<int, QByteArray> it(roles);
while (it.hasNext()) {
it.next();
QModelIndex sourceIndex = model->index(sourceRow, 0, sourceParent);
QString key = model->data(sourceIndex, it.key()).toString();
if (key.contains(rx))
return true;
}
return false;
}
QModelIndex sourceIndex = model->index(sourceRow, 0, sourceParent);
if (!sourceIndex.isValid())
return true;
QString key = model->data(sourceIndex, roleKey(filterRole())).toString();
return key.contains(rx);
}
To copy to clipboard, switch view to plain text mode
qml.qrc
<RCC>
<qresource prefix="/">
<file>main.qml</file>
</qresource>
<qresource prefix="/Pages">
<file>AlbumsPage.qml</file>
<file>CardsPage.qml</file>
<file>HomePage.qml</file>
</qresource>
<qresource prefix="/Items">
<file>ItemCard.qml</file>
<file>MainBar.qml</file>
<file>QuickNav.qml</file>
<file>SideBar.qml</file>
<file>TitleBar.qml</file>
</qresource>
<qresource prefix="/Delegates">
<file>CardDelegate.qml</file>
<file>CardItems.qml</file>
<file>NewsDelegate.qml</file>
</qresource>
<qresource prefix="/Config">
<file>qtquickcontrols2.conf</file>
</qresource>
<qresource prefix="/Icons">
<file>Icons/fontawesome-webfont.ttf</file>
</qresource>
<qresource prefix="/Cards">
<file>gui/cards/1.png</file>
<file>gui/cards/2.png</file>
<file>gui/cards/3.png</file>
<file>gui/cards/12.png</file>
<file>gui/cards/13.png</file>
<file>gui/cards/14.png</file>
<file>gui/cards/15.png</file>
<file>gui/cards/21.png</file>
</qresource>
</RCC>
<RCC>
<qresource prefix="/">
<file>main.qml</file>
</qresource>
<qresource prefix="/Pages">
<file>AlbumsPage.qml</file>
<file>CardsPage.qml</file>
<file>HomePage.qml</file>
</qresource>
<qresource prefix="/Items">
<file>ItemCard.qml</file>
<file>MainBar.qml</file>
<file>QuickNav.qml</file>
<file>SideBar.qml</file>
<file>TitleBar.qml</file>
</qresource>
<qresource prefix="/Delegates">
<file>CardDelegate.qml</file>
<file>CardItems.qml</file>
<file>NewsDelegate.qml</file>
</qresource>
<qresource prefix="/Config">
<file>qtquickcontrols2.conf</file>
</qresource>
<qresource prefix="/Icons">
<file>Icons/fontawesome-webfont.ttf</file>
</qresource>
<qresource prefix="/Cards">
<file>gui/cards/1.png</file>
<file>gui/cards/2.png</file>
<file>gui/cards/3.png</file>
<file>gui/cards/12.png</file>
<file>gui/cards/13.png</file>
<file>gui/cards/14.png</file>
<file>gui/cards/15.png</file>
<file>gui/cards/21.png</file>
</qresource>
</RCC>
To copy to clipboard, switch view to plain text mode
main.qml
import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.0
import QtQuick.Window 2.0
import QtGraphicalEffects 1.0
import Qt.labs.platform 1.0
import "./Pages"
import "./Items"
ApplicationWindow {
id: applicationWindow
visible: true
width: 1280
height: 880
flags: (Qt.Window | Qt.FramelessWindowHint);
title: qsTr("PokéManager")
color: "Transparent"
property int indexC: 0
property int receivedValue: 0
signal message(int indexC)
FontLoader {
id: fontAwesome;
source: "qrc:/Icons/Icons/fontawesome-webfont.ttf"
}
Rectangle {
id: bottomBorder
color: "#474747"
height: 1
width: parent.width
anchors.bottom: parent.bottom
z:40
}
Rectangle {
id: leftBorder
color: "#474747"
width: 1
anchors.left: parent.left
anchors.top: titleBar.bottom
anchors.bottom: bottomBorder.top
z:40
}
Rectangle {
id: rightBorder
color: "#474747"
width: 1
anchors.right: parent.right
anchors.top: titleBar.bottom
anchors.bottom: bottomBorder.top
z:40
}
TitleBar {
id: titleBar
height: 20
container: applicationWindow
}
Page {
id: window
property int sideBarWidth: 300
property int sideBarPos: -sideBarWidth
property int currentPage: 0
anchors.top: titleBar.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: bottomBorder.top
function showSideBar(i)
{
if(i === 0)
{
window.sideBarPos = -window.sideBarWidth
viewMouseArea.zIndex = 1;
}
else
{
window.sideBarPos = 0
viewMouseArea.zIndex = 3;
}
}
MainBar
{
id: mainBar
color: "#FFFFFF"
height: 60
width: parent.width
anchors.top: parent.top
z:3
}
DropShadow {
anchors.fill: mainBar
horizontalOffset: 0
verticalOffset: 1
radius: 8.0
samples: 17
color: "#22000000"
source: mainBar
z: 2
}
// SIDEBAR
SideBar
{
id: sideBar
anchors.top: parent.top
anchors.bottom: parent.bottom
width: window.sideBarWidth
visible: true
x: window.sideBarPos
z:50
MouseArea {
anchors.fill: parent
onClicked: window.showSideBar(1)
}
// ANIMATION
Behavior on x { NumberAnimation { duration: 300; easing.type: Easing.OutQuart } }
}
// Top shadow
DropShadow {
anchors.top: sideBar.top
anchors.right: sideBar.right
anchors.bottom: mainBar.bottom
anchors.left: sideBar.left
horizontalOffset: 1
verticalOffset: 0
radius: 5.0
samples: 17
color: "#22000000"
source: sideBar
z: 8
}
// Bottom shadow
DropShadow {
anchors.top: mainBar.bottom
anchors.right: sideBar.right
anchors.bottom: sideBar.bottom
anchors.left: sideBar.left
horizontalOffset: 2
verticalOffset: 1
radius: 8.0
samples: 17
color: "#22000000"
source: sideBar
z: 5
}
// PAGE WINDOW
Rectangle {
id: view
z:1
color: "#F6F7FB"
anchors.top: mainBar.bottom
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
width: parent.width
MouseArea {
id: viewMouseArea
property int zIndex: 1
anchors.fill: parent
onClicked: window.showSideBar(0);
z:viewMouseArea.zIndex;
}
// QUICK NAV
QuickNav{
id: quickNav
color: "Transparent"
height: 30
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
}
// SWIPVIEW
SwipeView {
id: swipeView
signal message(int indexC)
anchors.top: view.top
anchors.left: view.left
anchors.right: view.right
anchors.bottom: view.bottom
anchors.topMargin: 10
currentIndex: window.currentPage
z:2
// PAGE 0: HOMEPAGE
HomePage {
id: homePage
}
// PAGE 1: ALBUMS
AlbumsPage {
id: albumsPage
}
// PAGE 2: CARDS
CardsPage {
id: cardsPage
}
}
PageIndicator{
id: pageIndicator
currentIndex: swipeView.currentIndex
onCurrentIndexChanged: {
applicationWindow.indexC = currentIndex
message(applicationWindow.indexC)
}
}
}
}
// Connection
Connections {
id: applicationWindowConnection
target: quickNav
onMessage: {
swipeView.currentIndex = quickNav.indexC
}
}
}
import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.0
import QtQuick.Window 2.0
import QtGraphicalEffects 1.0
import Qt.labs.platform 1.0
import "./Pages"
import "./Items"
ApplicationWindow {
id: applicationWindow
visible: true
width: 1280
height: 880
flags: (Qt.Window | Qt.FramelessWindowHint);
title: qsTr("PokéManager")
color: "Transparent"
property int indexC: 0
property int receivedValue: 0
signal message(int indexC)
FontLoader {
id: fontAwesome;
source: "qrc:/Icons/Icons/fontawesome-webfont.ttf"
}
Rectangle {
id: bottomBorder
color: "#474747"
height: 1
width: parent.width
anchors.bottom: parent.bottom
z:40
}
Rectangle {
id: leftBorder
color: "#474747"
width: 1
anchors.left: parent.left
anchors.top: titleBar.bottom
anchors.bottom: bottomBorder.top
z:40
}
Rectangle {
id: rightBorder
color: "#474747"
width: 1
anchors.right: parent.right
anchors.top: titleBar.bottom
anchors.bottom: bottomBorder.top
z:40
}
TitleBar {
id: titleBar
height: 20
container: applicationWindow
}
Page {
id: window
property int sideBarWidth: 300
property int sideBarPos: -sideBarWidth
property int currentPage: 0
anchors.top: titleBar.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: bottomBorder.top
function showSideBar(i)
{
if(i === 0)
{
window.sideBarPos = -window.sideBarWidth
viewMouseArea.zIndex = 1;
}
else
{
window.sideBarPos = 0
viewMouseArea.zIndex = 3;
}
}
MainBar
{
id: mainBar
color: "#FFFFFF"
height: 60
width: parent.width
anchors.top: parent.top
z:3
}
DropShadow {
anchors.fill: mainBar
horizontalOffset: 0
verticalOffset: 1
radius: 8.0
samples: 17
color: "#22000000"
source: mainBar
z: 2
}
// SIDEBAR
SideBar
{
id: sideBar
anchors.top: parent.top
anchors.bottom: parent.bottom
width: window.sideBarWidth
visible: true
x: window.sideBarPos
z:50
MouseArea {
anchors.fill: parent
onClicked: window.showSideBar(1)
}
// ANIMATION
Behavior on x { NumberAnimation { duration: 300; easing.type: Easing.OutQuart } }
}
// Top shadow
DropShadow {
anchors.top: sideBar.top
anchors.right: sideBar.right
anchors.bottom: mainBar.bottom
anchors.left: sideBar.left
horizontalOffset: 1
verticalOffset: 0
radius: 5.0
samples: 17
color: "#22000000"
source: sideBar
z: 8
}
// Bottom shadow
DropShadow {
anchors.top: mainBar.bottom
anchors.right: sideBar.right
anchors.bottom: sideBar.bottom
anchors.left: sideBar.left
horizontalOffset: 2
verticalOffset: 1
radius: 8.0
samples: 17
color: "#22000000"
source: sideBar
z: 5
}
// PAGE WINDOW
Rectangle {
id: view
z:1
color: "#F6F7FB"
anchors.top: mainBar.bottom
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
width: parent.width
MouseArea {
id: viewMouseArea
property int zIndex: 1
anchors.fill: parent
onClicked: window.showSideBar(0);
z:viewMouseArea.zIndex;
}
// QUICK NAV
QuickNav{
id: quickNav
color: "Transparent"
height: 30
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
}
// SWIPVIEW
SwipeView {
id: swipeView
signal message(int indexC)
anchors.top: view.top
anchors.left: view.left
anchors.right: view.right
anchors.bottom: view.bottom
anchors.topMargin: 10
currentIndex: window.currentPage
z:2
// PAGE 0: HOMEPAGE
HomePage {
id: homePage
}
// PAGE 1: ALBUMS
AlbumsPage {
id: albumsPage
}
// PAGE 2: CARDS
CardsPage {
id: cardsPage
}
}
PageIndicator{
id: pageIndicator
currentIndex: swipeView.currentIndex
onCurrentIndexChanged: {
applicationWindow.indexC = currentIndex
message(applicationWindow.indexC)
}
}
}
}
// Connection
Connections {
id: applicationWindowConnection
target: quickNav
onMessage: {
swipeView.currentIndex = quickNav.indexC
}
}
}
To copy to clipboard, switch view to plain text mode
HomePage.qml
import QtQuick 2.7
import QtGraphicalEffects 1.0
import QtQuick.XmlListModel 2.0
import QtQuick.Window 2.1
import QtCharts 2.2
import "../Delegates"
// PAGE 0: HOMEPAGE
Rectangle {
id: homePage
color: "#F6F7FB"
z: 2
// STATS CARD
Rectangle {
id: stats
color: "#FFFFFF"
anchors.top: parent.top
anchors.left: parent.left
anchors.topMargin: 80
anchors.leftMargin: 50
width: 700
height: 400
radius: 2
z:2
Text {
id: statsIconA
text: "\uf200"
color: "#777777"
font.pointSize: 10
font.family: fontAwesome.name
anchors.top: parent.top
anchors.topMargin: 8
anchors.left: parent.left
anchors.leftMargin: 20
}
Text {
id: statsIconText
text: "Quick stats"
color: "#777777"
font.pointSize: 10
font.family: "Quicksand"
anchors.top: parent.top
anchors.topMargin: 4
anchors.left: statsIconA.right
anchors.leftMargin: 6
}
Rectangle {
id: statsCardSplitter
height: 1
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 20
anchors.rightMargin: 20
anchors.top: parent.top
anchors.topMargin: 24
color: "#d6d6d6"
}
ChartView {
anchors.top: parent.top
anchors.topMargin: 20
width: 300
height: 200
theme: ChartView.ChartThemeBlueNcs
plotAreaColor: "#F6F7FB"
antialiasing: true
StackedBarSeries {
id: pieSeries
axisX: BarCategoryAxis { categories: ["Base", "Gen", "Origins", "Sun & Moon"] }
BarSet { label: "Base Set"; values: [2, 2, 3, 4, 5, 6] }
BarSet { label: "Generations"; values: [5, 1, 2, 4, 1, 7] }
BarSet { label: "Ancient Origins"; values: [3, 5, 8, 13, 5, 8] }
BarSet { label: "Sun & Moon"; values: [2, 1, 3, 5, 1, 6] }
}
}
}
DropShadow {
anchors.fill: stats
horizontalOffset: 0
verticalOffset: 1
radius: 5.0
samples: 17
color: "#22000000"
source: stats
z: 2
}
// NEWS CARD
Rectangle {
id: quickFeed
color: "#FFFFFF"
anchors.top: parent.top
anchors.right: parent.right
anchors.left: stats.right
anchors.leftMargin: 30
anchors.topMargin: 80
anchors.rightMargin: 50
height: 400
radius: 2
z:2
Text {
id: newsIconA
text: "\uf1ea"
color: "#777777"
font.pointSize: 10
font.family: fontAwesome.name
anchors.top: parent.top
anchors.topMargin: 8
anchors.left: parent.left
anchors.leftMargin: 20
}
Text {
id: newsIconText
text: "News feed"
color: "#777777"
font.pointSize: 10
font.family: "Quicksand"
anchors.top: parent.top
anchors.topMargin: 4
anchors.left: newsIconA.right
anchors.leftMargin: 6
}
Rectangle {
id: newsFeedCardSplitter
height: 1
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 20
anchors.rightMargin: 20
anchors.top: parent.top
anchors.topMargin: 24
color: "#d6d6d6"
}
ListView {
id: newsList
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.topMargin: 24
anchors.leftMargin: 20
anchors.rightMargin: 20
anchors.bottomMargin: 10
clip: true
model: feedModel
header: Rectangle{ width: parent.width; height: 10; color: "Transparent"}
delegate: NewsDelegate {}
}
XmlListModel {
id: feedModel
source: "http://pokemondb.net/news/feed"
query: "/rss/channel/item"
XmlRole { name: "title"; query: "title/string()" }
XmlRole { name: "link"; query: "link/string()" }
}
}
DropShadow {
anchors.fill: quickFeed
horizontalOffset: 0
verticalOffset: 1
radius: 5.0
samples: 17
color: "#22000000"
source: quickFeed
z: 2
}
// ALBUMS SCROLL
Rectangle {
width: 47
anchors.left: parent.left
anchors.top: quickFeed.bottom
height: scrollFeed.height
color: "#F6F7FB"
z: 3
}
Rectangle {
width: 47
anchors.right: parent.right
anchors.top: quickFeed.bottom
height: scrollFeed.height
color: "#F6F7FB"
z: 3
}
Rectangle{
id: scrollFeed
width: parent.width
anchors.top: quickFeed.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 30
height: 250
color: "transparent"
clip: true
z:2
ListView {
z:2
width: parent.width
height: 150
spacing: 200
orientation: ListView.Horizontal
model: CardItems {}
delegate: CardDelegate {}
header: Rectangle{
color: "transparent"
width: 50
}
footer: Rectangle{
color: "transparent"
width: 230
}
}
}
}
import QtQuick 2.7
import QtGraphicalEffects 1.0
import QtQuick.XmlListModel 2.0
import QtQuick.Window 2.1
import QtCharts 2.2
import "../Delegates"
// PAGE 0: HOMEPAGE
Rectangle {
id: homePage
color: "#F6F7FB"
z: 2
// STATS CARD
Rectangle {
id: stats
color: "#FFFFFF"
anchors.top: parent.top
anchors.left: parent.left
anchors.topMargin: 80
anchors.leftMargin: 50
width: 700
height: 400
radius: 2
z:2
Text {
id: statsIconA
text: "\uf200"
color: "#777777"
font.pointSize: 10
font.family: fontAwesome.name
anchors.top: parent.top
anchors.topMargin: 8
anchors.left: parent.left
anchors.leftMargin: 20
}
Text {
id: statsIconText
text: "Quick stats"
color: "#777777"
font.pointSize: 10
font.family: "Quicksand"
anchors.top: parent.top
anchors.topMargin: 4
anchors.left: statsIconA.right
anchors.leftMargin: 6
}
Rectangle {
id: statsCardSplitter
height: 1
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 20
anchors.rightMargin: 20
anchors.top: parent.top
anchors.topMargin: 24
color: "#d6d6d6"
}
ChartView {
anchors.top: parent.top
anchors.topMargin: 20
width: 300
height: 200
theme: ChartView.ChartThemeBlueNcs
plotAreaColor: "#F6F7FB"
antialiasing: true
StackedBarSeries {
id: pieSeries
axisX: BarCategoryAxis { categories: ["Base", "Gen", "Origins", "Sun & Moon"] }
BarSet { label: "Base Set"; values: [2, 2, 3, 4, 5, 6] }
BarSet { label: "Generations"; values: [5, 1, 2, 4, 1, 7] }
BarSet { label: "Ancient Origins"; values: [3, 5, 8, 13, 5, 8] }
BarSet { label: "Sun & Moon"; values: [2, 1, 3, 5, 1, 6] }
}
}
}
DropShadow {
anchors.fill: stats
horizontalOffset: 0
verticalOffset: 1
radius: 5.0
samples: 17
color: "#22000000"
source: stats
z: 2
}
// NEWS CARD
Rectangle {
id: quickFeed
color: "#FFFFFF"
anchors.top: parent.top
anchors.right: parent.right
anchors.left: stats.right
anchors.leftMargin: 30
anchors.topMargin: 80
anchors.rightMargin: 50
height: 400
radius: 2
z:2
Text {
id: newsIconA
text: "\uf1ea"
color: "#777777"
font.pointSize: 10
font.family: fontAwesome.name
anchors.top: parent.top
anchors.topMargin: 8
anchors.left: parent.left
anchors.leftMargin: 20
}
Text {
id: newsIconText
text: "News feed"
color: "#777777"
font.pointSize: 10
font.family: "Quicksand"
anchors.top: parent.top
anchors.topMargin: 4
anchors.left: newsIconA.right
anchors.leftMargin: 6
}
Rectangle {
id: newsFeedCardSplitter
height: 1
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 20
anchors.rightMargin: 20
anchors.top: parent.top
anchors.topMargin: 24
color: "#d6d6d6"
}
ListView {
id: newsList
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.topMargin: 24
anchors.leftMargin: 20
anchors.rightMargin: 20
anchors.bottomMargin: 10
clip: true
model: feedModel
header: Rectangle{ width: parent.width; height: 10; color: "Transparent"}
delegate: NewsDelegate {}
}
XmlListModel {
id: feedModel
source: "http://pokemondb.net/news/feed"
query: "/rss/channel/item"
XmlRole { name: "title"; query: "title/string()" }
XmlRole { name: "link"; query: "link/string()" }
}
}
DropShadow {
anchors.fill: quickFeed
horizontalOffset: 0
verticalOffset: 1
radius: 5.0
samples: 17
color: "#22000000"
source: quickFeed
z: 2
}
// ALBUMS SCROLL
Rectangle {
width: 47
anchors.left: parent.left
anchors.top: quickFeed.bottom
height: scrollFeed.height
color: "#F6F7FB"
z: 3
}
Rectangle {
width: 47
anchors.right: parent.right
anchors.top: quickFeed.bottom
height: scrollFeed.height
color: "#F6F7FB"
z: 3
}
Rectangle{
id: scrollFeed
width: parent.width
anchors.top: quickFeed.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 30
height: 250
color: "transparent"
clip: true
z:2
ListView {
z:2
width: parent.width
height: 150
spacing: 200
orientation: ListView.Horizontal
model: CardItems {}
delegate: CardDelegate {}
header: Rectangle{
color: "transparent"
width: 50
}
footer: Rectangle{
color: "transparent"
width: 230
}
}
}
}
To copy to clipboard, switch view to plain text mode
AlbumsPage.qml
import QtQuick 2.7
import QtQuick.Controls 1.4
import PokeApp.Classes.Core 1.0
Rectangle {
color: "transparent"
Rectangle {
id: searchToolBar
color: "lightBlue"
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 80
anchors.rightMargin: 50
anchors.leftMargin: 50
TextField {
id: searchBox
placeholderText: "Search..."
inputMethodHints: Qt.ImhNoPredictiveText
width: 400
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
}
}
TableView {
id: albumsTableView
objectName: "albumsModel"
frameVisible: false
sortIndicatorVisible: true
anchors.top: searchToolBar.bottom
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 30
anchors.rightMargin: 50
anchors.leftMargin: 50
anchors.bottomMargin: 30
TableViewColumn {
role: "albumName"
title: "Name"
width: 180
}
TableViewColumn {
role: "albumAdded"
title: "Added on"
width: 180
}
TableViewColumn {
role: "albumEdited"
title: "Last edited"
width: 180
}
model: ProxyModel {
id: albumsProxyModel
source: albumsModel.count > 0 ? albumsModel : null
sortOrder: albumsTableView.sortIndicatorOrder
sortCaseSensitivity: Qt.CaseInsensitive
sortRole: albumsModel.count > 0 ? albumsTableView.getColumn(albumsTableView.sortIndicatorColumn).role : ""
filterString: "*" + searchBox.text + "*"
filterSyntax: ProxyModel.Wildcard
filterCaseSensitivity: Qt.CaseInsensitive
}
}
}
import QtQuick 2.7
import QtQuick.Controls 1.4
import PokeApp.Classes.Core 1.0
Rectangle {
color: "transparent"
Rectangle {
id: searchToolBar
color: "lightBlue"
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 80
anchors.rightMargin: 50
anchors.leftMargin: 50
TextField {
id: searchBox
placeholderText: "Search..."
inputMethodHints: Qt.ImhNoPredictiveText
width: 400
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
}
}
TableView {
id: albumsTableView
objectName: "albumsModel"
frameVisible: false
sortIndicatorVisible: true
anchors.top: searchToolBar.bottom
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 30
anchors.rightMargin: 50
anchors.leftMargin: 50
anchors.bottomMargin: 30
TableViewColumn {
role: "albumName"
title: "Name"
width: 180
}
TableViewColumn {
role: "albumAdded"
title: "Added on"
width: 180
}
TableViewColumn {
role: "albumEdited"
title: "Last edited"
width: 180
}
model: ProxyModel {
id: albumsProxyModel
source: albumsModel.count > 0 ? albumsModel : null
sortOrder: albumsTableView.sortIndicatorOrder
sortCaseSensitivity: Qt.CaseInsensitive
sortRole: albumsModel.count > 0 ? albumsTableView.getColumn(albumsTableView.sortIndicatorColumn).role : ""
filterString: "*" + searchBox.text + "*"
filterSyntax: ProxyModel.Wildcard
filterCaseSensitivity: Qt.CaseInsensitive
}
}
}
To copy to clipboard, switch view to plain text mode
CardsPage.qml
import QtQuick 2.7
import QtQuick.Controls 1.4
import PokeApp.Classes.Core 1.0
Rectangle {
color: "transparent"
Rectangle {
id: searchToolBar
color: "lightBlue"
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 80
anchors.rightMargin: 50
anchors.leftMargin: 50
TextField {
id: searchBox
placeholderText: "Search..."
inputMethodHints: Qt.ImhNoPredictiveText
width: 400
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
}
}
TableView {
id: albumsTableView
objectName: "albumsModel"
frameVisible: false
sortIndicatorVisible: true
anchors.top: searchToolBar.bottom
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 30
anchors.rightMargin: 50
anchors.leftMargin: 50
anchors.bottomMargin: 30
TableViewColumn {
role: "albumName"
title: "Name"
width: 180
}
TableViewColumn {
role: "albumAdded"
title: "Added on"
width: 180
}
TableViewColumn {
role: "albumEdited"
title: "Last edited"
width: 180
}
model: ProxyModel {
id: albumsProxyModel
source: albumsModel.count > 0 ? albumsModel : null
sortOrder: albumsTableView.sortIndicatorOrder
sortCaseSensitivity: Qt.CaseInsensitive
sortRole: albumsModel.count > 0 ? albumsTableView.getColumn(albumsTableView.sortIndicatorColumn).role : ""
filterString: "*" + searchBox.text + "*"
filterSyntax: ProxyModel.Wildcard
filterCaseSensitivity: Qt.CaseInsensitive
}
}
}
import QtQuick 2.7
import QtQuick.Controls 1.4
import PokeApp.Classes.Core 1.0
Rectangle {
color: "transparent"
Rectangle {
id: searchToolBar
color: "lightBlue"
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 80
anchors.rightMargin: 50
anchors.leftMargin: 50
TextField {
id: searchBox
placeholderText: "Search..."
inputMethodHints: Qt.ImhNoPredictiveText
width: 400
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
}
}
TableView {
id: albumsTableView
objectName: "albumsModel"
frameVisible: false
sortIndicatorVisible: true
anchors.top: searchToolBar.bottom
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: 30
anchors.rightMargin: 50
anchors.leftMargin: 50
anchors.bottomMargin: 30
TableViewColumn {
role: "albumName"
title: "Name"
width: 180
}
TableViewColumn {
role: "albumAdded"
title: "Added on"
width: 180
}
TableViewColumn {
role: "albumEdited"
title: "Last edited"
width: 180
}
model: ProxyModel {
id: albumsProxyModel
source: albumsModel.count > 0 ? albumsModel : null
sortOrder: albumsTableView.sortIndicatorOrder
sortCaseSensitivity: Qt.CaseInsensitive
sortRole: albumsModel.count > 0 ? albumsTableView.getColumn(albumsTableView.sortIndicatorColumn).role : ""
filterString: "*" + searchBox.text + "*"
filterSyntax: ProxyModel.Wildcard
filterCaseSensitivity: Qt.CaseInsensitive
}
}
}
To copy to clipboard, switch view to plain text mode
ItemCard.qml
import QtQuick 2.7
import QtGraphicalEffects 1.0
Item {
Rectangle {
id: card
color: "#FFFFFF"
height: 240
width: 180
radius: 2
z:2
MouseArea {
id: cardMouseArea
anchors.fill: parent
hoverEnabled: true
onEntered: cardAlbumMenuIcon.visible = true
onExited: cardAlbumMenuIcon.visible = false
}
Text {
id: cardAlbumName
text: model.name
font.family: "Quicksand"
color: "Black"
font.pixelSize: 16
anchors.top: parent.top
anchors.topMargin: 10
anchors.horizontalCenter: parent.horizontalCenter
}
Text {
id: cardAlbumMenuIcon
text: "\uf142"
color: "#777777"
visible: false
font.pointSize: 12
font.family: fontAwesome.name
anchors.top: parent.top
anchors.topMargin: 16
anchors.right: parent.right
anchors.rightMargin: 20
}
Rectangle {
id: cardInfoTopSplitter
height: 1
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 20
anchors.rightMargin: 20
anchors.top: parent.top
anchors.topMargin: 40
color: "#d6d6d6"
}
Rectangle {
id: albumThumbs
anchors.top: cardInfoTopSplitter.bottom
anchors.topMargin: 10
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 20
anchors.rightMargin: 20
height: 90
color: "transparent"
Image {
id: thumb1
anchors.top: parent.top
anchors.topMargin: 2
anchors.left: parent.left
anchors.leftMargin: 2
height: 42
width: 30
mipmap: true
source: "qrc:/Cards/gui/cards/1.png"
fillMode: Image.PreserveAspectFit
}
Image {
id: thumb1b
anchors.top: parent.top
anchors.topMargin: 2
anchors.left: thumb1.right
anchors.leftMargin: 5
height: 42
width: 30
mipmap: true
source: "qrc:/Cards/gui/cards/2.png"
fillMode: Image.PreserveAspectFit
}
Image {
id: thumb2
anchors.top: parent.top
anchors.topMargin: 2
anchors.right: parent.right
anchors.rightMargin: 2
height: 42
width: 30
mipmap: true
source: "qrc:/Cards/gui/cards/3.png"
fillMode: Image.PreserveAspectFit
}
Image {
id: thumb2b
anchors.top: parent.top
anchors.topMargin: 2
anchors.right: thumb2.left
anchors.rightMargin: 5
height: 42
width: 30
mipmap: true
source: "qrc:/Cards/gui/cards/12.png"
fillMode: Image.PreserveAspectFit
}
Image {
id: thumb3
anchors.top: thumb1.bottom
anchors.topMargin: 5
anchors.left: parent.left
anchors.leftMargin: 2
height: 42
width: 30
mipmap: true
source: "qrc:/Cards/gui/cards/13.png"
fillMode: Image.PreserveAspectFit
}
Image {
id: thumb3b
anchors.top: thumb1.bottom
anchors.topMargin: 5
anchors.left: thumb3.right
anchors.leftMargin: 5
height: 42
width: 30
mipmap: true
source: "qrc:/Cards/gui/cards/14.png"
fillMode: Image.PreserveAspectFit
}
Image {
id: thumb4
anchors.top: thumb2.bottom
anchors.topMargin: 5
anchors.right: parent.right
anchors.rightMargin: 2
height: 42
width: 30
mipmap: true
source: "qrc:/Cards/gui/cards/15.png"
fillMode: Image.PreserveAspectFit
}
Image {
id: thumb4b
anchors.top: thumb2.bottom
anchors.topMargin: 5
anchors.right: thumb4.left
anchors.rightMargin: 5
height: 42
width: 30
mipmap: true
source: "qrc:/Cards/gui/cards/21.png"
fillMode: Image.PreserveAspectFit
}
}
Rectangle {
id: cardInfoBotSplitter
height: 1
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 20
anchors.rightMargin: 20
anchors.top: parent.top
anchors.topMargin: 154
color: "#d6d6d6"
}
Rectangle {
id: thumbs
}
Text {
id: cardInfoTitle
text: " Total cards in album:"
font.family: "Quicksand"
color: "grey"
font.pixelSize: 10
anchors.left: parent.left
anchors.leftMargin: 20
anchors.top: parent.top
anchors.topMargin: 170
}
}
DropShadow {
anchors.fill: card
horizontalOffset: 0
verticalOffset: 1
radius: 5.0
samples: 17
color: "#22000000"
source: card
z: 2
}
}
import QtQuick 2.7
import QtGraphicalEffects 1.0
Item {
Rectangle {
id: card
color: "#FFFFFF"
height: 240
width: 180
radius: 2
z:2
MouseArea {
id: cardMouseArea
anchors.fill: parent
hoverEnabled: true
onEntered: cardAlbumMenuIcon.visible = true
onExited: cardAlbumMenuIcon.visible = false
}
Text {
id: cardAlbumName
text: model.name
font.family: "Quicksand"
color: "Black"
font.pixelSize: 16
anchors.top: parent.top
anchors.topMargin: 10
anchors.horizontalCenter: parent.horizontalCenter
}
Text {
id: cardAlbumMenuIcon
text: "\uf142"
color: "#777777"
visible: false
font.pointSize: 12
font.family: fontAwesome.name
anchors.top: parent.top
anchors.topMargin: 16
anchors.right: parent.right
anchors.rightMargin: 20
}
Rectangle {
id: cardInfoTopSplitter
height: 1
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 20
anchors.rightMargin: 20
anchors.top: parent.top
anchors.topMargin: 40
color: "#d6d6d6"
}
Rectangle {
id: albumThumbs
anchors.top: cardInfoTopSplitter.bottom
anchors.topMargin: 10
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 20
anchors.rightMargin: 20
height: 90
color: "transparent"
Image {
id: thumb1
anchors.top: parent.top
anchors.topMargin: 2
anchors.left: parent.left
anchors.leftMargin: 2
height: 42
width: 30
mipmap: true
source: "qrc:/Cards/gui/cards/1.png"
fillMode: Image.PreserveAspectFit
}
Image {
id: thumb1b
anchors.top: parent.top
anchors.topMargin: 2
anchors.left: thumb1.right
anchors.leftMargin: 5
height: 42
width: 30
mipmap: true
source: "qrc:/Cards/gui/cards/2.png"
fillMode: Image.PreserveAspectFit
}
Image {
id: thumb2
anchors.top: parent.top
anchors.topMargin: 2
anchors.right: parent.right
anchors.rightMargin: 2
height: 42
width: 30
mipmap: true
source: "qrc:/Cards/gui/cards/3.png"
fillMode: Image.PreserveAspectFit
}
Image {
id: thumb2b
anchors.top: parent.top
anchors.topMargin: 2
anchors.right: thumb2.left
anchors.rightMargin: 5
height: 42
width: 30
mipmap: true
source: "qrc:/Cards/gui/cards/12.png"
fillMode: Image.PreserveAspectFit
}
Image {
id: thumb3
anchors.top: thumb1.bottom
anchors.topMargin: 5
anchors.left: parent.left
anchors.leftMargin: 2
height: 42
width: 30
mipmap: true
source: "qrc:/Cards/gui/cards/13.png"
fillMode: Image.PreserveAspectFit
}
Image {
id: thumb3b
anchors.top: thumb1.bottom
anchors.topMargin: 5
anchors.left: thumb3.right
anchors.leftMargin: 5
height: 42
width: 30
mipmap: true
source: "qrc:/Cards/gui/cards/14.png"
fillMode: Image.PreserveAspectFit
}
Image {
id: thumb4
anchors.top: thumb2.bottom
anchors.topMargin: 5
anchors.right: parent.right
anchors.rightMargin: 2
height: 42
width: 30
mipmap: true
source: "qrc:/Cards/gui/cards/15.png"
fillMode: Image.PreserveAspectFit
}
Image {
id: thumb4b
anchors.top: thumb2.bottom
anchors.topMargin: 5
anchors.right: thumb4.left
anchors.rightMargin: 5
height: 42
width: 30
mipmap: true
source: "qrc:/Cards/gui/cards/21.png"
fillMode: Image.PreserveAspectFit
}
}
Rectangle {
id: cardInfoBotSplitter
height: 1
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 20
anchors.rightMargin: 20
anchors.top: parent.top
anchors.topMargin: 154
color: "#d6d6d6"
}
Rectangle {
id: thumbs
}
Text {
id: cardInfoTitle
text: " Total cards in album:"
font.family: "Quicksand"
color: "grey"
font.pixelSize: 10
anchors.left: parent.left
anchors.leftMargin: 20
anchors.top: parent.top
anchors.topMargin: 170
}
}
DropShadow {
anchors.fill: card
horizontalOffset: 0
verticalOffset: 1
radius: 5.0
samples: 17
color: "#22000000"
source: card
z: 2
}
}
To copy to clipboard, switch view to plain text mode
MainBar.qml
import QtQuick 2.7
import QtGraphicalEffects 1.0
// MAIN BAR
Rectangle {
id: mainBar
color: "Transparent"
Rectangle {
id: mainBarArea
color: "#FFFFFF"
height: 60
width: parent.width
anchors.top: parent.top
z:3
Text {
anchors.centerIn: parent
text: "PokéManager"
font.pointSize: 16
font.family: "Quicksand"
}
Text {
id: menuButton
text: "\uf0c9"
color: "#777777"
font.pointSize: 10
font.family: fontAwesome.name
anchors.left: parent.left
anchors.leftMargin: 20
anchors.verticalCenter: parent.verticalCenter
MouseArea {
hoverEnabled: true
anchors.fill: parent
onClicked: window.showSideBar(1);
}
}
}
}
import QtQuick 2.7
import QtGraphicalEffects 1.0
// MAIN BAR
Rectangle {
id: mainBar
color: "Transparent"
Rectangle {
id: mainBarArea
color: "#FFFFFF"
height: 60
width: parent.width
anchors.top: parent.top
z:3
Text {
anchors.centerIn: parent
text: "PokéManager"
font.pointSize: 16
font.family: "Quicksand"
}
Text {
id: menuButton
text: "\uf0c9"
color: "#777777"
font.pointSize: 10
font.family: fontAwesome.name
anchors.left: parent.left
anchors.leftMargin: 20
anchors.verticalCenter: parent.verticalCenter
MouseArea {
hoverEnabled: true
anchors.fill: parent
onClicked: window.showSideBar(1);
}
}
}
}
To copy to clipboard, switch view to plain text mode
SideBar.qml
import QtQuick 2.0
Item {
id: sideBar
anchors.top: parent.top
anchors.bottom: parent.bottom
width: parent.width
z: 5
// Sub Header
Rectangle {
id: subHeader
property int subHeaderAnimDuration: 500
property int subHeaderWidth: 300
property int subHeaderSeizurWidth: 15
anchors.fill: parent
color: "#FFFFFF"
z: 5
}
}
import QtQuick 2.0
Item {
id: sideBar
anchors.top: parent.top
anchors.bottom: parent.bottom
width: parent.width
z: 5
// Sub Header
Rectangle {
id: subHeader
property int subHeaderAnimDuration: 500
property int subHeaderWidth: 300
property int subHeaderSeizurWidth: 15
anchors.fill: parent
color: "#FFFFFF"
z: 5
}
}
To copy to clipboard, switch view to plain text mode
TitleBar.qml
import QtQuick 2.0
import QtQuick.Window 2.0
Rectangle {
id: customWindowFrame
color: "#474747"
height: 20
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
radius: 5
property QtObject container
MouseArea {
id: titleBarMouseRegion
property var clickPos
anchors.fill: parent
onPressed: {
clickPos = { x: mouse.x, y: mouse.y }
}
onPositionChanged: {
container.x = mousePosition.cursorPos().x - clickPos.x
container.y = mousePosition.cursorPos().y - clickPos.y
}
}
Rectangle {
id: customWindowFrameBottom
color: "#474747"
height: customWindowFrame.radius
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
z:0
}
Rectangle {
id: closeWindowButton
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: parent.right
anchors.topMargin: 2
anchors.rightMargin: 8
anchors.bottomMargin: 2
color: "transparent"
width: 18
Text {
id: closeWindowButtonIcon
text: "\uf2d3"
color: "#c4c4c4"
font.pointSize: 10
font.family: fontAwesome.name
anchors.centerIn: parent
}
MouseArea {
id: closeWindowButtonMouseArea
anchors.fill: parent
hoverEnabled: true
onEntered: closeWindowButtonIcon.color = "#FFFFFF";
onExited: closeWindowButtonIcon.color = "#c4c4c4";
onClicked: {
applicationWindow.close();
}
}
}
Rectangle {
id: resizeWindowButton
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: closeWindowButton.left
anchors.topMargin: 2
anchors.rightMargin: 2
anchors.bottomMargin: 2
color: "transparent"
width: 18
Text {
id: resizeWindowButtonIcon
text: "\uf2d0"
color: "#c4c4c4"
font.pointSize: 10
font.family: fontAwesome.name
anchors.centerIn: parent
}
MouseArea {
id: resizeWindowButtonMouseArea
anchors.fill: parent
hoverEnabled: true
onEntered: resizeWindowButtonIcon.color = "#FFFFFF";
onExited: resizeWindowButtonIcon.color = "#c4c4c4";
onClicked: {
if(applicationWindow.visibility === Window.FullScreen)
{
applicationWindow.visibility = Window.Windowed;
}
else if(applicationWindow.visibility === Window.Windowed)
{
applicationWindow.visibility = Window.FullScreen;
}
}
}
}
Rectangle {
id: minimizeWindowButton
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: resizeWindowButton.left
anchors.topMargin: 2
anchors.rightMargin: 2
anchors.bottomMargin: 2
color: "transparent"
width: 18
Text {
id: minimizeWindowButtonIcon
text: "\uf2d1"
color: "#c4c4c4"
font.pointSize: 10
font.family: fontAwesome.name
anchors.centerIn: parent
}
MouseArea {
id: minimizeWindowButtonMouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: applicationWindow.visibility = Window.Minimized;
onEntered: minimizeWindowButtonIcon.color = "#FFFFFF";
onExited: minimizeWindowButtonIcon.color = "#c4c4c4";
}
}
}
import QtQuick 2.0
import QtQuick.Window 2.0
Rectangle {
id: customWindowFrame
color: "#474747"
height: 20
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
radius: 5
property QtObject container
MouseArea {
id: titleBarMouseRegion
property var clickPos
anchors.fill: parent
onPressed: {
clickPos = { x: mouse.x, y: mouse.y }
}
onPositionChanged: {
container.x = mousePosition.cursorPos().x - clickPos.x
container.y = mousePosition.cursorPos().y - clickPos.y
}
}
Rectangle {
id: customWindowFrameBottom
color: "#474747"
height: customWindowFrame.radius
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
z:0
}
Rectangle {
id: closeWindowButton
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: parent.right
anchors.topMargin: 2
anchors.rightMargin: 8
anchors.bottomMargin: 2
color: "transparent"
width: 18
Text {
id: closeWindowButtonIcon
text: "\uf2d3"
color: "#c4c4c4"
font.pointSize: 10
font.family: fontAwesome.name
anchors.centerIn: parent
}
MouseArea {
id: closeWindowButtonMouseArea
anchors.fill: parent
hoverEnabled: true
onEntered: closeWindowButtonIcon.color = "#FFFFFF";
onExited: closeWindowButtonIcon.color = "#c4c4c4";
onClicked: {
applicationWindow.close();
}
}
}
Rectangle {
id: resizeWindowButton
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: closeWindowButton.left
anchors.topMargin: 2
anchors.rightMargin: 2
anchors.bottomMargin: 2
color: "transparent"
width: 18
Text {
id: resizeWindowButtonIcon
text: "\uf2d0"
color: "#c4c4c4"
font.pointSize: 10
font.family: fontAwesome.name
anchors.centerIn: parent
}
MouseArea {
id: resizeWindowButtonMouseArea
anchors.fill: parent
hoverEnabled: true
onEntered: resizeWindowButtonIcon.color = "#FFFFFF";
onExited: resizeWindowButtonIcon.color = "#c4c4c4";
onClicked: {
if(applicationWindow.visibility === Window.FullScreen)
{
applicationWindow.visibility = Window.Windowed;
}
else if(applicationWindow.visibility === Window.Windowed)
{
applicationWindow.visibility = Window.FullScreen;
}
}
}
}
Rectangle {
id: minimizeWindowButton
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: resizeWindowButton.left
anchors.topMargin: 2
anchors.rightMargin: 2
anchors.bottomMargin: 2
color: "transparent"
width: 18
Text {
id: minimizeWindowButtonIcon
text: "\uf2d1"
color: "#c4c4c4"
font.pointSize: 10
font.family: fontAwesome.name
anchors.centerIn: parent
}
MouseArea {
id: minimizeWindowButtonMouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: applicationWindow.visibility = Window.Minimized;
onEntered: minimizeWindowButtonIcon.color = "#FFFFFF";
onExited: minimizeWindowButtonIcon.color = "#c4c4c4";
}
}
}
To copy to clipboard, switch view to plain text mode
NewsDelegat.qml
import QtQuick 2.7
Column {
id: delegate
width: delegate.ListView.view.width
spacing: 8
Item { height: 0; width: delegate.width }
Row {
width: parent.width
spacing: 10
Text {
id: newsIcon
text: "\uf0f6"
color: "#777777"
font.pointSize: 8
font.family: fontAwesome.name
anchors.top: parent.top
anchors.topMargin: 6
}
Text {
id: titleText
textFormat: Text.RichText
text: "<style>a:link { text-decoration: none; color: #777777;} a:hover { text-decoration: underline; }</style><a href=\"" + link + "\">" + title + "</a>"
width: delegate.width - newsIcon.width
wrapMode: Text.WordWrap
color: "#777777"
font.pointSize: 10
font.family: "Quicksand"
linkColor : "#777777"
onLinkActivated: {
Qt.openUrlExternally(link)
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: newsIcon.text = "\uf15c"
onExited: newsIcon.text = "\uf0f6"
onClicked: Qt.openUrlExternally(link)
}
}
}
}
import QtQuick 2.7
Column {
id: delegate
width: delegate.ListView.view.width
spacing: 8
Item { height: 0; width: delegate.width }
Row {
width: parent.width
spacing: 10
Text {
id: newsIcon
text: "\uf0f6"
color: "#777777"
font.pointSize: 8
font.family: fontAwesome.name
anchors.top: parent.top
anchors.topMargin: 6
}
Text {
id: titleText
textFormat: Text.RichText
text: "<style>a:link { text-decoration: none; color: #777777;} a:hover { text-decoration: underline; }</style><a href=\"" + link + "\">" + title + "</a>"
width: delegate.width - newsIcon.width
wrapMode: Text.WordWrap
color: "#777777"
font.pointSize: 10
font.family: "Quicksand"
linkColor : "#777777"
onLinkActivated: {
Qt.openUrlExternally(link)
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: newsIcon.text = "\uf15c"
onExited: newsIcon.text = "\uf0f6"
onClicked: Qt.openUrlExternally(link)
}
}
}
}
To copy to clipboard, switch view to plain text mode
The following are not completed, they are just placeholder for the UI but they can be easily connected to the models which I will do the next time I do more work on the project
CardItems.qml
Not complete
import QtQuick 2.0
ListModel {
ListElement
{
name: "My Favorites"
}
ListElement
{
name: "Duplicates"
}
ListElement
{
name: "Old Cards"
}
ListElement
{
name: "Wish List"
}
ListElement
{
name: "New Cards"
}
ListElement
{
name: "Cards to Sell"
}
ListElement
{
name: "Special Cards"
}
}
import QtQuick 2.0
ListModel {
ListElement
{
name: "My Favorites"
}
ListElement
{
name: "Duplicates"
}
ListElement
{
name: "Old Cards"
}
ListElement
{
name: "Wish List"
}
ListElement
{
name: "New Cards"
}
ListElement
{
name: "Cards to Sell"
}
ListElement
{
name: "Special Cards"
}
}
To copy to clipboard, switch view to plain text mode
CardDelegate.qml
Not complete
import QtQuick 2.0
import "../Items"
Component {
id: cardsDelegate
ItemCard {
anchors.centerIn: parent.Center
}
}
import QtQuick 2.0
import "../Items"
Component {
id: cardsDelegate
ItemCard {
anchors.centerIn: parent.Center
}
}
To copy to clipboard, switch view to plain text mode
Forgot to add the QuickNav file, it is complete.
QuickNav.qml (part 1)
import QtQuick 2.7
import QtGraphicalEffects 1.0
Rectangle {
id: quickNav
color: "Transparent"
height: 30
anchors.topMargin: 30
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
z: 4
property int receivedValue: 0
property int currentPage: 0
property int indexC: 0
signal message(int indexC)
function toggleIcons(i)
{
quickNav.currentPage = i;
if(quickNav.currentPage == 0)
{
myRect1.active = false;
myRect2.active = false;
}
if(quickNav.currentPage == 1)
{
myRect1.active = true;
myRect2.active = false;
}
if(quickNav.currentPage == 2)
{
myRect1.active = false;
myRect2.active = true;
}
}
Row {
id: quickNavRow
anchors.horizontalCenter: parent.horizontalCenter
spacing: 0
z: 4
// ALBUMS BUTTON
Rectangle {
id: myRect1
property bool active: false
height: 30
width: 120
color: "Transparent"
z: 7
Rectangle {
id: roundRect
color: myRect1.active == true? "#d6d6d6" : "#FFFFFF"
height: 30
width: 120
radius: 2
z: 7
Text {
id: albumsIconA
text: "\uf02d"
color: "#474747"
font.pointSize: 12
font.family: fontAwesome.name
anchors.top: parent.top
anchors.topMargin: 6
anchors.left: parent.left
anchors.leftMargin: 20
}
Text {
id: albumsIconText
text: "Albums"
color: "#474747"
font.pointSize: 12
font.family: "Quicksand"
anchors.top: parent.top
anchors.topMargin: 2
anchors.left: albumsIconA.right
anchors.leftMargin: 6
}
MouseArea{
anchors.fill: parent
hoverEnabled: true
onClicked: {
quickNav.indexC = 1;
message(quickNav.indexC)
quickNav.toggleIcons(1);
}
}
}
DropShadow {
anchors.fill: roundRect
horizontalOffset: 0
verticalOffset: 1
radius: 5.0
samples: 17
color: "#22000000"
source: roundRect
visible: !myRect1.active
z: 2
}
Rectangle {
id: squareRect
color: myRect1.active == true? "#d6d6d6" : "#FFFFFF"
width: roundRect.radius
anchors.bottom: roundRect.bottom
anchors.top: roundRect.top
anchors.right: roundRect.right
z: 7
MouseArea{
anchors.fill: parent
onClicked: {
quickNav.indexC = 1;
message(quickNav.indexC)
quickNav.toggleIcons(1);
}
}
}
DropShadow {
anchors.fill: squareRect
horizontalOffset: 0
verticalOffset: 1
radius: 5.0
samples: 17
color: "#22000000"
source: squareRect
visible: !myRect1.active
z: 2
}
}
// CARDS BUTTON
Rectangle {
id: myRect2
property bool active: false
height: 30
width: 120
color: "Transparent"
z: 7
Rectangle {
id: roundRect2
color: myRect2.active == true? "#d6d6d6" : "#FFFFFF"
height: 30
width: 120
radius: 2
z: 7
Text {
id: cardsIconA
text: "\uf00a"
color: "#474747"
font.pointSize: 10
font.family: fontAwesome.name
anchors.top: parent.top
anchors.topMargin: 8
anchors.left: parent.left
anchors.leftMargin: 25
transform: Rotation { origin.x: (cardsIconA.width/2); origin.y: (cardsIconA.height/2); angle: 90}
}
Text {
id: cardsIconText
text: "Cards"
color: "#474747"
font.pointSize: 12
font.family: "Quicksand"
anchors.top: parent.top
anchors.topMargin: 2
anchors.left: cardsIconA.right
anchors.leftMargin: 6
}
MouseArea{
anchors.fill: parent
hoverEnabled : true
onClicked: {
quickNav.indexC = 2;
message(quickNav.indexC)
quickNav.toggleIcons(2);
}
}
}
DropShadow {
anchors.fill: roundRect2
horizontalOffset: 0
verticalOffset: 1
radius: 5.0
samples: 17
color: "#22000000"
source: roundRect2
visible: !myRect2.active
z: 2
}
Rectangle {
id: squareRect2
color: myRect2.active == true? "#d6d6d6" : "#FFFFFF"
width: roundRect2.radius
anchors.bottom: roundRect2.bottom
anchors.top: roundRect2.top
anchors.left: roundRect2.left
z: 7
MouseArea{
anchors.fill: parent
onClicked: {
quickNav.indexC = 2;
message(quickNav.indexC)
quickNav.toggleIcons(2);
}
}
}
DropShadow {
anchors.fill: squareRect2
horizontalOffset: 0
verticalOffset: 1
radius: 5.0
samples: 17
color: "#22000000"
source: squareRect2
visible: !myRect2.active
z: 2
}
}
}
import QtQuick 2.7
import QtGraphicalEffects 1.0
Rectangle {
id: quickNav
color: "Transparent"
height: 30
anchors.topMargin: 30
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
z: 4
property int receivedValue: 0
property int currentPage: 0
property int indexC: 0
signal message(int indexC)
function toggleIcons(i)
{
quickNav.currentPage = i;
if(quickNav.currentPage == 0)
{
myRect1.active = false;
myRect2.active = false;
}
if(quickNav.currentPage == 1)
{
myRect1.active = true;
myRect2.active = false;
}
if(quickNav.currentPage == 2)
{
myRect1.active = false;
myRect2.active = true;
}
}
Row {
id: quickNavRow
anchors.horizontalCenter: parent.horizontalCenter
spacing: 0
z: 4
// ALBUMS BUTTON
Rectangle {
id: myRect1
property bool active: false
height: 30
width: 120
color: "Transparent"
z: 7
Rectangle {
id: roundRect
color: myRect1.active == true? "#d6d6d6" : "#FFFFFF"
height: 30
width: 120
radius: 2
z: 7
Text {
id: albumsIconA
text: "\uf02d"
color: "#474747"
font.pointSize: 12
font.family: fontAwesome.name
anchors.top: parent.top
anchors.topMargin: 6
anchors.left: parent.left
anchors.leftMargin: 20
}
Text {
id: albumsIconText
text: "Albums"
color: "#474747"
font.pointSize: 12
font.family: "Quicksand"
anchors.top: parent.top
anchors.topMargin: 2
anchors.left: albumsIconA.right
anchors.leftMargin: 6
}
MouseArea{
anchors.fill: parent
hoverEnabled: true
onClicked: {
quickNav.indexC = 1;
message(quickNav.indexC)
quickNav.toggleIcons(1);
}
}
}
DropShadow {
anchors.fill: roundRect
horizontalOffset: 0
verticalOffset: 1
radius: 5.0
samples: 17
color: "#22000000"
source: roundRect
visible: !myRect1.active
z: 2
}
Rectangle {
id: squareRect
color: myRect1.active == true? "#d6d6d6" : "#FFFFFF"
width: roundRect.radius
anchors.bottom: roundRect.bottom
anchors.top: roundRect.top
anchors.right: roundRect.right
z: 7
MouseArea{
anchors.fill: parent
onClicked: {
quickNav.indexC = 1;
message(quickNav.indexC)
quickNav.toggleIcons(1);
}
}
}
DropShadow {
anchors.fill: squareRect
horizontalOffset: 0
verticalOffset: 1
radius: 5.0
samples: 17
color: "#22000000"
source: squareRect
visible: !myRect1.active
z: 2
}
}
// CARDS BUTTON
Rectangle {
id: myRect2
property bool active: false
height: 30
width: 120
color: "Transparent"
z: 7
Rectangle {
id: roundRect2
color: myRect2.active == true? "#d6d6d6" : "#FFFFFF"
height: 30
width: 120
radius: 2
z: 7
Text {
id: cardsIconA
text: "\uf00a"
color: "#474747"
font.pointSize: 10
font.family: fontAwesome.name
anchors.top: parent.top
anchors.topMargin: 8
anchors.left: parent.left
anchors.leftMargin: 25
transform: Rotation { origin.x: (cardsIconA.width/2); origin.y: (cardsIconA.height/2); angle: 90}
}
Text {
id: cardsIconText
text: "Cards"
color: "#474747"
font.pointSize: 12
font.family: "Quicksand"
anchors.top: parent.top
anchors.topMargin: 2
anchors.left: cardsIconA.right
anchors.leftMargin: 6
}
MouseArea{
anchors.fill: parent
hoverEnabled : true
onClicked: {
quickNav.indexC = 2;
message(quickNav.indexC)
quickNav.toggleIcons(2);
}
}
}
DropShadow {
anchors.fill: roundRect2
horizontalOffset: 0
verticalOffset: 1
radius: 5.0
samples: 17
color: "#22000000"
source: roundRect2
visible: !myRect2.active
z: 2
}
Rectangle {
id: squareRect2
color: myRect2.active == true? "#d6d6d6" : "#FFFFFF"
width: roundRect2.radius
anchors.bottom: roundRect2.bottom
anchors.top: roundRect2.top
anchors.left: roundRect2.left
z: 7
MouseArea{
anchors.fill: parent
onClicked: {
quickNav.indexC = 2;
message(quickNav.indexC)
quickNav.toggleIcons(2);
}
}
}
DropShadow {
anchors.fill: squareRect2
horizontalOffset: 0
verticalOffset: 1
radius: 5.0
samples: 17
color: "#22000000"
source: squareRect2
visible: !myRect2.active
z: 2
}
}
}
To copy to clipboard, switch view to plain text mode
Added after 7 minutes:
QuickNav.qml (part 2)
// HOMEPAGE BUTTON
Rectangle {
id: leftNav
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 50
color: "#FFFFFF"
height: 30
width: 100
radius: 2
z: 7
Text {
id: homeIconA
text: "\uf015"
color: "#474747"
font.pointSize: 12
font.family: fontAwesome.name
anchors.top: parent.top
anchors.topMargin: 7
anchors.left: parent.left
anchors.leftMargin: 14
}
Text {
id: homeIconText
text: "Home"
color: "#474747"
font.pointSize: 12
font.family: "Quicksand"
anchors.top: parent.top
anchors.topMargin: 2
anchors.left: homeIconA.right
anchors.leftMargin: 10
}
MouseArea {
hoverEnabled: true
anchors.fill: parent
onClicked: swipeView.currentIndex = 0;
}
}
DropShadow {
anchors.fill: leftNav
horizontalOffset: 0
verticalOffset: 1
radius: 5.0
samples: 17
color: "#22000000"
source: leftNav
z: 3
}
// ADD NEW BUTTON
Rectangle {
id: rightNav
color: "#FFFFFF"
anchors.top: parent.top
anchors.right: parent.right
anchors.rightMargin: 50
height: 30
width: 100
radius: 2
z: 7
Text {
id: newIconA
text: "\uf067"
color: "#474747"
font.pointSize: 12
font.family: fontAwesome.name
anchors.top: parent.top
anchors.topMargin: 7
anchors.left: parent.left
anchors.leftMargin: 20
}
Text {
id: newIconText
text: "New"
color: "#474747"
font.pointSize: 12
font.family: "Quicksand"
anchors.top: parent.top
anchors.topMargin: 2
anchors.left: newIconA.right
anchors.leftMargin: 10
}
MouseArea {
hoverEnabled: true
anchors.fill: parent
}
}
DropShadow {
anchors.fill: rightNav
horizontalOffset: 0
verticalOffset: 1
radius: 5.0
samples: 17
color: "#22000000"
source: rightNav
z: 3
}
// Connection
Connections {
id: quickNavConnecttion
target: pageIndicator
onCurrentIndexChanged: {
quickNav.receivedValue = applicationWindow.indexC
quickNav.toggleIcons(applicationWindow.indexC)
}
}
}
// HOMEPAGE BUTTON
Rectangle {
id: leftNav
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 50
color: "#FFFFFF"
height: 30
width: 100
radius: 2
z: 7
Text {
id: homeIconA
text: "\uf015"
color: "#474747"
font.pointSize: 12
font.family: fontAwesome.name
anchors.top: parent.top
anchors.topMargin: 7
anchors.left: parent.left
anchors.leftMargin: 14
}
Text {
id: homeIconText
text: "Home"
color: "#474747"
font.pointSize: 12
font.family: "Quicksand"
anchors.top: parent.top
anchors.topMargin: 2
anchors.left: homeIconA.right
anchors.leftMargin: 10
}
MouseArea {
hoverEnabled: true
anchors.fill: parent
onClicked: swipeView.currentIndex = 0;
}
}
DropShadow {
anchors.fill: leftNav
horizontalOffset: 0
verticalOffset: 1
radius: 5.0
samples: 17
color: "#22000000"
source: leftNav
z: 3
}
// ADD NEW BUTTON
Rectangle {
id: rightNav
color: "#FFFFFF"
anchors.top: parent.top
anchors.right: parent.right
anchors.rightMargin: 50
height: 30
width: 100
radius: 2
z: 7
Text {
id: newIconA
text: "\uf067"
color: "#474747"
font.pointSize: 12
font.family: fontAwesome.name
anchors.top: parent.top
anchors.topMargin: 7
anchors.left: parent.left
anchors.leftMargin: 20
}
Text {
id: newIconText
text: "New"
color: "#474747"
font.pointSize: 12
font.family: "Quicksand"
anchors.top: parent.top
anchors.topMargin: 2
anchors.left: newIconA.right
anchors.leftMargin: 10
}
MouseArea {
hoverEnabled: true
anchors.fill: parent
}
}
DropShadow {
anchors.fill: rightNav
horizontalOffset: 0
verticalOffset: 1
radius: 5.0
samples: 17
color: "#22000000"
source: rightNav
z: 3
}
// Connection
Connections {
id: quickNavConnecttion
target: pageIndicator
onCurrentIndexChanged: {
quickNav.receivedValue = applicationWindow.indexC
quickNav.toggleIcons(applicationWindow.indexC)
}
}
}
To copy to clipboard, switch view to plain text mode
Next:
I want to make the Quick stats page show useful stats. Provide different views for the Cards and Albums models and let the user change the size of the thumbnails for example.
I also want to use this new loading spinner while the images are retreived from a network request:
http://i.imgur.com/fcJPrZo.gif
fcJPrZo.gif
I will also add my previously built network class, imageprovider, CardManager and AlbumManager classes.
Bookmarks