Ubuntu UI Toolkit

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

  1. resizableColumns
  2. Merge into staging
Proposed by Zsombor Egri on 2015-08-10
Status: Merged
Approved by: Christian Dywan on 2015-08-17
Approved revision: 1610
Merged at revision: 1609
Proposed branch: lp:~zsombi/ubuntu-ui-toolkit/resizableColumns
Merge into: lp:ubuntu-ui-toolkit/staging
Prerequisite: lp:~zsombi/ubuntu-ui-toolkit/configurableColumns
Diff against target: 133 lines (+76/-3)
3 files modified
examples/ubuntu-ui-toolkit-gallery/ubuntu-ui-toolkit-gallery.qml (+2/-0)
src/Ubuntu/Components/1.3/AdaptivePageLayout.qml (+55/-3)
tests/unit_x11/tst_components/tst_adaptivepagelayout_configuration.qml (+19/-0)
To merge this branch: bzr merge lp:~zsombi/ubuntu-ui-toolkit/resizableColumns
Reviewer Review Type Date Requested Status
Christian Dywan Approve on 2015-08-17
PS Jenkins bot continuous-integration Approve on 2015-08-17
Tim Peeters 2015-08-10 Pending
Review via email: mp+267554@code.launchpad.net

Commit Message

Making columns resizable in an AdaptivePageLayout.

To post a comment you must log in.
PS Jenkins bot (ps-jenkins) wrote :
review: Approve (continuous-integration)
PS Jenkins bot (ps-jenkins) wrote :
review: Approve (continuous-integration)
PS Jenkins bot (ps-jenkins) wrote :
review: Approve (continuous-integration)
lp:~zsombi/ubuntu-ui-toolkit/resizableColumns updated on 2015-08-17
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) wrote :
review: Approve (continuous-integration)
Christian Dywan (kalikiana) wrote :

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

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'examples/ubuntu-ui-toolkit-gallery/ubuntu-ui-toolkit-gallery.qml'
2--- examples/ubuntu-ui-toolkit-gallery/ubuntu-ui-toolkit-gallery.qml 2015-08-12 14:51:31 +0000
3+++ examples/ubuntu-ui-toolkit-gallery/ubuntu-ui-toolkit-gallery.qml 2015-08-17 09:50:27 +0000
4@@ -41,6 +41,8 @@
5 PageColumnsLayout {
6 when: layout.width > units.gu(80)
7 PageColumn {
8+ minimumWidth: units.gu(30)
9+ maximumWidth: units.gu(50)
10 preferredWidth: units.gu(40)
11 }
12 PageColumn {
13
14=== modified file 'src/Ubuntu/Components/1.3/AdaptivePageLayout.qml'
15--- src/Ubuntu/Components/1.3/AdaptivePageLayout.qml 2015-08-12 15:14:21 +0000
16+++ src/Ubuntu/Components/1.3/AdaptivePageLayout.qml 2015-08-17 09:50:27 +0000
17@@ -147,7 +147,15 @@
18 }
19 \endqml
20
21- \sa PageStack
22+ A column is considered to be resizable if the \l PageColumn::minimumWidth and
23+ \l PageColumn::maximumWidth configuration differs. This implies that if a column
24+ is not meant to be resized, it should have \l PageColumn::minimumWidth and
25+ \l PageColumn::maximumWidth set to the same value. In the example above, the
26+ first column can be resized to a minimum of 30, and a maximum of 60 grid units,
27+ and the preferred width is set to 40 grid units. This width is set every time
28+ the layout is activated.
29+
30+ \sa PageStack, PageColumnsLayout, PageColumn
31 */
32
33 PageTreeNode {
34@@ -495,6 +503,7 @@
35 property int column
36 property alias config: subHeader.config
37 property PageColumn metrics: getDefaultMetrics()
38+ readonly property real dividerThickness: units.dp(1)
39
40 Layout.fillWidth: metrics.fillWidth
41 Layout.fillHeight: true
42@@ -512,7 +521,7 @@
43 bottom: parent.bottom
44 left: parent.left
45 right: parent.right
46- rightMargin: verticalDivider.width
47+ rightMargin: dividerThickness
48 }
49 // we need to clip because the header does not have a background
50 clip: true
51@@ -573,9 +582,52 @@
52 top: parent.top
53 bottom: parent.bottom
54 right: parent.right
55+ rightMargin: dividerThickness
56 }
57 width: (column == (d.columns - 1)) || !pageWrapper ? 0 : units.dp(1)
58- color: subHeader.dividerColor
59+ color: theme.palette.selected.background
60+ MouseArea {
61+ id: resizerSensing
62+ objectName: "Divider"
63+ enabled: verticalDivider.width > 0
64+ anchors {
65+ fill: parent
66+ leftMargin: enabled ? -units.gu(1) : 0
67+ rightMargin: enabled ? -units.gu(1) : 0
68+ }
69+ cursorShape: Qt.SizeHorCursor
70+ drag {
71+ axis: Drag.XAxis
72+ target: resizer
73+ smoothed: false
74+ minimumX: holder.Layout.minimumWidth
75+ maximumX: holder.Layout.maximumWidth
76+ }
77+ onPressed: resizer.x = holder.Layout.preferredWidth
78+ }
79+ states: State {
80+ name: "active"
81+ when: resizerSensing.pressed
82+ PropertyChanges {
83+ target: verticalDivider
84+ color: Qt.darker(theme.palette.normal.background, 1.5)
85+ }
86+ }
87+ transitions: Transition {
88+ from: ""
89+ to: "*"
90+ reversible: true
91+ ColorAnimation {
92+ target: verticalDivider
93+ property: "color"
94+ duration: UbuntuAnimation.SlowDuration
95+ }
96+ }
97+ }
98+ Item {
99+ id: resizer
100+ height: parent.height
101+ onXChanged: holder.Layout.preferredWidth = x
102 }
103
104 function attachPage(page) {
105
106=== modified file 'tests/unit_x11/tst_components/tst_adaptivepagelayout_configuration.qml'
107--- tests/unit_x11/tst_components/tst_adaptivepagelayout_configuration.qml 2015-08-11 08:30:57 +0000
108+++ tests/unit_x11/tst_components/tst_adaptivepagelayout_configuration.qml 2015-08-17 09:50:27 +0000
109@@ -206,5 +206,24 @@
110 compare(holder.Layout.fillWidth, data.fillWidths[i], "fillWidth mismatch for column #" + i);
111 }
112 }
113+
114+ function test_z_resize_data() {
115+ return [
116+ {tag: "not resizable", layout: defaultLayout, width: units.gu(60), move: units.gu(40), preResizeWidth: units.gu(40), postResizeWidth: units.gu(40)},
117+ {tag: "resizable to maximum", layout: dynamicLayout, width: units.gu(60), move: units.gu(40), preResizeWidth: units.gu(25), postResizeWidth: units.gu(30)},
118+ ];
119+ }
120+ function test_z_resize(data) {
121+ layout.layouts = data.layout;
122+ layout.width = data.width;
123+ waitForRendering(layout);
124+ // drag divider
125+ var holder = findChild(layout, "ColumnHolder0");
126+ verify(holder);
127+ var divider = findChild(holder, "Divider");
128+ verify(divider);
129+ mouseDrag(divider, centerOf(divider).x, centerOf(divider).y, data.move, 0);
130+ fuzzyCompare(holder.Layout.preferredWidth, data.postResizeWidth, 0.5, "resizing error");
131+ }
132 }
133 }

Subscribers

People subscribed via source and target branches