Add Drawer component and examples

This commit is contained in:
johanneshilden 2017-09-30 03:20:12 +03:00
parent 6fcd2ff5a9
commit 89354e65e6
14 changed files with 438 additions and 10 deletions

View File

@ -9,7 +9,7 @@
- [x] Check Box
- [x] Circular Progress
- [x] Dialog
- [ ] Drawer
- [x] Drawer
- [x] Floating Action Button
- [x] Flat Button
- [x] Icon Button

View File

@ -35,7 +35,9 @@ SOURCES = \
qtmaterialscrollbar_internal.cpp \
qtmaterialscrollbar.cpp \
qtmaterialdialog_internal.cpp \
qtmaterialdialog.cpp
qtmaterialdialog.cpp \
qtmaterialdrawer_internal.cpp \
qtmaterialdrawer.cpp
HEADERS = \
qtmaterialavatar_p.h \
qtmaterialavatar.h \
@ -92,6 +94,9 @@ HEADERS = \
qtmaterialscrollbar.h \
qtmaterialdialog_internal.h \
qtmaterialdialog_p.h \
qtmaterialdialog.h
qtmaterialdialog.h \
qtmaterialdrawer_internal.h \
qtmaterialdrawer_p.h \
qtmaterialdrawer.h
RESOURCES += \
resources.qrc

View File

@ -0,0 +1,123 @@
#include "qtmaterialdrawer.h"
#include "qtmaterialdrawer_p.h"
#include <QPainter>
#include <QEvent>
#include <QtWidgets/QApplication>
#include <QtWidgets/QLayout>
#include <QLinearGradient>
#include <QtWidgets/QVBoxLayout>
#include "qtmaterialdrawer_internal.h"
QtMaterialDrawerPrivate::QtMaterialDrawerPrivate(QtMaterialDrawer *q)
: q_ptr(q),
stateMachine(new QtMaterialDrawerStateMachine(q)),
window(new QWidget),
width(250)
{
QVBoxLayout *layout = new QVBoxLayout;
layout->addWidget(window);
q->setLayout(layout);
q->setFixedWidth(width+16);
stateMachine->start();
QCoreApplication::processEvents();
}
QtMaterialDrawer::QtMaterialDrawer(QWidget *parent)
: QtMaterialOverlayWidget(parent),
d_ptr(new QtMaterialDrawerPrivate(this))
{
}
QtMaterialDrawer::~QtMaterialDrawer()
{
}
void QtMaterialDrawer::setDrawerWidth(int width)
{
Q_D(QtMaterialDrawer);
d->width = width;
d->stateMachine->updatePropertyAssignments();
setFixedWidth(width+16);
}
int QtMaterialDrawer::drawerWidth() const
{
Q_D(const QtMaterialDrawer);
return d->width;
}
void QtMaterialDrawer::setDrawerLayout(QLayout *layout)
{
Q_D(QtMaterialDrawer);
d->window->setLayout(layout);
}
QLayout *QtMaterialDrawer::drawerLayout() const
{
Q_D(const QtMaterialDrawer);
return d->window->layout();
}
void QtMaterialDrawer::openDrawer()
{
Q_D(QtMaterialDrawer);
emit d->stateMachine->enterOpenedState();
}
void QtMaterialDrawer::closeDrawer()
{
Q_D(QtMaterialDrawer);
emit d->stateMachine->enterClosedState();
}
bool QtMaterialDrawer::eventFilter(QObject *obj, QEvent *event)
{
const QEvent::Type type = event->type();
if (QEvent::Move == type || QEvent::Resize == type) {
QLayout *t = layout();
if (t && 16 != t->contentsMargins().right()) {
t->setContentsMargins(0, 0, 16, 0);
}
}
return QtMaterialOverlayWidget::eventFilter(obj, event);
}
void QtMaterialDrawer::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event)
QPainter painter(this);
QBrush brush;
brush.setStyle(Qt::SolidPattern);
brush.setColor(Qt::white);
painter.setBrush(brush);
painter.setPen(Qt::NoPen);
painter.drawRect(rect().adjusted(0, 0, -16, 0));
QLinearGradient gradient(QPointF(width()-16, 0), QPointF(width(), 0));
gradient.setColorAt(0, QColor(0, 0, 0, 80));
gradient.setColorAt(0.5, QColor(0, 0, 0, 20));
gradient.setColorAt(1, QColor(0, 0, 0, 0));
painter.setBrush(QBrush(gradient));
painter.drawRect(width()-16, 0, 16, height());
}
QRect QtMaterialDrawer::overlayGeometry() const
{
Q_D(const QtMaterialDrawer);
return QtMaterialOverlayWidget::overlayGeometry().translated(d->stateMachine->offset(), 0);
}

View File

@ -0,0 +1,40 @@
#ifndef QTMATERIALDRAWER_H
#define QTMATERIALDRAWER_H
#include "lib/qtmaterialoverlaywidget.h"
class QtMaterialDrawerPrivate;
class QtMaterialDrawerStateMachine;
class QtMaterialDrawer : public QtMaterialOverlayWidget
{
Q_OBJECT
public:
explicit QtMaterialDrawer(QWidget *parent = 0);
~QtMaterialDrawer();
void setDrawerWidth(int width);
int drawerWidth() const;
void setDrawerLayout(QLayout *layout);
QLayout *drawerLayout() const;
protected slots:
void openDrawer();
void closeDrawer();
protected:
bool eventFilter(QObject *obj, QEvent *event) Q_DECL_OVERRIDE;
void paintEvent(QPaintEvent *event) Q_DECL_OVERRIDE;
QRect overlayGeometry() const Q_DECL_OVERRIDE;
const QScopedPointer<QtMaterialDrawerPrivate> d_ptr;
private:
Q_DISABLE_COPY(QtMaterialDrawer)
Q_DECLARE_PRIVATE(QtMaterialDrawer)
};
#endif // QTMATERIALDRAWER_H

View File

@ -0,0 +1,61 @@
#include "qtmaterialdrawer_internal.h"
#include <QState>
#include <QSignalTransition>
#include <QPropertyAnimation>
#include "qtmaterialdrawer.h"
QtMaterialDrawerStateMachine::QtMaterialDrawerStateMachine(QtMaterialDrawer *drawer)
: QStateMachine(drawer),
m_drawer(drawer),
m_openState(new QState),
m_closedState(new QState),
m_offset(0)
{
addState(m_openState);
addState(m_closedState);
setInitialState(m_closedState);
QSignalTransition *transition;
QPropertyAnimation *animation;
transition = new QSignalTransition(this, SIGNAL(enterOpenedState()));
transition->setTargetState(m_openState);
m_closedState->addTransition(transition);
animation = new QPropertyAnimation(this, "offset", this);
animation->setDuration(220);
animation->setEasingCurve(QEasingCurve::OutCirc);
transition->addAnimation(animation);
transition = new QSignalTransition(this, SIGNAL(enterClosedState()));
transition->setTargetState(m_closedState);
m_openState->addTransition(transition);
animation = new QPropertyAnimation(this, "offset", this);
animation->setDuration(220);
animation->setEasingCurve(QEasingCurve::InCirc);
transition->addAnimation(animation);
updatePropertyAssignments();
}
QtMaterialDrawerStateMachine::~QtMaterialDrawerStateMachine()
{
}
void QtMaterialDrawerStateMachine::setOffset(int offset)
{
m_offset = offset;
QWidget *widget = m_drawer->parentWidget();
if (widget) {
m_drawer->setGeometry(widget->rect().translated(offset, 0));
}
}
void QtMaterialDrawerStateMachine::updatePropertyAssignments()
{
m_closedState->assignProperty(this, "offset", -(m_drawer->width()+32));
m_openState->assignProperty(this, "offset", 0);
}

View File

@ -0,0 +1,36 @@
#ifndef DRAWER_INTERNAL_H
#define DRAWER_INTERNAL_H
#include <QStateMachine>
class QtMaterialDrawer;
class QtMaterialDrawerStateMachine : public QStateMachine
{
Q_OBJECT
Q_PROPERTY(int offset WRITE setOffset READ offset)
public:
explicit QtMaterialDrawerStateMachine(QtMaterialDrawer *drawer);
~QtMaterialDrawerStateMachine();
void setOffset(int offset);
inline int offset() const { return m_offset; }
void updatePropertyAssignments();
signals:
void enterOpenedState();
void enterClosedState();
private:
Q_DISABLE_COPY(QtMaterialDrawerStateMachine)
QtMaterialDrawer *const m_drawer;
QState *const m_openState;
QState *const m_closedState;
int m_offset;
};
#endif // DRAWER_INTERNAL_H

View File

@ -0,0 +1,23 @@
#ifndef DRAWER_P_H
#define DRAWER_P_H
#include <QObject>
class QtMaterialDrawer;
class QtMaterialDrawerStateMachine;
class QtMaterialDrawerPrivate
{
Q_DISABLE_COPY(QtMaterialDrawerPrivate)
Q_DECLARE_PUBLIC(QtMaterialDrawer)
public:
QtMaterialDrawerPrivate(QtMaterialDrawer *q);
QtMaterialDrawer *const q_ptr;
QtMaterialDrawerStateMachine *const stateMachine;
QWidget *const window;
int width;
};
#endif // DRAWER_P_H

View File

@ -97,7 +97,9 @@ void QtMaterialSnackbar::setBackgroundColor(const QColor &color)
Q_D(QtMaterialSnackbar);
d->backgroundColor = color;
setUseThemeColors(false);
MATERIAL_DISABLE_THEME_COLORS
update();
}
QColor QtMaterialSnackbar::backgroundColor() const
@ -131,7 +133,9 @@ void QtMaterialSnackbar::setTextColor(const QColor &color)
Q_D(QtMaterialSnackbar);
d->textColor = color;
setUseThemeColors(false);
MATERIAL_DISABLE_THEME_COLORS
update();
}
QColor QtMaterialSnackbar::textColor() const

View File

@ -24,8 +24,6 @@ DialogSettingsEditor::DialogSettingsEditor(QWidget *parent)
layout = new QVBoxLayout;
canvas->setLayout(layout);
canvas->setMaximumHeight(300);
layout->addWidget(m_dialog);
layout->setAlignment(m_dialog, Qt::AlignHCenter);
m_dialog->setParent(this);

View File

@ -0,0 +1,47 @@
#include "drawersettingseditor.h"
#include <QVBoxLayout>
#include <QColorDialog>
#include "qtmaterialdrawer.h"
DrawerSettingsEditor::DrawerSettingsEditor(QWidget *parent)
: QWidget(parent),
ui(new Ui::DrawerSettingsForm),
m_drawer(new QtMaterialDrawer)
{
QVBoxLayout *layout = new QVBoxLayout;
setLayout(layout);
QWidget *widget = new QWidget;
layout->addWidget(widget);
QWidget *canvas = new QWidget;
canvas->setStyleSheet("QWidget { background: white; }");
layout->addWidget(canvas);
ui->setupUi(widget);
layout->setContentsMargins(20, 20, 20, 20);
layout = new QVBoxLayout;
canvas->setLayout(layout);
canvas->setMaximumHeight(300);
m_drawer->setParent(this);
setupForm();
connect(ui->showDrawerButton, SIGNAL(pressed()), m_drawer, SLOT(openDrawer()));
connect(ui->hideDrawerButton, SIGNAL(pressed()), m_drawer, SLOT(closeDrawer()));
}
DrawerSettingsEditor::~DrawerSettingsEditor()
{
delete ui;
}
void DrawerSettingsEditor::setupForm()
{
}
void DrawerSettingsEditor::updateWidget()
{
}

View File

@ -0,0 +1,26 @@
#ifndef DRAWERSETTINGSEDITOR_H
#define DRAWERSETTINGSEDITOR_H
#include <QWidget>
#include "ui_drawersettingsform.h"
class QtMaterialDrawer;
class DrawerSettingsEditor : public QWidget
{
Q_OBJECT
public:
explicit DrawerSettingsEditor(QWidget *parent = 0);
~DrawerSettingsEditor();
protected slots:
void setupForm();
void updateWidget();
private:
Ui::DrawerSettingsForm *const ui;
QtMaterialDrawer *const m_drawer;
};
#endif // DRAWERSETTINGSEDITOR_H

View File

@ -0,0 +1,58 @@
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>DrawerSettingsForm</class>
<widget class="QWidget" name="DrawerSettingsForm">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>474</width>
<height>387</height>
</rect>
</property>
<property name="windowTitle">
<string>Form</string>
</property>
<widget class="QLabel" name="label">
<property name="geometry">
<rect>
<x>10</x>
<y>70</y>
<width>171</width>
<height>16</height>
</rect>
</property>
<property name="text">
<string>TODO</string>
</property>
</widget>
<widget class="QPushButton" name="showDrawerButton">
<property name="geometry">
<rect>
<x>340</x>
<y>20</y>
<width>101</width>
<height>22</height>
</rect>
</property>
<property name="text">
<string>Show drawer</string>
</property>
</widget>
<widget class="QPushButton" name="hideDrawerButton">
<property name="geometry">
<rect>
<x>340</x>
<y>50</y>
<width>101</width>
<height>22</height>
</rect>
</property>
<property name="text">
<string>Hide drawer</string>
</property>
</widget>
</widget>
<resources/>
<connections/>
</ui>

View File

@ -17,7 +17,8 @@ SOURCES = mainwindow.cpp \
textfieldsettingseditor.cpp \
tabssettingseditor.cpp \
snackbarsettingseditor.cpp \
dialogsettingseditor.cpp
dialogsettingseditor.cpp \
drawersettingseditor.cpp
HEADERS = mainwindow.h \
avatarsettingseditor.h \
badgesettingseditor.h \
@ -34,7 +35,8 @@ HEADERS = mainwindow.h \
textfieldsettingseditor.h \
tabssettingseditor.h \
snackbarsettingseditor.h \
dialogsettingseditor.h
dialogsettingseditor.h \
drawersettingseditor.h
LIBS += ../components/libcomponents.a
INCLUDEPATH += ../components/
TARGET = ../examples-exe
@ -57,4 +59,5 @@ FORMS += \
togglesettingsform.ui \
textfieldsettingsform.ui \
tabssettingsform.ui \
dialogsettingsform.ui
dialogsettingsform.ui \
drawersettingsform.ui

View File

@ -18,6 +18,7 @@
#include "tabssettingseditor.h"
#include "snackbarsettingseditor.h"
#include "dialogsettingseditor.h"
#include "drawersettingseditor.h"
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
@ -53,12 +54,14 @@ MainWindow::MainWindow(QWidget *parent)
TabsSettingsEditor *tabs = new TabsSettingsEditor;
SnackbarSettingsEditor *snackbar = new SnackbarSettingsEditor;
DialogSettingsEditor *dialog = new DialogSettingsEditor;
DrawerSettingsEditor *drawer = new DrawerSettingsEditor;
stack->addWidget(avatar);
stack->addWidget(badge);
stack->addWidget(checkbox);
stack->addWidget(circularProgress);
stack->addWidget(dialog);
stack->addWidget(drawer);
stack->addWidget(fab);
stack->addWidget(flatButton);
stack->addWidget(iconButton);
@ -76,6 +79,7 @@ MainWindow::MainWindow(QWidget *parent)
list->addItem("Checkbox");
list->addItem("Circular Progress");
list->addItem("Dialog");
list->addItem("Drawer");
list->addItem("Floating Action Button");
list->addItem("Flat Button");
list->addItem("Icon Button");