Merge lp:~zsombi/ubuntu-ui-toolkit/20-divider into lp:~bzoltan/ubuntu-ui-toolkit/new_list_item

[Zsombor Egri]

Adding divider to ListItem.

[lp:~zsombi/ubuntu-ui-toolkit/20-divider]

1220. By Zsombor Egri on 2014-09-15

prereq

1221. By Zsombor Egri on 2014-09-15

prereq merge

1222. By Zsombor Egri on 2014-09-15

prereq updated

1223. By Zsombor Egri on 2014-09-15

prereq merge

1224. By Zsombor Egri on 2014-09-15

divider paint fixed

1225. By Zsombor Egri on 2014-09-18

prereq

1226. By Zsombor Egri on 2014-09-18

colroFrom and colorTo documented

1227. By Zsombor Egri on 2014-09-18

background colored only on the contentItem area

1228. By Zsombor Egri on 2014-09-18

divider to paint edge-to-edge when pressed

1229. By Zsombor Egri on 2014-09-19

prereq sync

1230. By Zsombor Egri on 2014-09-24

prereq sync

1231. By Zsombor Egri on 2014-09-29

prereq sync

1232. By Zsombor Egri on 2014-10-02

prereq sync

1233. By Zsombor Egri on 2014-10-13

prereq sync

1234. By Zsombor Egri on 2014-10-18

2GU to 2DP teft and rigth margins on divider

1235. By Zsombor Egri on 2014-10-24

prereq sync

1236. By Zsombor Egri on 2014-11-04

prereq sync

1237. By Zsombor Egri on 2014-11-06

prereq sync

1238. By Zsombor Egri on 2014-11-19

prereq sync

Unmerged revisions

1238. By Zsombor Egri on 2014-11-19

prereq sync

1237. By Zsombor Egri on 2014-11-06

prereq sync

1236. By Zsombor Egri on 2014-11-04

prereq sync

1235. By Zsombor Egri on 2014-10-24

prereq sync

1234. By Zsombor Egri on 2014-10-18

2GU to 2DP teft and rigth margins on divider

1233. By Zsombor Egri on 2014-10-13

prereq sync

1232. By Zsombor Egri on 2014-10-02

prereq sync

1231. By Zsombor Egri on 2014-09-29

prereq sync

1230. By Zsombor Egri on 2014-09-24

prereq sync

1229. By Zsombor Egri on 2014-09-19

prereq sync

=== modified file 'components.api'
--- components.api	2014-09-15 08:22:13 +0000
+++ components.api	2014-09-15 08:22:15 +0000
@@ -818,6 +818,7 @@
     prototype: "UCStyledItemBase"
     exports: ["ListItem 1.1"]
     Property { name: "contentItem"; type: "UCListItemContent"; isReadonly: true; isPointer: true }
+    Property { name: "divider"; type: "UCListItemDivider"; isReadonly: true; isPointer: true }
     Property { name: "pressed"; type: "bool"; isReadonly: true }
     Property { name: "data"; type: "QObject"; isList: true; isReadonly: true }
     Property { name: "children"; type: "QQuickItem"; isList: true; isReadonly: true }
@@ -826,6 +827,13 @@
     prototype: "QQuickItem"
     Property { name: "color"; type: "QColor" }
     Property { name: "pressedColor"; type: "QColor" }
+    name: "UCListItemDivider"
+    prototype: "QObject"
+    Property { name: "visible"; type: "bool" }
+    Property { name: "leftMargin"; type: "double" }
+    Property { name: "rightMargin"; type: "double" }
+    Property { name: "colorFrom"; type: "QColor" }
+    Property { name: "colorTo"; type: "QColor" }
     name: "UCMouse"
     prototype: "QObject"
     exports: ["Mouse 0.1", "Mouse 1.0"]
 
=== modified file 'modules/Ubuntu/Components/plugin/plugin.cpp'
--- modules/Ubuntu/Components/plugin/plugin.cpp	2014-09-15 08:22:13 +0000
+++ modules/Ubuntu/Components/plugin/plugin.cpp	2014-09-15 08:22:15 +0000
@@ -162,6 +162,7 @@
     // ListItem and related types
     qmlRegisterType<UCListItem, 1>(uri, 1, 1, "ListItem");
     qmlRegisterType<UCListItemContent>();
+    qmlRegisterType<UCListItemDivider>();
 }
 
 void UbuntuComponentsPlugin::initializeEngine(QQmlEngine *engine, const char *uri)
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitem.cpp'
--- modules/Ubuntu/Components/plugin/uclistitem.cpp	2014-09-15 08:22:13 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem.cpp	2014-09-15 08:22:15 +0000
@@ -35,7 +35,155 @@
     }
     return result;
 }
-
+/******************************************************************************
+ * Divider
+ */
+UCListItemDivider::UCListItemDivider(QObject *parent)
+    : QObject(parent)
+    , m_visible(true)
+    , m_leftMarginChanged(false)
+    , m_rightMarginChanged(false)
+    , m_colorFromChanged(false)
+    , m_colorToChanged(false)
+    , m_thickness(0)
+    , m_leftMargin(0)
+    , m_rightMargin(0)
+    , m_listItem(0)
+{
+    connect(&UCUnits::instance(), &UCUnits::gridUnitChanged, this, &UCListItemDivider::unitsChanged);
+    connect(&UCTheme::instance(), &UCTheme::paletteChanged, this, &UCListItemDivider::paletteChanged);
+    unitsChanged();
+    paletteChanged();
+}
+UCListItemDivider::~UCListItemDivider()
+{
+}
+
+void UCListItemDivider::init(UCListItem *listItem)
+{
+    QQml_setParent_noEvent(this, listItem);
+    m_listItem = UCListItemPrivate::get(listItem);
+}
+
+void UCListItemDivider::unitsChanged()
+{
+    m_thickness = UCUnits::instance().dp(2);
+    if (!m_leftMarginChanged) {
+        m_leftMargin = UCUnits::instance().gu(2);
+    }
+    if (!m_rightMarginChanged) {
+        m_rightMargin = UCUnits::instance().gu(2);
+    }
+    if (m_listItem) {
+        m_listItem->update();
+    }
+}
+
+void UCListItemDivider::paletteChanged()
+{
+    QColor background = getPaletteColor("normal", "background");
+    if (!background.isValid()) {
+        return;
+    }
+    // FIXME: we need a palette value for divider colors, till then base on the background
+    // luminance
+    if (!m_colorFromChanged || !m_colorToChanged) {
+        qreal luminance = (background.red()*212 + background.green()*715 + background.blue()*73)/1000.0/255.0;
+        bool lightBackground = (luminance > 0.85);
+        if (!m_colorFromChanged) {
+            m_colorFrom = lightBackground ? QColor("#26000000") : QColor("#26FFFFFF");
+        }
+        if (!m_colorToChanged) {
+            m_colorTo = lightBackground ? QColor("#14FFFFFF") : QColor("#14000000");
+        }
+        updateGradient();
+    }
+}
+
+void UCListItemDivider::updateGradient()
+{
+    m_gradient.clear();
+    m_gradient.append(QGradientStop(0.0, m_colorFrom));
+    m_gradient.append(QGradientStop(0.49, m_colorFrom));
+    m_gradient.append(QGradientStop(0.5, m_colorTo));
+    m_gradient.append(QGradientStop(1.0, m_colorTo));
+    if (m_listItem) {
+        m_listItem->update();
+    }
+}
+
+QSGNode *UCListItemDivider::paint(QSGNode *paintNode, const QRectF &rect)
+{
+    if (m_visible && (m_gradient.size() > 0)) {
+        QSGRectangleNode *rectNode = static_cast<QSGRectangleNode *>(paintNode);
+        if (!rectNode) {
+            rectNode = m_listItem->sceneGraphContext()->createRectangleNode();
+        }
+        rectNode->setRect(QRectF(m_leftMargin, rect.height() - m_thickness,
+                                 rect.width() - m_leftMargin - m_rightMargin, m_thickness));
+        rectNode->setGradientStops(m_gradient);
+        rectNode->update();
+        return rectNode;
+    } else {
+        delete paintNode;
+        return 0;
+    }
+}
+
+void UCListItemDivider::setVisible(bool visible)
+{
+    if (m_visible == visible) {
+        return;
+    }
+    m_visible = visible;
+    m_listItem->resize();
+    m_listItem->update();
+    Q_EMIT visibleChanged();
+}
+
+void UCListItemDivider::setLeftMargin(qreal leftMargin)
+{
+    if (m_leftMargin == leftMargin) {
+        return;
+    }
+    m_leftMargin = leftMargin;
+    m_leftMarginChanged = true;
+    m_listItem->update();
+    Q_EMIT leftMarginChanged();
+}
+
+void UCListItemDivider::setRightMargin(qreal rightMargin)
+{
+    if (m_rightMargin == rightMargin) {
+        return;
+    }
+    m_rightMargin = rightMargin;
+    m_rightMarginChanged = true;
+    m_listItem->update();
+    Q_EMIT rightMarginChanged();
+}
+
+void UCListItemDivider::setColorFrom(const QColor &color)
+{
+    if (m_colorFrom == color) {
+        return;
+    }
+    m_colorFrom = color;
+    m_colorFromChanged = true;
+    updateGradient();
+    Q_EMIT colorFromChanged();
+}
+
+void UCListItemDivider::setColorTo(const QColor &color)
+{
+    if (m_colorTo == color) {
+        return;
+    }
+    m_colorTo = color;
+    m_colorToChanged = true;
+    updateGradient();
+    Q_EMIT colorToChanged();
+}
 
 /******************************************************************************
  * ListItemContent
@@ -114,10 +262,14 @@
 }
 
 
+/******************************************************************************
+ * ListItemBasePrivate
+ */
 UCListItemPrivate::UCListItemPrivate()
     : UCStyledItemBasePrivate()
     , pressed(false)
     , contentItem(new UCListItemContent)
+    , divider(new UCListItemDivider)
 {
 }
 UCListItemPrivate::~UCListItemPrivate()
@@ -130,6 +282,7 @@
     contentItem->setObjectName("ListItemHolder");
     QQml_setParent_noEvent(contentItem, q);
     contentItem->setParentItem(q);
+    divider->init(q);
     // content will be redirected to the contentItem, therefore we must report
     // children changes as it would come from the main component
     QObject::connect(contentItem, &UCListItemContent::childrenChanged,
@@ -185,11 +338,31 @@
     if (flickable.isNull()) {
         return;
     }
+    Q_Q(UCListItem);
     if (listen) {
-        QObject::connect(flickable.data(), SIGNAL(movementStarted()), q_ptr, SLOT(_q_rebound()));
+        QObject::connect(flickable.data(), SIGNAL(movementStarted()), q, SLOT(_q_rebound()));
     } else {
-        QObject::disconnect(flickable.data(), SIGNAL(movementStarted()), q_ptr, SLOT(_q_rebound()));
-    }
+        QObject::disconnect(flickable.data(), SIGNAL(movementStarted()), q, SLOT(_q_rebound()));
+    }
+}
+
+void UCListItemPrivate::resize()
+{
+    Q_Q(UCListItem);
+    QRectF rect(q->boundingRect());
+    if (divider && divider->m_visible) {
+        rect.setHeight(rect.height() - divider->m_thickness);
+    }
+    contentItem->setSize(rect.size());
+}
+
+void UCListItemPrivate::update()
+{
+    if (!ready) {
+        return;
+    }
+    Q_Q(UCListItem);
+    q->update();
 }
 
 /*!
@@ -218,6 +391,10 @@
  *      revealed and thus will destroy your logic
  * \li never anchor left or right anchor lines as it will block revealing the options.
  * \endlist
+ *
+ * Each ListItem has a thin divider shown on the bottom of the component. This
+ * divider can be configured through the \l divider grouped property, which can
+ * configure its margins from the edges of the ListItem as well as its visibility.
  */
 
 /*!
@@ -238,6 +415,12 @@
 {
 }
 
+void UCListItem::componentComplete()
+{
+    UCStyledItemBase::componentComplete();
+    d_func()->ready = true;
+}
+
 void UCListItem::itemChange(ItemChange change, const ItemChangeData &data)
 {
     UCStyledItemBase::itemChange(change, data);
@@ -269,11 +452,23 @@
 void UCListItem::geometryChanged(const QRectF &newGeometry, const QRectF &oldGeometry)
 {
     UCStyledItemBase::geometryChanged(newGeometry, oldGeometry);
-    // resize contentItem item
-    Q_D(UCListItem);
-    QRectF rect(boundingRect());
-    d->contentItem->setSize(rect.size());
-}
+    // resize background item
+    Q_D(UCListItem);
+    d->resize();
+}
+
+QSGNode *UCListItem::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *data)
+{
+    Q_UNUSED(data);
+    Q_D(UCListItem);
+    if (width() <= 0 || height() <= 0 || !d->divider) {
+        delete oldNode;
+        return 0;
+    }
+    // paint divider
+    return d->divider->paint(oldNode, boundingRect());
+}
+
 void UCListItem::mousePressEvent(QMouseEvent *event)
 {
     UCStyledItemBase::mousePressEvent(event);
@@ -319,6 +514,33 @@
 }
 
 /*!
+ * \qmlpropertygroup ::ListItem::divider
+ * \qmlproperty bool ListItem::divider.visible
+ * \qmlproperty real ListItem::divider.leftMargin
+ * \qmlproperty real ListItem::divider.rightMargin
+ *
+ * This grouped property configures the thin divider shown in the bottom of the
+ * component. Configures the visibility and the margins from the left and right
+ * of the ListItem. When tugged (swiped left or right to reveal the options),
+ * it is not moved together with the content.
+ *
+ * When \c visible is true, the ListItem's content size gets thinner with the
+ * divider's \c thickness.
+ *
+ * The default values for the properties are:
+ * \list
+ * \li \c visible: true
+ * \li \c leftMargin: 2 GU
+ * \li \c rightMargin: 2 GU
+ * \endlist
+ */
+UCListItemDivider* UCListItem::divider() const
+{
+    Q_D(const UCListItem);
+    return d->divider;
+}
+
+/*!
  * \qmlproperty bool ListItem::pressed
  * True when the item is pressed. The items stays pressed when the mouse or touch
  * is moved horizontally. When in Flickable (or ListView), the item gets un-pressed
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitem.h'
--- modules/Ubuntu/Components/plugin/uclistitem.h	2014-09-15 08:22:13 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem.h	2014-09-15 08:22:15 +0000
@@ -21,11 +21,13 @@
 #include "ucstyleditembase.h"
 
 class UCListItemContent;
+class UCListItemDivider;
 class UCListItemPrivate;
 class UCListItem : public UCStyledItemBase
 {
     Q_OBJECT
     Q_PROPERTY(UCListItemContent *contentItem READ contentItem CONSTANT)
+    Q_PROPERTY(UCListItemDivider *divider READ divider CONSTANT)
     Q_PROPERTY(bool pressed READ pressed NOTIFY pressedChanged)
     Q_PROPERTY(QQmlListProperty<QObject> data READ data DESIGNABLE false)
     Q_PROPERTY(QQmlListProperty<QQuickItem> children READ children NOTIFY childrenChanged DESIGNABLE false)
@@ -35,10 +37,13 @@
     ~UCListItem();
 
     UCListItemContent *contentItem() const;
+    UCListItemDivider *divider() const;
     bool pressed() const;
 
 protected:
+    void componentComplete();
     void itemChange(ItemChange change, const ItemChangeData &data);
+    QSGNode *updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *data);
     void geometryChanged(const QRectF &newGeometry, const QRectF &oldGeometry);
     void mousePressEvent(QMouseEvent *event);
     void mouseReleaseEvent(QMouseEvent *event);
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitem_p.h'
--- modules/Ubuntu/Components/plugin/uclistitem_p.h	2014-09-15 08:22:13 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem_p.h	2014-09-15 08:22:15 +0000
@@ -20,9 +20,11 @@
 #include "uclistitem.h"
 #include "ucstyleditembase_p.h"
 #include <QtCore/QPointer>
+#include <QtQuick/private/qquickrectangle_p.h>
 
 class QQuickFlickable;
 class UCListItemContent;
+class UCListItemDivider;
 class UCListItemPrivate : public UCStyledItemBasePrivate
 {
     Q_DECLARE_PUBLIC(UCListItem)
@@ -44,10 +46,14 @@
     void _q_updateSize();
     void setPressed(bool pressed);
     void listenToRebind(bool listen);
+    void resize();
+    void update();
 
     bool pressed:1;
+    bool ready:1;
     QPointer<QQuickFlickable> flickable;
     UCListItemContent *contentItem;
+    UCListItemDivider *divider;
 };
 
 class UCListItemContent : public QQuickItem
@@ -80,8 +86,60 @@
     bool m_pressedColorChanged:1;
 };
 
+class UCListItemDivider : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(bool visible MEMBER m_visible WRITE setVisible NOTIFY visibleChanged)
+    Q_PROPERTY(qreal leftMargin MEMBER m_leftMargin WRITE setLeftMargin NOTIFY leftMarginChanged)
+    Q_PROPERTY(qreal rightMargin MEMBER m_rightMargin WRITE setRightMargin NOTIFY rightMarginChanged)
+    Q_PROPERTY(QColor colorFrom MEMBER m_colorFrom WRITE setColorFrom NOTIFY colorFromChanged)
+    Q_PROPERTY(QColor colorTo MEMBER m_colorTo WRITE setColorTo NOTIFY colorToChanged)
+public:
+    explicit UCListItemDivider(QObject *parent = 0);
+    ~UCListItemDivider();
+    void init(UCListItem *listItem);
+
+Q_SIGNALS:
+    void visibleChanged();
+    void leftMarginChanged();
+    void rightMarginChanged();
+    void colorFromChanged();
+    void colorToChanged();
+
+protected:
+    QSGNode *paint(QSGNode *paintNode, const QRectF &rect);
+
+private Q_SLOTS:
+    void unitsChanged();
+    void paletteChanged();
+
+private:
+    void updateGradient();
+    void setVisible(bool visible);
+    void setLeftMargin(qreal leftMargin);
+    void setRightMargin(qreal rightMargin);
+    void setColorFrom(const QColor &color);
+    void setColorTo(const QColor &color);
+
+    bool m_visible:1;
+    bool m_leftMarginChanged:1;
+    bool m_rightMarginChanged:1;
+    bool m_colorFromChanged:1;
+    bool m_colorToChanged:1;
+    qreal m_thickness;
+    qreal m_leftMargin;
+    qreal m_rightMargin;
+    QColor m_colorFrom;
+    QColor m_colorTo;
+    QGradientStops m_gradient;
+    UCListItemPrivate *m_listItem;
+    friend class UCListItem;
+    friend class UCListItemPrivate;
+};
+
 QColor getPaletteColor(const char *profile, const char *color);
 
 QML_DECLARE_TYPE(UCListItemContent)
+QML_DECLARE_TYPE(UCListItemDivider)
 
 #endif // UCVIEWITEM_P_H
 
=== modified file 'tests/resources/listitems/ListItemTest.qml'
--- tests/resources/listitems/ListItemTest.qml	2014-09-15 08:22:13 +0000
+++ tests/resources/listitems/ListItemTest.qml	2014-09-15 08:22:15 +0000
@@ -37,18 +37,23 @@
                 print("click")
                 main.override = !main.override
             }
+            Label {
+                anchors.fill: parent
+                text: units.gridUnit + "PX/unit"
+            }
         }
 
         ListView {
             id: view
             clip: true
             width: parent.width
-            height: units.gu(40)
+            height: units.gu(20)
             model: 100
             pressDelay: 0
             delegate: ListItem {
                 id: listItem
                 onClicked: print(" clicked")
+
                 Label {
                     text: modelData + " item"
                 }
@@ -65,7 +70,7 @@
         Flickable {
             id: flicker
             width: parent.width
-            height: units.gu(40)
+            height: units.gu(20)
             clip: true
             contentHeight: column.childrenRect.height
             Column {
@@ -78,6 +83,12 @@
                             color: "red"
                             pressedColor: "lime"
                         }
+                        divider.colorFrom: UbuntuColors.green
+
+                        Label {
+                            text: modelData + " Flickable item"
+                        }
+                        onClicked: divider.visible = !divider.visible
                     }
                 }
             }
 
=== modified file 'tests/unit_x11/tst_components/tst_listitem.qml'
--- tests/unit_x11/tst_components/tst_listitem.qml	2014-09-15 08:22:13 +0000
+++ tests/unit_x11/tst_components/tst_listitem.qml	2014-09-15 08:22:15 +0000
@@ -87,6 +87,13 @@
             compare(defaults.contentItem.color, "#000000", "Transparent by default");
             compare(defaults.contentItem.pressedColor, Theme.palette.selected.background, "Theme.palette.selected.background color by default")
             compare(defaults.pressed, false, "Not pressed buy default");
+            compare(defaults.divider.visible, true, "divider is visible by default");
+            compare(defaults.divider.leftMargin, units.gu(2), "divider's left margin is 2GU");
+            compare(defaults.divider.rightMargin, units.gu(2), "divider's right margin is 2GU");
+            compare(defaults.divider.colorFrom, "#000000", "colorFrom differs.");
+            fuzzyCompare(defaults.divider.colorFrom.a, 0.14, 0.01, "colorFrom alpha differs");
+            compare(defaults.divider.colorTo, "#ffffff", "colorTo differs.");
+            fuzzyCompare(defaults.divider.colorTo.a, 0.07, 0.01, "colorTo alpha differs");
         }
 
         function test_children_in_content_item() {
@@ -145,5 +152,14 @@
             compare(listItem.pressed, false, "Item is pressed still!");
             TestExtras.touchRelease(0, listItem, Qt.point(listItem.width / 2, dy));
         }
+
+        function test_background_height_change_on_divider_visible() {
+            // make sure the testItem's divider is shown
+            testItem.divider.visible = true;
+            verify(testItem.contentItem.height < testItem.height, "ListItem's background height must be less than the item itself.");
+            testItem.divider.visible = false;
+            compare(testItem.contentItem.height, testItem.height, "ListItem's background height must be the same as the item itself.");
+            testItem.divider.visible = true;
+        }
     }
 }