git.iko.soy/unity8
on xenial help sign in
adjust DashPreview to have 3 columns and the sections required by design
526899bMichael Zanetti
Dash/DashPreview.qml+88−57
compare with xenial
unifiedsplit
@@ -25,12 +25,14 @@ Rectangle {
25
25
26 property real previewWidthRatio: 0.5
26 property real previewWidthRatio: 0.5
27
27
28+ property Component previewImages
28 property Component header
29 property Component header
29− property Component title
30+ property Component actions
30− property Component buttons
31+ property Component description
31− property Component body
32+ property Component ratings
32
33
33 readonly property bool narrowMode: width <= height
34 readonly property bool narrowMode: width <= height
35+ readonly property int columnWidth: narrowMode ? contentRow.width : (contentRow.width / 3) - contentRow.spacing
34 readonly property int contentSpacing: units.gu(3)
36 readonly property int contentSpacing: units.gu(3)
35
37
36 signal close()
38 signal close()
@@ -61,93 +63,78 @@ Rectangle {
61 anchors.fill: parent
63 anchors.fill: parent
62 }
64 }
63
65
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− }
100
66
101 Row {
67 Row {
102 id: contentRow
68 id: contentRow
103 anchors {
69 anchors {
104 left: parent.left
70 left: parent.left
71+ top: parent.top
105 right: parent.right
72 right: parent.right
106− top: headerRow.bottom
107 bottom: parent.bottom
73 bottom: parent.bottom
108 topMargin: root.contentSpacing
74 topMargin: root.contentSpacing
109 leftMargin: root.contentSpacing
75 leftMargin: root.contentSpacing
110 rightMargin: root.contentSpacing
76 rightMargin: root.contentSpacing
111 }
77 }
78+ height: childrenRect.height
112
79
113 spacing: units.gu(2)
80 spacing: units.gu(2)
114
81
82+
115 Flickable {
83 Flickable {
116 id: leftFlickable
84 id: leftFlickable
117 objectName: "leftFlickable"
85 objectName: "leftFlickable"
86+ anchors {
118− anchors.top: parent.top
87+ top: parent.top
119− anchors.bottom: parent.bottom
88+ bottom: parent.bottom
120− width: root.narrowMode ? contentRow.width : contentRow.width * root.previewWidthRatio
89+ }
90+ width: root.columnWidth
121 contentHeight: leftColumn.height
91 contentHeight: leftColumn.height
122 anchors.bottomMargin: root.keyboardSize
92 anchors.bottomMargin: root.keyboardSize
123− clip: true
93+ //clip: true
124
94
125 Behavior on contentY { NumberAnimation { duration: 300 } }
95 Behavior on contentY { NumberAnimation { duration: 300 } }
126
96
127 Column {
97 Column {
128 id: leftColumn
98 id: leftColumn
129 objectName: "leftColumn"
99 objectName: "leftColumn"
100+ height: childrenRect.height
101+ spacing: root.contentSpacing
130 anchors {
102 anchors {
131 left: parent.left
103 left: parent.left
132 right: parent.right
104 right: parent.right
133 }
105 }
134− height: childrenRect.height
106+ }
135− spacing: units.gu(1)
107+ }
136
108
137− Loader {
109+ Flickable {
138− id: buttonLoader
110+ id: centerFlickable
139− anchors.left: parent.left
111+ anchors {
140− anchors.right: parent.right
112+ top: parent.top
141− sourceComponent: root.buttons
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
142 }
126 }
127+ spacing: root.contentSpacing
143 }
128 }
144 }
129 }
145
130
146 Flickable {
131 Flickable {
147 id: rightFlickable
132 id: rightFlickable
133+ anchors {
148− anchors.top: parent.top
134+ top: parent.top
149− anchors.bottom: parent.bottom
135+ bottom: parent.bottom
150− width: narrowMode ? 0 : (contentRow.width - leftColumn.width - contentRow.spacing)
136+ }
137+ width: root.columnWidth
151 contentHeight: rightColumn.height
138 contentHeight: rightColumn.height
152 clip: true
139 clip: true
153
140
@@ -164,9 +151,53 @@ Rectangle {
164 }
151 }
165
152
166 Loader {
153 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
167 parent: root.narrowMode ? leftColumn : rightColumn
166 parent: root.narrowMode ? leftColumn : rightColumn
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 {
168− anchors.left: parent.left
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
169− anchors.right: parent.right
189+ right: parent.right
190+ }
170− sourceComponent: root.body
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
171 }
202 }
172}
203}
tests/qmltests/Dash/tst_DashPreview.qml+66−19
@@ -31,15 +31,38 @@ Item {
31 DashPreview {
31 DashPreview {
32 id: preview
32 id: preview
33 anchors.fill: parent
33 anchors.fill: parent
34− title: "Testing rocks, debugging sucks!"
35
34
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 {
37 width: parent.width
56 width: parent.width
38 height: units.gu(5)
57 height: units.gu(5)
39 Rectangle {
58 Rectangle {
40 width: parent.width / 3
59 width: parent.width / 3
41 height: parent.height
60 height: parent.height
42 color: "blue"
61 color: "blue"
62+ Label {
63+ anchors.centerIn: parent
64+ text: "Button 1"
65+ }
43 MouseArea {
66 MouseArea {
44 id: buttonMouseArea
67 id: buttonMouseArea
45 objectName: "buttonMouseArea"
68 objectName: "buttonMouseArea"
@@ -51,12 +74,15 @@ Item {
51 width: parent.width / 3
74 width: parent.width / 3
52 height: parent.height
75 height: parent.height
53 color: "green"
76 color: "green"
77+ Label {
78+ anchors.centerIn: parent
79+ text: "Button 2"
80+ }
81+
54 }
82 }
55 }
83 }
56
84
57− header: Label { text: "Caption label" }
58−
59− body: Column {
85+ description: Column {
60 id: testContent
86 id: testContent
61 objectName: "testContent"
87 objectName: "testContent"
62 width: parent.width
88 width: parent.width
@@ -65,16 +91,38 @@ Item {
65 width: parent.width
91 width: parent.width
66 height: parent.height / 3
92 height: parent.height / 3
67 color: "green"
93 color: "green"
94+ Label {
95+ anchors.centerIn: parent
96+ text: "Description part 1"
97+ }
68 }
98 }
69 Rectangle {
99 Rectangle {
70 width: parent.width
100 width: parent.width
71 height: parent.height / 3
101 height: parent.height / 3
72 color: "red"
102 color: "red"
103+ Label {
104+ anchors.centerIn: parent
105+ text: "Description part 2"
106+ }
73 }
107 }
74 Rectangle {
108 Rectangle {
75 width: parent.width
109 width: parent.width
76 height: parent.height / 3
110 height: parent.height / 3
77 color: "blue"
111 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"
78 }
126 }
79 }
127 }
80 }
128 }
@@ -95,42 +143,41 @@ Item {
95 name: "DashPreview"
143 name: "DashPreview"
96 when: windowShown
144 when: windowShown
97
145
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−
104 function test_columns_data() {
146 function test_columns_data() {
105 return [
147 return [
106 {tag: "1 columns", width: units.gu(5), height: units.gu(10), columns: 1},
148 {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}
108 ]
150 ]
109 }
151 }
110
152
111 function test_columns(data) {
153 function test_columns(data) {
112 var leftCol = findChild(preview, "leftColumn")
154 var leftCol = findChild(preview, "leftColumn")
155+ var centerCol = findChild(preview, "centerColumn")
113 var rightCol = findChild(preview, "rightColumn")
156 var rightCol = findChild(preview, "rightColumn")
114
157
115 root.width = data.width
158 root.width = data.width
116 root.height = data.height
159 root.height = data.height
117
160
118− // there are 2 columns in DashPreview. On portrait form factors
161+ // there are 3 columns in DashPreview. On portrait form factors
119− // only the left one is used and the right one should be empty.
162+ // only the left one is used and the center and right ones should be empty.
120− // to find out if the content is in the correct column, we get a
163+ // To find out if the content is in the correct column, we get a
121 // reference to the column objects and search only the subtree
164 // reference to the column objects and search only the subtree
122 // to see if the content is in the correct column.
165 // to see if the content is in the correct column.
123− // 1 colum -> content should be in leftColumn
166+ // 1 colum -> all content should be in leftColumn
124− // 2 colums -> content should be in rightColumn
167+ // 3 colums -> content should be in centerColumn, rating in rightColumn
125
168
126 switch(data.columns) {
169 switch(data.columns) {
127 case 1:
170 case 1:
128 var testContent = findChild(leftCol, "testContent")
171 var testContent = findChild(leftCol, "testContent")
129 compare(testContent.objectName, "testContent")
172 compare(testContent.objectName, "testContent")
173+ testContent = findChild(leftCol, "ratings")
174+ compare(testContent.objectName, "ratings")
130 break
175 break
131− case 2:
176+ case 3:
132− var testContent = findChild(rightCol, "testContent")
177+ var testContent = findChild(centerCol, "testContent")
133 compare(testContent.objectName, "testContent")
178 compare(testContent.objectName, "testContent")
179+ testContent = findChild(rightCol, "ratings")
180+ compare(testContent.objectName, "ratings")
134 break
181 break
135 }
182 }
136
183