1
=== modified file 'components.api'
2
--- components.api	2014-07-02 13:39:29 +0000
3
+++ components.api	2014-07-03 11:13:13 +0000
4
@@ -250,6 +250,12 @@
5
250
    property list<Action> actions
250
    property list<Action> actions
6
251
    property Action backAction
251
    property Action backAction
7
252
    property Item contents
252
    property Item contents
8
253
PageHeadState 1.1
9
254
State
10
255
    property PageHeadConfiguration head
11
256
    property list<Action> actions
12
257
    property Action backAction
13
258
    property Item contents
14
253
PageStack 0.1 1.0
259
PageStack 0.1 1.0
15
254
PageTreeNode
260
PageTreeNode
16
255
    property bool __showHeader
261
    property bool __showHeader
17
256
262
18
=== modified file 'modules/Ubuntu/Components/PageHeadConfiguration.qml'
19
--- modules/Ubuntu/Components/PageHeadConfiguration.qml	2014-06-30 17:49:31 +0000
20
+++ modules/Ubuntu/Components/PageHeadConfiguration.qml	2014-07-03 11:13:13 +0000
21
@@ -59,6 +59,9 @@
22
59
            }
59
            }
23
60
        }
60
        }
24
61
      \endqml
61
      \endqml
25
62
26
63
      See \l PageHeadState for an example that shows how search mode can
27
64
      be implemented.
28
62
     */
65
     */
29
63
    property Item contents: null
66
    property Item contents: null
30
64
}
67
}
31
65
68
32
=== added file 'modules/Ubuntu/Components/PageHeadState.qml'
33
--- modules/Ubuntu/Components/PageHeadState.qml	1970-01-01 00:00:00 +0000
34
+++ modules/Ubuntu/Components/PageHeadState.qml	2014-07-03 11:13:13 +0000
35
@@ -0,0 +1,113 @@
36
1
/*
37
2
 * Copyright 2014 Canonical Ltd.
38
3
 *
39
4
 * This program is free software; you can redistribute it and/or modify
40
5
 * it under the terms of the GNU Lesser General Public License as published by
41
6
 * the Free Software Foundation; version 3.
42
7
 *
43
8
 * This program is distributed in the hope that it will be useful,
44
9
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
45
10
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
46
11
 * GNU Lesser General Public License for more details.
47
12
 *
48
13
 * You should have received a copy of the GNU Lesser General Public License
49
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
50
15
 */
51
16
52
17
import QtQuick 2.2
53
18
54
19
/*!
55
20
    \qmltype PageHeadState
56
21
    \inqmlmodule Ubuntu.Components 1.1
57
22
    \ingroup ubuntu
58
23
    \since Ubuntu.Components 1.1
59
24
    \brief PageHeadState is a helper component to make it easier to
60
25
        configure the page header when changing states.
61
26
62
27
   This example shows how to add an action to the header that
63
28
   enables the user to enter search/input mode:
64
29
   \qml
65
30
        import QtQuick 2.2
66
31
        import Ubuntu.Components 1.1
67
32
68
33
        MainView {
69
34
            id: mainView
70
35
            width: units.gu(40)
71
36
            height: units.gu(50)
72
37
            useDeprecatedToolbar: false
73
38
74
39
            Page {
75
40
                id: searchPage
76
41
                title: "Click the icon"
77
42
78
43
                Label {
79
44
                    anchors.centerIn: parent
80
45
                    text: searchPage.state == "search" ? "search mode" : "normal mode"
81
46
                }
82
47
83
48
                state: "default"
84
49
                states: [
85
50
                    PageHeadState {
86
51
                        name: "default"
87
52
                        head: searchPage.head
88
53
                        actions: Action {
89
54
                            iconName: "search"
90
55
                            onTriggered: searchPage.state = "search"
91
56
                        }
92
57
                    },
93
58
                    PageHeadState {
94
59
                        id: headerState
95
60
                        name: "search"
96
61
                        head: searchPage.head
97
62
                        actions: [
98
63
                            Action {
99
64
                                iconName: "contact"
100
65
                            }
101
66
                        ]
102
67
                        backAction: Action {
103
68
                            id: leaveSearchAction
104
69
                            text: "back"
105
70
                            iconName: "back"
106
71
                            onTriggered: searchPage.state = "default"
107
72
                        }
108
73
                        contents: TextField {
109
74
                            placeholderText: "search..."
110
75
                        }
111
76
                    }
112
77
                ]
113
78
            }
114
79
        }
115
80
   \endqml
116
81
 */
117
82
State {
118
83
    id: state
119
84
120
85
    /*!
121
86
      The head property of the \l Page which will be the target of
122
87
      the property changes of this State. This property must always
123
88
      be set before the State can be used.
124
89
     */
125
90
    property PageHeadConfiguration head
126
91
127
92
    /*!
128
93
      The actions to be shown in the header with this state.
129
94
     */
130
95
    property list<Action> actions
131
96
132
97
    /*!
133
98
      The back action for this state.
134
99
     */
135
100
    property Action backAction
136
101
137
102
    /*!
138
103
      The contents of the header when this state is active.
139
104
     */
140
105
    property Item contents
141
106
142
107
    PropertyChanges {
143
108
        target: state.head
144
109
        backAction: state.backAction
145
110
        actions: state.actions
146
111
        contents: state.contents
147
112
    }
148
113
}
149
0
114
150
=== modified file 'modules/Ubuntu/Components/qmldir'
151
--- modules/Ubuntu/Components/qmldir	2014-07-02 13:39:29 +0000
152
+++ modules/Ubuntu/Components/qmldir	2014-07-03 11:13:13 +0000
153
@@ -99,3 +99,4 @@
154
99
internal PageBase Page10.qml
99
internal PageBase Page10.qml
155
100
Page 1.1 Page11.qml
100
Page 1.1 Page11.qml
156
101
PageHeadConfiguration 1.1 PageHeadConfiguration.qml
101
PageHeadConfiguration 1.1 PageHeadConfiguration.qml
157
102
PageHeadState 1.1 PageHeadState.qml
158
102
103
159
=== modified file 'tests/resources/toolbar/header.qml'
160
--- tests/resources/toolbar/header.qml	2014-06-30 12:09:25 +0000
161
+++ tests/resources/toolbar/header.qml	2014-07-03 11:13:13 +0000
162
@@ -145,49 +145,35 @@
163
145
                        text: searchPage.state == "search" ? "search mode" : "normal mode"
145
                        text: searchPage.state == "search" ? "search mode" : "normal mode"
164
146
                    }
146
                    }
165
147
147
173
148
                    head.actions: Action {
148
                    state: "default"
167
149
                        id: searchAction
168
150
                        iconName: "search"
169
151
                        onTriggered: searchPage.state = "search"
170
152
                    }
171
153
172
154
                    state: ""
174
155
                    states: [
149
                    states: [
182
156
                        State {
150
                        PageHeadState {
183
157
                            name: ""
151
                            name: "default"
184
158
                            PropertyChanges {
152
                            head: searchPage.head
185
159
                                target: searchPage.head
153
                            actions: Action {
186
160
                                // needed otherwise actions will not be
154
                                id: searchAction
187
161
                                // returned to its original state.
155
                                iconName: "search"
188
162
                                actions: [ searchAction ]
156
                                onTriggered: searchPage.state = "search"
189
163
                            }
157
                            }
190
164
                        },
158
                        },
195
165
                        State {
159
                        PageHeadState {
192
166
                            // TODO: The definition of this state will be
193
167
                            // simplified a lot in a following MR that
194
168
                            // introduces the HeaderState component.
196
169
                            id: headerState
160
                            id: headerState
197
170
                            name: "search"
161
                            name: "search"
205
171
                            property Action back: Action {
162
                            head: searchPage.head
206
172
                                id: leaveSearchAction
163
                            actions: [
200
173
                                text: "back"
201
174
                                iconName: "back"
202
175
                                onTriggered: searchPage.state = ""
203
176
                            }
204
177
                            property list<Action> actions: [
207
178
                                Action {
164
                                Action {
208
179
                                    iconName: "contact"
165
                                    iconName: "contact"
209
180
                                }
166
                                }
210
181
                            ]
167
                            ]
212
182
                            property TextField input: TextField {
168
                            backAction: Action {
213
169
                                id: leaveSearchAction
214
170
                                text: "back"
215
171
                                iconName: "back"
216
172
                                onTriggered: searchPage.state = "default"
217
173
                            }
218
174
                            contents: TextField {
219
183
                                placeholderText: "search..."
175
                                placeholderText: "search..."
220
184
                            }
176
                            }
221
185
                            PropertyChanges {
222
186
                                target: searchPage.head
223
187
                                backAction: headerState.back
224
188
                                actions: headerState.actions
225
189
                                contents: headerState.input
226
190
                            }
227
191
                        }
177
                        }
228
192
                    ]
178
                    ]
229
193
                }
179
                }
230
194
180
231
=== modified file 'tests/resources/toolbar/headerTextInput.qml'
232
--- tests/resources/toolbar/headerTextInput.qml	2014-05-06 16:20:50 +0000
233
+++ tests/resources/toolbar/headerTextInput.qml	2014-07-03 11:13:13 +0000
234
@@ -14,53 +14,59 @@
235
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
236
15
 */
15
 */
237
16
16
239
17
import QtQuick 2.0
17
import QtQuick 2.2
240
18
import Ubuntu.Components 1.1
18
import Ubuntu.Components 1.1
241
19
19
242
20
MainView {
20
MainView {
245
21
    width: units.gu(50)
21
    width: units.gu(40)
246
22
    height: units.gu(80)
22
    height: units.gu(50)
247
23
    useDeprecatedToolbar: false
23
    useDeprecatedToolbar: false
248
24
24
249
25
    Page {
25
    Page {
262
26
        title: "test page"
26
        id: searchPage
263
27
27
        title: "Click the icon"
252
28
        id: page
253
29
254
30
        __customHeaderContents: Item {
255
31
            TextField {
256
32
                anchors {
257
33
                    left: parent.left
258
34
                    verticalCenter: parent.verticalCenter
259
35
                }
260
36
            }
261
37
        }
264
38
28
265
39
        Label {
29
        Label {
266
40
            anchors.centerIn: parent
30
            anchors.centerIn: parent
277
41
            text: "Hello, world"
31
            text: searchPage.state == "search" ? "search mode" : "normal mode"
278
42
        }
32
        }
279
43
33
280
44
        tools: ToolbarItems {
34
        head.actions: Action {
281
45
            ToolbarButton {
35
            id: searchAction
282
46
                action: Action {
36
            iconName: "search"
283
47
                    iconName: "contact"
37
            onTriggered: searchPage.state = "search"
284
48
                    text: "oh"
38
        }
285
49
                    onTriggered: print("lala")
39
286
50
                    enabled: false
40
        state: ""
287
41
        states: [
288
42
            State {
289
43
                name: ""
290
44
                PropertyChanges {
291
45
                    target: searchPage.head
292
46
                    // needed otherwise actions will not be
293
47
                    // returned to its original state.
294
48
                    actions: [ searchAction ]
295
51
                }
49
                }
304
52
            }
50
            },
305
53
51
            PageHeadState {
306
54
            back: ToolbarButton {
52
                id: headerState
307
55
                action: Action {
53
                name: "search"
308
56
                    text: "cancel"
54
                head: searchPage.head
309
57
                    iconName: "cancel"
55
                actions: [
310
58
                    onTriggered: {
56
                    Action {
311
59
                        page.__customHeaderContents = null;
57
                        iconName: "contact"
312
60
                    }
58
                    }
315
61
                }
59
                ]
316
62
                anchors.verticalCenter: parent.verticalCenter
60
                backAction: Action {
317
61
                    id: leaveSearchAction
318
62
                    text: "back"
319
63
                    iconName: "back"
320
64
                    onTriggered: searchPage.state = ""
321
65
                }
322
66
                contents: TextField {
323
67
                    placeholderText: "search..."
324
68
                }
325
63
            }
69
            }
327
64
        }
70
        ]
328
65
    }
71
    }
329
66
}
72
}
Status:	Merged
Approved by:	Cris Dywan on 2014-07-03
Approved revision:	1130
Merged at revision:	1136
Proposed branch:	lp:~tpeeters/ubuntu-ui-toolkit/120-HeaderState
Merge into:	lp:ubuntu-ui-toolkit/staging
Prerequisite:	lp:~tpeeters/ubuntu-ui-toolkit/110-headerInput
Diff against target:	329 lines (+183/-68) 6 files modified components.api (+6/-0) modules/Ubuntu/Components/PageHeadConfiguration.qml (+3/-0) modules/Ubuntu/Components/PageHeadState.qml (+113/-0) modules/Ubuntu/Components/qmldir (+1/-0) tests/resources/toolbar/header.qml (+18/-32) tests/resources/toolbar/headerTextInput.qml (+42/-36)
To merge this branch:	bzr merge lp:~tpeeters/ubuntu-ui-toolkit/120-HeaderState
Related bugs:	Link a bug report
Related blueprints:	New header and bottom edge (Essential)
Reviewer	Review Type	Date Requested	Status
PS Jenkins bot	continuous-integration		Approve on 2014-07-03
Cris Dywan		2014-06-27	Approve on 2014-07-03
Review via email: mp+224813@code.launchpad.net