1
=== modified file 'CHANGES'
2
--- CHANGES	2013-08-28 08:06:11 +0000
3
+++ CHANGES	2013-08-28 12:13:08 +0000
4
@@ -9,7 +9,7 @@
5
9
9
6
10
API Changes
10
API Changes
7
11
***********
11
***********
9
12
12
* ADDED IN: Empty: property alias divider
10
13
* REMOVED IN ALL: attached property ItemStyle
13
* REMOVED IN ALL: attached property ItemStyle
11
14
* ADDED IN OrientationHelper: property alias rotating
14
* ADDED IN OrientationHelper: property alias rotating
12
15
* ADDED IN OrientationHelper: property alias __orientationHelper
15
* ADDED IN OrientationHelper: property alias __orientationHelper
13
16
16
14
=== modified file 'components.api'
15
--- components.api	2013-08-28 08:06:11 +0000
16
+++ components.api	2013-08-28 12:13:08 +0000
17
@@ -99,6 +99,23 @@
18
99
modules/Ubuntu/Components/Object.qml
99
modules/Ubuntu/Components/Object.qml
19
100
QtObject
100
QtObject
20
101
    default property internal children
101
    default property internal children
21
102
modules/Ubuntu/Components/OptionSelector.qml
22
103
ListItem.Empty
23
104
    property var model
24
105
    property bool expanded
25
106
    property bool colourImage
26
107
    readonly property int selectedIndex
27
108
    property real containerHeight
28
109
    signal scroll()
29
110
modules/Ubuntu/Components/OptionSelectorDelegate.qml
30
111
ListItem.Standard
31
112
    property string text
32
113
    property string subText
33
114
    property url icon
34
115
    property ListView listView
35
116
    property color assetColour
36
117
    property bool colourImage
37
118
    property string fragColourShader
38
102
modules/Ubuntu/Components/OrientationHelper.qml
119
modules/Ubuntu/Components/OrientationHelper.qml
39
103
Item
120
Item
40
104
    property bool automaticOrientation
121
    property bool automaticOrientation
41
105
122
42
=== modified file 'examples/ubuntu-ui-toolkit-gallery/ListItems.qml'
43
--- examples/ubuntu-ui-toolkit-gallery/ListItems.qml	2013-08-28 08:06:11 +0000
44
+++ examples/ubuntu-ui-toolkit-gallery/ListItems.qml	2013-08-28 12:13:08 +0000
45
@@ -77,18 +77,6 @@
46
77
    }
77
    }
47
78
78
48
79
    ListItemsSection {
79
    ListItemsSection {
49
80
        title: i18n.tr("Value selector")
50
81
        className: "ValueSelector"
51
82
        delegate: ListItem.ValueSelector {
52
83
            text: i18n.tr("Label")
53
84
            values: [i18n.tr("Value 1"),
54
85
                     i18n.tr("Value 2"),
55
86
                     i18n.tr("Value 3"),
56
87
                     i18n.tr("Value 4")]
57
88
        }
58
89
    }
59
90
60
91
    ListItemsSection {
61
92
        title: i18n.tr("Control")
80
        title: i18n.tr("Control")
62
93
        className: "Standard"
81
        className: "Standard"
63
94
        delegate: ListItem.Standard {
82
        delegate: ListItem.Standard {
64
95
83
65
=== added file 'examples/ubuntu-ui-toolkit-gallery/OptionSelectors.qml'
66
--- examples/ubuntu-ui-toolkit-gallery/OptionSelectors.qml	1970-01-01 00:00:00 +0000
67
+++ examples/ubuntu-ui-toolkit-gallery/OptionSelectors.qml	2013-08-28 12:13:08 +0000
68
@@ -0,0 +1,73 @@
69
1
/*
70
2
 * Copyright 2013 Canonical Ltd.
71
3
 *
72
4
 * This program is free software; you can redistribute it and/or modify
73
5
 * it under the terms of the GNU Lesser General Public License as published by
74
6
 * the Free Software Foundation; version 3.
75
7
 *
76
8
 * This program is distributed in the hope that it will be useful,
77
9
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
78
10
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
79
11
 * GNU Lesser General Public License for more details.
80
12
 *
81
13
 * You should have received a copy of the GNU Lesser General Public License
82
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
83
15
 */
84
16
85
17
import QtQuick 2.0
86
18
import Ubuntu.Components 0.1
87
19
88
20
Template {
89
21
    TemplateSection {
90
22
        id: section
91
23
92
24
        title: i18n.tr("Option Selector")
93
25
        className: "Option Selector"
94
26
95
27
        Column {
96
28
            id: column
97
29
            anchors.left: parent.left
98
30
            anchors.right: parent.right
99
31
            spacing: units.gu(3)
100
32
101
33
           OptionSelector {
102
34
                text: i18n.tr("Label")
103
35
                model: [i18n.tr("Value 1"),
104
36
                         i18n.tr("Value 2"),
105
37
                         i18n.tr("Value 3"),
106
38
                         i18n.tr("Value 4")]
107
39
           }
108
40
109
41
           OptionSelector {
110
42
                text: i18n.tr("Label")
111
43
                expanded: true
112
44
                model: [i18n.tr("Value 1"),
113
45
                         i18n.tr("Value 2"),
114
46
                         i18n.tr("Value 3"),
115
47
                         i18n.tr("Value 4")]
116
48
           }
117
49
118
50
           OptionSelector {
119
51
               text: i18n.tr("Label")
120
52
               model: customModel
121
53
               expanded: true
122
54
               colourImage: true
123
55
               delegate: selectorDelegate
124
56
           }
125
57
126
58
           Component {
127
59
               id: selectorDelegate
128
60
129
61
               OptionSelectorDelegate { text: name; subText: description; icon: image }
130
62
           }
131
63
132
64
           ListModel {
133
65
               id: customModel
134
66
               ListElement { name: "Name 1"; description: "Description 1"; image: "images.png" }
135
67
               ListElement { name: "Name 2"; description: "Description 2"; image: "images.png" }
136
68
               ListElement { name: "Name 3"; description: "Description 3"; image: "images.png" }
137
69
               ListElement { name: "Name 4"; description: "Description 4"; image: "images.png" }
138
70
           }
139
71
        }
140
72
    }
141
73
}
142
0
74
143
=== modified file 'examples/ubuntu-ui-toolkit-gallery/WidgetsModel.qml'
144
--- examples/ubuntu-ui-toolkit-gallery/WidgetsModel.qml	2013-08-28 08:06:11 +0000
145
+++ examples/ubuntu-ui-toolkit-gallery/WidgetsModel.qml	2013-08-28 12:13:08 +0000
146
@@ -40,6 +40,11 @@
147
40
        source: "TextInputs.qml"
40
        source: "TextInputs.qml"
148
41
    }
41
    }
149
42
42
150
43
    ListElement {
151
44
        label: "Option Selector"
152
45
        source: "OptionSelectors.qml"
153
46
    }
154
47
155
43
    // Not in design guidelines yet
48
    // Not in design guidelines yet
156
44
    ListElement {
49
    ListElement {
157
45
        label: "Progress and activity"
50
        label: "Progress and activity"
158
46
51
159
=== added file 'examples/ubuntu-ui-toolkit-gallery/images.png'
160
47
Binary files examples/ubuntu-ui-toolkit-gallery/images.png	1970-01-01 00:00:00 +0000 and examples/ubuntu-ui-toolkit-gallery/images.png	2013-08-28 12:13:08 +0000 differ
52
Binary files examples/ubuntu-ui-toolkit-gallery/images.png	1970-01-01 00:00:00 +0000 and examples/ubuntu-ui-toolkit-gallery/images.png	2013-08-28 12:13:08 +0000 differ
161
=== modified file 'modules/Ubuntu/Components/ListItems/Empty.qml'
162
--- modules/Ubuntu/Components/ListItems/Empty.qml	2013-08-28 08:06:11 +0000
163
+++ modules/Ubuntu/Components/ListItems/Empty.qml	2013-08-28 12:13:08 +0000
164
@@ -120,34 +120,7 @@
165
120
      Set to show or hide the thin bottom divider line (drawn by the \l ThinDivider component).
120
      Set to show or hide the thin bottom divider line (drawn by the \l ThinDivider component).
166
121
      This line is shown by default except in cases where this item is the delegate of a ListView.
121
      This line is shown by default except in cases where this item is the delegate of a ListView.
167
122
     */
122
     */
196
123
    property bool showDivider: __showDivider()
123
    property bool showDivider: true
169
124
170
125
    /*!
171
126
      \internal
172
127
      Method to automatically determine if the bottom divider line should be drawn.
173
128
      This always returns true, unless item is a delegate in a ListView. If in a ListView
174
129
      it will return false only when:
175
130
       + if there is a section.delegate below this item (as thin divider line and section
176
131
         delegate should not both appear)
177
132
       + if this is the final item in the list, and ListView.footer is set (again as thin
178
133
         divider line won't look well with footer below it)
179
134
     */
180
135
    // FIXME: The new design shows dividers everywhere, so if it does not change anymore,
181
136
    //  the __showDivider() function may be removed.
182
137
    function __showDivider() {
183
138
        // if we're not in ListView, always show a thin dividing line at the bottom
184
139
        //if (ListView.view !== null) {
185
140
186
141
            // if we're last item in ListView, show divider if no footer is defined
187
142
            // and hide it if footer defined
188
143
            //if (index === ListView.view.model.count - 1) return !ListView.footer;
189
144
190
145
            // if section.delegate is positioned between this item and the next
191
146
            //else if (ListView.section !== ListView.nextSection) return true;
192
147
            //else return false;
193
148
        //}
194
149
        return true;
195
150
    }
197
151
124
198
152
    /*!
125
    /*!
199
153
      \internal
126
      \internal
200
@@ -169,6 +142,13 @@
201
169
     */
142
     */
202
170
    property alias backgroundIndicator: backgroundIndicator.children
143
    property alias backgroundIndicator: backgroundIndicator.children
203
171
144
204
145
    /*!
205
146
      \preliminary
206
147
      \qmlproperty ThinDivider bottomDividerLine
207
148
      Exposes our the bottom line divider.
208
149
     */
209
150
    property alias divider: bottomDividerLine
210
151
211
172
    /*! \internal
152
    /*! \internal
212
173
      The spacing inside the list item.
153
      The spacing inside the list item.
213
174
     */
154
     */
214
@@ -272,21 +252,6 @@
215
272
        }
252
        }
216
273
    }
253
    }
217
274
254
218
275
    Rectangle {
219
276
        id: highlight
220
277
221
278
        z: -1
222
279
        visible: !priv.removed && emptyListItem.swipingState === "" ? emptyListItem.selected || (emptyListItem.highlightWhenPressed && emptyListItem.pressed) : false
223
280
        anchors {
224
281
            left: parent.left
225
282
            right: parent.right
226
283
            top: parent.top
227
284
        }
228
285
        height: emptyListItem.height - bottomDividerLine.height
229
286
        color: Theme.palette.selected.background
230
287
    }
231
288
232
289
233
290
    ThinDivider {
255
    ThinDivider {
234
291
        id: bottomDividerLine
256
        id: bottomDividerLine
235
292
        anchors.bottom: parent.bottom
257
        anchors.bottom: parent.bottom
236
@@ -302,7 +267,7 @@
237
302
            left: parent.left
267
            left: parent.left
238
303
            right: parent.right
268
            right: parent.right
239
304
            top: parent.top
269
            top: parent.top
241
305
            bottom: bottomDividerLine.top
270
            bottom: parent.bottom
242
306
        }
271
        }
243
307
272
244
308
        Item {
273
        Item {
245
309
274
246
=== added file 'modules/Ubuntu/Components/OptionSelector.qml'
247
--- modules/Ubuntu/Components/OptionSelector.qml	1970-01-01 00:00:00 +0000
248
+++ modules/Ubuntu/Components/OptionSelector.qml	2013-08-28 12:13:08 +0000
249
@@ -0,0 +1,198 @@
250
1
/*
251
2
 * Copyright 2012 Canonical Ltd.
252
3
 *
253
4
 * This program is free software; you can redistribute it and/or modify
254
5
 * it under the terms of the GNU Lesser General Public License as published by
255
6
 * the Free Software Foundation; version 3.
256
7
 *
257
8
 * This program is distributed in the hope that it will be useful,
258
9
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
259
10
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
260
11
 * GNU Lesser General Public License for more details.
261
12
 *
262
13
 * You should have received a copy of the GNU Lesser General Public License
263
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
264
15
 */
265
16
266
17
import QtQuick 2.0
267
18
import "ListItems" as ListItem
268
19
import Ubuntu.Components 0.1 as Components
269
20
270
21
/*!
271
22
    \qmltype OptionSelector
272
23
    \inqmlmodule Components.Components 0.1
273
24
    \ingroup ubuntu-components
274
25
    \brief Component displaying a single selected value with and optional image and subtext when not expanded, where expanding
275
26
    it opens a listing of all the possible values for selection with an additional option of always being expanded.
276
27
277
28
    \b{This component is under heavy development.}
278
29
279
30
    Examples:
280
31
    \qml
281
32
        import Components.Components 0.1
282
33
        Column {
283
34
            width: 250
284
35
            OptionSelector {
285
36
                text: "Standard"
286
37
                model: ["Value 1", "Value 2", "Value 3", "Value 4"]
287
38
            }
288
39
            OptionSelector {
289
40
                text: "Disabled"
290
41
                model: ["Value 1", "Value 2", "Value 3", "Value 4"]
291
42
                enabled: false
292
43
            }
293
44
            OptionSelector {
294
45
                text: "Expanded"
295
46
                model: ["Value 1", "Value 2", "Value 3", "Value 4"]
296
47
                expanded: true
297
48
            }
298
49
            OptionSelector {
299
50
                text: "Icon"
300
51
                icon: Qt.resolvedUrl("icon.png")
301
52
                values: ["Value 1", "Value 2", "Value 3", "Value 4"]
302
53
                selectedIndex: 2
303
54
            }
304
55
            OptionSelector {
305
56
                text: i18n.tr("Label")
306
57
                model: customModel
307
58
                expanded: true
308
59
                colourImage: true
309
60
                delegate: OptionSelectorDelegate { text: name; subText: description; icon: image }
310
61
            }
311
62
            ListModel {
312
63
                id: customModel
313
64
                ListElement { name: "Name 1"; description: "Description 1"; image: "images.png" }
314
65
                ListElement { name: "Name 2"; description: "Description 2"; image: "images.png" }
315
66
                ListElement { name: "Name 3"; description: "Description 3"; image: "images.png" }
316
67
                ListElement { name: "Name 4"; description: "Description 4"; image: "images.png" }
317
68
            }
318
69
        }
319
70
    \endqml
320
71
*/
321
72
322
73
ListItem.Empty {
323
74
    id: optionSelector
324
75
    __height: column.height
325
76
326
77
    /*!
327
78
      \preliminary
328
79
      The list of values that will be shown under the label text. This is a model.
329
80
     */
330
81
    property var model
331
82
332
83
    /*!
333
84
      \preliminary
334
85
      Specifies whether the list is always expanded.
335
86
     */
336
87
    property bool expanded: false
337
88
338
89
    /*!
339
90
      \preliminary
340
91
      Colours image according to the fieldText colour of the theme, otherwise source colour is maintained.
341
92
     */
342
93
    property bool colourImage: false
343
94
344
95
    /*!
345
96
      \preliminary
346
97
      ListView delegate.
347
98
     */
348
99
    property Component delegate: OptionSelectorDelegate {}
349
100
350
101
    /*!
351
102
      \qmlproperty int selectedIndex
352
103
      The index of the currently selected element in our list.
353
104
     */
354
105
    readonly property alias selectedIndex: list.currentIndex
355
106
356
107
    /*!
357
108
      \qmlproperty real containerHeight
358
109
      Custom height for list container which allows scrolling inside the selector.
359
110
     */
360
111
    property real containerHeight: list.contentHeight
361
112
362
113
    /*!
363
114
      Called when the optionSelector is either expanded or collapsed.
364
115
     */
365
116
    signal scroll()
366
117
367
118
    showDivider: false
368
119
369
120
    Column {
370
121
        id: column
371
122
372
123
        spacing: units.gu(2)
373
124
        anchors {
374
125
            left: parent.left
375
126
            right: parent.right
376
127
        }
377
128
378
129
        Label {
379
130
            text: optionSelector.text
380
131
            height: units.gu(2)
381
132
        }
382
133
383
134
        StyledItem {
384
135
            id: listContainer
385
136
            objectName: "listContainer"
386
137
387
138
            readonly property url chevron: __styleInstance.chevron
388
139
            readonly property url tick: __styleInstance.tick
389
140
            readonly property color themeColour: Theme.palette.selected.fieldText
390
141
            property bool isExpanded: expanded
391
142
            property bool isFullyExpanded: expanded
392
143
            property bool colourImage: optionSelector.colourImage
393
144
394
145
            anchors {
395
146
                left: parent.left
396
147
                right: parent.right
397
148
            }
398
149
            state: optionSelector.expanded ? state = "expanded" : state = "collapsed"
399
150
            style: Theme.createStyleComponent("OptionSelectorStyle.qml", listContainer)
400
151
401
152
            onHeightChanged: scroll()
402
153
403
154
            states: [ State {
404
155
                    name: "expanded"
405
156
                    when: listContainer.isExpanded
406
157
                    PropertyChanges {
407
158
                        target: listContainer
408
159
                        height: containerHeight
409
160
                    }
410
161
                }, State {
411
162
                    name: "collapsed"
412
163
                    when: !listContainer.isExpanded
413
164
                    PropertyChanges {
414
165
                        target: listContainer
415
166
                        height: list.itemHeight
416
167
                    }
417
168
                }
418
169
            ]
419
170
420
171
            transitions: [ Transition {
421
172
                UbuntuNumberAnimation {
422
173
                        properties: "height"
423
174
                        duration: Components.UbuntuAnimation.BriskDuration
424
175
                    }
425
176
                }
426
177
            ]
427
178
428
179
            ListView {
429
180
                id: list
430
181
431
182
                property int previousIndex: -1
432
183
                readonly property alias expanded: optionSelector.expanded
433
184
                readonly property alias container: listContainer
434
185
                property real itemHeight
435
186
436
187
                boundsBehavior: Flickable.StopAtBounds
437
188
                interactive: listContainer.height !== list.contentHeight && listContainer.isExpanded ? true : false
438
189
                clip: true
439
190
                currentIndex: 0
440
191
                model: optionSelector.model
441
192
                anchors.fill: parent
442
193
443
194
                delegate: optionSelector.delegate
444
195
            }
445
196
        }
446
197
    }
447
198
}
448
0
199
449
=== added file 'modules/Ubuntu/Components/OptionSelectorDelegate.qml'
450
--- modules/Ubuntu/Components/OptionSelectorDelegate.qml	1970-01-01 00:00:00 +0000
451
+++ modules/Ubuntu/Components/OptionSelectorDelegate.qml	2013-08-28 12:13:08 +0000
452
@@ -0,0 +1,324 @@
453
1
/*
454
2
 * Copyright 2012 Canonical Ltd.
455
3
 *
456
4
 * This program is free software; you can redistribute it and/or modify
457
5
 * it under the terms of the GNU Lesser General Public License as published by
458
6
 * the Free Software Foundation; version 3.
459
7
 *
460
8
 * This program is distributed in the hope that it will be useful,
461
9
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
462
10
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
463
11
 * GNU Lesser General Public License for more details.
464
12
 *
465
13
 * You should have received a copy of the GNU Lesser General Public License
466
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
467
15
 */
468
16
469
17
/*!
470
18
    \qmltype OptionSelectorDelegate
471
19
    \inqmlmodule Components.Components 0.1
472
20
    \ingroup ubuntu-components
473
21
    \brief OptionSelector delegate which can display text, subtext and an image from a custom model.
474
22
475
23
    \b{This component is under heavy development.}
476
24
477
25
    Examples:
478
26
    \qml
479
27
        import Components.Components 0.1
480
28
        Column {
481
29
            width: 250
482
30
            OptionSelector {
483
31
                text: i18n.tr("Label")
484
32
                model: customModel
485
33
                delegate: OptionSelectorDelegate { text: name; subText: description; icon: image }
486
34
            }
487
35
            ListModel {
488
36
                id: customModel
489
37
                ListElement { name: "Name 1"; description: "Description 1"; image: "images.png" }
490
38
                ListElement { name: "Name 2"; description: "Description 2"; image: "images.png" }
491
39
                ListElement { name: "Name 3"; description: "Description 3"; image: "images.png" }
492
40
                ListElement { name: "Name 4"; description: "Description 4"; image: "images.png" }
493
41
            }
494
42
        }
495
43
    \endqml
496
44
*/
497
45
498
46
import QtQuick 2.0
499
47
import "ListItems" as ListItem
500
48
import Ubuntu.Components 0.1 as Components
501
49
502
50
ListItem.Standard {
503
51
    id: option
504
52
505
53
    property string text
506
54
    property string subText
507
55
    property url icon
508
56
    property ListView listView: ListView.view
509
57
    property color assetColour: listView.container.themeColour
510
58
    property bool colourImage: listView.container.colourImage
511
59
    property string fragColourShader:
512
60
        "varying highp vec2 qt_TexCoord0;
513
61
         uniform sampler2D source;
514
62
         uniform lowp vec4 colour;
515
63
         uniform lowp float qt_Opacity;
516
64
517
65
         void main() {
518
66
            lowp vec4 sourceColour = texture2D(source, qt_TexCoord0);
519
67
            gl_FragColor = colour * sourceColour.a * qt_Opacity;
520
68
        }"
521
69
522
70
    width: parent.width + units.gu(2)
523
71
    showDivider: index !== listView.count - 1 ? 1 : 0
524
72
    highlightWhenPressed: false
525
73
    selected: ListView.isCurrentItem
526
74
    anchors {
527
75
        left: parent.left
528
76
        leftMargin: units.gu(-2)
529
77
    }
530
78
    onClicked: {
531
79
        if (listView.container.isExpanded) {
532
80
            listView.previousIndex = listView.currentIndex;
533
81
            listView.currentIndex = index;
534
82
        }
535
83
536
84
        if (!listView.expanded) {
537
85
            listView.container.isExpanded = !listView.container.isExpanded;
538
86
        }
539
87
    }
540
88
541
89
    Component.onCompleted: {
542
90
        height = listView.itemHeight = childrenRect.height;
543
91
    }
544
92
545
93
    //Since we don't want to add states to our divider, we use the exposed alias provided in Empty to access it and alter it's opacity from here.
546
94
    states: [ State {
547
95
            name: "dividerExpanded"
548
96
            when: listView.container.state === "expanded" && index === listView.currentIndex
549
97
            PropertyChanges {
550
98
                target: option.divider
551
99
                opacity: 1
552
100
            }
553
101
        }, State {
554
102
            name: "dividerCollapsed"
555
103
            when: listView.container.state === "collapsed" && index === listView.currentIndex
556
104
            PropertyChanges {
557
105
                target: option.divider
558
106
                opacity: 0
559
107
            }
560
108
        }
561
109
    ]
562
110
563
111
    //As with our states, we apply the transition with our divider as the target.
564
112
    transitions: [ Transition {
565
113
            from: "dividerExpanded"
566
114
            to: "dividerCollapsed"
567
115
            UbuntuNumberAnimation {
568
116
                target: option.divider
569
117
                properties: "opacity"
570
118
                duration: Components.UbuntuAnimation.SlowDuration
571
119
            }
572
120
        }
573
121
    ]
574
122
575
123
    resources: [
576
124
        Connections {
577
125
            target: listView.container
578
126
            onIsExpandedChanged: {
579
127
                optionExpansion.stop();
580
128
                imageExpansion.stop();
581
129
                optionCollapse.stop();
582
130
                selectedImageCollapse.stop();
583
131
                deselectedImageCollapse.stop();
584
132
585
133
                if (listView.container.isExpanded === true) {
586
134
                    if (!option.selected) {
587
135
                        optionExpansion.start();
588
136
589
137
                        //Ensure a source change. This solves a bug which happens occasionaly when source is switched correctly. Probably related to the image.source binding.
590
138
                        image.source = listView.container.tick
591
139
                    } else {
592
140
                        imageExpansion.start();
593
141
                    }
594
142
                } else {
595
143
                    if (!option.selected) {
596
144
                        optionCollapse.start();
597
145
                    } else {
598
146
                        if (listView.previousIndex !== listView.currentIndex)
599
147
                            selectedImageCollapse.start();
600
148
                        else {
601
149
                            deselectedImageCollapse.start();
602
150
                        }
603
151
                    }
604
152
                }
605
153
            }
606
154
        }, SequentialAnimation {
607
155
            id: imageExpansion
608
156
609
157
            PropertyAnimation {
610
158
                target: image
611
159
                properties: "opacity"
612
160
                from : 1.0
613
161
                to: 0.0
614
162
                duration: Components.UbuntuAnimation.FastDuration
615
163
            }
616
164
            PauseAnimation { duration: Components.UbuntuAnimation.BriskDuration - Components.UbuntuAnimation.FastDuration }
617
165
            PropertyAction {
618
166
                target: image
619
167
                property: "source"
620
168
                value: listView.container.tick
621
169
            }
622
170
            PropertyAnimation {
623
171
                target: image
624
172
                properties: "opacity"
625
173
                from : 0.0
626
174
                to: 1.0
627
175
                duration: Components.UbuntuAnimation.FastDuration
628
176
            }
629
177
        }, PropertyAnimation {
630
178
            id: optionExpansion
631
179
632
180
            target: option
633
181
            properties: "opacity"
634
182
            from : 0.0
635
183
            to: 1.0
636
184
            duration: Components.UbuntuAnimation.SlowDuration
637
185
        }, SequentialAnimation {
638
186
            id: deselectedImageCollapse
639
187
640
188
            PauseAnimation { duration: Components.UbuntuAnimation.BriskDuration }
641
189
            PropertyAnimation {
642
190
                target: image
643
191
                properties: "opacity"
644
192
                from : 1.0
645
193
                to: 0.0
646
194
                duration: Components.UbuntuAnimation.FastDuration
647
195
            }
648
196
            PauseAnimation { duration: Components.UbuntuAnimation.FastDuration }
649
197
            PropertyAction {
650
198
                target: image
651
199
                property: "source"
652
200
                value: listView.container.chevron
653
201
            }
654
202
            PropertyAnimation {
655
203
                target: image
656
204
                properties: "opacity"
657
205
                from : 0.0
658
206
                to: 1.0
659
207
                duration: Components.UbuntuAnimation.FastDuration
660
208
            }
661
209
        }, SequentialAnimation {
662
210
            id: selectedImageCollapse
663
211
664
212
            PropertyAnimation {
665
213
                target: image
666
214
                properties: "opacity"
667
215
                from : 0.0
668
216
                to: 1.0
669
217
                duration: Components.UbuntuAnimation.FastDuration
670
218
            }
671
219
            PauseAnimation { duration: Components.UbuntuAnimation.BriskDuration - Components.UbuntuAnimation.FastDuration }
672
220
            PropertyAnimation {
673
221
                target: image
674
222
                properties: "opacity"
675
223
                from : 1.0
676
224
                to: 0.0
677
225
                duration: Components.UbuntuAnimation.FastDuration
678
226
            }
679
227
            PauseAnimation { duration: Components.UbuntuAnimation.FastDuration }
680
228
            PropertyAction {
681
229
                target: image
682
230
                property: "source"
683
231
                value: listView.container.chevron
684
232
            }
685
233
            PropertyAnimation {
686
234
                target: image
687
235
                properties: "opacity"
688
236
                from : 0.0
689
237
                to: 1.0
690
238
                duration: Components.UbuntuAnimation.FastDuration
691
239
            }
692
240
        }, PropertyAnimation {
693
241
                id: optionCollapse
694
242
                target: option
695
243
                properties: "opacity"
696
244
                from : 1.0
697
245
                to: 0.0
698
246
                duration: Components.UbuntuAnimation.SlowDuration
699
247
        }
700
248
    ]
701
249
702
250
    Row {
703
251
        spacing: units.gu(1)
704
252
705
253
        anchors {
706
254
            left: parent.left
707
255
            leftMargin: units.gu(3)
708
256
            verticalCenter: parent.verticalCenter
709
257
        }
710
258
711
259
        Image {
712
260
            id: leftIcon
713
261
714
262
            source: icon
715
263
716
264
            ShaderEffect {
717
265
                property color colour: assetColour
718
266
                property Image source: parent
719
267
720
268
                width: source.width
721
269
                height: source.height
722
270
                visible: colourImage
723
271
724
272
                fragmentShader: fragColourShader
725
273
             }
726
274
        }
727
275
728
276
        Column {
729
277
            anchors {
730
278
                verticalCenter: parent.verticalCenter
731
279
            }
732
280
            Label {
733
281
                text: option.text === "" ? modelData : option.text
734
282
            }
735
283
            Label {
736
284
                text: option.subText
737
285
                visible: option.subText !== "" ? true : false
738
286
                fontSize: "small"
739
287
            }
740
288
        }
741
289
    }
742
290
743
291
    Image {
744
292
        id: image
745
293
746
294
        width: units.gu(2)
747
295
        height: units.gu(2)
748
296
        source: listView.expanded ? listView.container.tick : listView.container.chevron
749
297
        opacity: option.selected ? 1.0 : 0.0
750
298
        anchors {
751
299
            right: parent.right
752
300
            rightMargin: units.gu(2)
753
301
            verticalCenter: parent.verticalCenter
754
302
        }
755
303
756
304
        //Our behaviour is only enabled for our expanded list due to flickering bugs in relation to all this other animations running on the expanding version.
757
305
        Behavior on opacity {
758
306
            enabled: listView.expanded
759
307
760
308
            UbuntuNumberAnimation {
761
309
                properties: "opacity"
762
310
                duration: Components.UbuntuAnimation.FastDuration
763
311
            }
764
312
        }
765
313
766
314
        ShaderEffect {
767
315
            property color colour: assetColour
768
316
            property Image source: parent
769
317
770
318
            width: source.width
771
319
            height: source.height
772
320
773
321
            fragmentShader: fragColourShader
774
322
         }
775
323
    }
776
324
}
777
0
325
778
=== added file 'modules/Ubuntu/Components/Themes/Ambiance/OptionSelectorStyle.qml'
779
--- modules/Ubuntu/Components/Themes/Ambiance/OptionSelectorStyle.qml	1970-01-01 00:00:00 +0000
780
+++ modules/Ubuntu/Components/Themes/Ambiance/OptionSelectorStyle.qml	2013-08-28 12:13:08 +0000
781
@@ -0,0 +1,35 @@
782
1
/*
783
2
 * Copyright 2013 Canonical Ltd.
784
3
 *
785
4
 * This program is free software; you can redistribute it and/or modify
786
5
 * it under the terms of the GNU Lesser General Public License as published by
787
6
 * the Free Software Foundation; version 3.
788
7
 *
789
8
 * This program is distributed in the hope that it will be useful,
790
9
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
791
10
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
792
11
 * GNU Lesser General Public License for more details.
793
12
 *
794
13
 * You should have received a copy of the GNU Lesser General Public License
795
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
796
15
 *
797
16
 */
798
17
799
18
import QtQuick 2.0
800
19
import Ubuntu.Components 0.1
801
20
802
21
Item {
803
22
    id: ambianceStyle
804
23
805
24
    property url chevron: "../../artwork/chevron_down@30.png"
806
25
    property url tick: "../../artwork/tick@30.png"
807
26
    property bool colourComponent: true
808
27
809
28
    UbuntuShape {
810
29
        id: background
811
30
812
31
        width: styledItem.width
813
32
        height: styledItem.height
814
33
        radius: "medium"
815
34
    }
816
35
}
817
0
36
818
=== removed file 'modules/Ubuntu/Components/Themes/Ambiance/artwork/tick@30.png'
819
1
Binary files modules/Ubuntu/Components/Themes/Ambiance/artwork/tick@30.png	2013-08-28 08:06:11 +0000 and modules/Ubuntu/Components/Themes/Ambiance/artwork/tick@30.png	1970-01-01 00:00:00 +0000 differ
37
Binary files modules/Ubuntu/Components/Themes/Ambiance/artwork/tick@30.png	2013-08-28 08:06:11 +0000 and modules/Ubuntu/Components/Themes/Ambiance/artwork/tick@30.png	1970-01-01 00:00:00 +0000 differ
820
=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/qmldir'
821
--- modules/Ubuntu/Components/Themes/Ambiance/qmldir	2013-08-28 08:06:11 +0000
822
+++ modules/Ubuntu/Components/Themes/Ambiance/qmldir	2013-08-28 12:13:08 +0000
823
@@ -5,6 +5,7 @@
824
5
internal DialogForegroundStyle DialogForegroundStyle.qml
5
internal DialogForegroundStyle DialogForegroundStyle.qml
825
6
internal HeaderStyle HeaderStyle.qml
6
internal HeaderStyle HeaderStyle.qml
826
7
MainViewStyle 0.1 MainViewStyle.qml
7
MainViewStyle 0.1 MainViewStyle.qml
827
8
OptionSelectorStyle 0.1 OptionSelectorStyle.qml
828
8
PopoverForegroundStyle 0.1 PopoverForegroundStyle.qml
9
PopoverForegroundStyle 0.1 PopoverForegroundStyle.qml
829
9
internal ScrollbarStyle ScrollbarStyle.qml
10
internal ScrollbarStyle ScrollbarStyle.qml
830
10
internal SelectionCursorStyle SelectionCursorStyle.qml
11
internal SelectionCursorStyle SelectionCursorStyle.qml
831
11
12
832
=== added file 'modules/Ubuntu/Components/Themes/SuruDark/OptionSelectorStyle.qml'
833
--- modules/Ubuntu/Components/Themes/SuruDark/OptionSelectorStyle.qml	1970-01-01 00:00:00 +0000
834
+++ modules/Ubuntu/Components/Themes/SuruDark/OptionSelectorStyle.qml	2013-08-28 12:13:08 +0000
835
@@ -0,0 +1,23 @@
836
1
/*
837
2
 * Copyright 2013 Canonical Ltd.
838
3
 *
839
4
 * This program is free software; you can redistribute it and/or modify
840
5
 * it under the terms of the GNU Lesser General Public License as published by
841
6
 * the Free Software Foundation; version 3.
842
7
 *
843
8
 * This program is distributed in the hope that it will be useful,
844
9
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
845
10
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
846
11
 * GNU Lesser General Public License for more details.
847
12
 *
848
13
 * You should have received a copy of the GNU Lesser General Public License
849
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
850
15
 *
851
16
 */
852
17
853
18
import QtQuick 2.0
854
19
import Ubuntu.Components.Themes.Ambiance 0.1
855
20
856
21
OptionSelectorStyle {
857
22
    id: suruDarkStyle
858
23
}
859
0
24
860
=== added file 'modules/Ubuntu/Components/Themes/SuruGradient/OptionSelectorStyle.qml'
861
--- modules/Ubuntu/Components/Themes/SuruGradient/OptionSelectorStyle.qml	1970-01-01 00:00:00 +0000
862
+++ modules/Ubuntu/Components/Themes/SuruGradient/OptionSelectorStyle.qml	2013-08-28 12:13:08 +0000
863
@@ -0,0 +1,27 @@
864
1
/*
865
2
 * Copyright 2013 Canonical Ltd.
866
3
 *
867
4
 * This program is free software; you can redistribute it and/or modify
868
5
 * it under the terms of the GNU Lesser General Public License as published by
869
6
 * the Free Software Foundation; version 3.
870
7
 *
871
8
 * This program is distributed in the hope that it will be useful,
872
9
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
873
10
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
874
11
 * GNU Lesser General Public License for more details.
875
12
 *
876
13
 * You should have received a copy of the GNU Lesser General Public License
877
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
878
15
 *
879
16
 */
880
17
881
18
import QtQuick 2.0
882
19
import Ubuntu.Components.Themes.Ambiance 0.1
883
20
884
21
OptionSelectorStyle {
885
22
    id: suruGradientStyle
886
23
887
24
    chevron: "artwork/chevron_down@30.png"
888
25
    tick: "artwork/tick@30.png"
889
26
    colourComponent: false
890
27
}
891
0
28
892
=== added directory 'modules/Ubuntu/Components/Themes/SuruGradient/artwork'
893
=== added file 'modules/Ubuntu/Components/Themes/SuruGradient/artwork/chevron_down@30.png'
894
1
Binary files modules/Ubuntu/Components/Themes/SuruGradient/artwork/chevron_down@30.png	1970-01-01 00:00:00 +0000 and modules/Ubuntu/Components/Themes/SuruGradient/artwork/chevron_down@30.png	2013-08-28 12:13:08 +0000 differ
29
Binary files modules/Ubuntu/Components/Themes/SuruGradient/artwork/chevron_down@30.png	1970-01-01 00:00:00 +0000 and modules/Ubuntu/Components/Themes/SuruGradient/artwork/chevron_down@30.png	2013-08-28 12:13:08 +0000 differ
895
=== added file 'modules/Ubuntu/Components/Themes/SuruGradient/artwork/tick@30.png'
896
2
Binary files modules/Ubuntu/Components/Themes/SuruGradient/artwork/tick@30.png	1970-01-01 00:00:00 +0000 and modules/Ubuntu/Components/Themes/SuruGradient/artwork/tick@30.png	2013-08-28 12:13:08 +0000 differ
30
Binary files modules/Ubuntu/Components/Themes/SuruGradient/artwork/tick@30.png	1970-01-01 00:00:00 +0000 and modules/Ubuntu/Components/Themes/SuruGradient/artwork/tick@30.png	2013-08-28 12:13:08 +0000 differ
897
=== added file 'modules/Ubuntu/Components/artwork/chevron_down@30.png'
898
3
Binary files modules/Ubuntu/Components/artwork/chevron_down@30.png	1970-01-01 00:00:00 +0000 and modules/Ubuntu/Components/artwork/chevron_down@30.png	2013-08-28 12:13:08 +0000 differ
31
Binary files modules/Ubuntu/Components/artwork/chevron_down@30.png	1970-01-01 00:00:00 +0000 and modules/Ubuntu/Components/artwork/chevron_down@30.png	2013-08-28 12:13:08 +0000 differ
899
=== added file 'modules/Ubuntu/Components/artwork/tick@30.png'
900
4
Binary files modules/Ubuntu/Components/artwork/tick@30.png	1970-01-01 00:00:00 +0000 and modules/Ubuntu/Components/artwork/tick@30.png	2013-08-28 12:13:08 +0000 differ
32
Binary files modules/Ubuntu/Components/artwork/tick@30.png	1970-01-01 00:00:00 +0000 and modules/Ubuntu/Components/artwork/tick@30.png	2013-08-28 12:13:08 +0000 differ
901
=== modified file 'modules/Ubuntu/Components/qmldir'
902
--- modules/Ubuntu/Components/qmldir	2013-08-28 08:06:11 +0000
903
+++ modules/Ubuntu/Components/qmldir	2013-08-28 12:13:08 +0000
904
@@ -25,6 +25,8 @@
905
25
Scrollbar 0.1 Scrollbar.qml
25
Scrollbar 0.1 Scrollbar.qml
906
26
internal ModelSectionCounter ModelSectionCounter.qml
26
internal ModelSectionCounter ModelSectionCounter.qml
907
27
Object 0.1 Object.qml
27
Object 0.1 Object.qml
908
28
OptionSelector 0.1 OptionSelector.qml
909
29
OptionSelectorDelegate 0.1 OptionSelectorDelegate.qml
910
28
Page 0.1 Page.qml
30
Page 0.1 Page.qml
911
29
internal PageTreeNode PageTreeNode.qml
31
internal PageTreeNode PageTreeNode.qml
912
30
PageStack 0.1 PageStack.qml
32
PageStack 0.1 PageStack.qml
913
31
33
914
=== modified file 'tests/autopilot/ubuntuuitoolkit/tests/gallery/test_gallery.py'
915
--- tests/autopilot/ubuntuuitoolkit/tests/gallery/test_gallery.py	2013-08-28 08:06:11 +0000
916
+++ tests/autopilot/ubuntuuitoolkit/tests/gallery/test_gallery.py	2013-08-28 12:13:08 +0000
917
@@ -69,11 +69,11 @@
918
69
            "Buttons",
69
            "Buttons",
919
70
            "Slider",
70
            "Slider",
920
71
            "Text Field",
71
            "Text Field",
921
72
            "Option Selector",
922
72
            "Progress and activity",
73
            "Progress and activity",
923
73
            "Ubuntu Shape",
74
            "Ubuntu Shape",
924
74
            "Icons",
75
            "Icons",
925
75
            "Label",
76
            "Label",
926
76
            "List Items",
927
77
        ]
77
        ]
928
78
78
929
79
        for item in items:
79
        for item in items:
930
@@ -91,6 +91,7 @@
931
91
91
932
92
        # now that we have more items, lets continue
92
        # now that we have more items, lets continue
933
93
        items = [
93
        items = [
934
94
            "List Items",
935
94
            "Dialog",
95
            "Dialog",
936
95
            "Popover",
96
            "Popover",
937
96
            "Sheet",
97
            "Sheet",
938
97
98
939
=== added file 'tests/unit/tst_components/tst_optionselector.qml'
940
--- tests/unit/tst_components/tst_optionselector.qml	1970-01-01 00:00:00 +0000
941
+++ tests/unit/tst_components/tst_optionselector.qml	2013-08-28 12:13:08 +0000
942
@@ -0,0 +1,107 @@
943
1
/*
944
2
 * Copyright 2012 Canonical Ltd.
945
3
 *
946
4
 * This program is free software; you can redistribute it and/or modify
947
5
 * it under the terms of the GNU Lesser General Public License as published by
948
6
 * the Free Software Foundation; version 3.
949
7
 *
950
8
 * This program is distributed in the hope that it will be useful,
951
9
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
952
10
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
953
11
 * GNU Lesser General Public License for more details.
954
12
 *
955
13
 * You should have received a copy of the GNU Lesser General Public License
956
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
957
15
 */
958
16
959
17
import QtQuick 2.0
960
18
import QtTest 1.0
961
19
import Ubuntu.Components 0.1
962
20
import Ubuntu.Test 0.1
963
21
964
22
UbuntuTestCase {
965
23
     name: "OptionSelectorAPI"
966
24
967
25
     function test_expanded() {
968
26
         var listContainer = findChild(optionSelector, "listContainer");
969
27
970
28
         optionSelector.expanded = false;
971
29
         compare(listContainer.isExpanded, false, "isExpanded should be true if list is an expanded one");
972
30
973
31
         optionSelector.expanded = true;
974
32
         compare(listContainer.isExpanded, true, "isExpanded should be false if list is an expanded one");
975
33
     }
976
34
977
35
     function test_states_and_signal() {
978
36
         var listContainer = findChild(optionSelector, "listContainer");
979
37
980
38
         signalSpy.signalName = "scroll";
981
39
         compare(signalSpy.count, 0);
982
40
983
41
         optionSelector.expanded = false;
984
42
         compare(listContainer.state, "collapsed", "state should be collapsed");
985
43
986
44
         optionSelector.expanded = true;
987
45
         compare(listContainer.state, "expanded", "state should be expanded");
988
46
989
47
         //Check if scroll signal was fired after expansion.
990
48
         compare(signalSpy.count, 2);
991
49
     }
992
50
993
51
     function test_text() {
994
52
         compare(optionSelector.text,"","text is '' by default")
995
53
         var newText = "Hello World!";
996
54
         optionSelector.text = newText;
997
55
         compare(optionSelector.text, newText, "set/get");
998
56
     }
999
57
1000
58
     function test_selectedIndex() {
1001
59
        compare(optionSelector.selectedIndex, 0, "selectedIndex is 0 by default");
1002
60
     }
1003
61
1004
62
     function test_values() {
1005
63
         compare(optionSelector.values,undefined,"values is undefined by default")
1006
64
         var newValues = ["value1","value2","value3"];
1007
65
         optionSelector.model = newValues;
1008
66
         compare(optionSelector.model, newValues, "set/get");
1009
67
     }
1010
68
1011
69
     function test_custom_model_delegate() {
1012
70
         compare(optionSelector.model, undefined, "model is undefined by default");
1013
71
         optionSelector.model = customModel;
1014
72
         optionSelector.delegate = selectorDelegate;
1015
73
         compare(optionSelector.model, customModel, "Model wasn't set correctly.");
1016
74
         compare(optionSelector.delegate, selectorDelegate, "Delegate hasn't been set correctly");
1017
75
     }
1018
76
1019
77
     Rectangle {
1020
78
         id: testItem
1021
79
     }
1022
80
1023
81
     OptionSelector {
1024
82
         id: optionSelector
1025
83
1026
84
         SignalSpy {
1027
85
             id: signalSpy
1028
86
             target: optionSelector
1029
87
         }
1030
88
     }
1031
89
1032
90
     OptionSelector {
1033
91
         id: optionSelectorCustomModel
1034
92
     }
1035
93
1036
94
     Component {
1037
95
         id: selectorDelegate
1038
96
1039
97
         OptionSelectorDelegate { text: name; subText: description }
1040
98
     }
1041
99
1042
100
     ListModel {
1043
101
         id: customModel
1044
102
         ListElement { name: "Name 1"; description: "Description 1" }
1045
103
         ListElement { name: "Name 2"; description: "Description 2" }
1046
104
         ListElement { name: "Name 3"; description: "Description 3" }
1047
105
         ListElement { name: "Name 4"; description: "Description 4" }
1048
106
     }
1049
107
}
Reviewer	Review Type	Date Requested	Status
PS Jenkins bot	continuous-integration		Approve on 2013-08-28
Zsombor Egri			Approve on 2013-08-28
Cris Dywan		2013-07-17	Approve on 2013-08-27
Michał Sawicz	functional		Approve on 2013-08-14
Review via email: mp+175242@code.launchpad.net