Merge lp:~faenil/ubuntu-ui-toolkit/ContactsAdaptive_UIToolkit into lp:ubuntu-ui-toolkit/staging

[Andrea Bernabei]

Changes needed for UI Convergency prototype

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1566
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/2218/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-vivid-amd64-ci/42/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-vivid-armhf-ci/42/console

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-ui-toolkit-ci/2218/rebuild

review: Needs Fixing (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

FAILED: Continuous integration, rev:1566
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/1978/
Executed test runs:
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/706/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/708/console
    FAILURE: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/705/console

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

review: Needs Fixing (continuous-integration)

[Zsombor Egri (zsombi)]

This was a demo MR to convert AddressBook to use AdaptivePageLayout. No need to land.

review: Disapprove

Unmerged revisions

1566. By Andrea Bernabei on 2015-07-10

merge multiColumnView branch

1565. By Andrea Bernabei on 2015-07-09

OrientationHelper: check if a valid inputMethod exists before evaluating its props

1564. By Andrea Bernabei on 2015-07-09

merge

1563. By Andrea Bernabei on 2015-07-07

change default color of IconButtonStyle

1562. By Andrea Bernabei on 2015-07-07

change backgroundText in theme Palette

1561. By Andrea Bernabei on 2015-07-07

add white background to header

1560. By Andrea Bernabei on 2015-07-07

update backgroundText palette value

1559. By Andrea Bernabei on 2015-07-07

PageHeadStyle: take number of actions available into account when computing numberOfSlots

1558. By Andrea Bernabei on 2015-07-06

merge tims branch

1557. By Andrea Bernabei on 2015-07-06

Implement dynamic number of slots in PageHeadStyle

=== modified file 'components.api'
--- components.api	2015-07-10 13:05:26 +0000
+++ components.api	2015-07-10 13:56:40 +0000
@@ -522,6 +522,12 @@
 Ubuntu.Components.Mouse.Priority: Enum
     AfterItem
     BeforeItem
+Ubuntu.Components.MultiColumnView 1.3: PageTreeNode
+    default readonly property QtObject data
+    function var addPageToCurrentColumn(var sourcePage, var page, var properties)
+    function var addPageToNextColumn(var sourcePage, var page, var properties)
+    function var removePages(var page)
+    property var primaryPage
 Ubuntu.Components.ListItems.MultiValue 1.0 0.1: Base
     property var values
 Ubuntu.Components.ListItems.MultiValue 1.3: Base
@@ -606,6 +612,7 @@
     property bool locked
     property string preset
     readonly property PageHeadSections sections
+    property string title
     property bool visible
 Ubuntu.Components.PageHeadSections 1.1: QtObject
     property bool enabled

=== modified file 'examples/ubuntu-ui-toolkit-gallery/ListItemWithLabel.qml'
--- examples/ubuntu-ui-toolkit-gallery/ListItemWithLabel.qml	2015-04-25 08:18:45 +0000
+++ examples/ubuntu-ui-toolkit-gallery/ListItemWithLabel.qml	2015-07-10 13:56:40 +0000
@@ -14,7 +14,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import QtQuick 2.2
+import QtQuick 2.4
 import Ubuntu.Components 1.3
 
 ListItem {

=== modified file 'examples/ubuntu-ui-toolkit-gallery/Popover.qml'
--- examples/ubuntu-ui-toolkit-gallery/Popover.qml	2015-04-29 08:55:31 +0000
+++ examples/ubuntu-ui-toolkit-gallery/Popover.qml	2015-07-10 13:56:40 +0000
@@ -21,17 +21,14 @@
 Template {
     objectName: "popoversTemplate"
 
-    tools: ToolbarItems {
-        ToolbarButton {
-            id: actionsButton
+    head.actions: [
+        Action {
             text: "Actions"
             iconSource: "call_icon.png"
-            onTriggered: PopupUtils.open(actionSelectionPopover, actionsButton)
+            onTriggered: PopupUtils.open(actionSelectionPopover)
             visible: true
         }
-        locked: true
-        opened: true
-    }
+    ]
 
     TemplateSection {
         className: "Popover"

=== modified file 'examples/ubuntu-ui-toolkit-gallery/Sections.qml'
--- examples/ubuntu-ui-toolkit-gallery/Sections.qml	2015-06-17 12:13:40 +0000
+++ examples/ubuntu-ui-toolkit-gallery/Sections.qml	2015-07-10 13:56:40 +0000
@@ -19,7 +19,7 @@
 
 Template {
     objectName: "sectionsTemplate"
-
+    head.sections.model: ["first", "second", "third"]
     TemplateSection {
         title: "Sections"
         className: "Sections"

=== modified file 'examples/ubuntu-ui-toolkit-gallery/Template.qml'
--- examples/ubuntu-ui-toolkit-gallery/Template.qml	2015-04-25 08:18:45 +0000
+++ examples/ubuntu-ui-toolkit-gallery/Template.qml	2015-07-10 13:56:40 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2013 Canonical Ltd.
+ * 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
@@ -14,19 +14,19 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import QtQuick 2.0
+import QtQuick 2.4
 import Ubuntu.Components 1.3
 
-Item {
+Page {
     id: template
 
-    width: units.gu(40)
-    height: units.gu(75)
+    head.backAction: Action {
+        iconName: 'back'
+        onTriggered: columns.removePages(template)
+    }
 
     default property alias content: layout.children
     property alias spacing: layout.spacing
-    property Item tools: null
-    property Flickable flickable: flickable
 
     Flickable {
         id: flickable

=== modified file 'examples/ubuntu-ui-toolkit-gallery/ubuntu-ui-toolkit-gallery.qml'
--- examples/ubuntu-ui-toolkit-gallery/ubuntu-ui-toolkit-gallery.qml	2015-06-23 17:40:21 +0000
+++ examples/ubuntu-ui-toolkit-gallery/ubuntu-ui-toolkit-gallery.qml	2015-07-10 13:56:40 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2013 Canonical Ltd.
+ * 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
@@ -38,107 +38,51 @@
     LayoutMirroring.enabled: Qt.application.layoutDirection == Qt.RightToLeft
     LayoutMirroring.childrenInherit: true
 
-    state: width >= units.gu(80) ? "wide" : "narrow"
-    states: [
-        State {
-            name: "narrow"
-            StateChangeScript {
-                script: {
-                    pageStack.push(mainPage);
-                    if (selectedWidget) {
-                        pageStack.push(contentPage);
-                    }
-                }
-            }
-            PropertyChanges {
-                target: mainPage
-                flickable: widgetList
-            }
-            PropertyChanges {
-                target: contentPage
-                flickable: contentLoader.item ? contentLoader.item.flickable : null
-            }
-        },
-        State {
-            name: "wide"
-            StateChangeScript {
-                script: {
-                    pageStack.clear();
-
-                    /* When pushing Pages into a PageStack they are reparented
-                       to internally created PageWrappers. This undoes it as to
-                       allow us to anchor the Pages freely again.
-                    */
-                    mainPage.parent = gallery;
-                    contentPage.parent = gallery;
-                }
-            }
-            PropertyChanges {
-                target: mainPage
-                width: units.gu(40)
-                clip: true
-            }
-            AnchorChanges {
-                target: mainPage
-                anchors.right: undefined
-            }
-            PropertyChanges {
-                target: contentPage
-                clip: true
-            }
-            AnchorChanges {
-                target: contentPage
-                anchors.left: mainPage.right
-            }
-        }
-    ]
-
-    property var selectedWidget: null
-
-    Page {
-        id: mainPage
-        active: selectedWidget == null
-
-        title: "Ubuntu UI Toolkit"
-        /* Page internally sets the topMargin of its flickable to account for
-           the height of the header. Undo it when unsetting the flickable.
-        */
-        onFlickableChanged: if (!flickable) widgetList.topMargin = 0;
-
-        head.actions: [
-            Action {
-                text: i18n.tr('Use dark theme')
-                iconName: 'torch-on'
-                visible: theme.name == 'Ubuntu.Components.Themes.Ambiance'
-                onTriggered: theme.name = 'Ubuntu.Components.Themes.SuruDark'
-            },
-            Action {
-                text: i18n.tr('Use light theme')
-                iconName: 'torch-off'
-                visible: theme.name == 'Ubuntu.Components.Themes.SuruDark'
-                onTriggered: theme.name = 'Ubuntu.Components.Themes.Ambiance'
-            }
-        ]
-
-        Rectangle {
-            color: Qt.rgba(0.0, 0.0, 0.0, 0.01)
-            anchors.fill: parent
-
-            ListView {
-                id: widgetList
-                objectName: "widgetList"
+    MultiColumnView {
+        id: columns
+        anchors.fill: parent
+        primaryPage: mainPage
+
+        Page {
+            id: mainPage
+            title: "Ubuntu UI Toolkit"
+
+            head.actions: [
+                Action {
+                    text: i18n.tr('Use dark theme')
+                    iconName: 'torch-on'
+                    visible: theme.name == 'Ubuntu.Components.Themes.Ambiance'
+                    onTriggered: theme.name = 'Ubuntu.Components.Themes.SuruDark'
+                },
+                Action {
+                    text: i18n.tr('Use light theme')
+                    iconName: 'torch-off'
+                    visible: theme.name == 'Ubuntu.Components.Themes.SuruDark'
+                    onTriggered: theme.name = 'Ubuntu.Components.Themes.Ambiance'
+                }
+            ]
+
+            Rectangle {
+                color: Qt.rgba(0.0, 0.0, 0.0, 0.01)
                 anchors.fill: parent
-                model: widgetsModel
-                delegate: ListItem.Standard {
-                    text: model.label
-                    objectName: model.objectName
-                    enabled: model.source != ""
-                    progression: true
-                    selected: enabled && selectedWidget == model
-                    onClicked: {
-                        selectedWidget = model;
-                        if (gallery.state == "narrow") {
-                            pageStack.push(contentPage);
+
+                ListView {
+                    id: widgetList
+                    objectName: "widgetList"
+                    anchors.fill: parent
+                    model: widgetsModel
+                    currentIndex: -1
+                    delegate: ListItem.Standard {
+                        text: model.label
+                        objectName: model.objectName
+                        enabled: model.source != ""
+                        progression: true
+                        selected: index === widgetList.currentIndex
+                        onClicked: {
+                            var source = Qt.resolvedUrl(model.source);
+                            var newPage = columns.addPageToNextColumn(mainPage, source);
+                            newPage.title = model.label;
+                            widgetList.currentIndex = index;
                         }
                     }
                 }
@@ -146,30 +90,6 @@
         }
     }
 
-    Page {
-        id: contentPage
-        active: selectedWidget != null
-        title: selectedWidget ? selectedWidget.label : ""
-        /* Page internally sets the topMargin of its flickable to account for
-           the height of the header. Undo it when unsetting the flickable.
-        */
-        onFlickableChanged: if (!flickable && contentLoader.item) contentLoader.item.flickable.topMargin = 0;
-        onActiveChanged: if (gallery.state == "narrow" && !active) {
-                             selectedWidget = null;
-                         }
-
-        Loader {
-            id: contentLoader
-            objectName: "contentLoader"
-            anchors.fill: parent
-            source: selectedWidget ? selectedWidget.source : ""
-        }
-    }
-
-    PageStack {
-        id: pageStack
-    }
-
     WidgetsModel {
         id: widgetsModel
     }

=== modified file 'modules/Ubuntu/Components/1.2/stack.js'
--- modules/Ubuntu/Components/1.2/stack.js	2015-04-30 08:32:44 +0000
+++ modules/Ubuntu/Components/1.2/stack.js	2015-07-10 13:56:40 +0000
@@ -41,4 +41,5 @@
         if (this.size() < 1) return undefined;
         return elements[elements.length-1];
     }
+
 }

=== added file 'modules/Ubuntu/Components/1.3/ColumnMetrics.qml'
--- modules/Ubuntu/Components/1.3/ColumnMetrics.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/1.3/ColumnMetrics.qml	2015-07-10 13:56:40 +0000
@@ -0,0 +1,53 @@
+/*
+ * 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
+
+/*!
+  \qmltype ColumnMetrics
+  \inqmlmodule Ubuntu.Components 1.3
+  \since Ubuntu.Components 1.3
+  \ingroup ubuntu
+  \brief Component configuring the metrics of a column in MultiColumnView.
+  \internal
+
+  */
+QtObject {
+    /*!
+      1-based value identifying the column the metrics to be applied to.
+      */
+    property int column
+
+    /*!
+      Specifies whether the width of the column should fill the available space
+      of the MultiColumnView column or not. Defaults to \a false.
+      */
+    property bool fillWidth: false
+
+    /*!
+      Specifies the minimum width of the column. If the value is greater than
+      \b MultiColumnView::defaultColumnWidth, the value will be set as width for
+      the column.
+      */
+    property real minimumWidth: 0
+
+    /*!
+      Specifies the maximum width of the column. If the value is smaller than
+      \b MultiColumnView::defaultColumnWidth, the value will be set as width for
+      the column. A maximum value of 0 will be ignored.
+      */
+    property real maximumWidth: Number.POSITIVE_INFINITY
+}

=== added file 'modules/Ubuntu/Components/1.3/MultiColumnView.qml'
--- modules/Ubuntu/Components/1.3/MultiColumnView.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/1.3/MultiColumnView.qml	2015-07-10 13:56:40 +0000
@@ -0,0 +1,553 @@
+/*
+ * 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 QtQuick.Layouts 1.1
+import Ubuntu.Components 1.3
+import "stack.js" as Stack
+
+/*!
+  \qmltype MultiColumnView
+  \inqmlmodule Ubuntu.Components 1.3
+  \since Ubuntu.Components 1.3
+  \ingroup ubuntu
+  \brief View with multiple columns of Pages.
+
+  The component provides a flexible way of viewing a stack of pages in one or
+  more columns. Unlike in PageStack, there can be more than one Page active at
+  a time, depending on the number of the columns in the view.
+
+  MultiColumnView stores pages added in a tree. Pages are added relative to a
+  given page, either as sibling (\l addPageToCurrentColumn) or as child
+  (\l addPageToNextColumn). This means that removing a non-leaf page from the Page
+  tree will remove all its children from the page tree.
+
+  The columns are populated from left to right. The column a page is added to is
+  detected based on the source page that is given to the functions adding the page.
+  The pages can be added either to the same column the source page resides or to
+  the column next to the source page. Giving a null value to the source page will
+  add the page to the leftmost column of the view.
+
+  The primary page, the very first page must be specified through the \l primaryPage
+  property. The property cannot be changed after component completion and can hold
+  a Page instance, a Component or a url to a document defining a Page. The page
+  cannot be removed from the view.
+
+  \note Unlike PageStack or Page the component does not fill its parent by default.
+
+  \qml
+  import QtQuick 2.4
+  import Ubuntu.Components 1.3
+
+  MainView {
+      width: units.gu(80)
+      height: units.gu(71)
+
+      MultiColumnView {
+          anchors.fill: parent
+          primaryPage: page1
+          Page {
+              id: page1
+              title: "Main page"
+              Column {
+                  Button {
+                      text: "Add Page2 above " + title
+                      onClicked: page1.pageStack.addPageToCurrentColumn(page1, page2)
+                  }
+                  Button {
+                      text: "Add Page3 next to " + title
+                      onClicked: page1.pageStack.addPageToNextColumn(page1, page3)
+                  }
+              }
+          }
+          Page {
+              id: page2
+              title: "Page #2"
+          }
+          Page {
+              id: page3
+              title: "Page #3"
+          }
+      }
+  }
+  \endqml
+
+  MultiColumnView supports adaptive column handling. When the number of columns changes at
+  runtime the pages are automatically rearranged. To understand it better, let's take the following example:
+  \qml
+  import QtQuick 2.4
+  import Ubuntu.Components 1.3
+
+  MainView {
+      width: units.gu(120)
+      height: units.gu(71)
+
+      MultiColumnView {
+          anchors.fill: parent
+          primaryPage: page1
+          Page {
+              id: page1
+              title: "Main page"
+              Button {
+                  text: "Add Page2 next to " + title
+                  onClicked: page1.pageStack.addPageToNextColumn(page1, page2)
+              }
+          }
+          Page {
+              id: page2
+              title: "Page #2"
+              Button {
+                  text: "Add Page3 next to " + title
+                  onClicked: page2.pageStack.addPageToNextColumn(page2, page3)
+              }
+          }
+          Page {
+              id: page3
+              title: "Page #3"
+          }
+      }
+  }
+  \endqml
+
+  When the code is run on sufficiently wide screen, like a desktop or TV,
+  it will launch with multiple columns.
+
+  \c page1 is set to be the primary page, \c page2 will be added to column next to
+  \c page1 (to column 2) and \c page3 next to \c page2 (column 3). When the window
+  is resized to have its size below 80 GU, the component will switch to 1 column
+  mode, and \c page3 will be placed in the last column, and the header for \c page2
+  will have a back button, indicating that there is a page below it. If the window
+  is resized to contain only one column, all pages will be shown in that column, so
+  the component will act as PageStack. Resizing the window back to 2 columns will place the pages side-by-side.
+
+  \note In the above example if \c page2 is removed, that will remove all its child
+  pages, meaning \c page3 will also be removed.
+
+  \sa PageStack
+*/
+
+PageTreeNode {
+    id: multiColumnView
+
+    Page {
+        // MultiColumnView has its own split headers, so
+        //  disable the application header.
+        id: appHeaderControlPage
+        head {
+            locked: true
+            visible: false
+        }
+        // title is set in attachPage() when the attached Page.column === 0
+    }
+
+    /*!
+      The property holds the first Page which will be added to the view. If the
+      view has more than one column, the page will be added to the leftmost column.
+      The property can hold either a Page instance, a component holding a Page
+      or a QML document defining the Page. The property cannot be changed after
+      component completion.
+      */
+    property var primaryPage
+
+    /*!
+      \qmlmethod Item addPageToCurrentColumn(Item sourcePage, var page[, var properties])
+      Adds a \c page to the column the \c sourcePage resides in. \c page can be a
+      Component or a file. \c properties is a JSON object containing properties
+      to be set when page is created. \c sourcePage must be active. Returns the
+      instance of the page created.
+      */
+    function addPageToCurrentColumn(sourcePage, page, properties) {
+        return d.addPageToColumn(d.columnForPage(sourcePage), sourcePage, page, properties);
+    }
+
+    /*!
+      \qmlmethod Item addPageToNextColumn(Item sourcePage, var page[, var properties])
+      Same as \l addPageToCurrentColumn except that the \c page is added to the column
+      next to the one the \c sourcePage resides. If \c sourcePage is null, the new
+      page will be added to the leftmost column. If \c sourcePage is located in the
+      rightmost column, the new page will be pushed to the same column as \c sourcePage.
+      */
+    function addPageToNextColumn(sourcePage, page, properties) {
+        return d.addPageToColumn(d.columnForPage(sourcePage) + 1, sourcePage, page, properties);
+    }
+
+    /*!
+      \qmlmethod void removePages(Item page)
+      The function removes and deletes all pages up to and including \c page
+      is reached. If the \a page is the same as the \l primaryPage, only its child
+      pages will be removed.
+      */
+    function removePages(page) {
+        // remove nodes which have page as ascendant
+        var node = d.stack.top();
+        while (node && node.childOf(page)) {
+            d.popAndSetPageForColumn(node);
+            node = d.stack.top();
+        }
+        while (node && node.object == page && node != d.stack.first()) {
+            d.popAndSetPageForColumn(node);
+            node = d.stack.top();
+        }
+    }
+
+    /*
+      internals
+      */
+
+    Component.onCompleted: {
+        d.relayout();
+        d.completed = true;
+        if (primaryPage) {
+            var wrapper = d.createWrapper(primaryPage);
+            d.addWrappedPage(wrapper);
+        } else {
+            console.warn("No primary page set. No pages can be added without a primary page.");
+        }
+    }
+    onPrimaryPageChanged: {
+        if (d.completed) {
+            console.warn("Cannot change primaryPage after completion.");
+            return;
+        }
+    }
+
+    QtObject {
+        id: d
+
+        property bool completed: false
+        property var stack: new Stack.Stack()
+
+        property int columns: multiColumnView.width >= units.gu(80) ? 2 : 1
+        /*! internal */
+        onColumnsChanged: {
+            if (columns <= 0) {
+                console.warn("There must be a minimum of one column set.");
+                columns = 1;
+            }
+            d.relayout();
+        }
+        property real defaultColumnWidth: units.gu(40)
+        onDefaultColumnWidthChanged: body.applyMetrics()
+        property list<ColumnMetrics> columnMetrics
+
+        function createWrapper(page, properties) {
+            var wrapperComponent = Qt.createComponent("PageWrapper.qml");
+            var wrapperObject = wrapperComponent.createObject(hiddenPages);
+            wrapperObject.pageStack = multiColumnView;
+            wrapperObject.properties = properties;
+            // set reference last because it will trigger creation of the object
+            //  with specified properties.
+            wrapperObject.reference = page;
+            return wrapperObject;
+        }
+
+        function addWrappedPage(pageWrapper) {
+            stack.push(pageWrapper);
+            pageWrapper.parentWrapper = stack.find(pageWrapper.parentPage);
+            var targetColumn = MathUtils.clamp(pageWrapper.column, 0, d.columns - 1);
+            // replace page holder's child
+            var holder = body.children[targetColumn];
+            holder.detachCurrentPage();
+            holder.attachPage(pageWrapper)
+        }
+
+        function columnForPage(page) {
+            var wrapper = stack.find(page);
+            return wrapper ? wrapper.column : 0;
+        }
+
+        function addPageToColumn(column, sourcePage, page, properties) {
+            if (column < 0) {
+                console.warn("Column must be >= 0.");
+                return;
+            }
+            if (!sourcePage) {
+                console.warn("No sourcePage specified. Page will not be added.");
+                return;
+            }
+            if (!d.stack.find(sourcePage)) {
+                console.warn("sourcePage must be added to the view to add new page.");
+                return;
+            }
+
+            var wrapper = d.createWrapper(page, properties);
+            wrapper.parentPage = sourcePage;
+            wrapper.column = column;
+            d.addWrappedPage(wrapper);
+            return wrapper.object;
+        }
+
+        // node is a triplet of {page, column, parentPage}
+        function popAndSetPageForColumn(node) {
+            stack.pop();
+            var effectiveColumn = MathUtils.clamp(node.column, 0, d.columns - 1);
+            var columnHolder = body.children[effectiveColumn];
+            // is the page in a column?
+            if (node == columnHolder.pageWrapper) {
+                // detach page from column
+                columnHolder.detachCurrentPage();
+            }
+            node.parent = null;
+            var prevPage = stack.topForColumn(effectiveColumn, effectiveColumn < d.columns - 1);
+            if (prevPage) {
+                columnHolder.attachPage(prevPage);
+            }
+            if (node.canDestroy) {
+                node.destroyObject();
+            }
+        }
+
+        // relayouts when column count changes
+        function relayout() {
+            if (body.children.length == d.columns) return;
+            if (body.children.length > d.columns) {
+                // need to remove few columns, the last ones
+                while (body.children.length > d.columns) {
+                    var holder = body.children[body.children.length - 1];
+                    holder.detachCurrentPage();
+                    holder.parent = null;
+                    holder.destroy();
+                }
+            } else {
+                var prevColumns = body.children.length;
+
+                // add columns
+                for (var i = 0; i < d.columns - prevColumns; i++) {
+                    pageHolderComponent.createObject(body);
+                }
+            }
+            rearrangePages();
+        }
+
+        function rearrangePages() {
+            for (var column = d.columns - 1; column >= 0; column--) {
+                var holder = body.children[column];
+                var pageWrapper = stack.topForColumn(column, column < (d.columns - 1));
+                if (!pageWrapper) {
+                    continue;
+                }
+                if (!pageWrapper.parent) {
+                    // this should never happen, so if it does, we have a bug!
+                    console.error("Found a page which wasn't parented anywhere!", pageWrapper.object.title);
+                    continue;
+                }
+                // detach current page from holder if differs
+                if (holder.pageWrapper != pageWrapper) {
+                    holder.detachCurrentPage();
+                }
+                if (pageWrapper.parent == hiddenPages) {
+                    // add the page to the column
+                    holder.attachPage(pageWrapper);
+                } else if (pageWrapper.pageHolder != holder) {
+                    // detach the pageWrapper from its holder
+                    if (pageWrapper.pageHolder) {
+                        pageWrapper.pageHolder.detachCurrentPage();
+                    }
+                    // then attach to this holder
+                    holder.attachPage(pageWrapper);
+                }
+            }
+        }
+    }
+
+    // default metrics
+    Component {
+        id: defaultMetrics
+        ColumnMetrics {
+            fillWidth: column == d.columns
+            minimumWidth: d.defaultColumnWidth
+        }
+    }
+
+    // Page holder component, can have only one Page as child at a time, all stacked pages
+    // will be parented into hiddenPages
+    Component {
+        id: pageHolderComponent
+        // Page uses the height of the parentNode for its height, so make
+        //  the holder a PageTreeNode that determines the Page height.
+        PageTreeNode {
+            id: holder
+            active: false
+            objectName: "ColumnHolder" + column
+            property PageWrapper pageWrapper
+            property int column
+            property alias config: subHeader.config
+            property ColumnMetrics metrics: setDefaultMetrics()
+
+            Layout.fillWidth: metrics.fillWidth
+            Layout.fillHeight: true
+            Layout.preferredWidth: metrics.maximumWidth > 0 ?
+                                       MathUtils.clamp(d.defaultColumnWidth, metrics.minimumWidth, metrics.maximumWidth) :
+                                       d.defaultColumnWidth
+            Layout.minimumWidth: metrics.minimumWidth
+            Layout.maximumWidth: metrics.maximumWidth
+
+            // prevent the pages from taking the app header height into account.
+            __propagated: null
+            Item {
+                id: holderBody
+                objectName: parent.objectName + "Body"
+                anchors {                    
+                    top: subHeader.bottom
+                    bottom: parent.bottom
+                    left: parent.left
+                    right: parent.right
+                    rightMargin: verticalDivider.width
+                }
+                // we need to clip because the header does not have a background
+                clip: true
+            }
+
+            property alias head: subHeader
+            StyledItem {
+                id: subHeader
+                anchors {
+                    left: parent.left
+                    top: parent.top
+                    right: parent.right
+                }
+                height: body.headerHeight
+
+                styleName: config ? "PageHeadStyle" : ""
+                theme.version: Ubuntu.toolkitVersion
+                objectName: "Header" + column
+
+                property real preferredHeight: subHeader.__styleInstance ?
+                                                   subHeader.__styleInstance.implicitHeight :
+                                                   0
+                onPreferredHeightChanged: {
+                    body.updateHeaderHeight(preferredHeight);
+                }
+
+                property PageHeadConfiguration config: null
+                property Item contents: null
+
+                property color dividerColor: multiColumnView.__propagated.header.dividerColor
+                property color panelColor: multiColumnView.__propagated.header.panelColor
+
+                visible: holder.pageWrapper && holder.pageWrapper.active
+            }
+
+            Rectangle {
+                id: verticalDivider
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                    right: parent.right
+                }
+                width: (column == (d.columns - 1)) || !pageWrapper ? 0 : units.dp(1)
+                color: subHeader.dividerColor
+            }
+
+            function attachPage(page) {
+                pageWrapper = page;
+                pageWrapper.parent = holderBody;
+                pageWrapper.pageHolder = holder;
+                pageWrapper.active = true;
+
+                if (pageWrapper.object.hasOwnProperty("head")) {
+                    subHeader.config = pageWrapper.object.head;
+                }
+                if (pageWrapper.column === 0 && pageWrapper.object.hasOwnProperty("title")) {
+                    // set the application title
+                    appHeaderControlPage.title = pageWrapper.object.title;
+                }
+            }
+            function detachCurrentPage() {
+                if (!pageWrapper) return undefined;
+                var wrapper = pageWrapper;
+                // remove header
+                wrapper.active = false;
+                subHeader.config = null;
+                pageWrapper = null;
+                wrapper.parent = hiddenPages;
+                wrapper.pageHolder = null;
+                return wrapper;
+            }
+
+            function setDefaultMetrics() {
+                var result = defaultMetrics.createObject(holder);
+                result.column = Qt.binding(function() { return holder.column + 1; });
+                return result;
+            }
+        }
+    }
+
+    /*! \internal */
+    // Pages declared as children will be placed directly into hiddenPages
+    default property alias data: hiddenPages.data
+    Item {
+        id: hiddenPages
+        objectName: "HiddenPagePool"
+        visible: false
+        // make sure nothing is shown eventually
+        clip: true
+    }
+
+    // Holds the columns holding the pages visible. Each column has only one page
+    // as child, the invisible stacked ones are all stored in the hiddenPages
+    // component. The stack keeps the column index onto which those should be moved
+    // once they become visible.
+    RowLayout {
+        id: body
+        objectName: "body"
+        anchors.fill: parent
+        spacing: 0
+
+        property real headerHeight: 0
+
+        function updateHeaderHeight(newHeight) {
+            if (newHeight > body.headerHeight) {
+                body.headerHeight = newHeight;
+            } else {
+                var h = 0;
+                var subHeight = 0;
+                for (var i = 0; i < children.length; i++) {
+                    subHeight = children[i].head.preferredHeight;
+                    if (subHeight > h) h = subHeight;
+                }
+                body.headerHeight = h;
+            }
+        }
+
+        onChildrenChanged: {
+            // all children should have Layout.fillWidth false, except the last one
+            for (var i = 0; i < children.length; i++) {
+                children[i].column = i;
+            }
+            applyMetrics();
+        }
+
+        function applyMetrics() {
+            for (var i = 0; i < children.length; i++) {
+                var holder = children[i];
+                // search for the column metrics
+                var metrics = null;
+                for (var j = 0; j < d.columnMetrics.length; j++) {
+                    if (d.columnMetrics[j].column == (i + 1)) {
+                        metrics = d.columnMetrics[j];
+                        break;
+                    }
+                }
+                if (!metrics) {
+                    metrics = holder.setDefaultMetrics();
+                }
+                holder.metrics = metrics;
+                updateHeaderHeight(0);
+            }
+        }
+    }
+}

=== modified file 'modules/Ubuntu/Components/1.3/OrientationHelper.qml'
--- modules/Ubuntu/Components/1.3/OrientationHelper.qml	2015-07-02 17:39:03 +0000
+++ modules/Ubuntu/Components/1.3/OrientationHelper.qml	2015-07-10 13:56:40 +0000
@@ -117,7 +117,7 @@
                 return 0;
 
             var availableHeight = orientationHelper.parent.height;
-            if (d.stateAngle === 0 && UbuntuApplication.inputMethod.visible && anchorToKeyboard)
+            if (d.stateAngle === 0 && UbuntuApplication.inputMethod && UbuntuApplication.inputMethod.visible && anchorToKeyboard)
                 availableHeight -= UbuntuApplication.inputMethod.keyboardRectangle.height;
             return availableHeight;
         }

=== modified file 'modules/Ubuntu/Components/1.3/Page.qml'
--- modules/Ubuntu/Components/1.3/Page.qml	2015-07-02 20:40:01 +0000
+++ modules/Ubuntu/Components/1.3/Page.qml	2015-07-10 13:56:40 +0000
@@ -43,6 +43,7 @@
     readonly property alias head: headerConfig
     Toolkit13.PageHeadConfiguration {
         id: headerConfig
+        title: page.title
     }
 
     Toolkit13.Object {

=== modified file 'modules/Ubuntu/Components/1.3/PageHeadConfiguration.qml'
--- modules/Ubuntu/Components/1.3/PageHeadConfiguration.qml	2015-04-30 08:32:44 +0000
+++ modules/Ubuntu/Components/1.3/PageHeadConfiguration.qml	2015-07-10 13:56:40 +0000
@@ -56,4 +56,6 @@
 
     // auto-updated by AppHeader, but may be set by the developer
     property bool visible
+
+    property string title
 }

=== modified file 'modules/Ubuntu/Components/1.3/PageWrapper.qml'
--- modules/Ubuntu/Components/1.3/PageWrapper.qml	2015-05-05 16:23:29 +0000
+++ modules/Ubuntu/Components/1.3/PageWrapper.qml	2015-07-10 13:56:40 +0000
@@ -46,6 +46,43 @@
     property bool canDestroy: false
 
     /*!
+      Column number in MultiColumnView.
+      */
+    property int column: 0
+
+    /*!
+      Parent page.
+      */
+    property Item parentPage
+
+    /*!
+      Parent PageWrapper or the parentPage.
+      */
+    property Item parentWrapper
+
+    /*!
+      Page holder in MultiColumnView
+      */
+    property Item pageHolder
+
+    /*!
+      Returns true if the current PageWrapper is a child of the given page
+      */
+    function childOf(page) {
+        if (parentPage == page) return true;
+        if (page && parentWrapper) {
+            var wrapper = parentWrapper;
+            while (wrapper) {
+                if (wrapper.object == page) {
+                    return true;
+                }
+                wrapper = wrapper.parentWrapper;
+            }
+        }
+        return false;
+    }
+
+    /*!
       This value is updated when a PageWrapper is pushed to/popped from a PageStack.
      */
     active: false

=== added file 'modules/Ubuntu/Components/1.3/stack.js'
--- modules/Ubuntu/Components/1.3/stack.js	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/1.3/stack.js	2015-07-10 13:56:40 +0000
@@ -0,0 +1,75 @@
+/*
+ * 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/>.
+ */
+
+.pragma library
+// By defining Stack as a function, we can make its variables private,
+// and force calls to Stack to make use of the functions we define.
+function Stack() {
+    var elements;
+    this.clear = function() {
+        elements = [];
+    }
+
+    this.clear();
+
+    this.push = function(element) {
+        elements.push(element);
+    };
+
+    this.pop = function() {
+        elements.pop();
+    };
+
+    this.size = function() {
+        return elements.length;
+    }
+
+    this.first = function() {
+        return this.size() > 0 ? elements[0] : null;
+    }
+
+    this.top = function() {
+        if (this.size() < 1) return undefined;
+        return elements[elements.length-1];
+    }
+
+    // returns the topmost element for the column, using exact column match
+    // in case the column to be extracted is less than the columns available
+    this.topForColumn = function(column, exactMatch) {
+        if (exactMatch == undefined) {
+            exactMatch = false;
+        }
+
+        for (var i = elements.length - 1; i >= 0; i--) {
+            var node = elements[i];
+            if ((exactMatch && elements[i].column == column) || (!exactMatch && elements[i].column >= column)) {
+                return elements[i];
+            }
+        }
+        return undefined;
+    }
+
+    // returns the node the Page is stored; undefined if not found
+    this.find = function(page) {
+        if (!page) return null;
+        for (var i = elements.length - 1; i >= 0; i--) {
+            if (elements[i].object == page) {
+                return elements[i];
+            }
+        }
+        return null;
+    }
+}

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/1.3/IconButtonStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.3/IconButtonStyle.qml	2015-05-26 10:54:14 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.3/IconButtonStyle.qml	2015-07-10 13:56:40 +0000
@@ -26,7 +26,7 @@
     /*!
       The color of the icons.
      */
-    property color foregroundColor: "#808080"
+    property color foregroundColor: "#333333"
 
     /*!
       The background color of the button.

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/1.3/PageHeadStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.3/PageHeadStyle.qml	2015-06-23 13:22:10 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.3/PageHeadStyle.qml	2015-07-10 13:56:40 +0000
@@ -27,15 +27,22 @@
     textLeftMargin: units.gu(2)
     maximumNumberOfActions: 3
 
+    PageHeadConfiguration {
+        id: defaultConfig
+    }
+
+    property PageHeadConfiguration config: styledItem.config ?
+                                               styledItem.config :
+                                               defaultConfig
     /*!
       The color of the buttons in the header.
      */
-    property color buttonColor: styledItem.config.foregroundColor
+    property color buttonColor: headerStyle.config.foregroundColor
 
     /*!
       The color of the title text.
      */
-    property color titleColor: styledItem.config.foregroundColor
+    property color titleColor: headerStyle.config.foregroundColor
 
     // FIXME: When the three panel color properties below are removed,
     //  update unity8/Dash/PageHeader to use the new theming (currently
@@ -84,6 +91,12 @@
     //  have a separator.
     property alias __separator_visible: divider.visible
 
+    //Default background for the header is white according to latest visuals
+    Rectangle {
+        anchors.fill: parent
+        color: "white"
+    }
+
     Rectangle {
         id: divider
         anchors {
@@ -100,16 +113,23 @@
         objectName: "headerSectionsItem"
         anchors {
             left: parent.left
-            leftMargin: units.gu(2)
+            right: parent.right
+            //leftMargin: units.gu(2)
             bottom: divider.top
         }
+        visible: model && model.length > 0
         enabled: sections.enabled
-        height: model && model.length > 0 ? implicitHeight : 0
-
-        property PageHeadSections sections: styledItem.config.sections
-        model: sections.model
-
-        onSelectedIndexChanged: sections.selectedIndex = sectionsItem.selectedIndex
+        height: visible ? implicitHeight : 0
+
+        property PageHeadSections sections: headerStyle.config.sections
+        model: sections ? sections.model : null
+
+        onSelectedIndexChanged: {
+            if (sections) {
+                sections.selectedIndex = sectionsItem.selectedIndex;
+            }
+        }
+
         Connections {
             target: sectionsItem.sections
             onSelectedIndexChanged: sectionsItem.selectedIndex = sectionsItem.sections.selectedIndex
@@ -244,10 +264,10 @@
             PageHeadButton {
                 id: customBackButton
                 objectName: "customBackButton"
-                action: styledItem.config.backAction
-                visible: null !== styledItem.config.backAction &&
-                         styledItem.config.backAction.visible
-                color: styledItem.config.foregroundColor
+                action: headerStyle.config.backAction
+                visible: null !== headerStyle.config.backAction &&
+                         headerStyle.config.backAction.visible
+                color: headerStyle.config.foregroundColor
             }
 
             PageHeadButton {
@@ -258,10 +278,10 @@
                 visible: styledItem.pageStack !== null &&
                          styledItem.pageStack !== undefined &&
                          styledItem.pageStack.depth > 1 &&
-                         !styledItem.config.backAction
+                         !headerStyle.config.backAction
 
                 text: "back"
-                color: styledItem.config.foregroundColor
+                color: headerStyle.config.foregroundColor
 
                 onTriggered: {
                     styledItem.pageStack.pop();
@@ -327,13 +347,13 @@
             Label {
                 objectName: "header_title_label"
                 LayoutMirroring.enabled: Qt.application.layoutDirection == Qt.RightToLeft
-                visible: !contentsContainer.visible && styledItem.config.preset === ""
+                visible: !contentsContainer.visible && headerStyle.config.preset === ""
                 anchors {
                     left: parent.left
                     right: parent.right
                     verticalCenter: parent.verticalCenter
                 }
-                text: styledItem.title
+                text: headerStyle.config.title
                 font.weight: headerStyle.fontWeight
                 fontSize: headerStyle.fontSize
                 color: headerStyle.titleColor
@@ -346,7 +366,7 @@
                 // when the bindings below is no longer active
                 id: contentsContainer
                 anchors.fill: parent
-                visible: styledItem.contents || styledItem.config.contents
+                visible: styledItem.contents || headerStyle.config.contents
             }
             Binding {
                 target: styledItem.contents
@@ -361,16 +381,23 @@
                 when: styledItem.contents
             }
             Binding {
-                target: styledItem.config.contents
+                target: headerStyle.config.contents
                 property: "parent"
                 value: contentsContainer
-                when: styledItem.config.contents && !styledItem.contents
+                when: headerStyle.config.contents && !styledItem.contents
             }
         }
 
         ActionBar {
             id: actionsContainer
             objectName: "headerActionBar"
+
+            //currently hardcoded maximum number of actions we want to show in the header
+            property int maxActions: 6
+
+            //UX: we reserver max 30% of the header width for actions
+            property real headerPortionDedicatedToActions: 0.3
+
             anchors {
                 top: parent.top
                 right: rightAnchor.left
@@ -378,8 +405,10 @@
             }
             height: headerStyle.contentHeight
 
-            actions: styledItem.config.actions
-            numberOfSlots: 3
+            actions: headerStyle.config.actions
+
+            //FIXME: currently hardcoded icon width!
+            numberOfSlots: Math.min(Math.min(Math.floor(headerStyle.width * headerPortionDedicatedToActions / units.gu(4)), actions.length), maxActions)
         }
     }
 }

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/1.3/Palette.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.3/Palette.qml	2015-04-27 07:19:22 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.3/Palette.qml	2015-07-10 13:56:40 +0000
@@ -33,7 +33,7 @@
     }
     selected {
         background: Qt.rgba(0, 0, 0, 0.05)
-        backgroundText: UbuntuColors.darkGrey
+        backgroundText: "#333333"//"#5D5D5D"//UbuntuColors.darkGrey
         selection: selected.foreground
         foreground: Qt.rgba(UbuntuColors.blue.r, UbuntuColors.blue.g, UbuntuColors.blue.b, 0.2)
         foregroundText: UbuntuColors.darkGrey

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/1.3/SectionsStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/1.3/SectionsStyle.qml	2015-06-16 23:18:45 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/1.3/SectionsStyle.qml	2015-07-10 13:56:40 +0000
@@ -1,3 +1,20 @@
+/* !!!!!!!!!! THIS IS A WIP SECTION HEADER !!!!!!!!!!!!!!!
+
+ * 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/>.
+ */
+
 /*
  * Copyright 2015 Canonical Ltd.
  *
@@ -15,20 +32,33 @@
  */
 import QtQuick 2.4
 import Ubuntu.Components 1.3
+import QtGraphicalEffects 1.0
 
 Item {
     id: sectionsStyle
 
-    implicitWidth: sectionsRow.width
+    //VISUAL CHANGES:
+    //- sectionColor
+    //- added underlineColor
+    //- fontsize to medium
+    //- font weight to Light
+
+    implicitWidth: units.gu(50) //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
+    //FIXME: hardcoded color
+    property color sectionColor: "#888888"//theme.palette.selected.backgroundText
+
+    /*!
+      The foreground color of underline rectangle of unselected sections.
+     */
+    //FIXME: hardcoded color
+    property color underlineColor: Qt.rgba(0,0,0,0.2)//theme.palette.selected.backgroundText
 
     /*!
       The foreground color of the selected section.
@@ -43,7 +73,7 @@
     /*!
       The font size for the text in the buttons.
      */
-    property string fontSize: "small"
+    property string fontSize: "medium"
 
     /*!
       The spacing on the left and right sides of the label
@@ -56,30 +86,174 @@
      */
     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
+    property real __listViewMargin: units.gu(3)
+    property bool __hoveringLeft: false
+    property bool __hoveringRight: false
+
+    onStateChanged: console.log(state)
+
+    clip: true
+
+    //This item is needed for the OpacityMask feature. It is needed to make sure that when we
+    //bring a list element into view, that element won't be covered by the opacity mask. So we
+    //disable clipping on the list but we give it margins. This way when an item is repositioned
+    //to be within the listview, that item will not be positioned under the opacity mask. (which is
+    //what would have happened if the listview were filling the parent)
+    Item {
+        id: listviewcontainer
+        anchors.fill: parent
+
+        //We need this because OpacityMask will draw this listview for us, but at the
+        //same time we still want to get the input events!
+        opacity: 0
+
+        ListView {
+            id: sectionsListView
+            objectName: "section_listview"
+
+            property bool animateContentX: false
+
+            //this is just to disable keyboard navigation to avoid messing with contentX/contentWidth while
+            //the view is moving
+            focus: !moving
+
+            SmoothedAnimation {
+                id: contentXAnim
+                target: sectionsListView
+                property: "contentX"
+                duration: UbuntuAnimation.FastDuration
+                velocity: units.gu(10)
+                //alwaysRunToEnd: true
+            }
+
+            function ensureItemIsInTheMiddle(currentItem) {
+                if (currentItem !== null) {
+                    //stop the flick before doing computations
+                    if (moving) {
+                        return
+                    }
+                    if (dragging || flicking) {
+                        cancelFlick()
+                    }
+
+                    console.log("CONTENTX", contentX)
+                    if (contentXAnim.running) { contentXAnim.stop() }
+                    console.log("CONTENTXAFTER", contentX)
+
+                    var pos =  currentItem.mapToItem(sectionsListView.contentItem, 0, 0)
+
+                    //In the case where we're moving to an item which is outside of the screen (this
+                    //happens when using Keyboard navigation after scrolling the view), we
+                    //try working around the fact that contentWidth/X keeps changing
+                    //by using listview's functions (WHICH DON'T HAVE ANIMATIONS though) just to position the
+                    //view more or less at the right place. After that, we'll fake an animation from one side to the middle of the
+                    //screen.
+                    /*if (pos.x + pos.width <= sectionsListView.x) {
+                        positionViewAtIndex(currentIndex, ListView.Beginning)
+                        //refresh the mapping as we've moved the view
+                        pos = currentItem.mapToItem(sectionsListView, 0, 0)
+
+                    } else if (pos.x >= sectionsListView.x + sectionsListView.width) {
+                        positionViewAtIndex(currentIndex, ListView.End)
+                        //refresh the mapping as we've moved the view
+                        pos = currentItem.mapToItem(sectionsListView, 0, 0)
+                    }*/
+
+                    var newContentX = pos.x - sectionsListView.width/2 + currentItem.width/2
+                    contentXAnim.from = contentX
+                    //make sure we don't overshoot bounds
+                    contentXAnim.to =  Math.max(originX, Math.min(newContentX, originX + contentWidth - width))
+                    contentXAnim.start()
+
+                    console.log("OUR VALUES", contentX, originX, contentWidth, contentXAnim.to)
+                    //FIXME: due to listview internal implementation and the fact that delegates don't have a fixed size,
+                    //this breaks in some cases, due to originX changing *after* we start the
+                    //animation. In those cases the current item doesn't align to the horizontal center because we compute
+                    //contentXAnim.to based on an originX which is then changed by the internals after we have already
+                    //started the animation. We could fixup the position at the end of the animation,
+                    //but that would just be a workaround.
+                }
+            }
+
+            onContentXChanged: console.log(contentX, originX, contentWidth)
+
+            anchors.fill: parent
+            anchors.leftMargin: __listViewMargin
+            anchors.rightMargin: __listViewMargin
+
+            //FIXME: this means when we resize the window it will refocus on the current item even if it's outside of the view!
+            //NOTE: removing this also breaks the alignment when the sections are initialized, because of contentX/contentWidth changing
+            onWidthChanged: ensureItemIsInTheMiddle(currentItem)
+
+            orientation: ListView.Horizontal
+
+            //We want to block dragging but at the same time we want the keyboard to work!!!
+            //interactive: contentWidth > width
+            boundsBehavior: Flickable.StopAtBounds
+
             model: styledItem.model
-            objectName: "sections_repeater"
-            AbstractButton {
+
+            //We need this to make sure that we have delegates for the whole width, since we have
+            //clip disabled. Read more
+            displayMarginBeginning: __listViewMargin
+            displayMarginEnd: __listViewMargin
+
+            //make sure that the currentItem is in the middle when everything is initialized
+            Component.onCompleted: ensureItemIsInTheMiddle(currentItem)
+
+            //FIXME: keyboard navigation offered by ListView will break this, won't it?
+            currentIndex: styledItem.selectedIndex
+            onCurrentIndexChanged: {
+                styledItem.selectedIndex = currentIndex
+            }
+            onCurrentItemChanged: {
+                //adjust contentX so that the item is kept in the middle
+                //don't use ListView.ApplyRange because that does an awkward animation when you select an item
+                //*while* the current item is outside of screen
+                ensureItemIsInTheMiddle(currentItem)
+            }
+
+            //highlightMoveDuration: UbuntuAnimation.BriskDuration
+            //highlightResizeDuration: UbuntuAnimation.BriskDuration
+
+            highlightFollowsCurrentItem: false
+            //DON'T use ApplyRange, because it will cause a weird animation when you select an item which is on screen
+            //with the previously selected item being out of screen
+            //highlightRangeMode: ListView.ApplyRange
+            //preferredHighlightEnd: width/2 + currentItem.width/2
+            //preferredHighlightBegin: width/2 - currentItem.width/2
+
+            //highlightFollowsCurrentItem will resize the highlight element to fill the delegate,
+            //so we need an Item in the middle to set a height for the highlight rectangle different
+            //from the delegate size
+            highlight: Item {
+                //show the highlight on top of the delegate
+                z: 2
+
+                x: sectionsListView.currentItem ? sectionsListView.currentItem.x : -width
+                width: sectionsListView.currentItem ? sectionsListView.currentItem.width : 0
+                height: sectionsListView.currentItem ? sectionsListView.currentItem.height : 0
+
+                Rectangle {
+                    anchors {
+                        bottom: parent.bottom
+                        left: parent.left
+                        right: parent.right
+                    }
+                    height: sectionsStyle.underlineHeight
+                    color: sectionsStyle.selectedSectionColor
+                }
+
+                Behavior on x { UbuntuNumberAnimation {} }
+            }
+
+            delegate: 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
+                height: sectionsStyle.height
                 property bool selected: index === styledItem.selectedIndex
-                onClicked: styledItem.selectedIndex = index
+                onClicked: { styledItem.selectedIndex = index; sectionsListView.forceActiveFocus() }
 
                 // Background pressed highlight
                 Rectangle {
@@ -95,10 +269,14 @@
                     // modelData may be either a string, or an Action
                     text: modelData.hasOwnProperty("text") ? modelData.text : modelData
                     fontSize: sectionsStyle.fontSize
+                    font.weight: Font.Light
                     anchors.centerIn: parent
                     color: sectionButton.selected ?
                                sectionsStyle.selectedSectionColor :
                                sectionsStyle.sectionColor
+
+                    //FIXME: color animation? is that ok to design? what's the duration?
+                    Behavior on color { ColorAnimation { duration: 500 } }
                 }
 
                 // Section title underline
@@ -109,11 +287,167 @@
                         right: parent.right
                     }
                     height: sectionsStyle.underlineHeight
-                    color: sectionButton.selected ?
-                               sectionsStyle.selectedSectionColor :
-                               sectionsStyle.sectionColor
+                    color: sectionsStyle.underlineColor
                 }
             }
-        }
-    }
+
+            //Behavior on contentX { SmoothedAnimation { duration: UbuntuAnimation.FastDuration; velocity: units.gu(10)} }
+
+        }
+    }
+
+    MouseArea {
+        id: hoveringArea
+
+        function checkHovering(mouse) {
+            if (mouse.x < __listViewMargin) {
+                if (!__hoveringLeft) __hoveringLeft = true
+            } else if (mouse.x > width - __listViewMargin ) {
+                if (!__hoveringRight) __hoveringRight = true
+            } else {
+                __hoveringLeft = false
+                __hoveringRight = false
+            }
+        }
+
+        onContainsMouseChanged: console.log(containsMouse)
+        anchors.fill: parent
+        hoverEnabled: true
+
+        onPositionChanged: checkHovering(mouse)
+        onExited: {
+            __hoveringLeft = false
+            __hoveringRight = false
+        }
+        onPressed: if (!__hoveringLeft && !__hoveringRight) {
+                       mouse.accepted = false
+                   }
+        onClicked: {
+            //scroll the list to bring the element which is under the cursor into the view
+            //var item = sectionsListView.itemAt(mouse.x + sectionsListView.contentX - __listViewMargin, mouse.y)
+            //if (item !== null) {
+            //We could use positionViewAtIndex(...) here but it wouldn't provide animation
+
+            if (contentXAnim.running) contentXAnim.stop()
+
+            //Scroll one item at a time with animation
+            //sectionsListView.contentX = __hoveringLeft ? item.mapToItem(sectionsListView.contentItem, 0,0).x : item.mapToItem(sectionsListView.contentItem, 0,0).x - sectionsListView.width + item.width
+            var newContentX = sectionsListView.contentX + (sectionsListView.width * (__hoveringLeft ? -1 : 1))
+
+            contentXAnim.from = sectionsListView.contentX
+            //make sure we don't overshoot bounds
+            contentXAnim.to = Math.max(sectionsListView.originX, Math.min(newContentX, sectionsListView.originX + sectionsListView.contentWidth - sectionsListView.width))
+
+            contentXAnim.start()
+
+            //}
+        }
+
+        property real iconsDisabledOpacity: 0.3
+
+        Icon {
+            id: leftHoveringIcon
+            anchors.left: parent.left
+            anchors.leftMargin: units.gu(1)
+            anchors.verticalCenter: parent.verticalCenter
+            width: units.gu(1)
+            height: units.gu(1)
+            rotation: 180
+            opacity: sectionsListView.atXBeginning ? hoveringArea.iconsDisabledOpacity : 1.0
+            name: "chevron"
+        }
+
+        Icon {
+            id: rightHoveringIcon
+            anchors.right: parent.right
+            anchors.rightMargin: units.gu(1)
+            anchors.verticalCenter: parent.verticalCenter
+            width: units.gu(1)
+            height: units.gu(1)
+            opacity: sectionsListView.atXEnd ? hoveringArea.iconsDisabledOpacity : 1.0
+            name: "chevron"
+        }
+    }
+
+    Rectangle {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        height: units.dp(1)
+        color: sectionsStyle.underlineColor
+    }
+
+    LinearGradient {
+        id: gradient
+
+        visible: false
+        anchors.fill: parent
+        start: Qt.point(0,0)
+        end: Qt.point(width,0)
+
+        property real __gradientWidth: units.gu(3) / gradient.width
+        //the width is __gradientWidth, but we want the gradient to actually start/finish at __gradientSplitPosition
+        //just to leave some margin.
+        property real __gradientSplitPosition: 3/4 * __gradientWidth
+
+        gradient: Gradient {
+            //left gradient
+            GradientStop { position: 0.0 ; color: Qt.rgba(1,1,1,0) }
+            GradientStop { position: gradient.__gradientSplitPosition ; color: Qt.rgba(1,1,1,0) }
+            GradientStop { position: gradient.__gradientWidth; color: Qt.rgba(1,1,1,1) }
+            //right gradient
+            GradientStop { position: 1.0 - gradient.__gradientWidth; color: Qt.rgba(1,1,1,1) }
+            GradientStop { position: 1.0 - gradient.__gradientSplitPosition; color: Qt.rgba(1,1,1,0) }
+            GradientStop { position: 1.0; color: Qt.rgba(1,1,1,0) }
+        }
+
+    }
+
+    OpacityMask {
+        id: mask
+        anchors.fill: parent
+
+        source: listviewcontainer
+        maskSource: gradient
+    }
+
+
+    //Since we only show one arrow at a time, let's reuse the same item and handle the property changes with states
+    states: [
+        State {
+            name: ""
+            PropertyChanges { target: mask; visible: false }
+            PropertyChanges { target: listviewcontainer; opacity: 1.0 }
+            PropertyChanges { target: leftHoveringIcon; visible: false; }
+            PropertyChanges { target: rightHoveringIcon; visible: false; }
+        },
+        State {
+            name: "hovering"
+            when: hoveringArea.containsMouse
+            PropertyChanges { target: mask; visible: true }
+            PropertyChanges { target: listviewcontainer; opacity: 0.0 }
+            PropertyChanges { target: leftHoveringIcon; visible: true; }
+            PropertyChanges { target: rightHoveringIcon; visible: true; }
+        }
+        //one of the experiments was to only show one arrow at a time on hover
+        /*State {
+            name: "hoveringLeft"
+            when: __hoveringLeft
+            PropertyChanges { target: mask; visible: true }
+            PropertyChanges { target: gradient; mirrored: true }
+            PropertyChanges { target: listviewcontainer; opacity: 0.0 }
+            PropertyChanges { target: hoveringIcon; visible: true; rotation: 180; anchors.leftMargin: units.gu(1) }
+            AnchorChanges { target: hoveringIcon; anchors.left: hoveringArea.left; anchors.right: undefined }
+        },
+        State {
+            name: "hoveringRight"
+            when: __hoveringRight
+            PropertyChanges { target: mask; visible: true }
+            PropertyChanges { target: gradient; mirrored: false }
+            PropertyChanges { target: listviewcontainer; opacity: 0.0 }
+            PropertyChanges { target: hoveringIcon; visible: true; rotation: 0; anchors.rightMargin: units.gu(1) }
+            AnchorChanges { target: hoveringIcon; anchors.right: hoveringArea.right; anchors.left: undefined }
+        }*/
+    ]
 }
+

=== modified file 'modules/Ubuntu/Components/qmldir'
--- modules/Ubuntu/Components/qmldir	2015-05-24 14:14:36 +0000
+++ modules/Ubuntu/Components/qmldir	2015-07-10 13:56:40 +0000
@@ -141,3 +141,4 @@
 PullToRefresh 1.3 1.3/PullToRefresh.qml
 UbuntuListView 1.3 1.3/UbuntuListView11.qml
 Captions 1.3 1.3/Captions.qml
+MultiColumnView 1.3 1.3/MultiColumnView.qml

=== modified file 'tests/autopilot/ubuntuuitoolkit/tests/__init__.py'
--- tests/autopilot/ubuntuuitoolkit/tests/__init__.py	2015-04-14 21:02:06 +0000
+++ tests/autopilot/ubuntuuitoolkit/tests/__init__.py	2015-07-10 13:56:40 +0000
@@ -205,10 +205,9 @@
 
     def checkPageHeader(self, pageTitle):
         orientationHelper = self.getOrientationHelper()
-        header = orientationHelper.select_single("AppHeader", title=pageTitle)
-        self.assertThat(header, Not(Is(None)))
-        self.assertThat(header.visible, Eventually(Equals(True)))
-        return header
+        header_label = orientationHelper.select_single(objectName="header_title_label", text=pageTitle)
+        self.assertThat(header_label, Not(Is(None)))
+        self.assertThat(header_label.visible, Eventually(Equals(True)))
 
     def getObject(self, objectName):
         obj = self.app.select_single(objectName=objectName)

=== modified file 'tests/resources/navigation/MyCustomPage.qml'
--- tests/resources/navigation/MyCustomPage.qml	2015-03-03 13:20:06 +0000
+++ tests/resources/navigation/MyCustomPage.qml	2015-07-10 13:56:40 +0000
@@ -15,7 +15,7 @@
  */
 
 import QtQuick 2.2
-import Ubuntu.Components 1.1
+import Ubuntu.Components 1.3
 
 Page {
     title: i18n.tr("My custom page")

=== added file 'tests/resources/navigation/SplitViewStack.qml'
--- tests/resources/navigation/SplitViewStack.qml	1970-01-01 00:00:00 +0000
+++ tests/resources/navigation/SplitViewStack.qml	2015-07-10 13:56:40 +0000
@@ -0,0 +1,137 @@
+/*
+ * 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
+import QtQuick.Layouts 1.1
+
+MainView {
+    id: main
+    width: units.gu(100)
+    height: units.gu(71)
+
+    MultiColumnView {
+        id: view
+        anchors.fill: parent
+        columns: {
+            if (width > units.gu(120)) return 3;
+            if (width > units.gu(80)) return 2;
+            return 1;
+        }
+        columnMetrics: [
+            ColumnMetrics {
+                column: 2
+                fillWidth: true
+            },
+            ColumnMetrics {
+                column: 3
+                fillWidth: false
+                minimumWidth: units.gu(50)
+            }
+        ]
+        primaryPage: page1
+
+        Page {
+            id: page1
+            title: "Page #1"
+
+            Rectangle {
+                anchors.fill: parent
+                color: "red"
+            }
+            Column {
+                Button {
+                    text: "Add page2 next"
+                    onClicked: page1.pageStack.addPageToNextColumn(page1, page2)
+                }
+                Button {
+                    text: "Add page4 above"
+                    onClicked: page1.pageStack.addPageToCurrentColumn(page1, page4)
+                }
+            }
+        }
+
+        Page {
+            id: page2
+            title: "Page #2"
+
+            Rectangle {
+                anchors.fill: parent
+                color: "green"
+            }
+            Column {
+                Button {
+                    text: "Back..."
+                    onClicked: page2.pageStack.removePages(page2)
+                }
+                Button {
+                    text: "Add page3 next"
+                    onClicked: page2.pageStack.addPageToNextColumn(page2, page3)
+                }
+            }
+        }
+        Page {
+            id: page3
+            title: "Page #3"
+
+            Rectangle {
+                anchors.fill: parent
+                color: "blue"
+            }
+            Button {
+                text: "Back..."
+                onClicked: page3.pageStack.removePages(page3)
+            }
+        }
+        Page {
+            id: page4
+            title: "Page #4"
+
+            Rectangle {
+                anchors.fill: parent
+                color: "teal"
+            }
+            Column {
+                Button {
+                    text: "Back..."
+                    onClicked: page4.pageStack.removePages(page4)
+                }
+                Button {
+                    text: "Add page5 next"
+                    onClicked: page4.pageStack.addPageToNextColumn(page4, page5)
+                }
+            }
+        }
+        Page {
+            id: page5
+            title: "Page #5"
+            Rectangle {
+                anchors.fill: parent
+                color: "tan"
+            }
+            Column {
+                Button {
+                    text: "Back..."
+                    onClicked: page5.pageStack.removePages(page5)
+                }
+                Button {
+                    text: "Custom page on same column"
+                    onClicked: page5.pageStack.addPageToCurrentColumn(page5, Qt.resolvedUrl("MyCustomPage.qml"))
+                }
+            }
+        }
+    }
+}

=== added file 'tests/unit_x11/tst_components/ListItemWithLabel.qml'
--- tests/unit_x11/tst_components/ListItemWithLabel.qml	1970-01-01 00:00:00 +0000
+++ tests/unit_x11/tst_components/ListItemWithLabel.qml	2015-07-10 13:56:40 +0000
@@ -0,0 +1,30 @@
+/*
+ * 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
+
+ListItem {
+    property alias text: label.text
+    Label {
+        id: label
+        anchors {
+            left: parent.left
+            leftMargin: units.gu(2)
+            verticalCenter: parent.verticalCenter
+        }
+    }
+}

=== modified file 'tests/unit_x11/tst_components/MyExternalPage.qml'
--- tests/unit_x11/tst_components/MyExternalPage.qml	2015-03-03 13:20:06 +0000
+++ tests/unit_x11/tst_components/MyExternalPage.qml	2015-07-10 13:56:40 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2012-2014 Canonical Ltd.
+ * Copyright 2012-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
@@ -14,9 +14,13 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import QtQuick 2.2
-import Ubuntu.Components 1.1
+import QtQuick 2.4
+import Ubuntu.Components 1.3
 
 Page {
     title: "Page from QML file"
+    Label {
+        anchors.centerIn: parent
+        text: "This page was created from MyExternalPage.qml."
+    }
 }

=== modified file 'tests/unit_x11/tst_components/tst_components.pro'
--- tests/unit_x11/tst_components/tst_components.pro	2015-04-25 07:10:57 +0000
+++ tests/unit_x11/tst_components/tst_components.pro	2015-07-10 13:56:40 +0000
@@ -7,5 +7,6 @@
 SOURCES += tst_components.cpp tabsmodel.cpp
 HEADERS += tabsmodel.h
 
-OTHER_FILES += $$system(ls *.qml)
+OTHER_FILES += $$system(ls *.qml) \
+    tst_multicolumnview.qml
 OTHER_FILES += $$system(ls AppTheme/*)

=== added file 'tests/unit_x11/tst_components/tst_multicolumnheader.qml'
--- tests/unit_x11/tst_components/tst_multicolumnheader.qml	1970-01-01 00:00:00 +0000
+++ tests/unit_x11/tst_components/tst_multicolumnheader.qml	2015-07-10 13:56:40 +0000
@@ -0,0 +1,200 @@
+/*
+ * 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
+
+MainView {
+    id: root
+    width: units.gu(120)
+    height: units.gu(71)
+
+    MultiColumnView {
+        id: multiColumnView
+        width: parent.width
+        height: parent.height
+        primaryPage: rootPage
+
+        Page {
+            id: rootPage
+            title: "Root"
+
+            Column {
+                anchors {
+                    top: parent.top
+                    left: parent.left
+                    right: parent.right
+                }
+                height: childrenRect.height
+
+                ListItemWithLabel {
+                    text: "Add page left"
+                    onClicked: multiColumnView.addPageToCurrentColumn(rootPage, leftPage)
+                }
+                ListItemWithLabel {
+                    text: "Add page right"
+                    onClicked: multiColumnView.addPageToNextColumn(rootPage, rightPage)
+                }
+                ListItemWithLabel {
+                    text: "Add sections page right"
+                    onClicked: multiColumnView.addPageToNextColumn(rootPage, sectionsPage)
+                }
+                ListItemWithLabel {
+                    text: "Add external page right"
+                    onClicked: multiColumnView.addPageToNextColumn(
+                                   rootPage, Qt.resolvedUrl("MyExternalPage.qml"))
+                }
+            }
+        }
+        Page {
+            id: leftPage
+            title: "First column"
+            Rectangle {
+                anchors {
+                    fill: parent
+                    margins: units.gu(2)
+                }
+                color: "orange"
+            }
+        }
+        Page {
+            id: rightPage
+            title: "Second column"
+            Rectangle {
+                anchors {
+                    fill: parent
+                    margins: units.gu(2)
+                }
+                color: "green"
+            }
+        }
+        Page {
+            id: sectionsPage
+            title: "Page with sections"
+            head.sections.model: ["uno", "dos", "tres"]
+
+            Rectangle {
+                anchors {
+                    fill: parent
+                    margins: units.gu(2)
+                }
+                color: "blue"
+            }
+        }
+    }
+    UbuntuTestCase {
+        when: windowShown
+
+        function get_number_of_columns() {
+            var body = findChild(multiColumnView, "body");
+            return body.children.length;
+        }
+
+        function get_header(index) {
+            return findChild(multiColumnView, "Header" + index);
+        }
+
+        function get_number_of_headers() {
+            // FIXME: With only one column, revert to using the AppHeader
+            //  so multiColumnView sill not include any headers.
+            var numHeaders = 0;
+            var header = findChild(multiColumnView, "Header0");
+            verify(header !== null, "No header found!");
+            while (header !== null) {
+                numHeaders++;
+                header = get_header(numHeaders);
+            }
+            return numHeaders;
+        }
+
+        function cleanup() {
+            multiColumnView.width = root.width;
+            multiColumnView.height = root.height;
+            multiColumnView.removePages(rootPage);
+        }
+
+        function test_number_of_headers_equals_number_of_columns() {
+            multiColumnView.width = units.gu(40);
+            compare(get_number_of_columns(), 1, "Number of columns is not 1.");
+            compare(get_number_of_headers(), 1, "Number of headers is not 1.");
+            multiColumnView.width = root.width;
+            compare(get_number_of_columns(), 2, "Number of columns is not 2.");
+            compare(get_number_of_headers(), 2, "Number of headers is not 2.");
+        }
+
+        function test_header_configuration_equals_column_page_configuration() {
+            compare(get_number_of_headers(), 2, "Number of headers is not 2 initially.");
+            compare(get_header(0).config, rootPage.head,
+                    "First column header is not initialized with primaryPage header config.");
+            compare(get_header(1).config, null,
+                    "Second column header is not initalized with null.");
+
+            multiColumnView.addPageToCurrentColumn(rootPage, leftPage);
+            compare(get_header(0).config, leftPage.head,
+                    "First column header is not updated properly.");
+            compare(get_header(1).config, null,
+                    "Second column header is updated when it should not be.");
+            multiColumnView.removePages(leftPage);
+            compare(get_header(0).config, rootPage.head,
+                    "First column header is not reverted properly.");
+
+            multiColumnView.addPageToNextColumn(rootPage, rightPage);
+            compare(get_header(0).config, rootPage.head,
+                    "First column header is updated when it should not be.");
+            compare(get_header(1).config, rightPage.head,
+                    "Second column header is not updated properly.");
+            multiColumnView.removePages(rightPage);
+            compare(get_header(1).config, null,
+                    "Second column header is not reverted properly.");
+        }
+
+        function test_header_title_for_external_page() {
+            multiColumnView.addPageToNextColumn(rootPage, Qt.resolvedUrl("MyExternalPage.qml"));
+            compare(get_header(1).config.title, "Page from QML file",
+                    "Adding external Page does not update the header title.");
+        }
+
+        function test_header_height() {
+            // contentHeight + divider height
+            var baseHeight = units.gu(6) + units.dp(1);
+            var withSectionsHeight = baseHeight + units.gu(4);
+            var n = get_number_of_headers();
+            var i;
+            for (i = 0; i < n; i++) {
+                compare(get_header(i).height, baseHeight,
+                        "Header " + i + " height is not initialized correctly.");
+            }
+            multiColumnView.addPageToNextColumn(rootPage, rightPage);
+            for (i = 0; i < n; i++) {
+                compare(get_header(i).height, baseHeight,
+                        "Header " + i + " height is incorrect after adding Page.");
+            }
+            multiColumnView.removePages(rightPage);
+            multiColumnView.addPageToNextColumn(rootPage, sectionsPage);
+            for (i = 0; i < n; i++) {
+                compare(get_header(i).height, withSectionsHeight,
+                        "Header " + i + " height is incorrect after adding single Page with sections.");
+            }
+            multiColumnView.removePages(sectionsPage);
+            for (i = 0; i < n; i++) {
+                compare(get_header(i).height, baseHeight,
+                        "Header " + i +
+                        " height is not correctly reverted after removing Page with sections.");
+            }
+        }
+    }
+}

=== added file 'tests/unit_x11/tst_components/tst_multicolumnview.qml'
--- tests/unit_x11/tst_components/tst_multicolumnview.qml	1970-01-01 00:00:00 +0000
+++ tests/unit_x11/tst_components/tst_multicolumnview.qml	2015-07-10 13:56:40 +0000
@@ -0,0 +1,128 @@
+/*
+ * 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 QtTest 1.0
+import Ubuntu.Test 1.0
+import Ubuntu.Components 1.3
+
+Item {
+    id: test
+    width: units.gu(120)
+    height: units.gu(71)
+
+    MultiColumnView {
+        id: testView
+        width: parent.width
+        height: parent.height
+
+        primaryPage: page1
+
+        Page {
+            id: page1
+            title: "Page1"
+        }
+        Page {
+            id: page2
+            title: "Page2"
+        }
+        Page {
+            id: page3
+            title: "Page3"
+        }
+        Page {
+            id: page4
+            title: "Page4"
+        }
+    }
+
+    MultiColumnView {
+        id: defaults
+    }
+
+    UbuntuTestCase {
+        when: windowShown
+
+        function cleanup() {
+//            testView.columns = Qt.binding(function() {
+//                return test.width > units.gu(100) ? 3 : (test.width > units.gu(80) ? 2 : 1);
+//            });
+            testView.width = test.width;
+            testView.height = test.height;
+            // remove allpages
+            testView.removePages(page1);
+        }
+
+        function test_0_API() {
+            compare(defaults.primaryPage, undefined, "primaryPage not undefined by default");
+        }
+
+        function test_add_to_first_column_data() {
+            return [
+                {tag: "null sourcePage, fail", sourcePage: null, page: page2, failMsg: "No sourcePage specified. Page will not be added."},
+                {tag: "valid sourcePage, pass", sourcePage: page1, page: page2, failMsg: ""},
+            ]
+        }
+        function test_add_to_first_column(data) {
+            if (data.failMsg != "") {
+                ignoreWarning(data.failMsg);
+            }
+
+            testView.addPageToCurrentColumn(data.sourcePage, data.page);
+            var firstColumn = findChild(testView, "ColumnHolder0");
+            verify(firstColumn);
+            if (data.failMsg != "") {
+                expectFail(data.tag, "Fail");
+            }
+            compare(firstColumn.pageWrapper.object, data.page);
+        }
+
+        function test_add_to_next_column_data() {
+            return [
+                {tag: "null sourcePage, fail", sourcePage: null, page: page2, failMsg: "No sourcePage specified. Page will not be added."},
+                {tag: "valid sourcePage, pass", sourcePage: page1, page: page2, failMsg: ""},
+            ]
+        }
+        function test_add_to_next_column(data) {
+            if (data.failMsg != "") {
+                ignoreWarning(data.failMsg);
+            }
+
+            testView.addPageToNextColumn(data.sourcePage, data.page);
+            var secondColumn = findChild(testView, "ColumnHolder1");
+            verify(secondColumn);
+            if (data.failMsg != "") {
+                expectFail(data.tag, "Fail");
+            }
+            verify(secondColumn.pageWrapper);
+        }
+
+        function test_change_primaryPage() {
+            ignoreWarning("Cannot change primaryPage after completion.");
+            testView.primaryPage = page3;
+        }
+
+        function test_add_to_same_column_when_source_page_not_in_stack() {
+            ignoreWarning("sourcePage must be added to the view to add new page.");
+            testView.addPageToCurrentColumn(page2, page3);
+        }
+
+        function test_add_to_next_column_when_source_page_not_in_stack() {
+            ignoreWarning("sourcePage must be added to the view to add new page.");
+            testView.addPageToNextColumn(page2, page3);
+        }
+    }
+}