Ubuntu UI Toolkit

Merge lp:~tpeeters/ubuntu-ui-toolkit/100-SectionBar into lp:ubuntu-ui-toolkit/staging

100-SectionBar
Merge into staging

Proposed by Tim Peeters on 2015-05-28

Status:	Merged
Approved by:	Zsombor Egri on 2015-06-17
Approved revision:	1564
Merged at revision:	1535
Proposed branch:	lp:~tpeeters/ubuntu-ui-toolkit/100-SectionBar
Merge into:	lp:ubuntu-ui-toolkit/staging
Diff against target:	835 lines (+732/-0) 12 files modified components.api (+4/-0) examples/ubuntu-ui-toolkit-gallery/Sections.qml (+47/-0) examples/ubuntu-ui-toolkit-gallery/WidgetsModel.qml (+5/-0) modules/Ubuntu/Components/1.3/Sections.qml (+101/-0) modules/Ubuntu/Components/Themes/Ambiance/1.3/SectionsStyle.qml (+119/-0) modules/Ubuntu/Components/qmldir (+1/-0) tests/autopilot/ubuntuuitoolkit/__init__.py (+2/-0) tests/autopilot/ubuntuuitoolkit/_custom_proxy_objects/__init__.py (+2/-0) tests/autopilot/ubuntuuitoolkit/_custom_proxy_objects/_sections.py (+49/-0) tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_sections.SectionsTestCase.qml (+42/-0) tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_sections.py (+51/-0) tests/unit_x11/tst_components/tst_sections.qml (+309/-0)
To merge this branch:	bzr merge lp:~tpeeters/ubuntu-ui-toolkit/100-SectionBar
Related bugs:	Link a bug report

Reviewer	Review Type	Date Requested	Status
PS Jenkins bot	continuous-integration		Approve on 2015-06-17
Zsombor Egri (community)		2015-05-28	Approve on 2015-06-17
Tim Peeters			Needs Fixing on 2015-06-17
Review via email: mp+260502@code.launchpad.net

Commit Message

Introduce the new Sections component.

Description of the Change

Introduce the new Sections component.

This component will be used (in a following MR) in the new header to replace the sections selector in the current header divider. Sections will also be available as a separate component for convergence apps that need to place the Sections outside of the single standard header.

lp:~tpeeters/ubuntu-ui-toolkit/100-SectionBar updated on 2015-05-28

1534. By Tim Peeters on 2015-05-28: docs
1535. By Tim Peeters on 2015-05-28: docs
1536. By Tim Peeters on 2015-05-28: spacing
1537. By Tim Peeters on 2015-05-28: spacing
1538. By Tim Peeters on 2015-05-28: update components.api
1539. By Tim Peeters on 2015-05-28: docs

PS Jenkins bot (ps-jenkins) wrote on 2015-05-28:

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

review: Needs Fixing (continuous-integration)

lp:~tpeeters/ubuntu-ui-toolkit/100-SectionBar updated on 2015-05-28

1540. By Tim Peeters on 2015-05-28: remove empty functions from tst_sections
1541. By Tim Peeters on 2015-05-28: sections

PS Jenkins bot (ps-jenkins) wrote on 2015-05-28:

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

review: Needs Fixing (continuous-integration)

Zsombor Egri (zsombi) wrote on 2015-05-29:

Comments inline. I'm not good with the API.

review: Needs Fixing

Tim Peeters (tpeeters) wrote on 2015-05-29:

38 +/*!
39 + \qmltype Sections
40 + \inqmlmodule Ubuntu.Components 1.3
41 + \ingroup ubuntu
42 + \since Ubuntu.Components 1.3
43 + \brief Display a list of sections that the user can select.
44 + */
> Zsombor Egri (zsombi) wrote 7 hours ago:
> Shouldn't you have more to say here?

Yes I can extend it a bit.

45 +StyledItem {
46 + id: sections
47 + style: theme.createStyleComponent("SectionsStyle.qml", sections)
> Zsombor Egri (zsombi) wrote 7 hours ago:
> This is wrong, once the styleName will get into staging, this will be broken. Please merge with
> styleName MR and fix this. With a small luck, we will get it soon if LP gets it.

Ok, will do. I thought I would land my MR before you land yours. ;)

48 +
49 + /*!
50 + List of strings that represent section names. Example:
51 + \qml
> Zsombor Egri (zsombi) wrote 7 hours ago:
> Hmm.... I was thinking shouldn't this be rather a list of actions? Then you don't need the
> model and the selectedIndex properties separated. The Action would drive the visual (you
> would also be able to show icons if design changes his mind - with the current setup an API
> change would be needed) and the trigger would tell which Action is selected. I feel we have
> to discuss more about this.

Ok. After our discussion, I'll make this a list of actions and keep the selectedIndex as well. Changing the selectedIndex will trigger the appropriate Action.

137 + Row {
138 + id: sectionsRow
> Zsombor Egri (zsombi) wrote 7 hours ago:
> Aren't the sections proportionally filling the space? What if a text exceeds the
> space available?

No. In the new designs, the sections are always aligned left and don't fill the space.
If the text exceeds the available space, the section list will be scrollable. I will add the scrolling in a following MR.

150 + AbstractButton {
151 + id: sectionButton
> Zsombor Egri (zsombi) wrote 7 hours ago:
> I feel like this should be rather that FlatButton instead...

We don't have a FlatButton yet. I think the AbstractButton is fine here, since the visuals are quite specific for the section selector.

399 + def test_click_unexisting_section_button(self):
400 + error = self.assertRaises(
Zsombor Egri (zsombi) wrote 7 hours ago:
> Why do you need this? Can't you cover this in unit test?

It does not test component functionality, only verifies that the CPO works as expected.

lp:~tpeeters/ubuntu-ui-toolkit/100-SectionBar updated on 2015-06-02

1542. By Tim Peeters on 2015-06-01: sync staging
1543. By Tim Peeters on 2015-06-01: use styleName in Sections
1544. By Tim Peeters on 2015-06-01: extend docs a bit
1545. By Tim Peeters on 2015-06-02: use Actions instead of strings for the model

PS Jenkins bot (ps-jenkins) wrote on 2015-06-02:

FAILED: Continuous integration, rev:1545
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1830/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/3042/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/558/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/560/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/557/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/3040/console

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

review: Needs Fixing (continuous-integration)

lp:~tpeeters/ubuntu-ui-toolkit/100-SectionBar updated on 2015-06-02

1546. By Tim Peeters on 2015-06-02: changing selectedIndex triggers Action.
1547. By Tim Peeters on 2015-06-02: update components.api

PS Jenkins bot (ps-jenkins) wrote on 2015-06-02:

FAILED: Continuous integration, rev:1547
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1836/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/3050/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/564/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/566/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/563/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/3048/console

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

review: Needs Fixing (continuous-integration)

lp:~tpeeters/ubuntu-ui-toolkit/100-SectionBar updated on 2015-06-02

1548. By Tim Peeters on 2015-06-02: sync staging

PS Jenkins bot (ps-jenkins) wrote on 2015-06-02:

FAILED: Continuous integration, rev:1548
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1843/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/3058/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/571/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/573/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/570/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/3056/console

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

review: Needs Fixing (continuous-integration)

Zsombor Egri (zsombi) wrote on 2015-06-03:

/tmp/buildd/ubuntu-ui-toolkit-1.3.1517+15.10.20150523bzr1548pkg0vivid571/modules/Ubuntu/Components/1.3/Sections.qml:36: warning: Unknown command '\selectedIndex'
/tmp/buildd/ubuntu-ui-toolkit-1.3.1517+15.10.20150523bzr1548pkg0vivid571/modules/Ubuntu/Components/1.3/Sections.qml:64: warning: Can't link to 'model'
Makefile:289: recipe for target 'docs' failed

review: Needs Fixing

lp:~tpeeters/ubuntu-ui-toolkit/100-SectionBar updated on 2015-06-05

1549. By Tim Peeters on 2015-06-05: fix docs

PS Jenkins bot (ps-jenkins) wrote on 2015-06-05:

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

review: Needs Fixing (continuous-integration)

Tim Peeters (tpeeters) wrote on 2015-06-06:

Ready for another review.

Note that Page.head.sections.model is currently a list of strings, see https://developer.ubuntu.com/api/apps/qml/sdk-14.10/Ubuntu.Components.PageHeadSections/

Do we want to break that API and replace it with a list of Actions?

Zsombor Egri (zsombi) wrote on 2015-06-07:

> Ready for another review.
>
> Note that Page.head.sections.model is currently a list of strings, see https:/
> /developer.ubuntu.com/api/apps/qml/sdk-14.10/Ubuntu.Components.PageHeadSection
> s/
>
> Do we want to break that API and replace it with a list of Actions?

Do we break the API if we say that it can be either strings - in which case we have more work - or it also can be a list of Actions? I think not.

Tim Peeters (tpeeters) wrote on 2015-06-09:

Supporting both Actions and strings in PageHeadSections is problematic. Then in order to feed it to the Sections we need to convert the list of strings into a list of Actions. I don't see a simple way to do that in QML.

We can support strings and actions in Sections and PageHeadSections, and then inside Sections I'll have to support both in the Repeater. That is not difficult but I'd say it is a bit messy.

lp:~tpeeters/ubuntu-ui-toolkit/100-SectionBar updated on 2015-06-16

1550. By Tim Peeters on 2015-06-16: unit tests for list of strings as model
1551. By Tim Peeters on 2015-06-16: rename actions to model and support a list of strings as model
1552. By Tim Peeters on 2015-06-16: improve test app

PS Jenkins bot (ps-jenkins) wrote on 2015-06-17:

FAILED: Continuous integration, rev:1552
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1896/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/3215/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/624/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/626/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/623/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/3213/console

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

review: Needs Fixing (continuous-integration)

lp:~tpeeters/ubuntu-ui-toolkit/100-SectionBar updated on 2015-06-17

1553. By Tim Peeters on 2015-06-17: split up unit tests
1554. By Tim Peeters on 2015-06-17: update components.api
1555. By Tim Peeters on 2015-06-17: merge staging
1556. By Tim Peeters on 2015-06-17: update docs

Tim Peeters (tpeeters) wrote on 2015-06-17:

Updated and ready for another review. The 'actions' property was renamed to 'model' and now accepts either a list of Actions or a list of strings. Docs and unit tests were also updated.

lp:~tpeeters/ubuntu-ui-toolkit/100-SectionBar updated on 2015-06-17

1557. By Tim Peeters on 2015-06-17: fix components.api

PS Jenkins bot (ps-jenkins) wrote on 2015-06-17:

FAILED: Continuous integration, rev:1553
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1897/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/3216/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/625/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/627/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/624/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/3214/console

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

review: Needs Fixing (continuous-integration)

PS Jenkins bot (ps-jenkins) wrote on 2015-06-17:

PASSED: Continuous integration, rev:1557
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1898/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/3217
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/626
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/628
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/628/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/625
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-runner-vivid-mako/2695
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/3215
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/3215/artifact/work/output/*zip*/output.zip
    SUCCESS: http://s-jenkins.ubuntu-ci:8080/job/touch-flash-device/21236

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

review: Approve (continuous-integration)

Tim Peeters (tpeeters) wrote on 2015-06-17:

[10:55:46] <nerochiaro> timp: i am trying to use the Sections from your branch but when i follow the example and set actions to a list, like this "actions: [ Action { text: "A" } ]" QML gives me this error: "Cannot assign multiple values to a singular property"... any ideas why ?
[10:56:11] <nerochiaro> timp: if I create a list<Action> property and then assign it to the actions it works ok

review: Needs Fixing

lp:~tpeeters/ubuntu-ui-toolkit/100-SectionBar updated on 2015-06-17

1558. By Tim Peeters on 2015-06-17: fix
1559. By Tim Peeters on 2015-06-17: document actions/model
1560. By Tim Peeters on 2015-06-17: add Sections to the component gallery
1561. By Tim Peeters on 2015-06-17: clean tst_sections.qml
1562. By Tim Peeters on 2015-06-17: update components.api
1563. By Tim Peeters on 2015-06-17: update docs
1564. By Tim Peeters on 2015-06-17: fix docs

PS Jenkins bot (ps-jenkins) wrote on 2015-06-17:

FAILED: Continuous integration, rev:1558
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1905/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-deb-autopilot-vivid-touch/3228/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/633/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/635/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/632/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-vivid-armhf/3226/console

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

review: Needs Fixing (continuous-integration)

PS Jenkins bot (ps-jenkins) wrote on 2015-06-17:

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

review: Needs Fixing (continuous-integration)

Zsombor Egri (zsombi) wrote on 2015-06-17:

Good to go.

review: Approve

PS Jenkins bot (ps-jenkins) on 2015-06-17:

review: Approve (continuous-integration)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk

Subscribers

People subscribed via source and target branches

to all changes:

Dan Chapman 

Tim Peeters

Tom Mirmar

Ubuntu SDK team

 === modified file 'components.api'
 --- components.api	2015-06-02 12:37:41 +0000
 +++ components.api	2015-06-17 12:24:49 +0000
@@ -793,6 +793,10 @@
      property int align
      property Flickable flickableItem
  Ubuntu.Components.ScrollbarUtils 0.1 1.0
++Ubuntu.Components.Sections 1.3: StyledItem
++    readonly property Action actions
++    property var model
++    property int selectedIndex
  Ubuntu.Components.ServiceProperties 1.1: QtObject
      property string adaptorInterface
      readonly property string error
 === added file 'examples/ubuntu-ui-toolkit-gallery/Sections.qml'
 --- examples/ubuntu-ui-toolkit-gallery/Sections.qml	1970-01-01 00:00:00 +0000
 +++ examples/ubuntu-ui-toolkit-gallery/Sections.qml	2015-06-17 12:24:49 +0000
@@ -0,0 +1,47 @@
++/*
++ * Copyright 2015 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++import QtQuick 2.4
++import Ubuntu.Components 1.3
++
++Template {
++    objectName: "sectionsTemplate"
++
++    TemplateSection {
++        title: "Sections"
++        className: "Sections"
++
++        TemplateRow {
++            title: i18n.tr("Enabled")
++
++            Sections {
++                actions: [
++                    Action { text: "one" },
++                    Action { text: "two" },
++                    Action { text: "three" }
++                ]
++            }
++        }
++        TemplateRow {
++            title: i18n.tr("Disabled")
++
++            Sections {
++                model: ["one", "two", "three"]
++                enabled: false
++            }
++        }
++    }
++}
 === modified file 'examples/ubuntu-ui-toolkit-gallery/WidgetsModel.qml'
 --- examples/ubuntu-ui-toolkit-gallery/WidgetsModel.qml	2015-03-23 16:24:43 +0000
 +++ examples/ubuntu-ui-toolkit-gallery/WidgetsModel.qml	2015-06-17 12:24:49 +0000
@@ -72,6 +72,11 @@
          source: "ProgressBars.qml"
+     }
      ListElement {
++        objectName: "sectionsElement"
++        label: "Sections"
++        source: "Sections.qml"
++    }
++    ListElement {
          objectName: "ubuntuShapesElement"
          label: "Ubuntu Shape"
          source: "UbuntuShape.qml"
 === added file 'modules/Ubuntu/Components/1.3/Sections.qml'
 --- modules/Ubuntu/Components/1.3/Sections.qml	1970-01-01 00:00:00 +0000
 +++ modules/Ubuntu/Components/1.3/Sections.qml	2015-06-17 12:24:49 +0000
@@ -0,0 +1,101 @@
++/*
++ * Copyright 2015 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++import QtQuick 2.4
++import Ubuntu.Components 1.3
++
++/*!
++    \qmltype Sections
++    \inqmlmodule Ubuntu.Components 1.3
++    \ingroup ubuntu
++    \since Ubuntu.Components 1.3
++    \brief Display a list of sections that the user can select. By tapping
++        on a section name the \l selectedIndex will be updated, and the
++        associated \l Action is triggered.
++ */
++StyledItem {
++    id: sections
++    styleName: "SectionsStyle"
++
++    /*!
++      List of actions that represent the sections.
++      The text of each action is displayed as the section name and clicking
++      a section will update the \l selectedIndex.
++
++      When \l selectedIndex is changed (by user interaction or by setting
++      the value), actions[selectedIndex] will be triggered.
++
++      Example:
++      \qml
++        Sections {
++            actions: [
++                Action {
++                    text: "first"
++                    onTriggered: print("one")
++                },
++                Action {
++                    text: "second"
++                    onTriggered: print("two")
++                },
++                Action {
++                    text: "third"
++                    onTriggered: print("three")
++                }
++            ]
++        }
++     \endqml
++     It is strongly recommended to limit the number of sections to two or three.
++     The actions are used as the model for the Sections by default.
++     If no trigger functions need to be specified, \l model may be used directly
++     without setting the actions property. If both \l actions and \l model are set,
++     model overrides the actions.
++     */
++    property list<Action> actions
++
++    /*!
++      The input model for the sections. By default model takes the \l actions
++      as input, but if no trigger functions need to be specified, it can be
++      simplified to a list of strings naming the sections:
++         \qml
++            Sections {
++                model: [ "one", "two", "three" ]
++                onSelectedIndexChanged: {
++                    print("Selected section " + model[selectedIndex]);
++                }
++            }
++         \endqml
++     */
++    property var model: actions
++    onModelChanged: {
++        if (model && model.length > 3) {
++            // FIXME: Make the Sections scrollable for more than 3 sections.
++            console.warn("It is not YET recommended or supported to use more than three sections.");
++        }
++    }
++
++    /*!
++      The index of the currently selected section in \l model.
++     */
++    property int selectedIndex: model ? 0 : -1
++
++    onSelectedIndexChanged: {
++        if ((selectedIndex >= 0) && (selectedIndex < model.length)) {
++            if (model[selectedIndex].hasOwnProperty("trigger")) {
++                model[selectedIndex].trigger();
++            }
++        }
++    }
++}
 === added file 'modules/Ubuntu/Components/Themes/Ambiance/1.3/SectionsStyle.qml'
 --- modules/Ubuntu/Components/Themes/Ambiance/1.3/SectionsStyle.qml	1970-01-01 00:00:00 +0000
 +++ modules/Ubuntu/Components/Themes/Ambiance/1.3/SectionsStyle.qml	2015-06-17 12:24:49 +0000
@@ -0,0 +1,119 @@
++/*
++ * Copyright 2015 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++import QtQuick 2.4
++import Ubuntu.Components 1.3
++
++Item {
++    id: sectionsStyle
++
++    implicitWidth: sectionsRow.width
++    implicitHeight: units.gu(4)
++
++    enabled: styledItem.enabled
++    opacity: enabled ? 1.0 : 0.5
++
++    /*!
++      The foreground color of unselected sections.
++     */
++    property color sectionColor: theme.palette.selected.backgroundText
++
++    /*!
++      The foreground color of the selected section.
++     */
++    property color selectedSectionColor: UbuntuColors.orange
++
++    /*!
++      The background color for the pressed section button.
++     */
++    property color pressedBackgroundColor: theme.palette.selected.background
++
++    /*!
++      The font size for the text in the buttons.
++     */
++    property string fontSize: "small"
++
++    /*!
++      The spacing on the left and right sides of the label
++      inside a section button.
++     */
++    property real horizontalLabelSpacing: units.gu(2)
++
++    /*!
++      The height of the bar underlining the sections.
++     */
++    property real underlineHeight: units.dp(2)
++
++    Row {
++        id: sectionsRow
++        anchors {
++            top: parent.top
++            bottom: parent.bottom
++            horizontalCenter: parent.horizontalCenter
++        }
++        width: childrenRect.width
++
++        Repeater {
++            id: sectionsRepeater
++            model: styledItem.model
++            objectName: "sections_repeater"
++            AbstractButton {
++                id: sectionButton
++                anchors {
++                    top: parent ? parent.top : undefined
++                    bottom: parent ? parent.bottom : undefined
++                }
++                objectName: "section_button_" + index
++                width: label.width + 2 * sectionsStyle.horizontalLabelSpacing
++                height: sectionsRow.height
++                property bool selected: index === styledItem.selectedIndex
++                onClicked: styledItem.selectedIndex = index
++
++                // Background pressed highlight
++                Rectangle {
++                    visible: parent.pressed
++                    anchors.fill: parent
++                    color: sectionsStyle.pressedBackgroundColor
++                }
++
++                // Section title
++                Label {
++                    id: label
++                    objectName: "section_button_label_" + index
++                    // modelData may be either a string, or an Action
++                    text: modelData.hasOwnProperty("text") ? modelData.text : modelData
++                    fontSize: sectionsStyle.fontSize
++                    anchors.centerIn: parent
++                    color: sectionButton.selected ?
++                               sectionsStyle.selectedSectionColor :
++                               sectionsStyle.sectionColor
++                }
++
++                // Section title underline
++                Rectangle {
++                    anchors {
++                        bottom: parent.bottom
++                        left: parent.left
++                        right: parent.right
++                    }
++                    height: sectionsStyle.underlineHeight
++                    color: sectionButton.selected ?
++                               sectionsStyle.selectedSectionColor :
++                               sectionsStyle.sectionColor
++                }
++            }
++        }
++    }
++}
 === modified file 'modules/Ubuntu/Components/qmldir'
 --- modules/Ubuntu/Components/qmldir	2015-05-12 13:41:39 +0000
 +++ modules/Ubuntu/Components/qmldir	2015-06-17 12:24:49 +0000
@@ -133,6 +133,7 @@
  PageHeadConfiguration 1.3 1.3/PageHeadConfiguration.qml
  PageHeadSections 1.3 1.3/PageHeadSections.qml
  PageHeadState 1.3 1.3/PageHeadState.qml
++Sections 1.3 1.3/Sections.qml
  Header 1.3 1.3/Header.qml
  CrossFadeImage 1.3 1.3/CrossFadeImage.qml
  OrientationHelper 1.3 1.3/OrientationHelper.qml
 === modified file 'tests/autopilot/ubuntuuitoolkit/__init__.py'
 --- tests/autopilot/ubuntuuitoolkit/__init__.py	2015-05-14 20:08:45 +0000
 +++ tests/autopilot/ubuntuuitoolkit/__init__.py	2015-06-17 12:24:49 +0000
@@ -38,6 +38,7 @@
      'QQuickFlickable',
      'QQuickGridView',
      'QQuickListView',
++    'Sections',
      'TabBar',
      'Tabs',
      'tests',
@@ -76,6 +77,7 @@
      QQuickFlickable,
      QQuickGridView,
      QQuickListView,
++    Sections,
      TabBar,
      Tabs,
      TextArea,
 === modified file 'tests/autopilot/ubuntuuitoolkit/_custom_proxy_objects/__init__.py'
 --- tests/autopilot/ubuntuuitoolkit/_custom_proxy_objects/__init__.py	2015-05-14 20:08:45 +0000
 +++ tests/autopilot/ubuntuuitoolkit/_custom_proxy_objects/__init__.py	2015-06-17 12:24:49 +0000
@@ -35,6 +35,7 @@
      'QQuickFlickable',
      'QQuickGridView',
      'QQuickListView',
++    'Sections',
      'TabBar',
      'Tabs',
      'TextArea',
@@ -46,6 +47,7 @@
+ ]
  from ubuntuuitoolkit._custom_proxy_objects._actionbar import ActionBar
++from ubuntuuitoolkit._custom_proxy_objects._sections import Sections
  from ubuntuuitoolkit._custom_proxy_objects._checkbox import CheckBox
  from ubuntuuitoolkit._custom_proxy_objects._common import (
      check_autopilot_version,
 === added file 'tests/autopilot/ubuntuuitoolkit/_custom_proxy_objects/_sections.py'
 --- tests/autopilot/ubuntuuitoolkit/_custom_proxy_objects/_sections.py	1970-01-01 00:00:00 +0000
 +++ tests/autopilot/ubuntuuitoolkit/_custom_proxy_objects/_sections.py	2015-06-17 12:24:49 +0000
@@ -0,0 +1,49 @@
++# -*- Mode: Python; coding: utf-8; indent-tabs-mode: nil; tab-width: 4 -*-
++#
++# Copyright (C) 2015 Canonical Ltd.
++#
++# This program is free software; you can redistribute it and/or modify
++# it under the terms of the GNU Lesser General Public License as published by
++# the Free Software Foundation; version 3.
++#
++# This program is distributed in the hope that it will be useful,
++# but WITHOUT ANY WARRANTY; without even the implied warranty of
++# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
++# GNU Lesser General Public License for more details.
++#
++# You should have received a copy of the GNU Lesser General Public License
++# along with this program. If not, see <http://www.gnu.org/licenses/>.
++
++import logging
++
++from autopilot import logging as autopilot_logging
++from autopilot.introspection import dbus
++from ubuntuuitoolkit._custom_proxy_objects import _common
++
++
++logger = logging.getLogger(__name__)
++
++
++class Sections(_common.UbuntuUIToolkitCustomProxyObjectBase):
++    """Sections Autopilot custom proxy object."""
++
++    def _get_section_button(self, section_index):
++        try:
++            object_name = "section_button_" + str(section_index)
++            button = self.select_single(objectName=object_name)
++        except dbus.StateNotFoundError:
++            raise _common.ToolkitException(
++                'Button not found in Sections.')
++
++        return button
++
++    @autopilot_logging.log_action(logger.info)
++    def click_section_button(self, section_index):
++        """Click a section button of the Sections.
++
++        :parameter section_index: The index of the section to click.
++        :raise ToolkitException: If there is no section button with that index.
++
++        """
++        button = self._get_section_button(section_index)
++        self.pointing_device.click_object(button)
 === added file 'tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_sections.SectionsTestCase.qml'
 --- tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_sections.SectionsTestCase.qml	1970-01-01 00:00:00 +0000
 +++ tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_sections.SectionsTestCase.qml	2015-06-17 12:24:49 +0000
@@ -0,0 +1,42 @@
++/*
++ * Copyright 2015 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++import QtQuick 2.4
++import Ubuntu.Components 1.3
++
++MainView {
++    width: units.gu(48)
++    height: units.gu(60)
++    objectName: "mainView"
++    Page {
++        title: "Sections test"
++        Label {
++            id: label
++            objectName: "label"
++            anchors {
++                top: parent.top
++                horizontalCenter: parent.horizontalCenter
++            }
++            text: "Section " + sections.selectedIndex + " is selected."
++        }
++        Sections {
++            id: sections
++            objectName: "sections"
++            anchors.centerIn: parent
++            model: [ "first", "second", "third" ]
++        }
++    }
++}
 === added file 'tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_sections.py'
 --- tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_sections.py	1970-01-01 00:00:00 +0000
 +++ tests/autopilot/ubuntuuitoolkit/tests/custom_proxy_objects/test_sections.py	2015-06-17 12:24:49 +0000
@@ -0,0 +1,51 @@
++# -*- Mode: Python; coding: utf-8; indent-tabs-mode: nil; tab-width: 4 -*-
++#
++# Copyright (C) 2015 Canonical Ltd.
++#
++# This program is free software; you can redistribute it and/or modify
++# it under the terms of the GNU Lesser General Public License as published by
++# the Free Software Foundation; version 3.
++#
++# This program is distributed in the hope that it will be useful,
++# but WITHOUT ANY WARRANTY; without even the implied warranty of
++# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
++# GNU Lesser General Public License for more details.
++#
++# You should have received a copy of the GNU Lesser General Public License
++# along with this program. If not, see <http://www.gnu.org/licenses/>.
++
++import os
++import ubuntuuitoolkit
++from ubuntuuitoolkit import tests
++
++
++class SectionsTestCase(tests.QMLFileAppTestCase):
++
++    path = os.path.abspath(__file__)
++    dir_path = os.path.dirname(path)
++    test_qml_file_path = os.path.join(
++        dir_path, 'test_sections.SectionsTestCase.qml')
++
++    def setUp(self):
++        super().setUp()
++        self.sections = self.app.select_single(
++            'Sections', objectName='sections')
++        self.label = self.app.select_single(
++            'Label', objectName='label')
++        self.assertEqual(self.label.text, 'Section 0 is selected.')
++
++    def test_custom_proxy_object(self):
++        self.assertIsInstance(self.sections, ubuntuuitoolkit.Sections)
++        self.assertTrue(self.sections.visible)
++
++    def test_click_section_button(self):
++        self.sections.click_section_button(2)
++        self.assertEqual(self.label.text, 'Section 2 is selected.')
++
++    def test_click_unexisting_section_button(self):
++        error = self.assertRaises(
++            ubuntuuitoolkit.ToolkitException,
++            self.sections.click_section_button, 3)
++        self.assertEqual(
++            str(error),
++            'Button not found in Sections.')
 === added file 'tests/unit_x11/tst_components/tst_sections.qml'
 --- tests/unit_x11/tst_components/tst_sections.qml	1970-01-01 00:00:00 +0000
 +++ tests/unit_x11/tst_components/tst_sections.qml	2015-06-17 12:24:49 +0000
@@ -0,0 +1,309 @@
++/*
++ * Copyright 2015 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU Lesser General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU Lesser General Public License for more details.
++ *
++ * You should have received a copy of the GNU Lesser General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++import QtQuick 2.4
++import Ubuntu.Test 1.0
++import Ubuntu.Components 1.3
++
++Rectangle {
++    id: root
++    width: 400
++    height: 600
++    color: "white"
++
++    property list<Action> actionList: [
++        Action {
++            text: "first";
++            onTriggered: label.text = "First action triggered.";
++        },
++        Action {
++            text: "second";
++            onTriggered: label.text = "Second action triggered.";
++        },
++        Action {
++            text: "third";
++            onTriggered: label.text = "Third action triggered.";
++        }
++    ]
++
++    property var stringList: [
++        "string one", "string two", "string three"
++    ]
++
++    Column {
++        id: column
++        anchors {
++            left: parent.left
++            right: parent.right
++            top: parent.top
++            margins: units.gu(2)
++        }
++        spacing: units.gu(2)
++
++        Label {
++            anchors.horizontalCenter: parent.horizontalCenter
++            text: "Sections with actions"
++        }
++        Label {
++            anchors.left: parent.left
++            text: "actions in-line:"
++            fontSize: small
++        }
++        Sections {
++            // Not used in the tests below, but added here to
++            //  verify that the Actions can be defined directly
++            //  inside the list of actions.
++            actions: [
++                Action { text: "1" },
++                Action { text: "2" }
++            ]
++        }
++        Label {
++            anchors.left: parent.left
++            text: "enabled:"
++            fontSize: "small"
++        }
++        Sections {
++            id: enabledSections
++            actions: root.actionList
++        }
++        Label {
++            text: "disabled:"
++            fontSize: "small"
++        }
++        Sections {
++            id: disabledSections
++            actions: root.actionList
++            enabled: false
++        }
++        Rectangle {
++            anchors {
++                left: parent.left
++                right: parent.right
++                margins: units.gu(2)
++            }
++            color: UbuntuColors.blue
++            height: units.gu(10)
++            Label {
++                id: label
++                anchors.centerIn: parent
++                text: "No action triggered."
++                color: "white"
++            }
++        }
++        Label {
++            anchors.horizontalCenter: parent.horizontalCenter
++            text: "Sections with strings"
++        }
++        Label {
++            anchors.left: parent.left
++            text: "enabled:"
++            fontSize: "small"
++        }
++        Sections {
++            id: enabledStringSections
++            model: root.stringList
++        }
++        Label {
++            anchors.left: parent.left
++            text: "disabled:"
++            fontSize: "small"
++        }
++        Sections {
++            id: disabledStringSections
++            model: root.stringList
++            enabled: false
++        }
++    }
++
++    UbuntuTestCase {
++        id: testCase
++        name: "SectionsApi"
++        when: windowShown
++
++        function initTestCase() {
++            compare(label.text, "No action triggered.", "An action was triggered initially.");
++        }
++
++        function cleanup() {
++            enabledSections.selectedIndex = 0;
++            disabledSections.selectedIndex = 0;
++            enabledStringSections.selectedIndex = 0;
++            disabledStringSections.selectedIndex = 0;
++        }
++
++        function wait_for_animation(sections) {
++            // TODO when animations are added
++        }
++
++        function get_number_of_section_buttons(sections) {
++            var repeater = findChild(sections, "sections_repeater");
++            return repeater.count;
++        }
++
++        // return the index of the selected section button,
++        //  or -1 if no selected section button is found.
++        function get_selected_section_button_index(sections) {
++            var n = get_number_of_section_buttons(sections);
++            var button;
++            for (var i=0; i < n; i++) {
++                button = findChild(sections, "section_button_"+i);
++                if (button.selected) {
++                    return i;
++                }
++            }
++            return -1;
++        }
++
++        function get_selected_section_button_text(sections) {
++            var index = get_selected_section_button_index(sections);
++            if (index < 0) return "BUTTON NOT FOUND.";
++            var button = findChild(sections, "section_button_label_"+index);
++            return button.text;
++        }
++
++        function click_section_button(sections, sectionName) {
++            var index = -1;
++            var object;
++            for (index = 0; index < sections.model.length; index++) {
++                object = sections.model[index];
++                // object may be a string or an Action
++                if (object.hasOwnProperty("text")) {
++                    if (object.text === sectionName) {
++                        break;
++                    }
++                } else {
++                    if (object === sectionName) {
++                        break;
++                    }
++                }
++            }
++            verify(index >= 0, "Button with name \'"+sectionName+"\' not found.");
++            var button = findChild(sections, "section_button_"+index);
++            mouseClick(button, button.width/2, button.height/2);
++        }
++
++        function check_selected_section(sections, index, name) {
++            var v = sections.selectedIndex;
++            compare(v, index, "selectedIndex "+v+" does not match "+index);
++            v = get_selected_section_button_index(sections);
++            compare(v, index, "selected button index "+v+" does not match "+index);
++            var w = get_selected_section_button_text(sections);
++            compare(w, name, "selected button text \'"+w+"\' does not match \'"+name+"\'");
++        }
++
++        // in each test function below, test the desired behavior
++        //  for both enabledSections and disabledSections.
++
++        function test_0_first_section_initially_selected_actions_enabled() {
++            check_selected_section(enabledSections, 0, "first");
++        }
++        function test_0_first_section_initially_selected_actions_disabled() {
++            check_selected_section(disabledSections, 0, "first");
++        }
++        function test_0_first_section_initially_selected_strings_enabled() {
++            check_selected_section(enabledStringSections, 0, "string one");
++        }
++        function test_0_first_section_initially_selected_strings_disabled() {
++            check_selected_section(disabledStringSections, 0, "string one");
++        }
++
++        function test_number_of_section_buttons() {
++            var n = root.actionList.length;
++            compare(get_number_of_section_buttons(enabledSections), n,
++                    "Showing incorrect number of sections.");
++            compare(get_number_of_section_buttons(disabledSections), n,
++                    "Showing incorrect number of disabled sections.")
++        }
++
++        function test_click_to_select_section_and_trigger_action() {
++            var index = 2;
++            var name = "third";
++            click_section_button(enabledSections, name);
++            wait_for_animation(enabledSections);
++            check_selected_section(enabledSections, index, name);
++            var text = "Third action triggered.";
++            compare(label.text, text, "Action for clicked button not triggered.");
++        }
++
++        function test_click_disabled_section_action() {
++            var index = 2;
++            var name = "third";
++            click_section_button(disabledSections, name);
++            wait_for_animation(disabledSections);
++            // first button should still be selected:
++            index = 0;
++            name = "first";
++            check_selected_section(disabledSections, index, name);
++            var text = "No action triggered.";
++            compare(label.text, text, "Clicking disabled button triggered something.");
++        }
++
++        function test_click_to_select_section_string() {
++            var index = 2;
++            var name = "string three";
++            click_section_button(enabledStringSections, name);
++            wait_for_animation(enabledStringSections);
++            check_selected_section(enabledStringSections, index, name);
++        }
++
++        function test_click_disabled_section_string() {
++            var name = "string three";
++            click_section_button(disabledStringSections, name);
++            wait_for_animation(disabledStringSections);
++            // first button should still be selected:
++            var index = 0;
++            name = "string one";
++            check_selected_section(disabledStringSections, index, name);
++        }
++
++        function test_set_selectedIndex_to_select_section_and_trigger_action_enabled() {
++            var index = 1;
++            var name = "second";
++            enabledSections.selectedIndex = index;
++            wait_for_animation(enabledSections);
++            check_selected_section(enabledSections, index, name);
++            var text = "Second action triggered.";
++            compare(label.text, text, "Changing selected index did not trigger action.");
++        }
++
++        function test_set_selectedIndex_to_select_section_and_trigger_action_disabled() {
++            var index = 2;
++            var name = "third";
++            disabledSections.selectedIndex = index;
++            wait_for_animation(disabledSections);
++            check_selected_section(disabledSections, index, name);
++            var text = "Third action triggered.";
++            compare(label.text, text, "Changing selected index for disabled Sections " +
++                    "did not trigger action.");
++        }
++
++        function test_set_selectedIndex_to_select_section_string_enabled() {
++            var index = 1;
++            var name = "string two";
++            enabledStringSections.selectedIndex = index;
++            wait_for_animation(enabledStringSections);
++            check_selected_section(enabledStringSections, index, name);
++        }
++
++        function test_set_selectedIndex_to_select_section_string_disabled() {
++            var index = 2;
++            var name = "string three";
++            disabledStringSections.selectedIndex = index;
++            check_selected_section(disabledStringSections, index, name);
++        }
++    }
++}