Merge lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/lessColumnApi into lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/multiColumnView
- lessColumnApi
- Merge into multiColumnView
Proposed by
Cris Dywan
Status: | Merged |
---|---|
Approved by: | Tim Peeters |
Approved revision: | 1546 |
Merge reported by: | Cris Dywan |
Merged at revision: | not available |
Proposed branch: | lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/lessColumnApi |
Merge into: | lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/multiColumnView |
Diff against target: |
488 lines (+71/-158) 5 files modified
components.api (+0/-8) modules/Ubuntu/Components/1.3/ColumnMetrics.qml (+3/-2) modules/Ubuntu/Components/1.3/MultiColumnView.qml (+67/-137) modules/Ubuntu/Components/qmldir (+0/-1) tests/unit_x11/tst_components/tst_multicolumnview.qml (+1/-10) |
To merge this branch: | bzr merge lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/lessColumnApi |
Related bugs: |
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
Tim Peeters | Approve | ||
Review via email: mp+262641@code.launchpad.net |
Commit message
Remove advanced MultiColumnView API
Description of the change
To post a comment you must log in.
Revision history for this message
Tim Peeters (tpeeters) wrote : | # |
Revision history for this message
Tim Peeters (tpeeters) : | # |
review:
Needs Fixing
Revision history for this message
Tim Peeters (tpeeters) wrote : | # |
tst_multicolumn
Revision history for this message
Cris Dywan (kalikiana) wrote : | # |
> tst_multicolumn
> that may also be broken in zsombi's multicolumnview branch.
It does. You can see the separator. But as the columns have no contents that's all you see.
I'll add some colors.
Revision history for this message
Tim Peeters (tpeeters) wrote : | # |
yeah ok. I see now that the separator is there. No need for colors.
I'll add some contents when I merge the splitHeader.
- 1546. By Cris Dywan
-
Explicitly mark ColumnMetrics as internal
Preview Diff
[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1 | === modified file 'components.api' |
2 | --- components.api 2015-06-17 14:22:56 +0000 |
3 | +++ components.api 2015-06-24 16:16:33 +0000 |
4 | @@ -204,11 +204,6 @@ |
5 | function clear() |
6 | function QQuickMimeData* newData() |
7 | Ubuntu.Components.ColorUtils 0.1 1.0 |
8 | -Ubuntu.Components.ColumnMetrics 1.3: QtObject |
9 | - property int column |
10 | - property bool fillWidth |
11 | - property double maximumWidth |
12 | - property double minimumWidth |
13 | Ubuntu.Components.ComboButton 1.1: Button |
14 | property double collapsedHeight |
15 | default readonly property QtObject comboList |
16 | @@ -527,10 +522,7 @@ |
17 | AfterItem |
18 | BeforeItem |
19 | Ubuntu.Components.MultiColumnView 1.3: PageTreeNode |
20 | - readonly property ColumnMetrics columnMetrics |
21 | - property int columns |
22 | default readonly property QtObject data |
23 | - property double defaultColumnWidth |
24 | function var addPageToCurrentColumn(var sourcePage, var page, var properties) |
25 | function var addPageToNextColumn(var sourcePage, var page, var properties) |
26 | function var removePages(var page) |
27 | |
28 | === modified file 'modules/Ubuntu/Components/1.3/ColumnMetrics.qml' |
29 | --- modules/Ubuntu/Components/1.3/ColumnMetrics.qml 2015-06-17 09:32:02 +0000 |
30 | +++ modules/Ubuntu/Components/1.3/ColumnMetrics.qml 2015-06-24 16:16:33 +0000 |
31 | @@ -22,6 +22,7 @@ |
32 | \since Ubuntu.Components 1.3 |
33 | \ingroup ubuntu |
34 | \brief Component configuring the metrics of a column in MultiColumnView. |
35 | + \internal |
36 | |
37 | */ |
38 | QtObject { |
39 | @@ -38,14 +39,14 @@ |
40 | |
41 | /*! |
42 | Specifies the minimum width of the column. If the value is greater than |
43 | - \l MultiColumnView::defaultColumnWidth, the value will be set as width for |
44 | + \b MultiColumnView::defaultColumnWidth, the value will be set as width for |
45 | the column. |
46 | */ |
47 | property real minimumWidth: 0 |
48 | |
49 | /*! |
50 | Specifies the maximum width of the column. If the value is smaller than |
51 | - \l MultiColumnView::defaultColumnWidth, the value will be set as width for |
52 | + \b MultiColumnView::defaultColumnWidth, the value will be set as width for |
53 | the column. A maximum value of 0 will be ignored. |
54 | */ |
55 | property real maximumWidth: Number.POSITIVE_INFINITY |
56 | |
57 | === modified file 'modules/Ubuntu/Components/1.3/MultiColumnView.qml' |
58 | --- modules/Ubuntu/Components/1.3/MultiColumnView.qml 2015-06-17 14:22:56 +0000 |
59 | +++ modules/Ubuntu/Components/1.3/MultiColumnView.qml 2015-06-24 16:16:33 +0000 |
60 | @@ -46,7 +46,7 @@ |
61 | a Page instance, a Component or a url to a document defining a Page. The page |
62 | cannot be removed from the view. |
63 | |
64 | - \note Unlike PageStack, the component does not fill its parent content. |
65 | + \note Unlike PageStack or Page the component does not fill its parent by default. |
66 | |
67 | \qml |
68 | import QtQuick 2.4 |
69 | @@ -58,7 +58,6 @@ |
70 | |
71 | MultiColumnView { |
72 | anchors.fill: parent |
73 | - columns: 2 |
74 | primaryPage: page1 |
75 | Page { |
76 | id: page1 |
77 | @@ -86,40 +85,8 @@ |
78 | } |
79 | \endqml |
80 | |
81 | - Column widths are controlled by the \l defaultColumnWidth property and the \l columnMetrics |
82 | - properties. The \l columnMetrics contains a list of metrics configuring a specific |
83 | - column. If no metrics are set, the component will use \l defaultColumnWidth on |
84 | - each column. If the component is set to have one column only, the content will |
85 | - be stretched to the entire component area no matter of the metrics specified. |
86 | - When multiple columns are set, the last column is set to fill the available |
87 | - width and the rest are configured with the \l defaultColumnWidth. This behavior |
88 | - can be changed by specifying the \l ColumnMetrics::fillWidth for the column that |
89 | - needs to fill the available width. There can be more columns filling the available |
90 | - width at a time. |
91 | - |
92 | - Let's modify the example above, to have 3 columns, where columns 1 and 3 |
93 | - should have fixed widths of 40 GU and column 2 should fill to the space |
94 | - available. The code handling this would look as follows: |
95 | - \qml |
96 | - MultiColumnView { |
97 | - columns: 3 |
98 | - defaultColumnWidth: units.gu(40) |
99 | - columnMetrics: [ |
100 | - ColumnMetrics { |
101 | - column: 2 |
102 | - fillWidth: true |
103 | - }, |
104 | - ColumnMetrics { |
105 | - column: 3 |
106 | - fillWidth: false |
107 | - } |
108 | - ] |
109 | - } |
110 | - \endqml |
111 | - |
112 | - MultiColumnView supports adaptive column handling. When columns number changes |
113 | - runtime, the pages are automatically rearranged to the closest columns they were |
114 | - added to. To understand it better, let's take the following example: |
115 | + MultiColumnView supports adaptive column handling. When the number of columns changes at |
116 | + runtime the pages are automatically rearranged. To understand it better, let's take the following example: |
117 | \qml |
118 | import QtQuick 2.4 |
119 | import Ubuntu.Components 1.3 |
120 | @@ -130,8 +97,6 @@ |
121 | |
122 | MultiColumnView { |
123 | anchors.fill: parent |
124 | - columns: width > units.gu(100) ? 3 : |
125 | - (width >= units.gu(80) ? 2 : 1) |
126 | primaryPage: page1 |
127 | Page { |
128 | id: page1 |
129 | @@ -157,20 +122,21 @@ |
130 | } |
131 | \endqml |
132 | |
133 | - When the code is run on desktop, it will launch with a space for three columns. |
134 | + When the code is run on sufficiently wide screen, like a desktop or TV, |
135 | + it will launch with multiple columns. |
136 | + |
137 | \c page1 is set to be the primary page, \c page2 will be added to column next to |
138 | \c page1 (to column 2) and \c page3 next to \c page2 (column 3). When the window |
139 | - is resized to have its size below 100 GU, the component will switch to 2 column |
140 | + is resized to have its size below 80 GU, the component will switch to 1 column |
141 | mode, and \c page3 will be placed in the last column, and the header for \c page2 |
142 | will have a back button, indicating that there is a page below it. If the window |
143 | is resized to contain only one column, all pages will be shown in that column, so |
144 | - the component will act as PageStack. Resizing the window back to 2 respectively |
145 | - 3 columns will place the pages side-by-side. |
146 | + the component will act as PageStack. Resizing the window back to 2 columns will place the pages side-by-side. |
147 | |
148 | \note In the above example if \c page2 is removed, that will remove all its child |
149 | pages, meaning \c page3 will also be removed. |
150 | |
151 | - \sa PageStack, ColumnMetrics |
152 | + \sa PageStack |
153 | */ |
154 | |
155 | PageTreeNode { |
156 | @@ -179,67 +145,21 @@ |
157 | /*! |
158 | The property holds the first Page which will be added to the view. If the |
159 | view has more than one column, the page will be added to the leftmost column. |
160 | - The proeprty can hold either a Page instance, a component holding a Page |
161 | + The property can hold either a Page instance, a component holding a Page |
162 | or a QML document defining the Page. The property cannot be changed after |
163 | component completion. |
164 | */ |
165 | property var primaryPage |
166 | |
167 | /*! |
168 | - Specifies the number of columns in the view. A condition must be set to |
169 | - control the number of columns depending on the space available. |
170 | - \qml |
171 | - MultiColumnView { |
172 | - id: view |
173 | - columns: view.width > units.gu(50) ? 2 : 1 |
174 | - } |
175 | - \endqml |
176 | - */ |
177 | - property int columns: 1 |
178 | - |
179 | - /*! |
180 | - The property specifies the default width of each column. The property is |
181 | - applied on each column. If the \a minimumWidth specified for the column is |
182 | - bigger than this value, the minimum width will be applied. |
183 | - */ |
184 | - property real defaultColumnWidth: units.gu(40) |
185 | - |
186 | - /*! |
187 | - The property configures the size constraints and area filling for columns. |
188 | - If a column is not specified, the default sizing and filling will be applied. |
189 | - By default, only the last column is filling the available width, al other |
190 | - columns are sized to \l defaultColumnWidth as maximum. By default the list |
191 | - is empty. Only columns requiring special handling than the default should |
192 | - be specified. |
193 | - */ |
194 | - property list<ColumnMetrics> columnMetrics |
195 | - |
196 | - /*! |
197 | \qmlmethod Item addPageToCurrentColumn(Item sourcePage, var page[, var properties]) |
198 | - Adds a \c page to the column the \c sourcePage resides in. If \c sourcePage |
199 | - is null, the \c page will be added to the leftmost column. \c page can be a |
200 | - Component or a file. \c properties is a JSon object containing properties |
201 | + Adds a \c page to the column the \c sourcePage resides in. \c page can be a |
202 | + Component or a file. \c properties is a JSON object containing properties |
203 | to be set when page is created. \c sourcePage must be active. Returns the |
204 | instance of the page created. |
205 | */ |
206 | function addPageToCurrentColumn(sourcePage, page, properties) { |
207 | - if (columns <= 0) { |
208 | - return; |
209 | - } |
210 | - if (!sourcePage) { |
211 | - console.warn("No sourcePage specified. Page will not be added."); |
212 | - return; |
213 | - } |
214 | - if (!d.stack.find(sourcePage)) { |
215 | - console.warn("sourcePage must be added to the view to add new page."); |
216 | - return; |
217 | - } |
218 | - |
219 | - var wrapper = d.createWrapper(page, properties); |
220 | - wrapper.column = d.columnForPage(sourcePage); |
221 | - wrapper.parentPage = sourcePage; |
222 | - d.addPage(wrapper); |
223 | - return wrapper.object; |
224 | + return d.addPageToColumn(d.columnForPage(sourcePage), sourcePage, page, properties); |
225 | } |
226 | |
227 | /*! |
228 | @@ -250,28 +170,12 @@ |
229 | rightmost column, the new page will be pushed to the same column as \c sourcePage. |
230 | */ |
231 | function addPageToNextColumn(sourcePage, page, properties) { |
232 | - if (columns <= 0) { |
233 | - return; |
234 | - } |
235 | - if (!sourcePage) { |
236 | - console.warn("No sourcePage specified. Page will not be added."); |
237 | - return; |
238 | - } |
239 | - if (!d.stack.find(sourcePage)) { |
240 | - console.warn("sourcePage must be added to the view to add new page."); |
241 | - return; |
242 | - } |
243 | - |
244 | - var wrapper = d.createWrapper(page, properties); |
245 | - wrapper.column = (!sourcePage) ? 0 : d.columnForPage(sourcePage) + 1; |
246 | - wrapper.parentPage = sourcePage; |
247 | - d.addPage(wrapper); |
248 | - return wrapper.object; |
249 | + return d.addPageToColumn(d.columnForPage(sourcePage) + 1, sourcePage, page, properties); |
250 | } |
251 | |
252 | /*! |
253 | \qmlmethod void removePages(Item page) |
254 | - The function removes and deletes all pages from the view columns until \c page |
255 | + The function removes and deletes all pages up to and including \c page |
256 | is reached. If the \a page is the same as the \l primaryPage, only its child |
257 | pages will be removed. |
258 | */ |
259 | @@ -292,13 +196,6 @@ |
260 | internals |
261 | */ |
262 | |
263 | - /*! internal */ |
264 | - onColumnsChanged: { |
265 | - if (columns <= 0) { |
266 | - console.warn("There must me a minimum of one column set."); |
267 | - } |
268 | - d.relayout(); |
269 | - } |
270 | Component.onCompleted: { |
271 | d.relayout(); |
272 | d.completed = true; |
273 | @@ -315,7 +212,6 @@ |
274 | return; |
275 | } |
276 | } |
277 | - onDefaultColumnWidthChanged: body.applyMetrics() |
278 | |
279 | QtObject { |
280 | id: d |
281 | @@ -323,6 +219,19 @@ |
282 | property bool completed: false |
283 | property var stack: new Stack.Stack() |
284 | |
285 | + property int columns: multiColumnView.width >= units.gu(80) ? 2 : 1 |
286 | + /*! internal */ |
287 | + onColumnsChanged: { |
288 | + if (columns <= 0) { |
289 | + console.warn("There must be a minimum of one column set."); |
290 | + columns = 1; |
291 | + } |
292 | + d.relayout(); |
293 | + } |
294 | + property real defaultColumnWidth: units.gu(40) |
295 | + onDefaultColumnWidthChanged: body.applyMetrics() |
296 | + property list<ColumnMetrics> columnMetrics |
297 | + |
298 | function createWrapper(page, properties) { |
299 | var wrapperComponent = Qt.createComponent("PageWrapper.qml"); |
300 | var wrapperObject = wrapperComponent.createObject(hiddenPages); |
301 | @@ -337,7 +246,7 @@ |
302 | function addPage(pageWrapper) { |
303 | stack.push(pageWrapper); |
304 | pageWrapper.parentWrapper = stack.find(pageWrapper.parentPage); |
305 | - var targetColumn = MathUtils.clamp(pageWrapper.column, 0, columns - 1); |
306 | + var targetColumn = MathUtils.clamp(pageWrapper.column, 0, d.columns - 1); |
307 | // replace page holder's child |
308 | var holder = body.children[targetColumn]; |
309 | holder.detachCurrentPage(); |
310 | @@ -349,10 +258,31 @@ |
311 | return wrapper ? wrapper.column : 0; |
312 | } |
313 | |
314 | + function addPageToColumn(column, sourcePage, page, properties) { |
315 | + if (column < 0) { |
316 | + console.warn("Column must be >= 0."); |
317 | + return; |
318 | + } |
319 | + if (!sourcePage) { |
320 | + console.warn("No sourcePage specified. Page will not be added."); |
321 | + return; |
322 | + } |
323 | + if (!d.stack.find(sourcePage)) { |
324 | + console.warn("sourcePage must be added to the view to add new page."); |
325 | + return; |
326 | + } |
327 | + |
328 | + var wrapper = d.createWrapper(page, properties); |
329 | + wrapper.parentPage = sourcePage; |
330 | + wrapper.column = column; |
331 | + d.addPage(wrapper); |
332 | + return wrapper.object; |
333 | + } |
334 | + |
335 | // node is a triplet of {page, column, parentPage} |
336 | function popAndSetPageForColumn(node) { |
337 | stack.pop(); |
338 | - var effectiveColumn = MathUtils.clamp(node.column, 0, columns - 1); |
339 | + var effectiveColumn = MathUtils.clamp(node.column, 0, d.columns - 1); |
340 | var columnHolder = body.children[effectiveColumn]; |
341 | // is the page in a column? |
342 | if (node == columnHolder.pageWrapper) { |
343 | @@ -360,7 +290,7 @@ |
344 | columnHolder.detachCurrentPage(); |
345 | } |
346 | node.parent = null; |
347 | - var prevPage = stack.topForColumn(effectiveColumn, effectiveColumn < columns - 1); |
348 | + var prevPage = stack.topForColumn(effectiveColumn, effectiveColumn < d.columns - 1); |
349 | if (prevPage) { |
350 | columnHolder.attachPage(prevPage); |
351 | } |
352 | @@ -371,10 +301,10 @@ |
353 | |
354 | // relayouts when column count changes |
355 | function relayout() { |
356 | - if (body.children.length == columns) return; |
357 | - if (body.children.length > columns) { |
358 | + if (body.children.length == d.columns) return; |
359 | + if (body.children.length > d.columns) { |
360 | // need to remove few columns, the last ones |
361 | - while (body.children.length > columns) { |
362 | + while (body.children.length > d.columns) { |
363 | var holder = body.children[body.children.length - 1]; |
364 | holder.detachCurrentPage(); |
365 | holder.parent = null; |
366 | @@ -384,7 +314,7 @@ |
367 | var prevColumns = body.children.length; |
368 | |
369 | // add columns |
370 | - for (var i = 0; i < columns - prevColumns; i++) { |
371 | + for (var i = 0; i < d.columns - prevColumns; i++) { |
372 | pageHolderComponent.createObject(body); |
373 | } |
374 | } |
375 | @@ -392,9 +322,9 @@ |
376 | } |
377 | |
378 | function rearrangePages() { |
379 | - for (var column = columns - 1; column >= 0; column--) { |
380 | + for (var column = d.columns - 1; column >= 0; column--) { |
381 | var holder = body.children[column]; |
382 | - var pageWrapper = stack.topForColumn(column, column < (columns - 1)); |
383 | + var pageWrapper = stack.topForColumn(column, column < (d.columns - 1)); |
384 | if (!pageWrapper) { |
385 | continue; |
386 | } |
387 | @@ -426,8 +356,8 @@ |
388 | Component { |
389 | id: defaultMetrics |
390 | ColumnMetrics { |
391 | - fillWidth: column == columns |
392 | - minimumWidth: defaultColumnWidth |
393 | + fillWidth: column == d.columns |
394 | + minimumWidth: d.defaultColumnWidth |
395 | } |
396 | } |
397 | |
398 | @@ -446,8 +376,8 @@ |
399 | Layout.fillWidth: metrics.fillWidth |
400 | Layout.fillHeight: true |
401 | Layout.preferredWidth: metrics.maximumWidth > 0 ? |
402 | - MathUtils.clamp(defaultColumnWidth, metrics.minimumWidth, metrics.maximumWidth) : |
403 | - defaultColumnWidth |
404 | + MathUtils.clamp(d.defaultColumnWidth, metrics.minimumWidth, metrics.maximumWidth) : |
405 | + d.defaultColumnWidth |
406 | Layout.minimumWidth: metrics.minimumWidth |
407 | Layout.maximumWidth: metrics.maximumWidth |
408 | |
409 | @@ -476,7 +406,7 @@ |
410 | bottom: parent.bottom |
411 | right: parent.right |
412 | } |
413 | - width: (column == (columns - 1)) || !pageWrapper ? 0 : units.dp(2) |
414 | + width: (column == (d.columns - 1)) || !pageWrapper ? 0 : units.dp(2) |
415 | color: theme.palette.normal.background |
416 | } |
417 | |
418 | @@ -491,11 +421,11 @@ |
419 | } |
420 | |
421 | function attachPage(page) { |
422 | - if (!page) return; |
423 | pageWrapper = page; |
424 | pageWrapper.parent = holderBody; |
425 | pageWrapper.pageHolder = holder; |
426 | pageWrapper.active = true; |
427 | + |
428 | if (pageWrapper.object.hasOwnProperty("head")) { |
429 | header.config = pageWrapper.object.head; |
430 | } |
431 | @@ -553,9 +483,9 @@ |
432 | var holder = children[i]; |
433 | // search for the column metrics |
434 | var metrics = null; |
435 | - for (var j = 0; j < columnMetrics.length; j++) { |
436 | - if (columnMetrics[j].column == (i + 1)) { |
437 | - metrics = columnMetrics[j]; |
438 | + for (var j = 0; j < d.columnMetrics.length; j++) { |
439 | + if (d.columnMetrics[j].column == (i + 1)) { |
440 | + metrics = d.columnMetrics[j]; |
441 | break; |
442 | } |
443 | } |
444 | |
445 | === modified file 'modules/Ubuntu/Components/qmldir' |
446 | --- modules/Ubuntu/Components/qmldir 2015-06-17 09:32:02 +0000 |
447 | +++ modules/Ubuntu/Components/qmldir 2015-06-24 16:16:33 +0000 |
448 | @@ -141,4 +141,3 @@ |
449 | UbuntuListView 1.3 1.3/UbuntuListView11.qml |
450 | Captions 1.3 1.3/Captions.qml |
451 | MultiColumnView 1.3 1.3/MultiColumnView.qml |
452 | -ColumnMetrics 1.3 1.3/ColumnMetrics.qml |
453 | |
454 | === modified file 'tests/unit_x11/tst_components/tst_multicolumnview.qml' |
455 | --- tests/unit_x11/tst_components/tst_multicolumnview.qml 2015-06-17 14:22:56 +0000 |
456 | +++ tests/unit_x11/tst_components/tst_multicolumnview.qml 2015-06-24 16:16:33 +0000 |
457 | @@ -29,7 +29,6 @@ |
458 | width: parent.width |
459 | height: parent.height |
460 | |
461 | - columns: width > units.gu(100) ? 3 : (width > units.gu(80) ? 2 : 1) |
462 | primaryPage: page1 |
463 | |
464 | Page { |
465 | @@ -68,10 +67,7 @@ |
466 | } |
467 | |
468 | function test_0_API() { |
469 | - compare(defaults.columns, 1, "wrong columns"); |
470 | - compare(defaults.defaultColumnWidth, units.gu(40), "wrong defaultColumnWidth"); |
471 | - compare(defaults.columnMetrics.length, 0, "wrong columnMetrics list"); |
472 | - compare(defaults.primaryPage, undefined, "wrong primaryPage"); |
473 | + compare(defaults.primaryPage, undefined, "primaryPage not undefined by default"); |
474 | } |
475 | |
476 | function test_add_to_first_column_data() { |
477 | @@ -114,11 +110,6 @@ |
478 | verify(secondColumn.pageWrapper); |
479 | } |
480 | |
481 | - function test_invalid_column() { |
482 | - ignoreWarning("There must me a minimum of one column set."); |
483 | - defaults.columns = 0; |
484 | - } |
485 | - |
486 | function test_change_primaryPage() { |
487 | ignoreWarning("Cannot change primaryPage after completion."); |
488 | testView.primaryPage = page3; |
28 === modified file 'modules/ Ubuntu/ Components/ 1.3/ColumnMetri cs.qml'
Docs should be marked \internal