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

[Zsombor Egri]

Making columns resizable in an AdaptivePageLayout.

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:1602
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/2112/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/840
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/842
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/842/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/839

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

review: Approve (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:1603
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/2130/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/858
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/860
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/860/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/857

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

review: Approve (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:1608
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/2132/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/860
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/862
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/862/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/859

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

review: Approve (continuous-integration)

[lp:~zsombi/ubuntu-ui-toolkit/resizableColumns]

1609. By Zsombor Egri on 2015-08-17

thin divider

1610. By Zsombor Egri on 2015-08-17

staging merge

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:1610
http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-ci/2133/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-amd64-ci/861
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/863
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-armhf-ci/863/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-sdk-team-ubuntu-ui-toolkit-staging-vivid-i386-ci/860

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

review: Approve (continuous-integration)

[Cris Dywan (kalikiana)]

The column divider seems reversed in SuruDark, ie. it becomes more subtle when hovered or touched. Apparently there;s no design for it - I just wanted to be sure to mention it.

review: Approve

=== modified file 'examples/ubuntu-ui-toolkit-gallery/ubuntu-ui-toolkit-gallery.qml'
--- examples/ubuntu-ui-toolkit-gallery/ubuntu-ui-toolkit-gallery.qml	2015-08-12 14:51:31 +0000
+++ examples/ubuntu-ui-toolkit-gallery/ubuntu-ui-toolkit-gallery.qml	2015-08-17 09:50:27 +0000
@@ -41,6 +41,8 @@
             PageColumnsLayout {
                 when: layout.width > units.gu(80)
                 PageColumn {
+                    minimumWidth: units.gu(30)
+                    maximumWidth: units.gu(50)
                     preferredWidth: units.gu(40)
                 }
                 PageColumn {

=== modified file 'src/Ubuntu/Components/1.3/AdaptivePageLayout.qml'
--- src/Ubuntu/Components/1.3/AdaptivePageLayout.qml	2015-08-12 15:14:21 +0000
+++ src/Ubuntu/Components/1.3/AdaptivePageLayout.qml	2015-08-17 09:50:27 +0000
@@ -147,7 +147,15 @@
     }
   \endqml
 
-  \sa PageStack
+  A column is considered to be resizable if the \l PageColumn::minimumWidth and
+  \l PageColumn::maximumWidth configuration differs. This implies that if a column
+  is not meant to be resized, it should have \l PageColumn::minimumWidth and
+  \l PageColumn::maximumWidth set to the same value. In the example above, the
+  first column can be resized to a minimum of 30, and a maximum of 60 grid units,
+  and the preferred width is set to 40 grid units. This width is set every time
+  the layout is activated.
+
+  \sa PageStack, PageColumnsLayout, PageColumn
 */
 
 PageTreeNode {
@@ -495,6 +503,7 @@
             property int column
             property alias config: subHeader.config
             property PageColumn metrics: getDefaultMetrics()
+            readonly property real dividerThickness: units.dp(1)
 
             Layout.fillWidth: metrics.fillWidth
             Layout.fillHeight: true
@@ -512,7 +521,7 @@
                     bottom: parent.bottom
                     left: parent.left
                     right: parent.right
-                    rightMargin: verticalDivider.width
+                    rightMargin: dividerThickness
                 }
                 // we need to clip because the header does not have a background
                 clip: true
@@ -573,9 +582,52 @@
                     top: parent.top
                     bottom: parent.bottom
                     right: parent.right
+                    rightMargin: dividerThickness
                 }
                 width: (column == (d.columns - 1)) || !pageWrapper ? 0 : units.dp(1)
-                color: subHeader.dividerColor
+                color: theme.palette.selected.background
+                MouseArea {
+                    id: resizerSensing
+                    objectName: "Divider"
+                    enabled: verticalDivider.width > 0
+                    anchors {
+                        fill: parent
+                        leftMargin: enabled ? -units.gu(1) : 0
+                        rightMargin: enabled ? -units.gu(1) : 0
+                    }
+                    cursorShape: Qt.SizeHorCursor
+                    drag {
+                        axis: Drag.XAxis
+                        target: resizer
+                        smoothed: false
+                        minimumX: holder.Layout.minimumWidth
+                        maximumX: holder.Layout.maximumWidth
+                    }
+                    onPressed: resizer.x = holder.Layout.preferredWidth
+                }
+                states: State {
+                    name: "active"
+                    when: resizerSensing.pressed
+                    PropertyChanges {
+                        target: verticalDivider
+                        color: Qt.darker(theme.palette.normal.background, 1.5)
+                    }
+                }
+                transitions: Transition {
+                    from: ""
+                    to: "*"
+                    reversible: true
+                    ColorAnimation {
+                        target: verticalDivider
+                        property: "color"
+                        duration: UbuntuAnimation.SlowDuration
+                    }
+                }
+            }
+            Item {
+                id: resizer
+                height: parent.height
+                onXChanged: holder.Layout.preferredWidth = x
             }
 
             function attachPage(page) {

=== modified file 'tests/unit_x11/tst_components/tst_adaptivepagelayout_configuration.qml'
--- tests/unit_x11/tst_components/tst_adaptivepagelayout_configuration.qml	2015-08-11 08:30:57 +0000
+++ tests/unit_x11/tst_components/tst_adaptivepagelayout_configuration.qml	2015-08-17 09:50:27 +0000
@@ -206,5 +206,24 @@
                 compare(holder.Layout.fillWidth, data.fillWidths[i], "fillWidth mismatch for column #" + i);
             }
         }
+
+        function test_z_resize_data() {
+            return [
+                {tag: "not resizable", layout: defaultLayout, width: units.gu(60), move: units.gu(40), preResizeWidth: units.gu(40), postResizeWidth: units.gu(40)},
+                {tag: "resizable to maximum", layout: dynamicLayout, width: units.gu(60), move: units.gu(40), preResizeWidth: units.gu(25), postResizeWidth: units.gu(30)},
+            ];
+        }
+        function test_z_resize(data) {
+            layout.layouts = data.layout;
+            layout.width = data.width;
+            waitForRendering(layout);
+            // drag divider
+            var holder = findChild(layout, "ColumnHolder0");
+            verify(holder);
+            var divider = findChild(holder, "Divider");
+            verify(divider);
+            mouseDrag(divider, centerOf(divider).x, centerOf(divider).y, data.move, 0);
+            fuzzyCompare(holder.Layout.preferredWidth, data.postResizeWidth, 0.5, "resizing error");
+        }
     }
 }