on xenial help sign in
Fix FilterGrid rendering issues.
52119c1Michał Karnicki
qml/Components/FilterGrid.qml+6−8
@@ -35,19 +35,17 @@ Item {
35
35
36 /* Whether, when collapsed, a button should be displayed enabling the user to expand
36 /* Whether, when collapsed, a button should be displayed enabling the user to expand
37 the grid to its full size. */
37 the grid to its full size. */
38− readonly property bool expandable: model.count > collapsedRowCount * iconTileGrid.columns
38+ readonly property bool expandable: model.count > rowsWhenCollapsed * iconTileGrid.columns
39
39
40 property var model: null
40 property var model: null
41
41
42 /* Maximum number of rows to be show when filter=true. */
42 /* Maximum number of rows to be show when filter=true. */
43 property int collapsedRowCount: 2
43 property int collapsedRowCount: 2
44 property int uncollapsedRowCount: Math.ceil(model.count / columns)
44 property int uncollapsedRowCount: Math.ceil(model.count / columns)
45− readonly property int collapsedHeight: {
45+ /* Never show more rows than model would fill up. */
46− return iconTileGrid.contentHeightForRows(Math.min(collapsedRowCount, Math.ceil(model.count / columns)))
46+ readonly property int rowsWhenCollapsed: Math.min(collapsedRowCount, uncollapsedRowCount)
47− }
47+ readonly property int collapsedHeight: iconTileGrid.contentHeightForRows(rowsWhenCollapsed)
48− readonly property int uncollapsedHeight: {
49− return iconTileGrid.contentHeightForRows(uncollapsedRowCount)
48+ readonly property int uncollapsedHeight: iconTileGrid.contentHeightForRows(uncollapsedRowCount)
50− }
51
49
52 property alias minimumHorizontalSpacing: iconTileGrid.minimumHorizontalSpacing
50 property alias minimumHorizontalSpacing: iconTileGrid.minimumHorizontalSpacing
53 property alias maximumNumberOfColumns: iconTileGrid.maximumNumberOfColumns
51 property alias maximumNumberOfColumns: iconTileGrid.maximumNumberOfColumns
@@ -106,7 +104,7 @@ Item {
106
104
107 model: LimitProxyModel {
105 model: LimitProxyModel {
108 model: root.model
106 model: root.model
109− limit: (filter && !filterAnimation.running) ? collapsedRowCount * iconTileGrid.columns : -1
107+ limit: (filter && !filterAnimation.running) ? rowsWhenCollapsed * iconTileGrid.columns : -1
110 }
108 }
111 }
109 }
112}
110}
tests/qmltests/Components/tst_FilterGrid.qml+44−5
@@ -20,6 +20,7 @@ import "../../../qml/Components"
20import Ubuntu.Components.ListItems 0.1 as ListItem
20import Ubuntu.Components.ListItems 0.1 as ListItem
21import Ubuntu.Components 0.1
21import Ubuntu.Components 0.1
22import Unity.Test 0.1 as UT
22import Unity.Test 0.1 as UT
23+import Utils 0.1
23
24
24/*
25/*
25 You should see 6 green squares (from "A" to "F") and a button "View all (12)".
26 You should see 6 green squares (from "A" to "F") and a button "View all (12)".
@@ -69,6 +70,20 @@ Rectangle {
69 ListElement { name: "L" }
70 ListElement { name: "L" }
70 }
71 }
71
72
73+ ListModel {
74+ id: fakeModelTwoItems
75+ ListElement { name: "A" }
76+ ListElement { name: "B" }
77+ }
78+
79+ ListModel {
80+ id: fakeModelFourItems
81+ ListElement { name: "A" }
82+ ListElement { name: "B" }
83+ ListElement { name: "C" }
84+ ListElement { name: "D" }
85+ }
86+
72 Rectangle {
87 Rectangle {
73 id: gridRect
88 id: gridRect
74 width: units.gu(30)
89 width: units.gu(30)
@@ -109,15 +124,21 @@ Rectangle {
109 name: "FilterGrid"
124 name: "FilterGrid"
110 when: windowShown
125 when: windowShown
111
126
127+ function init() {
128+ filterGrid.model = fakeModel
129+ }
130+
131+ function cleanup() {
132+ filterCheckBox.checked = true
133+ collapsedRowCountSelector.selectedIndex = 1
134+ }
135+
112 function test_turningFilterOffShowsAllElements() {
136 function test_turningFilterOffShowsAllElements() {
113 tryCompareFunction(countVisibleDelegates, 6)
137 tryCompareFunction(countVisibleDelegates, 6)
114
138
115 filterCheckBox.checked = false
139 filterCheckBox.checked = false
116
140
117 tryCompareFunction(countVisibleDelegates, 12)
141 tryCompareFunction(countVisibleDelegates, 12)
118−
119− // back to initial state
120− filterCheckBox.checked = true
121 }
142 }
122
143
123 function test_collapsedRowCount() {
144 function test_collapsedRowCount() {
@@ -127,9 +148,27 @@ Rectangle {
127 // row count == index + 1
148 // row count == index + 1
128 tryCompareFunction(countVisibleDelegates, 3*(i+1))
149 tryCompareFunction(countVisibleDelegates, 3*(i+1))
129 }
150 }
151+ }
130
152
131− // back to initial state
153+ function test_modelSizeAffectsCollapsedRowCount_data() {
154+ return [
155+ { tag: "2 items, collapsedRows 1", model: fakeModelTwoItems, collapsedRowCountIndex: 0,
156+ rowsWhenCollapsed: 1, visibleDelegates: 2 },
157+ { tag: "2 items, collapsedRows 2", model: fakeModelTwoItems, collapsedRowCountIndex: 1,
158+ rowsWhenCollapsed: 1, visibleDelegates: 2 },
159+ { tag: "4 items, collapsedRows 1", model: fakeModelFourItems, collapsedRowCountIndex: 0,
160+ rowsWhenCollapsed: 1, visibleDelegates: 3 },
161+ { tag: "4 items, collapsedRows 2", model: fakeModelFourItems, collapsedRowCountIndex: 1,
162+ rowsWhenCollapsed: 2, visibleDelegates: 4 },
163+ ]
164+ }
165+
166+ function test_modelSizeAffectsCollapsedRowCount(data) {
167+ filterGrid.model = data.model
132− collapsedRowCountSelector.selectedIndex = 1
168+ collapsedRowCountSelector.selectedIndex = data.collapsedRowCountIndex
169+
170+ tryCompare(filterGrid, "rowsWhenCollapsed", data.rowsWhenCollapsed)
171+ tryCompareFunction(countVisibleDelegates, data.visibleDelegates)
133 }
172 }
134
173
135 function countVisibleDelegates() {
174 function countVisibleDelegates() {