Ubuntu UI Toolkit

Merge lp:~tpeeters/ubuntu-ui-toolkit/10-subheader into lp:ubuntu-ui-toolkit/staging

  1. 10-subheader
  2. Merge into staging
Proposed by Tim Peeters on 2015-11-26
Status: Merged
Approved by: Christian Dywan on 2015-11-30
Approved revision: 1736
Merged at revision: 1730
Proposed branch: lp:~tpeeters/ubuntu-ui-toolkit/10-subheader
Merge into: lp:ubuntu-ui-toolkit/staging
Diff against target: 256 lines (+128/-15)
5 files modified
components.api (+1/-0)
src/Ubuntu/Components/1.3/PageHeader.qml (+66/-13)
src/Ubuntu/Components/Styles/1.3/PageHeaderStyle.qml (+1/-1)
src/Ubuntu/Components/Themes/Ambiance/1.3/PageHeaderStyle.qml (+8/-1)
tests/unit_x11/tst_components/tst_pageheader.qml (+52/-0)
To merge this branch: bzr merge lp:~tpeeters/ubuntu-ui-toolkit/10-subheader
Reviewer Review Type Date Requested Status
PS Jenkins bot continuous-integration Approve on 2015-11-27
Christian Dywan 2015-11-26 Approve on 2015-11-27
Review via email: mp+278713@code.launchpad.net

Commit Message

Add extension property to PageHeader.

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)
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)
Christian Dywan (kalikiana) wrote :

Very nice. Thanks for adding the additional tests for the sections.

review: Approve
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)
PS Jenkins bot (ps-jenkins) wrote :
review: Approve (continuous-integration)

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-11-20 07:47:08 +0000
3+++ components.api 2015-11-27 15:50:01 +0000
4@@ -738,6 +738,7 @@
5 property int textSize
6 Ubuntu.Components.PageHeader 1.3: Header
7 property Item contents
8+ property Item extension
9 readonly property ActionBar leadingActionBar
10 property list<Action> navigationActions
11 readonly property Sections sections
12
13=== modified file 'src/Ubuntu/Components/1.3/PageHeader.qml'
14--- src/Ubuntu/Components/1.3/PageHeader.qml 2015-10-23 16:05:00 +0000
15+++ src/Ubuntu/Components/1.3/PageHeader.qml 2015-11-27 15:50:01 +0000
16@@ -74,11 +74,11 @@
17 */
18 property Item contents
19
20- Component.onCompleted: holder.updateContents()
21- onContentsChanged: holder.updateContents()
22+ Component.onCompleted: contentsHolder.updateContents()
23+ onContentsChanged: contentsHolder.updateContents()
24
25 Item {
26- id: holder
27+ id: contentsHolder
28 anchors {
29 left: leading.right
30 right: trailing.left
31@@ -95,17 +95,17 @@
32 property Item previousContentsParent: null
33
34 function updateContents() {
35- if (holder.previousContents) {
36- holder.previousContents.parent = holder.previousContentsParent;
37+ if (previousContents) {
38+ previousContents.parent = previousContentsParent;
39 }
40- if (contents) {
41+ if (header.contents) {
42 titleLoader.sourceComponent = null;
43- holder.previousContents = header.contents;
44- holder.previousContentsParent = header.contents.parent;
45- header.contents.parent = holder;
46+ previousContents = header.contents;
47+ previousContentsParent = header.contents.parent;
48+ header.contents.parent = contentsHolder;
49 } else {
50- holder.previousContents = null;
51- holder.previousContentsParent = null;
52+ previousContents = null;
53+ previousContentsParent = null;
54 titleLoader.sourceComponent = __styleInstance.titleComponent;
55 }
56 }
57@@ -206,10 +206,63 @@
58 }
59
60 /*!
61+ Item shown at the bottom of the header.
62+ The extension can be any Item, but it must have a height so that
63+ the PageHeader correctly adjusts its height for the extension to fit.
64+ The extension Item should anchor to the left, right and bottom of
65+ its parent so that it will be automatically positioned above the
66+ header divider. This property replaces the sections property. Sections
67+ can now be added to the header as follows:
68+ \qml
69+ PageHeader {
70+ title: "Header with sections"
71+ extension: Sections {
72+ anchors {
73+ left: parent.left
74+ leftMargin: units.gu(2)
75+ bottom: parent.bottom
76+ }
77+ model: ["one", "two", "three"]
78+ }
79+ }
80+ \endqml
81+ */
82+ property Item extension
83+
84+ onExtensionChanged: extensionHolder.updateExtension()
85+ Item {
86+ id: extensionHolder
87+ anchors {
88+ left: parent.left
89+ right: parent.right
90+ top: contentsHolder.bottom
91+ }
92+ height: header.extension ? header.extension.height : 0
93+
94+ property Item previousExtension: header.extension
95+ property Item previousExtensionParent: null
96+
97+ function updateExtension() {
98+ if (previousExtension) {
99+ previousExtension.parent = previousExtensionParent;
100+ }
101+ if (header.extension) {
102+ previousExtension = header.extension;
103+ previousExtensionParent = header.extension.parent;
104+ header.extension.parent = extensionHolder;
105+ } else {
106+ previousExtension = null;
107+ previousExtensionParent = null;
108+ }
109+ }
110+ }
111+
112+ /*!
113 \qmlproperty Sections sections
114 Sections shown at the bottom of the header. By default,
115 the sections will only be visible if its actions or model
116 is set. See \l Sections.
117+ \deprecated Use \l extension instead.
118 */
119 readonly property alias sections: sectionsItem
120 Sections {
121@@ -217,9 +270,9 @@
122 anchors {
123 left: parent.left
124 leftMargin: units.gu(2)
125- top: holder.bottom
126+ top: contentsHolder.bottom
127 }
128- visible: model && model.length > 0
129+ visible: model && model.length > 0 && !header.extension
130 height: visible ? implicitHeight : 0
131 }
132
133
134=== modified file 'src/Ubuntu/Components/Styles/1.3/PageHeaderStyle.qml'
135--- src/Ubuntu/Components/Styles/1.3/PageHeaderStyle.qml 2015-10-10 13:02:00 +0000
136+++ src/Ubuntu/Components/Styles/1.3/PageHeaderStyle.qml 2015-11-27 15:50:01 +0000
137@@ -51,7 +51,7 @@
138 property Component titleComponent
139
140 /*!
141- The height of the header excluding the divider and sections.
142+ The height of the header excluding the divider and extension.
143 */
144 property real contentHeight
145 }
146
147=== modified file 'src/Ubuntu/Components/Themes/Ambiance/1.3/PageHeaderStyle.qml'
148--- src/Ubuntu/Components/Themes/Ambiance/1.3/PageHeaderStyle.qml 2015-10-23 14:56:28 +0000
149+++ src/Ubuntu/Components/Themes/Ambiance/1.3/PageHeaderStyle.qml 2015-11-27 15:50:01 +0000
150@@ -27,7 +27,14 @@
151 property int textSize: Label.Large
152
153 contentHeight: units.gu(6)
154- implicitHeight: contentHeight + divider.height + styledItem.sections.height
155+ implicitHeight: contentHeight + divider.height + internal.extensionHeight
156+
157+ Object {
158+ id: internal
159+ property real extensionHeight: styledItem.extension ?
160+ styledItem.extension.height
161+ : styledItem.sections.height
162+ }
163
164 defaultActionDelegate: AbstractButton {
165 style: IconButtonStyle { }
166
167=== modified file 'tests/unit_x11/tst_components/tst_pageheader.qml'
168--- tests/unit_x11/tst_components/tst_pageheader.qml 2015-10-22 13:26:51 +0000
169+++ tests/unit_x11/tst_components/tst_pageheader.qml 2015-11-27 15:50:01 +0000
170@@ -77,6 +77,23 @@
171 }
172 ]
173
174+ Rectangle {
175+ id: appendix
176+ anchors {
177+ left: parent ? parent.left : undefined
178+ right: parent ? parent.right : undefined
179+ bottom: parent ? parent.bottom : undefined
180+ }
181+ height: units.gu(4)
182+ color: UbuntuColors.orange
183+ Label {
184+ anchors.centerIn: parent
185+ text: "Mock extension"
186+ color: "white"
187+ }
188+ visible: header.extension === appendix
189+ }
190+
191 PageHeader {
192 id: header
193 flickable: flickable
194@@ -89,6 +106,7 @@
195 root.actionList : []
196 navigationActions: leadingActionsSwitch.checked ?
197 root.actionList : []
198+ extension: extensionSwitch.checked ? appendix : null
199 }
200
201 Flickable {
202@@ -169,6 +187,14 @@
203 Label {
204 text: "show sections"
205 }
206+
207+ Switch {
208+ id: extensionSwitch
209+ checked: false
210+ }
211+ Label {
212+ text: "extension"
213+ }
214 }
215
216 PageHeader {
217@@ -239,6 +265,15 @@
218 sections.actions = [];
219 compare(header.height, initialHeight,
220 "Unsetting sections does not revert the header height.");
221+
222+ header.extension = appendix;
223+ compare(appendix.height > 0, true, "Extension height is 0.");
224+ compare(header.height, initialHeight + appendix.height,
225+ "Setting extension does not correctly update header height.");
226+
227+ header.extension = null;
228+ compare(header.height, initialHeight,
229+ "Unsetting extension does not revert the header height.");
230 }
231
232 function test_background_color() {
233@@ -362,6 +397,23 @@
234 "Reverting leading actions changes navigationActions.");
235 }
236
237+ function test_sections_visible() {
238+ compare(header.sections.visible, false,
239+ "Sections is not hidden by default.");
240+ header.sections.actions = root.sectionActions;
241+ compare(header.sections.visible, true,
242+ "Sections is not made visible by setting actions.");
243+ header.extension = appendix;
244+ compare(header.sections.visible, false,
245+ "Sections are not hidden when extension is set.");
246+ header.extension = null;
247+ compare(header.sections.visible, true,
248+ "Sections are not shown when extension is unset.");
249+ header.sections.actions = [];
250+ compare(header.sections.visible, false,
251+ "Sections is not hidden by clearing the actions.");
252+ }
253+
254 // The properties of header.sections, header.leadingActionBar and
255 // header.trailingActionBar are tested in tst_sections.qml and tst_actionbar.qml.
256 }

Subscribers

People subscribed via source and target branches