on xenial help sign in
adjust DashPreview to have 3 columns and the sections required by design

also adjusted tst_DashPreview to reflect the design

commit526899bd219b8a9ff23d94c734e5dab49422192a authorMichael Zanetti <michael.zanetti@canonical.com> dateMon 30 Sep 2013, 16:24 (13 years ago) parentf2ee9e5
2 files changed+154−76
Dash/DashPreview.qml+88−57 tests/qmltests/Dash/tst_DashPreview.qml+66−19
Dash/DashPreview.qml+88−57
@@ -25,12 +25,14 @@ Rectangle {
2525
2626 property real previewWidthRatio: 0.5
2727
28+ property Component previewImages
2829 property Component header
29− property Component title
30− property Component buttons
31− property Component body
30+ property Component actions
31+ property Component description
32+ property Component ratings
3233
3334 readonly property bool narrowMode: width <= height
35+ readonly property int columnWidth: narrowMode ? contentRow.width : (contentRow.width / 3) - contentRow.spacing
3436 readonly property int contentSpacing: units.gu(3)
3537
3638 signal close()
@@ -61,93 +63,78 @@ Rectangle {
6163 anchors.fill: parent
6264 }
6365
64− Item {
65− id: headerIcon
66− height: childrenRect.height
67− anchors {
68− left: parent.left
69− right: parent.right
70− top: parent.top
71− leftMargin: root.contentSpacing
72− topMargin: root.contentSpacing
73− rightMargin: root.contentSpacing
74− }
75− Loader {
76− id: headerLoader
77− anchors.left: parent.left
78− anchors.right: parent.right
79− sourceComponent: root.header
80− }
81− }
82−
83− Item {
84− id: headerRow
85− height: childrenRect.height
86− anchors {
87− top: headerIcon.bottom
88− left: parent.left
89− right: parent.right
90− leftMargin: root.contentSpacing
91− rightMargin: root.contentSpacing
92− }
93− Loader {
94− id: titleLoader
95− anchors.left: parent.left
96− anchors.right: parent.right
97− sourceComponent: root.title
98− }
99− }
10066
10167 Row {
10268 id: contentRow
10369 anchors {
10470 left: parent.left
71+ top: parent.top
10572 right: parent.right
106− top: headerRow.bottom
10773 bottom: parent.bottom
10874 topMargin: root.contentSpacing
10975 leftMargin: root.contentSpacing
11076 rightMargin: root.contentSpacing
11177 }
78+ height: childrenRect.height
11279
11380 spacing: units.gu(2)
11481
82+
11583 Flickable {
11684 id: leftFlickable
11785 objectName: "leftFlickable"
118− anchors.top: parent.top
119− anchors.bottom: parent.bottom
120− width: root.narrowMode ? contentRow.width : contentRow.width * root.previewWidthRatio
86+ anchors {
87+ top: parent.top
88+ bottom: parent.bottom
89+ }
90+ width: root.columnWidth
12191 contentHeight: leftColumn.height
12292 anchors.bottomMargin: root.keyboardSize
123− clip: true
93+ //clip: true
12494
12595 Behavior on contentY { NumberAnimation { duration: 300 } }
12696
12797 Column {
12898 id: leftColumn
12999 objectName: "leftColumn"
100+ height: childrenRect.height
101+ spacing: root.contentSpacing
130102 anchors {
131103 left: parent.left
132104 right: parent.right
133105 }
134− height: childrenRect.height
135− spacing: units.gu(1)
106+ }
107+ }
136108
137− Loader {
138− id: buttonLoader
139− anchors.left: parent.left
140− anchors.right: parent.right
141− sourceComponent: root.buttons
109+ Flickable {
110+ id: centerFlickable
111+ anchors {
112+ top: parent.top
113+ bottom: parent.bottom
114+ }
115+ width: root.columnWidth
116+ contentHeight: centerColumn.height
117+ clip: true
118+
119+ Column {
120+ id: centerColumn
121+ objectName: "centerColumn"
122+ height: childrenRect.height
123+ anchors {
124+ left: parent.left
125+ right: parent.right
142126 }
127+ spacing: root.contentSpacing
143128 }
144129 }
145130
146131 Flickable {
147132 id: rightFlickable
148− anchors.top: parent.top
149− anchors.bottom: parent.bottom
150− width: narrowMode ? 0 : (contentRow.width - leftColumn.width - contentRow.spacing)
133+ anchors {
134+ top: parent.top
135+ bottom: parent.bottom
136+ }
137+ width: root.columnWidth
151138 contentHeight: rightColumn.height
152139 clip: true
153140
@@ -164,9 +151,53 @@ Rectangle {
164151 }
165152
166153 Loader {
154+ id: previewImageLoader
155+ parent: leftColumn
156+ sourceComponent: root.previewImages
157+ anchors {
158+ left: parent.left
159+ right: parent.right
160+ }
161+ height: childrenRect.height
162+ }
163+
164+ Loader {
165+ id: ratingsLoader
167166 parent: root.narrowMode ? leftColumn : rightColumn
168− anchors.left: parent.left
169− anchors.right: parent.right
170− sourceComponent: root.body
167+ anchors {
168+ left: parent.left
169+ right: parent.right
170+ }
171+ sourceComponent: root.ratings
172+ }
173+
174+ Loader {
175+ id: descriptionLoader
176+ parent: root.narrowMode ? leftColumn : centerColumn
177+ anchors {
178+ left: parent.left
179+ right: parent.right
180+ }
181+ sourceComponent: root.description
182+ }
183+
184+ Loader {
185+ id: actionsLoader
186+ parent: root.narrowMode ? leftColumn : centerColumn
187+ anchors {
188+ left: parent.left
189+ right: parent.right
190+ }
191+ sourceComponent: root.actions
192+ }
193+
194+ Loader {
195+ id: headerLoader
196+ parent: root.narrowMode ? leftColumn : centerColumn
197+ anchors {
198+ left: parent.left
199+ right: parent.right
200+ }
201+ sourceComponent: root.header
171202 }
172203}
tests/qmltests/Dash/tst_DashPreview.qml+66−19
@@ -31,15 +31,38 @@ Item {
3131 DashPreview {
3232 id: preview
3333 anchors.fill: parent
34− title: "Testing rocks, debugging sucks!"
3534
36− buttons: Row {
35+ previewImages: Rectangle {
36+ width: parent.width
37+ height: units.gu(20)
38+ color: "honeydew"
39+ Label {
40+ anchors.centerIn: parent
41+ text: "Preview images"
42+ }
43+ }
44+
45+ header: Rectangle {
46+ width: parent.width
47+ height: units.gu(10)
48+ color: "papayawhip"
49+ Label {
50+ anchors.centerIn: parent
51+ text: "Caption label"
52+ }
53+ }
54+
55+ actions: Row {
3756 width: parent.width
3857 height: units.gu(5)
3958 Rectangle {
4059 width: parent.width / 3
4160 height: parent.height
4261 color: "blue"
62+ Label {
63+ anchors.centerIn: parent
64+ text: "Button 1"
65+ }
4366 MouseArea {
4467 id: buttonMouseArea
4568 objectName: "buttonMouseArea"
@@ -51,12 +74,15 @@ Item {
5174 width: parent.width / 3
5275 height: parent.height
5376 color: "green"
77+ Label {
78+ anchors.centerIn: parent
79+ text: "Button 2"
80+ }
81+
5482 }
5583 }
5684
57− header: Label { text: "Caption label" }
58−
59− body: Column {
85+ description: Column {
6086 id: testContent
6187 objectName: "testContent"
6288 width: parent.width
@@ -65,16 +91,38 @@ Item {
6591 width: parent.width
6692 height: parent.height / 3
6793 color: "green"
94+ Label {
95+ anchors.centerIn: parent
96+ text: "Description part 1"
97+ }
6898 }
6999 Rectangle {
70100 width: parent.width
71101 height: parent.height / 3
72102 color: "red"
103+ Label {
104+ anchors.centerIn: parent
105+ text: "Description part 2"
106+ }
73107 }
74108 Rectangle {
75109 width: parent.width
76110 height: parent.height / 3
77111 color: "blue"
112+ Label {
113+ anchors.centerIn: parent
114+ text: "Description part 3"
115+ }
116+ }
117+ }
118+
119+ ratings: Rectangle {
120+ objectName: "ratings"
121+ width: parent.width
122+ height: units.gu(20)
123+ Label {
124+ anchors.centerIn: parent
125+ text: "Ratings"
78126 }
79127 }
80128 }
@@ -95,42 +143,41 @@ Item {
95143 name: "DashPreview"
96144 when: windowShown
97145
98− function test_close() {
99− var title = findChild(preview, "titleLabel")
100− mouseClick(title, 1, 1)
101− compare(closeSpy.count, 1, "Close signal not emitted")
102− }
103−
104146 function test_columns_data() {
105147 return [
106148 {tag: "1 columns", width: units.gu(5), height: units.gu(10), columns: 1},
107− {tag: "2 columns", width: units.gu(50), height: units.gu(10), columns: 2}
149+ {tag: "3 columns", width: units.gu(50), height: units.gu(10), columns: 3}
108150 ]
109151 }
110152
111153 function test_columns(data) {
112154 var leftCol = findChild(preview, "leftColumn")
155+ var centerCol = findChild(preview, "centerColumn")
113156 var rightCol = findChild(preview, "rightColumn")
114157
115158 root.width = data.width
116159 root.height = data.height
117160
118− // there are 2 columns in DashPreview. On portrait form factors
119− // only the left one is used and the right one should be empty.
120− // to find out if the content is in the correct column, we get a
161+ // there are 3 columns in DashPreview. On portrait form factors
162+ // only the left one is used and the center and right ones should be empty.
163+ // To find out if the content is in the correct column, we get a
121164 // reference to the column objects and search only the subtree
122165 // to see if the content is in the correct column.
123− // 1 colum -> content should be in leftColumn
124− // 2 colums -> content should be in rightColumn
166+ // 1 colum -> all content should be in leftColumn
167+ // 3 colums -> content should be in centerColumn, rating in rightColumn
125168
126169 switch(data.columns) {
127170 case 1:
128171 var testContent = findChild(leftCol, "testContent")
129172 compare(testContent.objectName, "testContent")
173+ testContent = findChild(leftCol, "ratings")
174+ compare(testContent.objectName, "ratings")
130175 break
131− case 2:
132− var testContent = findChild(rightCol, "testContent")
176+ case 3:
177+ var testContent = findChild(centerCol, "testContent")
133178 compare(testContent.objectName, "testContent")
179+ testContent = findChild(rightCol, "ratings")
180+ compare(testContent.objectName, "ratings")
134181 break
135182 }
136183