Merge into staging : 20-divider : Code : Ubuntu UI Toolkit

Status:	Superseded
Proposed branch:	lp:~zsombi/ubuntu-ui-toolkit/20-divider
Merge into:	lp:ubuntu-ui-toolkit/staging
Prerequisite:	lp:~zsombi/ubuntu-ui-toolkit/10-viewitem
Diff against target:	551 lines (+332/-11) 7 files modified components.api (+8/-0) modules/Ubuntu/Components/plugin/plugin.cpp (+1/-0) modules/Ubuntu/Components/plugin/uclistitem.cpp (+231/-9) modules/Ubuntu/Components/plugin/uclistitem.h (+5/-0) modules/Ubuntu/Components/plugin/uclistitem_p.h (+58/-0) tests/resources/listitems/ListItemTest.qml (+13/-2) tests/unit_x11/tst_components/tst_listitem.qml (+16/-0)
To merge this branch:	bzr merge lp:~zsombi/ubuntu-ui-toolkit/20-divider
Related bugs:	Link a bug report
Related blueprints:	SDK: Design a new ListItem and layouts (Undefined)

Reviewer	Review Type	Date Requested	Status
PS Jenkins bot	continuous-integration		Needs Fixing on 2014-09-11
Michał Sawicz			Needs Information on 2014-08-13
Tim Peeters		2014-08-02	Pending
Review via email: mp+229317@code.launchpad.net

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-02:

#

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/710/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-02:

#

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/713/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

Michał Sawicz (saviq) wrote on 2014-08-02:

#

In the dash we have the need to override the dividers' colors, could you expose those as properties?

FWIW what I planned to do is also to build, into Theme or so, some smartness on how the divider should look like on dark backgrounds (as it should be reversed).

One more thing - using just two gradient stops and dp(2) results in a gradiented rectangle ~4.5 pixel high, which is not how the divider should look like - it should be crisp and sharp.

I planned an approach with 4 gradient stops at 0, 0.49, 0.50, 1, when at 2dp only a grid of more than 160 pixels per unit would cause the gradient to appear. At 0, 0.4, 0.5, 1 it'd show up at ~36px per unit, which I don't think is impossible to encounter in real life.

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-05:

#

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/732/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-08-07:

#

> In the dash we have the need to override the dividers' colors, could you
> expose those as properties?
>
> FWIW what I planned to do is also to build, into Theme or so, some smartness
> on how the divider should look like on dark backgrounds (as it should be
> reversed).
>
> One more thing - using just two gradient stops and dp(2) results in a
> gradiented rectangle ~4.5 pixel high, which is not how the divider should look
> like - it should be crisp and sharp.
>
> I planned an approach with 4 gradient stops at 0, 0.49, 0.50, 1, when at 2dp
> only a grid of more than 160 pixels per unit would cause the gradient to
> appear. At 0, 0.4, 0.5, 1 it'd show up at ~36px per unit, which I don't think
> is impossible to encounter in real life.

Checked with design, and the decision was to go for 1DP thick divider with solid fill. The API however will give the possibility to set either solid colour or gradient. Thickness is already configurable.

Revision history for this message

Michał Sawicz (saviq) wrote on 2014-08-13:

#

Do we really need so complicated a component? Can we not decide how a divider should look like and keep to it across the platform?

A divider with 6 properties... we could very well just use a Rectangle directly. :|

review: Needs Information

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-08-19:

#

> Do we really need so complicated a component? Can we not decide how a divider
> should look like and keep to it across the platform?
>
> A divider with 6 properties... we could very well just use a Rectangle
> directly. :|

If we use the ThinDivider for instance that is made in QML, the performance decreases 6 times. That's why we are doing it in C++.

The same for the ListItem itself. The QML part we have is only meant to keep the bindings to the size and the colors. We prototyped a QML ListItem as well and it was - at the stage we are now - 7 times slower than this.

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-08-19:

#

> > Do we really need so complicated a component? Can we not decide how a
> divider
> > should look like and keep to it across the platform?
> >
> > A divider with 6 properties... we could very well just use a Rectangle
> > directly. :|
>
> If we use the ThinDivider for instance that is made in QML, the performance
> decreases 6 times. That's why we are doing it in C++.
>
> The same for the ListItem itself. The QML part we have is only meant to keep
> the bindings to the size and the colors. We prototyped a QML ListItem as well
> and it was - at the stage we are now - 7 times slower than this.

Ah, and one more thing: the thickness, left and right margins might not be needed, however I see that it would be the first thing to add once the component gets released, because of some use case in some app than needs to start the divider from the edge, be thicker than 1DP, etc.

Revision history for this message

Michał Sawicz (saviq) wrote on 2014-08-19:

#

I'd venture to say that it should be an SDK design decision how much flexibility this has.

While I can understand margins... thickness and either of color or gradient should go away. And even for gradient, I'd say we need back/foreground color instead of direct gradient.

Revision history for this message

Zsombor Egri (zsombi) wrote on 2014-08-25:

#

> I'd venture to say that it should be an SDK design decision how much
> flexibility this has.
>
> While I can understand margins... thickness and either of color or gradient
> should go away. And even for gradient, I'd say we need back/foreground color
> instead of direct gradient.

Ok, you convinced me :) for now I've removed the thickness, but also the colours. I have a FIXME there to get the colors from the theme once we get the palette shaped to support colouring of the dividers. Yet, the colours are chosen based on the theme's normal background luminance.

lp:~zsombi/ubuntu-ui-toolkit/20-divider updated on 2014-08-26

1207. By Zsombor Egri on 2014-08-26: luminance fix

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-26:

#

PASSED: Continuous integration, rev:1206
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/916/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-ci/748
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/748
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/748/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-ci/748

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/916/rebuild

review: Approve (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-26:

#

PASSED: Continuous integration, rev:1207
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/921/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-ci/753
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/753
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/753/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-ci/753

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/921/rebuild

review: Approve (continuous-integration)

lp:~zsombi/ubuntu-ui-toolkit/20-divider updated on 2014-08-28

1208. By Zsombor Egri on 2014-08-28: prereq merge
1209. By Zsombor Egri on 2014-08-28: prereq merge
1210. By Zsombor Egri on 2014-08-28: move divider updates internally

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-28:

#

FAILED: Continuous integration, rev:1208
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/931/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/4176/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-ci/763/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/763/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-ci/763/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/5428/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/931/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-08-28:

#

FAILED: Continuous integration, rev:1210
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/935/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/4182/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-ci/767/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/767/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-ci/767/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/5434/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/935/rebuild

review: Needs Fixing (continuous-integration)

lp:~zsombi/ubuntu-ui-toolkit/20-divider updated on 2014-09-02

1211. By Zsombor Egri on 2014-09-02: prereq merge

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-02:

#

FAILED: Continuous integration, rev:1211
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/959/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/4323/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-ci/791/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/791/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-ci/791/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/5575/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/959/rebuild

review: Needs Fixing (continuous-integration)

lp:~zsombi/ubuntu-ui-toolkit/20-divider updated on 2014-09-04

1212. By Zsombor Egri on 2014-09-04: prereq merge
1213. By Zsombor Egri on 2014-09-04: documentation added

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-04:

#

FAILED: Continuous integration, rev:1213
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/982/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/4477/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-ci/814/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/814/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-ci/814/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/5729/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/982/rebuild

review: Needs Fixing (continuous-integration)

lp:~zsombi/ubuntu-ui-toolkit/20-divider updated on 2014-09-05

1214. By Zsombor Egri on 2014-09-05: prereq merge

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-05:

#

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/988/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-06:

#

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/993/rebuild

review: Needs Fixing (continuous-integration)

lp:~zsombi/ubuntu-ui-toolkit/20-divider updated on 2014-09-06

1215. By Zsombor Egri on 2014-09-06: test fixed

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-06:

#

PASSED: Continuous integration, rev:1215
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/997/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/4566
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-ci/829
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/829
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/829/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-ci/829
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/4350
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/5818
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/5818/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/12815

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/997/rebuild

review: Approve (continuous-integration)

lp:~zsombi/ubuntu-ui-toolkit/20-divider updated on 2014-09-08

1216. By Zsombor Egri on 2014-09-08: prereq merge
1217. By Zsombor Egri on 2014-09-08: use ListItem private in divider

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-08:

#

PASSED: Continuous integration, rev:1217
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1002/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/4587
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-ci/834
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/834
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/834/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-ci/834
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-mako/4370
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/5839
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/5839/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/12851

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1002/rebuild

review: Approve (continuous-integration)

lp:~zsombi/ubuntu-ui-toolkit/20-divider updated on 2014-09-11

1218. By Zsombor Egri on 2014-09-11: colors driving divider added
1219. By Zsombor Egri on 2014-09-11: API updated

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-11:

#

FAILED: Continuous integration, rev:1218
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1022/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-utopic-touch/4712/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-amd64-ci/854/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-armhf-ci/854/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-utopic-i386-ci/854/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-utopic-armhf/5964/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1022/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2014-09-11:

#

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1025/rebuild

review: Needs Fixing (continuous-integration)

lp:~zsombi/ubuntu-ui-toolkit/20-divider updated on 2014-11-19

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

Ubuntu UI Toolkit

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

Commit message

Description of the change

Unmerged revisions

Preview Diff

Subscribers

 === modified file 'components.api'
 --- components.api	2014-09-11 07:28:57 +0000
 +++ components.api	2014-09-11 07:28:57 +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-11 07:28:57 +0000
 +++ modules/Ubuntu/Components/plugin/plugin.cpp	2014-09-11 07:28:57 +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-11 07:28:57 +0000
 +++ modules/Ubuntu/Components/plugin/uclistitem.cpp	2014-09-11 07:28:57 +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-11 07:28:57 +0000
 +++ modules/Ubuntu/Components/plugin/uclistitem.h	2014-09-11 07:28:57 +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-11 07:28:57 +0000
 +++ modules/Ubuntu/Components/plugin/uclistitem_p.h	2014-09-11 07:28:57 +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-11 07:28:57 +0000
 +++ tests/resources/listitems/ListItemTest.qml	2014-09-11 07:28:57 +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-11 07:28:57 +0000
 +++ tests/unit_x11/tst_components/tst_listitem.qml	2014-09-11 07:28:57 +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;
++        }
+     }
+ }