Add Text Field component

components/components.pro

@@ -25,7 +25,9 @@ SOURCES = \
     qtmaterialslider.cpp \
     qtmaterialradiobutton.cpp \
     qtmaterialtoggle_internal.cpp \
-    qtmaterialtoggle.cpp
+    qtmaterialtoggle.cpp \
+    qtmaterialtextfield_internal.cpp \
+    qtmaterialtextfield.cpp
 HEADERS = \
     qtmaterialavatar_p.h \
     qtmaterialavatar.h \
@@ -67,6 +69,9 @@ HEADERS = \
     qtmaterialradiobutton.h \
     qtmaterialtoggle_internal.h \
     qtmaterialtoggle_p.h \
-    qtmaterialtoggle.h
+    qtmaterialtoggle.h \
+    qtmaterialtextfield_internal.h \
+    qtmaterialtextfield_p.h \
+    qtmaterialtextfield.h
 RESOURCES += \
     resources.qrc

components/qtmaterialtextfield.cpp

@@ -0,0 +1,295 @@
+#include "qtmaterialtextfield.h"
+#include "qtmaterialtextfield_p.h"
+#include <QFontDatabase>
+#include <QtWidgets/QApplication>
+#include <QPainter>
+#include "qtmaterialtextfield_internal.h"
+#include "lib/qtmaterialstyle.h"
+#include <QDebug>
+
+/*!
+ *  \class QtMaterialTextFieldPrivate
+ *  \internal
+ */
+
+QtMaterialTextFieldPrivate::QtMaterialTextFieldPrivate(QtMaterialTextField *q)
+    : q_ptr(q)
+{
+}
+
+QtMaterialTextFieldPrivate::~QtMaterialTextFieldPrivate()
+{
+}
+
+void QtMaterialTextFieldPrivate::init()
+{
+    Q_Q(QtMaterialTextField);
+
+    stateMachine   = new QtMaterialTextFieldStateMachine(q);
+    label          = 0;
+    labelFontSize  = 9.5;
+    showLabel      = false;
+    useThemeColors = true;
+
+    q->setFrame(false);
+    q->setStyle(&QtMaterialStyle::instance());
+    q->setAttribute(Qt::WA_Hover);
+    q->setMouseTracking(true);
+    q->setTextMargins(0, 2, 0, 4);
+
+    QFontDatabase db;
+    QFont font(db.font("Roboto", "Regular", 11));
+    q->setFont(font);
+
+    stateMachine->start();
+    QCoreApplication::processEvents();
+}
+
+/*!
+ *  \class QtMaterialTextField
+ */
+
+QtMaterialTextField::QtMaterialTextField(QWidget *parent)
+    : QLineEdit(parent),
+      d_ptr(new QtMaterialTextFieldPrivate(this))
+{
+    d_func()->init();
+}
+
+QtMaterialTextField::~QtMaterialTextField()
+{
+}
+
+void QtMaterialTextField::setUseThemeColors(bool value)
+{
+    Q_D(QtMaterialTextField);
+
+    if (d->useThemeColors == value) {
+        return;
+    }
+
+    d->useThemeColors = value;
+    d->stateMachine->setupProperties();
+}
+
+bool QtMaterialTextField::useThemeColors() const
+{
+    Q_D(const QtMaterialTextField);
+
+    return d->useThemeColors;
+}
+
+void QtMaterialTextField::setShowLabel(bool value)
+{
+    Q_D(QtMaterialTextField);
+
+    if (d->showLabel == value) {
+        return;
+    }
+
+    d->showLabel = value;
+
+    if (!d->label && value) {
+        d->label = new QtMaterialTextFieldLabel(this);
+        d->stateMachine->setLabel(d->label);
+    }
+
+    if (value) {
+        setContentsMargins(0, 23, 0, 0);
+    } else {
+        setContentsMargins(0, 0, 0, 0);
+    }
+}
+
+bool QtMaterialTextField::hasLabel() const
+{
+    Q_D(const QtMaterialTextField);
+
+    return d->showLabel;
+}
+
+void QtMaterialTextField::setLabelFontSize(qreal size)
+{
+    Q_D(QtMaterialTextField);
+
+    d->labelFontSize = size;
+
+    if (d->label)
+    {
+        QFont font(d->label->font());
+        font.setPointSizeF(size);
+        d->label->setFont(font);
+        d->label->update();
+    }
+}
+
+qreal QtMaterialTextField::labelFontSize() const
+{
+    Q_D(const QtMaterialTextField);
+
+    return d->labelFontSize;
+}
+
+void QtMaterialTextField::setLabel(const QString &label)
+{
+    Q_D(QtMaterialTextField);
+
+    d->labelString = label;
+    setShowLabel(true);
+    d->label->update();
+}
+
+QString QtMaterialTextField::label() const
+{
+    Q_D(const QtMaterialTextField);
+
+    return d->labelString;
+}
+
+void QtMaterialTextField::setTextColor(const QColor &color)
+{
+    Q_D(QtMaterialTextField);
+
+    d->textColor = color;
+    setStyleSheet(QString("QLineEdit { color: %1; }").arg(color.name()));
+
+    MATERIAL_DISABLE_THEME_COLORS
+    d->stateMachine->setupProperties();
+}
+
+QColor QtMaterialTextField::textColor() const
+{
+    Q_D(const QtMaterialTextField);
+
+    if (d->useThemeColors || !d->textColor.isValid()) {
+        return QtMaterialStyle::instance().themeColor("text");
+    } else {
+        return d->textColor;
+    }
+}
+
+void QtMaterialTextField::setLabelColor(const QColor &color)
+{
+    Q_D(QtMaterialTextField);
+
+    d->labelColor = color;
+
+    MATERIAL_DISABLE_THEME_COLORS
+    d->stateMachine->setupProperties();
+}
+
+QColor QtMaterialTextField::labelColor() const
+{
+    Q_D(const QtMaterialTextField);
+
+    if (d->useThemeColors || !d->labelColor.isValid()) {
+        return QtMaterialStyle::instance().themeColor("accent3");
+    } else {
+        return d->labelColor;
+    }
+}
+
+void QtMaterialTextField::setInkColor(const QColor &color)
+{
+    Q_D(QtMaterialTextField);
+
+    d->inkColor = color;
+
+    MATERIAL_DISABLE_THEME_COLORS
+    d->stateMachine->setupProperties();
+}
+
+QColor QtMaterialTextField::inkColor() const
+{
+    Q_D(const QtMaterialTextField);
+
+    if (d->useThemeColors || !d->inkColor.isValid()) {
+        return QtMaterialStyle::instance().themeColor("primary1");
+    } else {
+        return d->inkColor;
+    }
+}
+
+void QtMaterialTextField::setUnderlineColor(const QColor &color)
+{
+    Q_D(QtMaterialTextField);
+
+    d->underlineColor = color;
+
+    MATERIAL_DISABLE_THEME_COLORS
+    d->stateMachine->setupProperties();
+}
+
+QColor QtMaterialTextField::underlineColor() const
+{
+    Q_D(const QtMaterialTextField);
+
+    if (d->useThemeColors || !d->underlineColor.isValid()) {
+        return QtMaterialStyle::instance().themeColor("border");
+    } else {
+        return d->underlineColor;
+    }
+}
+
+/*!
+ *  \reimp
+ */
+bool QtMaterialTextField::event(QEvent *event)
+{
+    Q_D(QtMaterialTextField);
+
+    switch (event->type())
+    {
+    case QEvent::Resize:
+    case QEvent::Move: {
+        if (d->label) {
+            d->label->setGeometry(rect());
+        }
+    }
+    default:
+        break;
+    }
+    return QLineEdit::event(event);
+}
+
+/*!
+ *  \reimp
+ */
+void QtMaterialTextField::paintEvent(QPaintEvent *event)
+{
+    Q_D(QtMaterialTextField);
+
+    QLineEdit::paintEvent(event);
+
+    QPainter painter(this);
+
+    const qreal progress = d->stateMachine->progress();
+
+    if (text().isEmpty() && progress < 1)
+    {
+        painter.setOpacity(1-progress);
+        painter.fillRect(rect(), parentWidget()->palette().color(backgroundRole()));
+    }
+
+    const int y = height()-1;
+    const int wd = width()-5;
+
+    QPen pen;
+    pen.setWidth(1);
+    pen.setColor(underlineColor());
+    painter.setPen(pen);
+    painter.setOpacity(1);
+    painter.drawLine(2.5, y, wd, y);
+
+    QBrush brush;
+    brush.setStyle(Qt::SolidPattern);
+    brush.setColor(inkColor());
+
+    if (progress > 0)
+    {
+        painter.setPen(Qt::NoPen);
+        painter.setBrush(brush);
+        const int w = (1-progress)*static_cast<qreal>(wd/2);
+        painter.drawRect(w+2.5, height()-2, wd-w*2, 2);
+    }
+}

components/qtmaterialtextfield.h

@@ -0,0 +1,56 @@
+#ifndef QTMATERIALTEXTFIELD_H
+#define QTMATERIALTEXTFIELD_H
+
+#include <QtWidgets/QLineEdit>
+#include <QColor>
+
+class QtMaterialTextFieldPrivate;
+
+class QtMaterialTextField : public QLineEdit
+{
+    Q_OBJECT
+
+    Q_PROPERTY(QColor textColor WRITE setTextColor READ textColor)
+    Q_PROPERTY(QColor inkColor WRITE setInkColor READ inkColor)
+    Q_PROPERTY(QColor underlineColor WRITE setUnderlineColor READ underlineColor)
+
+public:
+    explicit QtMaterialTextField(QWidget *parent = 0);
+    ~QtMaterialTextField();
+
+    void setUseThemeColors(bool value);
+    bool useThemeColors() const;
+
+    void setShowLabel(bool value);
+    bool hasLabel() const;
+
+    void setLabelFontSize(qreal size);
+    qreal labelFontSize() const;
+
+    void setLabel(const QString &label);
+    QString label() const;
+
+    void setTextColor(const QColor &color);
+    QColor textColor() const;
+
+    void setLabelColor(const QColor &color);
+    QColor labelColor() const;
+
+    void setInkColor(const QColor &color);
+    QColor inkColor() const;
+
+    void setUnderlineColor(const QColor &color);
+    QColor underlineColor() const;
+
+protected:
+    bool event(QEvent *event) Q_DECL_OVERRIDE;
+    void paintEvent(QPaintEvent *event) Q_DECL_OVERRIDE;
+
+    const QScopedPointer<QtMaterialTextFieldPrivate> d_ptr;
+
+private:
+    Q_DISABLE_COPY(QtMaterialTextField)
+    Q_DECLARE_PRIVATE(QtMaterialTextField)
+};
+
+#endif // QTMATERIALTEXTFIELD_H

components/qtmaterialtextfield_internal.cpp

@@ -0,0 +1,166 @@
+#include "qtmaterialtextfield_internal.h"
+#include <QPropertyAnimation>
+#include <QEventTransition>
+#include <QPainter>
+#include <QFontDatabase>
+#include "qtmaterialtextfield.h"
+
+/*!
+ *  \class QtMaterialTextFieldStateMachine
+ *  \internal
+ */
+
+QtMaterialTextFieldStateMachine::QtMaterialTextFieldStateMachine(QtMaterialTextField *parent)
+    : QStateMachine(parent),
+      m_textField(parent),
+      m_normalState(new QState),
+      m_focusedState(new QState),
+      m_label(0),
+      m_offsetAnimation(0),
+      m_colorAnimation(0),
+      m_progress(0.0)
+{
+    Q_ASSERT(parent);
+
+    addState(m_normalState);
+    addState(m_focusedState);
+
+    setInitialState(m_normalState);
+
+    QEventTransition *transition;
+    QPropertyAnimation *animation;
+
+    transition = new QEventTransition(parent, QEvent::FocusIn);
+    transition->setTargetState(m_focusedState);
+    m_normalState->addTransition(transition);
+
+    animation = new QPropertyAnimation(this, "progress", this);
+    animation->setEasingCurve(QEasingCurve::InCubic);
+    animation->setDuration(310);
+    transition->addAnimation(animation);
+
+    transition = new QEventTransition(parent, QEvent::FocusOut);
+    transition->setTargetState(m_normalState);
+    m_focusedState->addTransition(transition);
+
+    animation = new QPropertyAnimation(this, "progress", this);
+    animation->setEasingCurve(QEasingCurve::OutCubic);
+    animation->setDuration(310);
+    transition->addAnimation(animation);
+
+    m_normalState->assignProperty(this, "progress", 0);
+    m_focusedState->assignProperty(this, "progress", 1);
+
+    setupProperties();
+
+    connect(m_textField, SIGNAL(textChanged(QString)), this, SLOT(setupProperties()));
+}
+
+QtMaterialTextFieldStateMachine::~QtMaterialTextFieldStateMachine()
+{
+}
+
+void QtMaterialTextFieldStateMachine::setLabel(QtMaterialTextFieldLabel *label)
+{
+    if (m_label) {
+        delete m_label;
+    }
+
+    if (m_offsetAnimation) {
+        removeDefaultAnimation(m_offsetAnimation);
+        delete m_offsetAnimation;
+    }
+
+    if (m_colorAnimation) {
+        removeDefaultAnimation(m_colorAnimation);
+        delete m_colorAnimation;
+    }
+
+    m_label = label;
+
+    if (m_label)
+    {
+        m_offsetAnimation = new QPropertyAnimation(m_label, "offset", this);
+        m_offsetAnimation->setDuration(210);
+        m_offsetAnimation->setEasingCurve(QEasingCurve::OutCubic);
+        addDefaultAnimation(m_offsetAnimation);
+
+        m_colorAnimation = new QPropertyAnimation(m_label, "color", this);
+        m_colorAnimation->setDuration(210);
+        addDefaultAnimation(m_colorAnimation);
+    }
+
+    setupProperties();
+}
+
+void QtMaterialTextFieldStateMachine::setupProperties()
+{
+    if (m_label)
+    {
+        const int m = m_textField->textMargins().top();
+
+        if (m_textField->text().isEmpty()) {
+            m_normalState->assignProperty(m_label, "offset", QPointF(0, 26));
+        } else {
+            m_normalState->assignProperty(m_label, "offset", QPointF(0, 0-m));
+        }
+
+        m_focusedState->assignProperty(m_label, "offset", QPointF(0, 0-m));
+        m_focusedState->assignProperty(m_label, "color", m_textField->inkColor());
+        m_normalState->assignProperty(m_label, "color", m_textField->labelColor());
+
+        if (0 != m_label->offset().y() && !m_textField->text().isEmpty()) {
+            m_label->setOffset(QPointF(0, 0-m));
+        } else if (!m_textField->hasFocus() && m_label->offset().y() <= 0 && m_textField->text().isEmpty()) {
+            m_label->setOffset(QPointF(0, 26));
+        }
+    }
+
+    m_textField->update();
+}
+
+/*!
+ *  \class QtMaterialTextFieldLabel
+ *  \internal
+ */
+
+QtMaterialTextFieldLabel::QtMaterialTextFieldLabel(QtMaterialTextField *parent)
+    : QWidget(parent),
+      m_textField(parent),
+      m_scale(1),
+      m_posX(0),
+      m_posY(26),
+      m_color(parent->labelColor())
+{
+    Q_ASSERT(parent);
+
+    QFontDatabase db;
+    QFont font(db.font("Roboto", "Medium", parent->labelFontSize()));
+    font.setLetterSpacing(QFont::PercentageSpacing, 102);
+    setFont(font);
+}
+
+QtMaterialTextFieldLabel::~QtMaterialTextFieldLabel()
+{
+}
+
+/*!
+ *  \reimp
+ */
+void QtMaterialTextFieldLabel::paintEvent(QPaintEvent *event)
+{
+    Q_UNUSED(event)
+
+    if (!m_textField->hasLabel()) {
+        return;
+    }
+
+    QPainter painter(this);
+    painter.setRenderHint(QPainter::Antialiasing);
+    painter.scale(m_scale, m_scale);
+    painter.setPen(m_color);
+    painter.setOpacity(1);
+
+    QPointF pos(2+m_posX, height()-36+m_posY);
+    painter.drawText(pos.x(), pos.y(), m_textField->label());
+}

components/qtmaterialtextfield_internal.h

@@ -0,0 +1,120 @@
+#ifndef QTMATERIALTEXTFIELD_INTERNAL_H
+#define QTMATERIALTEXTFIELD_INTERNAL_H
+
+#include <QStateMachine>
+#include <QtWidgets/QWidget>
+#include "qtmaterialtextfield.h"
+
+class QPropertyAnimation;
+class QtMaterialTextFieldLabel;
+
+class QtMaterialTextFieldStateMachine : public QStateMachine
+{
+    Q_OBJECT
+
+    Q_PROPERTY(qreal progress WRITE setProgress READ progress)
+
+public:
+    QtMaterialTextFieldStateMachine(QtMaterialTextField *parent);
+    ~QtMaterialTextFieldStateMachine();
+
+    void setLabel(QtMaterialTextFieldLabel *label);
+
+    inline void setProgress(qreal progress);
+    inline qreal progress() const;
+
+public slots:
+    void setupProperties();
+
+private:
+    Q_DISABLE_COPY(QtMaterialTextFieldStateMachine)
+
+    QtMaterialTextField *const m_textField;
+    QState              *const m_normalState;
+    QState              *const m_focusedState;
+    QtMaterialTextFieldLabel  *m_label;
+    QPropertyAnimation        *m_offsetAnimation;
+    QPropertyAnimation        *m_colorAnimation;
+    qreal                      m_progress;
+};
+
+inline void QtMaterialTextFieldStateMachine::setProgress(qreal progress)
+{
+    m_progress = progress;
+    m_textField->update();
+}
+
+inline qreal QtMaterialTextFieldStateMachine::progress() const
+{
+    return m_progress;
+}
+
+class QtMaterialTextFieldLabel : public QWidget
+{
+    Q_OBJECT
+
+    Q_PROPERTY(qreal scale WRITE setScale READ scale)
+    Q_PROPERTY(QPointF offset WRITE setOffset READ offset)
+    Q_PROPERTY(QColor color WRITE setColor READ color)
+
+public:
+    QtMaterialTextFieldLabel(QtMaterialTextField *parent);
+    ~QtMaterialTextFieldLabel();
+
+    inline void setScale(qreal scale);
+    inline qreal scale() const;
+
+    inline void setOffset(const QPointF &pos);
+    inline QPointF offset() const;
+
+    inline void setColor(const QColor &color);
+    inline QColor color() const;
+
+protected:
+    void paintEvent(QPaintEvent *event) Q_DECL_OVERRIDE;
+
+private:
+    Q_DISABLE_COPY(QtMaterialTextFieldLabel)
+
+    QtMaterialTextField *const m_textField;
+    qreal                      m_scale;
+    qreal                      m_posX;
+    qreal                      m_posY;
+    QColor                     m_color;
+};
+
+inline void QtMaterialTextFieldLabel::setScale(qreal scale)
+{
+    m_scale = scale;
+    update();
+}
+
+inline qreal QtMaterialTextFieldLabel::scale() const
+{
+    return m_scale;
+}
+
+inline void QtMaterialTextFieldLabel::setOffset(const QPointF &pos)
+{
+    m_posX = pos.x();
+    m_posY = pos.y();
+    update();
+}
+
+inline QPointF QtMaterialTextFieldLabel::offset() const
+{
+    return QPointF(m_posX, m_posY);
+}
+
+inline void QtMaterialTextFieldLabel::setColor(const QColor &color)
+{
+    m_color = color;
+    update();
+}
+
+inline QColor QtMaterialTextFieldLabel::color() const
+{
+    return m_color;
+}
+
+#endif // QTMATERIALTEXTFIELD_INTERNAL_H

components/qtmaterialtextfield_p.h

@@ -0,0 +1,35 @@
+#ifndef QTMATERIALTEXTFIELD_P_H
+#define QTMATERIALTEXTFIELD_P_H
+
+#include <QtGlobal>
+#include <QColor>
+
+class QtMaterialTextField;
+class QtMaterialTextFieldStateMachine;
+class QtMaterialTextFieldLabel;
+
+class QtMaterialTextFieldPrivate
+{
+    Q_DISABLE_COPY(QtMaterialTextFieldPrivate)
+    Q_DECLARE_PUBLIC(QtMaterialTextField)
+
+public:
+    QtMaterialTextFieldPrivate(QtMaterialTextField *q);
+    ~QtMaterialTextFieldPrivate();
+
+    void init();
+
+    QtMaterialTextField             *const q_ptr;
+    QtMaterialTextFieldStateMachine *stateMachine;
+    QtMaterialTextFieldLabel        *label;
+    QColor                           textColor;
+    QColor                           labelColor;
+    QColor                           inkColor;
+    QColor                           underlineColor;
+    QString                          labelString;
+    qreal                            labelFontSize;
+    bool                             showLabel;
+    bool                             useThemeColors;
+};
+
+#endif // QTMATERIALTEXTFIELD_P_H

examples/examples.pro

@@ -14,7 +14,8 @@ SOURCES = mainwindow.cpp \
     slidersettingseditor.cpp \
     ../components/qtmaterialradiobutton.cpp \
     radiobuttonsettingseditor.cpp \
-    togglesettingseditor.cpp
+    togglesettingseditor.cpp \
+    textfieldsettingseditor.cpp
 HEADERS = mainwindow.h \
     avatarsettingseditor.h \
     badgesettingseditor.h \
@@ -29,7 +30,8 @@ HEADERS = mainwindow.h \
     ../components/qtmaterialradiobutton_p.h \
     ../components/qtmaterialradiobutton.h \
     radiobuttonsettingseditor.h \
-    togglesettingseditor.h
+    togglesettingseditor.h \
+    textfieldsettingseditor.h
 LIBS += ../components/libcomponents.a
 INCLUDEPATH += ../components/
 TARGET = ../examples-exe
@@ -48,4 +50,5 @@ FORMS += \
     circularprogresssettingsform.ui \
     slidersettingsform.ui \
     radiobuttonsettingsform.ui \
-    togglesettingsform.ui
+    togglesettingsform.ui \
+    textfieldsettingsform.ui

examples/mainwindow.cpp

@@ -14,6 +14,7 @@
 #include "slidersettingseditor.h"
 #include "radiobuttonsettingseditor.h"
 #include "togglesettingseditor.h"
+#include "textfieldsettingseditor.h"
 
 MainWindow::MainWindow(QWidget *parent)
     : QMainWindow(parent)
@@ -45,6 +46,7 @@ MainWindow::MainWindow(QWidget *parent)
     SliderSettingsEditor *slider = new SliderSettingsEditor;
     RadioButtonSettingsEditor *radioButton = new RadioButtonSettingsEditor;
     ToggleSettingsEditor *toggle = new ToggleSettingsEditor;
+    TextFieldSettingsEditor *textField = new TextFieldSettingsEditor;
 
     stack->addWidget(avatar);
     stack->addWidget(badge);
@@ -57,6 +59,7 @@ MainWindow::MainWindow(QWidget *parent)
     stack->addWidget(radioButton);
     stack->addWidget(raisedButton);
     stack->addWidget(slider);
+    stack->addWidget(textField);
     stack->addWidget(toggle);
 
     list->addItem("Avatar");
@@ -70,6 +73,7 @@ MainWindow::MainWindow(QWidget *parent)
     list->addItem("Radio Button");
     list->addItem("Raised Button");
     list->addItem("Slider");
+    list->addItem("Text Field");
     list->addItem("Toggle");
 
     list->setCurrentRow(0);

examples/textfieldsettingseditor.cpp

@@ -0,0 +1,94 @@
+#include "textfieldsettingseditor.h"
+#include <QVBoxLayout>
+#include <QColorDialog>
+#include "qtmaterialtextfield.h"
+
+TextFieldSettingsEditor::TextFieldSettingsEditor(QWidget *parent)
+    : QWidget(parent),
+      ui(new Ui::TextFieldSettingsForm),
+      m_textField(new QtMaterialTextField)
+{
+    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);
+    layout->addWidget(m_textField);
+    layout->setAlignment(m_textField, Qt::AlignCenter);
+
+    m_textField->setLabel("Wat is this");
+    m_textField->setMinimumWidth(250);
+
+    setupForm();
+
+    connect(ui->disabledCheckBox, SIGNAL(toggled(bool)), this, SLOT(updateWidget()));
+    connect(ui->textLineEdit, SIGNAL(textChanged(QString)), this, SLOT(updateWidget()));
+    connect(ui->placeholderLineEdit, SIGNAL(textChanged(QString)), this, SLOT(updateWidget()));
+    connect(ui->labelCheckBox, SIGNAL(toggled(bool)), this, SLOT(updateWidget()));
+    connect(ui->labelTextLineEdit, SIGNAL(textChanged(QString)), this, SLOT(updateWidget()));
+    connect(ui->useThemeColorsCheckBox, SIGNAL(toggled(bool)), this, SLOT(updateWidget()));
+    connect(ui->textColorToolButton, SIGNAL(pressed()), this, SLOT(selectColor()));
+    connect(ui->inkColorToolButton, SIGNAL(pressed()), this, SLOT(selectColor()));
+    connect(ui->underlineColorToolButton, SIGNAL(pressed()), this, SLOT(selectColor()));
+    connect(ui->labelColorToolButton, SIGNAL(pressed()), this, SLOT(selectColor()));
+
+    connect(m_textField, SIGNAL(textChanged(QString)), this, SLOT(setupForm()));
+}
+
+TextFieldSettingsEditor::~TextFieldSettingsEditor()
+{
+    delete ui;
+}
+
+void TextFieldSettingsEditor::setupForm()
+{
+    ui->disabledCheckBox->setChecked(!m_textField->isEnabled());
+    ui->textLineEdit->setText(m_textField->text());
+    ui->placeholderLineEdit->setText(m_textField->placeholderText());
+    ui->labelCheckBox->setChecked(m_textField->hasLabel());
+    ui->labelTextLineEdit->setText(m_textField->label());
+    ui->useThemeColorsCheckBox->setChecked(m_textField->useThemeColors());
+}
+
+void TextFieldSettingsEditor::updateWidget()
+{
+    m_textField->setDisabled(ui->disabledCheckBox->isChecked());
+    m_textField->setText(ui->textLineEdit->text());
+    m_textField->setPlaceholderText(ui->placeholderLineEdit->text());
+    m_textField->setLabel(ui->labelTextLineEdit->text());
+    m_textField->setShowLabel(ui->labelCheckBox->isChecked());
+    m_textField->setUseThemeColors(ui->useThemeColorsCheckBox->isChecked());
+}
+
+void TextFieldSettingsEditor::selectColor()
+{
+    QColorDialog dialog;
+    if (dialog.exec()) {
+        QColor color = dialog.selectedColor();
+        QString senderName = sender()->objectName();
+        if ("textColorToolButton" == senderName) {
+            m_textField->setTextColor(color);
+            ui->textColorLineEdit->setText(color.name(QColor::HexRgb));
+        } else if ("inkColorToolButton" == senderName) {
+            m_textField->setInkColor(color);
+            ui->inkColorLineEdit->setText(color.name(QColor::HexRgb));
+        } else if ("underlineColorToolButton" == senderName) {
+            m_textField->setUnderlineColor(color);
+            ui->underlineColorLineEdit->setText(color.name(QColor::HexRgb));
+        } else if ("labelColorToolButton" == senderName) {
+            m_textField->setLabelColor(color);
+            ui->labelColorLineEdit->setText(color.name(QColor::HexRgb));
+        }
+    }
+    setupForm();
+}

examples/textfieldsettingseditor.h

@@ -0,0 +1,27 @@
+#ifndef TEXTFIELDSETTINGSEDITOR_H
+#define TEXTFIELDSETTINGSEDITOR_H
+
+#include <QWidget>
+#include "ui_textfieldsettingsform.h"
+
+class QtMaterialTextField;
+
+class TextFieldSettingsEditor : public QWidget
+{
+    Q_OBJECT
+
+public:
+    explicit TextFieldSettingsEditor(QWidget *parent = 0);
+    ~TextFieldSettingsEditor();
+
+protected slots:
+    void setupForm();
+    void updateWidget();
+    void selectColor();
+
+private:
+    Ui::TextFieldSettingsForm *const ui;
+    QtMaterialTextField       *const m_textField;
+};
+
+#endif // TEXTFIELDSETTINGSEDITOR_H

examples/textfieldsettingsform.ui

@@ -0,0 +1,175 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ui version="4.0">
+ <class>TextFieldSettingsForm</class>
+ <widget class="QWidget" name="TextFieldSettingsForm">
+  <property name="geometry">
+   <rect>
+    <x>0</x>
+    <y>0</y>
+    <width>400</width>
+    <height>416</height>
+   </rect>
+  </property>
+  <property name="windowTitle">
+   <string>Form</string>
+  </property>
+  <widget class="QWidget" name="formLayoutWidget">
+   <property name="geometry">
+    <rect>
+     <x>0</x>
+     <y>0</y>
+     <width>321</width>
+     <height>351</height>
+    </rect>
+   </property>
+   <layout class="QFormLayout" name="formLayout">
+    <item row="0" column="0">
+     <widget class="QLabel" name="disabledLabel">
+      <property name="text">
+       <string>Disabled</string>
+      </property>
+     </widget>
+    </item>
+    <item row="0" column="1">
+     <widget class="QCheckBox" name="disabledCheckBox"/>
+    </item>
+    <item row="1" column="0">
+     <widget class="QLabel" name="textLabel">
+      <property name="text">
+       <string>Text</string>
+      </property>
+     </widget>
+    </item>
+    <item row="1" column="1">
+     <widget class="QLineEdit" name="textLineEdit"/>
+    </item>
+    <item row="2" column="0">
+     <widget class="QLabel" name="placeholderLabel">
+      <property name="text">
+       <string>Placeholder</string>
+      </property>
+     </widget>
+    </item>
+    <item row="2" column="1">
+     <widget class="QLineEdit" name="placeholderLineEdit"/>
+    </item>
+    <item row="3" column="0">
+     <widget class="QLabel" name="labelLabel_2">
+      <property name="text">
+       <string>Label</string>
+      </property>
+     </widget>
+    </item>
+    <item row="3" column="1">
+     <widget class="QCheckBox" name="labelCheckBox"/>
+    </item>
+    <item row="4" column="0">
+     <widget class="QLabel" name="labelLabel">
+      <property name="text">
+       <string>Label text</string>
+      </property>
+     </widget>
+    </item>
+    <item row="4" column="1">
+     <widget class="QLineEdit" name="labelTextLineEdit"/>
+    </item>
+    <item row="5" column="0">
+     <widget class="QLabel" name="useThemeColorsLabel">
+      <property name="text">
+       <string>Use theme colors</string>
+      </property>
+     </widget>
+    </item>
+    <item row="5" column="1">
+     <widget class="QCheckBox" name="useThemeColorsCheckBox"/>
+    </item>
+    <item row="6" column="0">
+     <widget class="QLabel" name="textColorLabel">
+      <property name="text">
+       <string>Text color</string>
+      </property>
+     </widget>
+    </item>
+    <item row="6" column="1">
+     <layout class="QHBoxLayout" name="horizontalLayout">
+      <item>
+       <widget class="QLineEdit" name="textColorLineEdit"/>
+      </item>
+      <item>
+       <widget class="QToolButton" name="textColorToolButton">
+        <property name="text">
+         <string>...</string>
+        </property>
+       </widget>
+      </item>
+     </layout>
+    </item>
+    <item row="7" column="0">
+     <widget class="QLabel" name="inkColorLabel">
+      <property name="text">
+       <string>Ink color</string>
+      </property>
+     </widget>
+    </item>
+    <item row="7" column="1">
+     <layout class="QHBoxLayout" name="horizontalLayout_4">
+      <item>
+       <widget class="QLineEdit" name="inkColorLineEdit"/>
+      </item>
+      <item>
+       <widget class="QToolButton" name="inkColorToolButton">
+        <property name="text">
+         <string>...</string>
+        </property>
+       </widget>
+      </item>
+     </layout>
+    </item>
+    <item row="8" column="0">
+     <widget class="QLabel" name="underlineColorLabel">
+      <property name="text">
+       <string>Underline color</string>
+      </property>
+     </widget>
+    </item>
+    <item row="8" column="1">
+     <layout class="QHBoxLayout" name="horizontalLayout_6">
+      <item>
+       <widget class="QLineEdit" name="underlineColorLineEdit"/>
+      </item>
+      <item>
+       <widget class="QToolButton" name="underlineColorToolButton">
+        <property name="text">
+         <string>...</string>
+        </property>
+       </widget>
+      </item>
+     </layout>
+    </item>
+    <item row="9" column="0">
+     <widget class="QLabel" name="labelColorLabel">
+      <property name="text">
+       <string>Label color</string>
+      </property>
+     </widget>
+    </item>
+    <item row="9" column="1">
+     <layout class="QHBoxLayout" name="horizontalLayout_7">
+      <item>
+       <widget class="QLineEdit" name="labelColorLineEdit"/>
+      </item>
+      <item>
+       <widget class="QToolButton" name="labelColorToolButton">
+        <property name="text">
+         <string>...</string>
+        </property>
+       </widget>
+      </item>
+     </layout>
+    </item>
+   </layout>
+  </widget>
+ </widget>
+ <resources/>
+ <connections/>
+</ui>