Merge lp:~nicolas-doffay/ubuntu-ui-toolkit/list-item-option-selector into lp:ubuntu-ui-toolkit

Proposed by Nicolas d'Offay
Status: Merged
Approved by: Zsombor Egri
Approved revision: 680
Merged at revision: 735
Proposed branch: lp:~nicolas-doffay/ubuntu-ui-toolkit/list-item-option-selector
Merge into: lp:ubuntu-ui-toolkit
Diff against target: 1255 lines (+719/-177)
17 files modified
CHANGES (+8/-0)
components.api (+6/-5)
examples/ubuntu-ui-toolkit-gallery/ListItems.qml (+51/-2)
examples/ubuntu-ui-toolkit-gallery/OptionSelectors.qml (+5/-9)
modules/Ubuntu/Components/ListItems/ItemSelector.qml (+211/-0)
modules/Ubuntu/Components/ListItems/MultiValue.qml (+0/-6)
modules/Ubuntu/Components/ListItems/ValueSelector.qml (+2/-0)
modules/Ubuntu/Components/ListItems/qmldir (+1/-0)
modules/Ubuntu/Components/OptionSelector.qml (+34/-21)
modules/Ubuntu/Components/OptionSelectorDelegate.qml (+72/-27)
modules/Ubuntu/Components/Themes/Ambiance/ListItemOptionSelectorStyle.qml (+27/-0)
modules/Ubuntu/Components/Themes/Ambiance/qmldir (+1/-0)
modules/Ubuntu/Components/Themes/SuruDark/ListItemOptionSelectorStyle.qml (+23/-0)
modules/Ubuntu/Components/Themes/SuruGradient/ListItemOptionSelectorStyle.qml (+27/-0)
tests/unit/tst_components/tst_optionselector.qml (+0/-107)
tests/unit_x11/tst_components/tst_listitems_itemselector.qml (+126/-0)
tests/unit_x11/tst_components/tst_optionselector.qml (+125/-0)
To merge this branch: bzr merge lp:~nicolas-doffay/ubuntu-ui-toolkit/list-item-option-selector
Reviewer Review Type Date Requested Status
PS Jenkins bot continuous-integration Approve
Zoltan Balogh Approve
Review via email: mp+183231@code.launchpad.net

Commit message

Added ItemSelector.
Extend OptionSelector and fixed various bugs.
Added tests for both OptionSelector and ItemSelector.

To post a comment you must log in.
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
Zoltan Balogh (bzoltan) wrote :

Typo in modules/Ubuntu/Components/ListItems/ValueSelector.qml DECRETATED -> DEPRECATED

Revision history for this message
Zoltan Balogh (bzoltan) :
review: Needs Fixing
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Approve (continuous-integration)
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Approve (continuous-integration)
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Approve (continuous-integration)
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)
680. By Nicolas d'Offay

Added nudging functionality for scrolling.

Revision history for this message
Zoltan Balogh (bzoltan) :
review: Approve
Revision history for this message
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 'CHANGES'
2--- CHANGES 2013-08-29 13:56:02 +0000
3+++ CHANGES 2013-09-02 15:00:06 +0000
4@@ -9,7 +9,15 @@
5
6 API Changes
7 ***********
8+* ADDED IN: OptionSelectorDelegate: property bool constrainImage
9 * ADDED IN: Empty: property alias divider
10+* ADDED IN: ListItems/OptionSelector: signal delegateSelected()
11+* REMOVED IN: OptionSelector: signal scroll()
12+* ADDED IN: OptionSelector: signal delegateSelected()
13+* ADDED: ListItem OptionSelector to Components/ListItems
14+* ADDED: ListItemOptionSelectorStyle to Components/Ambiance/ListItems
15+* ADDED: ListItemOptionSelectorStyle to Components/SuruDark/ListItems
16+* ADDED: ListItemOptionSelectorStyle to Components/SuruGradient/ListItems
17 * REMOVED IN ALL: attached property ItemStyle
18 * ADDED IN OrientationHelper: property alias rotating
19 * ADDED IN OrientationHelper: property alias __orientationHelper
20
21=== modified file 'components.api'
22--- components.api 2013-08-29 13:56:02 +0000
23+++ components.api 2013-09-02 15:00:06 +0000
24@@ -102,18 +102,19 @@
25 property var model
26 property bool expanded
27 property bool colourImage
28- readonly property int selectedIndex
29 property real containerHeight
30- signal scroll()
31+ property int selectedIndex
32+ signal delegateClicked(int index)
33 modules/Ubuntu/Components/OptionSelectorDelegate.qml
34 ListItem.Standard
35 property string text
36 property string subText
37 property url icon
38- property ListView listView
39+ property bool constrainImage
40+ property bool colourImage
41 property color assetColour
42- property bool colourImage
43- property string fragColourShader
44+ readonly property ListView listView
45+ readonly property string fragColourShader
46 modules/Ubuntu/Components/OrientationHelper.qml
47 Item
48 property bool automaticOrientation
49
50=== modified file 'examples/ubuntu-ui-toolkit-gallery/ListItems.qml'
51--- examples/ubuntu-ui-toolkit-gallery/ListItems.qml 2013-08-28 10:43:46 +0000
52+++ examples/ubuntu-ui-toolkit-gallery/ListItems.qml 2013-09-02 15:00:06 +0000
53@@ -15,7 +15,7 @@
54 */
55
56 import QtQuick 2.0
57-import Ubuntu.Components 0.1
58+import Ubuntu.Components 0.1 as Toolkit
59 import Ubuntu.Components.ListItems 0.1 as ListItem
60
61 Template {
62@@ -77,11 +77,60 @@
63 }
64
65 ListItemsSection {
66+ title: i18n.tr("Option selector")
67+ className: "OptionSelector"
68+
69+ Column {
70+ anchors.left: parent.left
71+ anchors.right: parent.right
72+ spacing: units.gu(3)
73+
74+ ListItem.ItemSelector {
75+ text: i18n.tr("Label")
76+ model: [i18n.tr("Value 1"),
77+ i18n.tr("Value 2"),
78+ i18n.tr("Value 3"),
79+ i18n.tr("Value 4")]
80+ }
81+
82+ ListItem.ItemSelector {
83+ text: i18n.tr("Label")
84+ expanded: true
85+ model: [i18n.tr("Value 1"),
86+ i18n.tr("Value 2"),
87+ i18n.tr("Value 3"),
88+ i18n.tr("Value 4")]
89+ }
90+
91+ ListItem.ItemSelector {
92+ text: i18n.tr("Label")
93+ model: customModel
94+ expanded: true
95+ colourImage: true
96+ delegate: selectorDelegate
97+ }
98+
99+ Component {
100+ id: selectorDelegate
101+ Toolkit.OptionSelectorDelegate { text: name; subText: description; icon: image }
102+ }
103+
104+ ListModel {
105+ id: customModel
106+ ListElement { name: "Name 1"; description: "Description 1"; image: "images.png" }
107+ ListElement { name: "Name 2"; description: "Description 2"; image: "images.png" }
108+ ListElement { name: "Name 3"; description: "Description 3"; image: "images.png" }
109+ ListElement { name: "Name 4"; description: "Description 4"; image: "images.png" }
110+ }
111+ }
112+ }
113+
114+ ListItemsSection {
115 title: i18n.tr("Control")
116 className: "Standard"
117 delegate: ListItem.Standard {
118 text: i18n.tr("Label")
119- control: Switch {
120+ control: Toolkit.Switch {
121 anchors.verticalCenter: parent.verticalCenter
122 }
123 }
124
125=== modified file 'examples/ubuntu-ui-toolkit-gallery/OptionSelectors.qml'
126--- examples/ubuntu-ui-toolkit-gallery/OptionSelectors.qml 2013-08-28 10:43:46 +0000
127+++ examples/ubuntu-ui-toolkit-gallery/OptionSelectors.qml 2013-09-02 15:00:06 +0000
128@@ -19,23 +19,20 @@
129
130 Template {
131 TemplateSection {
132- id: section
133-
134 title: i18n.tr("Option Selector")
135 className: "Option Selector"
136
137 Column {
138- id: column
139 anchors.left: parent.left
140 anchors.right: parent.right
141 spacing: units.gu(3)
142
143 OptionSelector {
144- text: i18n.tr("Label")
145- model: [i18n.tr("Value 1"),
146- i18n.tr("Value 2"),
147- i18n.tr("Value 3"),
148- i18n.tr("Value 4")]
149+ text: i18n.tr("Label")
150+ model: [i18n.tr("Value 1"),
151+ i18n.tr("Value 2"),
152+ i18n.tr("Value 3"),
153+ i18n.tr("Value 4")]
154 }
155
156 OptionSelector {
157@@ -57,7 +54,6 @@
158
159 Component {
160 id: selectorDelegate
161-
162 OptionSelectorDelegate { text: name; subText: description; icon: image }
163 }
164
165
166=== added file 'modules/Ubuntu/Components/ListItems/ItemSelector.qml'
167--- modules/Ubuntu/Components/ListItems/ItemSelector.qml 1970-01-01 00:00:00 +0000
168+++ modules/Ubuntu/Components/ListItems/ItemSelector.qml 2013-09-02 15:00:06 +0000
169@@ -0,0 +1,211 @@
170+/*
171+ * Copyright 2012 Canonical Ltd.
172+ *
173+ * This program is free software; you can redistribute it and/or modify
174+ * it under the terms of the GNU Lesser General Public License as published by
175+ * the Free Software Foundation; version 3.
176+ *
177+ * This program is distributed in the hope that it will be useful,
178+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
179+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
180+ * GNU Lesser General Public License for more details.
181+ *
182+ * You should have received a copy of the GNU Lesser General Public License
183+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
184+ */
185+
186+import QtQuick 2.0
187+import "." as ListItem
188+import Ubuntu.Components 0.1
189+
190+/*!
191+ \qmltype ItemSelector
192+ \inqmlmodule Components.Components.ListItems 0.1
193+ \ingroup ubuntu-listitems
194+ \brief ListItem displaying a single selected value with and optional image and subtext when not expanded, where expanding
195+ it opens a listing of all the possible values for selection with an additional option of always being expanded.
196+
197+ \b{This component is under heavy development.}
198+
199+ Examples:
200+ \qml
201+ import Components.Components.ListItems 0.1 as ListItem
202+ Column {
203+ width: 250
204+ ListItem.ItemSelector {
205+ text: "Standard"
206+ model: ["Value 1", "Value 2", "Value 3", "Value 4"]
207+ }
208+ ListItem.ItemSelector {
209+ text: "Disabled"
210+ model: ["Value 1", "Value 2", "Value 3", "Value 4"]
211+ enabled: false
212+ }
213+ ListItem.ItemSelector {
214+ text: "Expanded"
215+ model: ["Value 1", "Value 2", "Value 3", "Value 4"]
216+ expanded: true
217+ }
218+ ListItem.ItemSelector {
219+ text: "Icon"
220+ icon: Qt.resolvedUrl("icon.png")
221+ values: ["Value 1", "Value 2", "Value 3", "Value 4"]
222+ selectedIndex: 2
223+ }
224+ ListItem.ItemSelector {
225+ text: i18n.tr("Label")
226+ model: customModel
227+ expanded: true
228+ colourImage: true
229+ delegate: OptionSelectorDelegate { text: name; subText: description; icon: image }
230+ }
231+ ListModel {
232+ id: customModel
233+ ListElement { name: "Name 1"; description: "Description 1"; image: "images.png" }
234+ ListElement { name: "Name 2"; description: "Description 2"; image: "images.png" }
235+ ListElement { name: "Name 3"; description: "Description 3"; image: "images.png" }
236+ ListElement { name: "Name 4"; description: "Description 4"; image: "images.png" }
237+ }
238+ }
239+ \endqml
240+*/
241+
242+ListItem.Empty {
243+ id: optionSelector
244+ __height: column.height
245+
246+ /*!
247+ \preliminary
248+ The list of values that will be shown under the label text. This is a model.
249+ */
250+ property var model
251+
252+ /*!
253+ \preliminary
254+ Specifies whether the list is always expanded.
255+ */
256+ property bool expanded: false
257+
258+ /*!
259+ \preliminary
260+ Colours image according to the fieldText colour of the theme, otherwise source colour is maintained.
261+ */
262+ property bool colourImage: false
263+
264+ /*!
265+ \preliminary
266+ ListView delegate.
267+ */
268+ property Component delegate: OptionSelectorDelegate { id: selectorDelegate }
269+
270+ /*!
271+ \preliminary
272+ Custom height for list container which allows scrolling inside the selector.
273+ */
274+ property real containerHeight: list.contentHeight
275+
276+ /*!
277+ \qmlproperty int selectedIndex
278+ The index of the currently selected element in our list.
279+ */
280+ property alias selectedIndex: list.currentIndex
281+
282+ /*!
283+ Called when delegate is clicked.
284+ */
285+ signal delegateClicked(int index)
286+
287+ showDivider: false
288+
289+ Column {
290+ id: column
291+
292+ anchors {
293+ left: parent.left
294+ right: parent.right
295+ }
296+
297+ ListItem.Standard {
298+ text: optionSelector.text
299+ }
300+
301+ ListItem.Standard {
302+ id: listContainer
303+ objectName: "listContainer"
304+
305+ readonly property url chevron: __styleInstance.chevron
306+ readonly property url tick: __styleInstance.tick
307+ readonly property color themeColour: Theme.palette.selected.fieldText
308+ readonly property alias colourImage: optionSelector.colourImage
309+ property bool isExpanded: expanded
310+
311+ anchors {
312+ left: parent.left
313+ right: parent.right
314+ }
315+ state: optionSelector.expanded ? state = "expanded" : state = "collapsed"
316+ style: Theme.createStyleComponent("ListItemOptionSelectorStyle.qml", listContainer)
317+
318+ states: [ State {
319+ name: "expanded"
320+ when: listContainer.isExpanded
321+ PropertyChanges {
322+ target: listContainer
323+ height: containerHeight
324+ }
325+ }, State {
326+ name: "collapsed"
327+ when: !listContainer.isExpanded
328+ PropertyChanges {
329+ target: listContainer
330+ height: list.itemHeight
331+ }
332+ }
333+ ]
334+
335+ transitions: [ Transition {
336+ SequentialAnimation {
337+ UbuntuNumberAnimation {
338+ properties: "height"
339+ duration: UbuntuAnimation.BriskDuration
340+ }
341+ ScriptAction {
342+ script: {
343+ if (listContainer.isExpanded && list.contentY > 0)
344+ list.contentY += list.itemHeight / 2
345+ }
346+ }
347+ }
348+ }
349+ ]
350+
351+ ListView {
352+ id: list
353+ objectName: "listView"
354+
355+ property int previousIndex: list.currentIndex
356+ readonly property alias expanded: optionSelector.expanded
357+ readonly property alias container: listContainer
358+ property real itemHeight
359+ signal delegateClicked(int index)
360+
361+ onDelegateClicked: optionSelector.delegateClicked(index);
362+ boundsBehavior: Flickable.StopAtBounds
363+ interactive: listContainer.height !== list.contentHeight && listContainer.isExpanded ? true : false
364+ clip: true
365+ currentIndex: 0
366+ model: optionSelector.model
367+ anchors.fill: parent
368+
369+ delegate: optionSelector.delegate
370+
371+ Behavior on contentY {
372+ UbuntuNumberAnimation {
373+ properties: "contentY"
374+ duration: UbuntuAnimation.BriskDuration
375+ }
376+ }
377+ }
378+ }
379+ }
380+}
381
382=== modified file 'modules/Ubuntu/Components/ListItems/MultiValue.qml'
383--- modules/Ubuntu/Components/ListItems/MultiValue.qml 2013-07-01 06:33:24 +0000
384+++ modules/Ubuntu/Components/ListItems/MultiValue.qml 2013-09-02 15:00:06 +0000
385@@ -47,12 +47,6 @@
386
387 /*!
388 \preliminary
389- The text that is shown in the list item as a label.
390- \qmlproperty string text
391- */
392-
393- /*!
394- \preliminary
395 The list of values that will be shown under the label text
396 */
397 property variant values
398
399=== modified file 'modules/Ubuntu/Components/ListItems/ValueSelector.qml'
400--- modules/Ubuntu/Components/ListItems/ValueSelector.qml 2013-07-04 21:36:23 +0000
401+++ modules/Ubuntu/Components/ListItems/ValueSelector.qml 2013-09-02 15:00:06 +0000
402@@ -18,6 +18,8 @@
403 import Ubuntu.Components 0.1
404
405 /*!
406+ ****DEPRECATED! PLEASE USE ITEM SELECTOR OR FOR THE UBUNTU SHAPE VERSION THE OPTION SELECTOR.****
407+
408 \qmltype ValueSelector
409 \inqmlmodule Ubuntu.Components.ListItems 0.1
410 \ingroup ubuntu-listitems
411
412=== modified file 'modules/Ubuntu/Components/ListItems/qmldir'
413--- modules/Ubuntu/Components/ListItems/qmldir 2012-09-27 18:03:25 +0000
414+++ modules/Ubuntu/Components/ListItems/qmldir 2013-09-02 15:00:06 +0000
415@@ -7,6 +7,7 @@
416 ItemSeparator 0.1 ItemSeparator.qml
417 internal LabelVisual LabelVisual.qml
418 MultiValue 0.1 MultiValue.qml
419+ItemSelector 0.1 ItemSelector.qml
420 internal ProgressionVisual ProgressionVisual.qml
421 ValueSelector 0.1 ValueSelector.qml
422 SingleValue 0.1 SingleValue.qml
423
424=== modified file 'modules/Ubuntu/Components/OptionSelector.qml'
425--- modules/Ubuntu/Components/OptionSelector.qml 2013-08-28 12:12:53 +0000
426+++ modules/Ubuntu/Components/OptionSelector.qml 2013-09-02 15:00:06 +0000
427@@ -16,7 +16,7 @@
428
429 import QtQuick 2.0
430 import "ListItems" as ListItem
431-import Ubuntu.Components 0.1 as Components
432+import Ubuntu.Components 0.1 as Toolkit
433
434 /*!
435 \qmltype OptionSelector
436@@ -99,21 +99,21 @@
437 property Component delegate: OptionSelectorDelegate {}
438
439 /*!
440+ \preliminary
441+ Custom height for list container which allows scrolling inside the selector.
442+ */
443+ property real containerHeight: list.contentHeight
444+
445+ /*!
446 \qmlproperty int selectedIndex
447 The index of the currently selected element in our list.
448 */
449- readonly property alias selectedIndex: list.currentIndex
450-
451- /*!
452- \qmlproperty real containerHeight
453- Custom height for list container which allows scrolling inside the selector.
454- */
455- property real containerHeight: list.contentHeight
456-
457- /*!
458- Called when the optionSelector is either expanded or collapsed.
459- */
460- signal scroll()
461+ property alias selectedIndex: list.currentIndex
462+
463+ /*!
464+ Called when delegate is clicked.
465+ */
466+ signal delegateClicked(int index)
467
468 showDivider: false
469
470@@ -138,9 +138,8 @@
471 readonly property url chevron: __styleInstance.chevron
472 readonly property url tick: __styleInstance.tick
473 readonly property color themeColour: Theme.palette.selected.fieldText
474+ readonly property alias colourImage: optionSelector.colourImage
475 property bool isExpanded: expanded
476- property bool isFullyExpanded: expanded
477- property bool colourImage: optionSelector.colourImage
478
479 anchors {
480 left: parent.left
481@@ -148,9 +147,6 @@
482 }
483 state: optionSelector.expanded ? state = "expanded" : state = "collapsed"
484 style: Theme.createStyleComponent("OptionSelectorStyle.qml", listContainer)
485-
486- onHeightChanged: scroll()
487-
488 states: [ State {
489 name: "expanded"
490 when: listContainer.isExpanded
491@@ -169,9 +165,17 @@
492 ]
493
494 transitions: [ Transition {
495- UbuntuNumberAnimation {
496- properties: "height"
497- duration: Components.UbuntuAnimation.BriskDuration
498+ SequentialAnimation {
499+ Toolkit.UbuntuNumberAnimation {
500+ properties: "height"
501+ duration: Toolkit.UbuntuAnimation.BriskDuration
502+ }
503+ ScriptAction {
504+ script: {
505+ if (listContainer.isExpanded && list.contentY > 0)
506+ list.contentY += list.itemHeight / 2
507+ }
508+ }
509 }
510 }
511 ]
512@@ -183,7 +187,9 @@
513 readonly property alias expanded: optionSelector.expanded
514 readonly property alias container: listContainer
515 property real itemHeight
516+ signal delegateClicked(int index)
517
518+ onDelegateClicked: optionSelector.delegateClicked(index);
519 boundsBehavior: Flickable.StopAtBounds
520 interactive: listContainer.height !== list.contentHeight && listContainer.isExpanded ? true : false
521 clip: true
522@@ -192,6 +198,13 @@
523 anchors.fill: parent
524
525 delegate: optionSelector.delegate
526+
527+ Behavior on contentY {
528+ UbuntuNumberAnimation {
529+ properties: "contentY"
530+ duration: UbuntuAnimation.BriskDuration
531+ }
532+ }
533 }
534 }
535 }
536
537=== modified file 'modules/Ubuntu/Components/OptionSelectorDelegate.qml'
538--- modules/Ubuntu/Components/OptionSelectorDelegate.qml 2013-08-28 12:08:06 +0000
539+++ modules/Ubuntu/Components/OptionSelectorDelegate.qml 2013-09-02 15:00:06 +0000
540@@ -16,15 +16,15 @@
541
542 /*!
543 \qmltype OptionSelectorDelegate
544- \inqmlmodule Components.Components 0.1
545- \ingroup ubuntu-components
546+ \inqmlmodule Toolkit.Toolkit 0.1
547+ \ingroup ubuntu-Toolkit
548 \brief OptionSelector delegate which can display text, subtext and an image from a custom model.
549
550 \b{This component is under heavy development.}
551
552 Examples:
553 \qml
554- import Components.Components 0.1
555+ import Ubuntu.Components 0.1
556 Column {
557 width: 250
558 OptionSelector {
559@@ -45,18 +45,58 @@
560
561 import QtQuick 2.0
562 import "ListItems" as ListItem
563-import Ubuntu.Components 0.1 as Components
564+import Ubuntu.Components 0.1 as Toolkit
565
566 ListItem.Standard {
567 id: option
568
569+ /*!
570+ \preliminary
571+ Main text.
572+ */
573 property string text
574+
575+ /*!
576+ \preliminary
577+ Subtext which appears below the main text.
578+ */
579 property string subText
580+
581+ /*!
582+ \preliminary
583+ Left icon url.
584+ */
585 property url icon
586- property ListView listView: ListView.view
587+
588+ /*!
589+ \preliminary
590+ Constrains the size of the image to nothing greater than that of the delegate. Changes fillMode to Image.PreserveAspectFit.
591+ */
592+ property bool constrainImage: false
593+
594+ /*!
595+ \preliminary
596+ Whether or not left image is coloured by our theme.
597+ */
598+ property bool colourImage: listView.container.colourImage
599+
600+ /*!
601+ \preliminary
602+ Colour of left image.
603+ */
604 property color assetColour: listView.container.themeColour
605- property bool colourImage: listView.container.colourImage
606- property string fragColourShader:
607+
608+ /*!
609+ \preliminary
610+ OptionSelector's ListView.
611+ */
612+ readonly property ListView listView: ListView.view
613+
614+ /*!
615+ \preliminary
616+ Colourising fragment shader.
617+ */
618+ readonly property string fragColourShader:
619 "varying highp vec2 qt_TexCoord0;
620 uniform sampler2D source;
621 uniform lowp vec4 colour;
622@@ -73,10 +113,12 @@
623 selected: ListView.isCurrentItem
624 anchors {
625 left: parent.left
626- leftMargin: units.gu(-2)
627+ leftMargin: units.gu(-1)
628 }
629 onClicked: {
630 if (listView.container.isExpanded) {
631+ listView.delegateClicked(index);
632+
633 listView.previousIndex = listView.currentIndex;
634 listView.currentIndex = index;
635 }
636@@ -112,10 +154,10 @@
637 transitions: [ Transition {
638 from: "dividerExpanded"
639 to: "dividerCollapsed"
640- UbuntuNumberAnimation {
641+ Toolkit.UbuntuNumberAnimation {
642 target: option.divider
643 properties: "opacity"
644- duration: Components.UbuntuAnimation.SlowDuration
645+ duration: Toolkit.UbuntuAnimation.SlowDuration
646 }
647 }
648 ]
649@@ -159,9 +201,9 @@
650 properties: "opacity"
651 from : 1.0
652 to: 0.0
653- duration: Components.UbuntuAnimation.FastDuration
654+ duration: Toolkit.UbuntuAnimation.FastDuration
655 }
656- PauseAnimation { duration: Components.UbuntuAnimation.BriskDuration - Components.UbuntuAnimation.FastDuration }
657+ PauseAnimation { duration: Toolkit.UbuntuAnimation.BriskDuration - Toolkit.UbuntuAnimation.FastDuration }
658 PropertyAction {
659 target: image
660 property: "source"
661@@ -172,7 +214,7 @@
662 properties: "opacity"
663 from : 0.0
664 to: 1.0
665- duration: Components.UbuntuAnimation.FastDuration
666+ duration: Toolkit.UbuntuAnimation.FastDuration
667 }
668 }, PropertyAnimation {
669 id: optionExpansion
670@@ -181,19 +223,19 @@
671 properties: "opacity"
672 from : 0.0
673 to: 1.0
674- duration: Components.UbuntuAnimation.SlowDuration
675+ duration: Toolkit.UbuntuAnimation.SlowDuration
676 }, SequentialAnimation {
677 id: deselectedImageCollapse
678
679- PauseAnimation { duration: Components.UbuntuAnimation.BriskDuration }
680+ PauseAnimation { duration: Toolkit.UbuntuAnimation.BriskDuration }
681 PropertyAnimation {
682 target: image
683 properties: "opacity"
684 from : 1.0
685 to: 0.0
686- duration: Components.UbuntuAnimation.FastDuration
687+ duration: Toolkit.UbuntuAnimation.FastDuration
688 }
689- PauseAnimation { duration: Components.UbuntuAnimation.FastDuration }
690+ PauseAnimation { duration: Toolkit.UbuntuAnimation.FastDuration }
691 PropertyAction {
692 target: image
693 property: "source"
694@@ -204,7 +246,7 @@
695 properties: "opacity"
696 from : 0.0
697 to: 1.0
698- duration: Components.UbuntuAnimation.FastDuration
699+ duration: Toolkit.UbuntuAnimation.FastDuration
700 }
701 }, SequentialAnimation {
702 id: selectedImageCollapse
703@@ -214,17 +256,17 @@
704 properties: "opacity"
705 from : 0.0
706 to: 1.0
707- duration: Components.UbuntuAnimation.FastDuration
708+ duration: Toolkit.UbuntuAnimation.FastDuration
709 }
710- PauseAnimation { duration: Components.UbuntuAnimation.BriskDuration - Components.UbuntuAnimation.FastDuration }
711+ PauseAnimation { duration: Toolkit.UbuntuAnimation.BriskDuration - Toolkit.UbuntuAnimation.FastDuration }
712 PropertyAnimation {
713 target: image
714 properties: "opacity"
715 from : 1.0
716 to: 0.0
717- duration: Components.UbuntuAnimation.FastDuration
718+ duration: Toolkit.UbuntuAnimation.FastDuration
719 }
720- PauseAnimation { duration: Components.UbuntuAnimation.FastDuration }
721+ PauseAnimation { duration: Toolkit.UbuntuAnimation.FastDuration }
722 PropertyAction {
723 target: image
724 property: "source"
725@@ -235,7 +277,7 @@
726 properties: "opacity"
727 from : 0.0
728 to: 1.0
729- duration: Components.UbuntuAnimation.FastDuration
730+ duration: Toolkit.UbuntuAnimation.FastDuration
731 }
732 }, PropertyAnimation {
733 id: optionCollapse
734@@ -243,7 +285,7 @@
735 properties: "opacity"
736 from : 1.0
737 to: 0.0
738- duration: Components.UbuntuAnimation.SlowDuration
739+ duration: Toolkit.UbuntuAnimation.SlowDuration
740 }
741 ]
742
743@@ -258,8 +300,11 @@
744
745 Image {
746 id: leftIcon
747+ objectName: "icon"
748
749+ height: constrainImage ? option.height : sourceSize.height
750 source: icon
751+ fillMode: constrainImage ? Image.PreserveAspectFit : Image.Stretch
752
753 ShaderEffect {
754 property color colour: assetColour
755@@ -297,7 +342,7 @@
756 opacity: option.selected ? 1.0 : 0.0
757 anchors {
758 right: parent.right
759- rightMargin: units.gu(2)
760+ rightMargin: units.gu(3)
761 verticalCenter: parent.verticalCenter
762 }
763
764@@ -305,9 +350,9 @@
765 Behavior on opacity {
766 enabled: listView.expanded
767
768- UbuntuNumberAnimation {
769+ Toolkit.UbuntuNumberAnimation {
770 properties: "opacity"
771- duration: Components.UbuntuAnimation.FastDuration
772+ duration: Toolkit.UbuntuAnimation.FastDuration
773 }
774 }
775
776
777=== added file 'modules/Ubuntu/Components/Themes/Ambiance/ListItemOptionSelectorStyle.qml'
778--- modules/Ubuntu/Components/Themes/Ambiance/ListItemOptionSelectorStyle.qml 1970-01-01 00:00:00 +0000
779+++ modules/Ubuntu/Components/Themes/Ambiance/ListItemOptionSelectorStyle.qml 2013-09-02 15:00:06 +0000
780@@ -0,0 +1,27 @@
781+/*
782+ * Copyright 2013 Canonical Ltd.
783+ *
784+ * This program is free software; you can redistribute it and/or modify
785+ * it under the terms of the GNU Lesser General Public License as published by
786+ * the Free Software Foundation; version 3.
787+ *
788+ * This program is distributed in the hope that it will be useful,
789+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
790+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
791+ * GNU Lesser General Public License for more details.
792+ *
793+ * You should have received a copy of the GNU Lesser General Public License
794+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
795+ *
796+ */
797+
798+import QtQuick 2.0
799+import Ubuntu.Components 0.1
800+
801+Item {
802+ id: ambianceStyle
803+
804+ property url chevron: "../../artwork/chevron_down@30.png"
805+ property url tick: "../../artwork/tick@30.png"
806+ property bool colourComponent: true
807+}
808
809=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/qmldir'
810--- modules/Ubuntu/Components/Themes/Ambiance/qmldir 2013-08-28 10:53:54 +0000
811+++ modules/Ubuntu/Components/Themes/Ambiance/qmldir 2013-09-02 15:00:06 +0000
812@@ -5,6 +5,7 @@
813 internal DialogForegroundStyle DialogForegroundStyle.qml
814 internal HeaderStyle HeaderStyle.qml
815 MainViewStyle 0.1 MainViewStyle.qml
816+ListItemOptionSelector 0.1 ListItemOptionSelector.qml
817 OptionSelectorStyle 0.1 OptionSelectorStyle.qml
818 PopoverForegroundStyle 0.1 PopoverForegroundStyle.qml
819 internal ScrollbarStyle ScrollbarStyle.qml
820
821=== added file 'modules/Ubuntu/Components/Themes/SuruDark/ListItemOptionSelectorStyle.qml'
822--- modules/Ubuntu/Components/Themes/SuruDark/ListItemOptionSelectorStyle.qml 1970-01-01 00:00:00 +0000
823+++ modules/Ubuntu/Components/Themes/SuruDark/ListItemOptionSelectorStyle.qml 2013-09-02 15:00:06 +0000
824@@ -0,0 +1,23 @@
825+/*
826+ * Copyright 2013 Canonical Ltd.
827+ *
828+ * This program is free software; you can redistribute it and/or modify
829+ * it under the terms of the GNU Lesser General Public License as published by
830+ * the Free Software Foundation; version 3.
831+ *
832+ * This program is distributed in the hope that it will be useful,
833+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
834+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
835+ * GNU Lesser General Public License for more details.
836+ *
837+ * You should have received a copy of the GNU Lesser General Public License
838+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
839+ *
840+ */
841+
842+import QtQuick 2.0
843+import Ubuntu.Components.Themes.Ambiance 0.1
844+
845+ListItemOptionSelectorStyle {
846+ id: suruDarkStyle
847+}
848
849=== added file 'modules/Ubuntu/Components/Themes/SuruGradient/ListItemOptionSelectorStyle.qml'
850--- modules/Ubuntu/Components/Themes/SuruGradient/ListItemOptionSelectorStyle.qml 1970-01-01 00:00:00 +0000
851+++ modules/Ubuntu/Components/Themes/SuruGradient/ListItemOptionSelectorStyle.qml 2013-09-02 15:00:06 +0000
852@@ -0,0 +1,27 @@
853+/*
854+ * Copyright 2013 Canonical Ltd.
855+ *
856+ * This program is free software; you can redistribute it and/or modify
857+ * it under the terms of the GNU Lesser General Public License as published by
858+ * the Free Software Foundation; version 3.
859+ *
860+ * This program is distributed in the hope that it will be useful,
861+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
862+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
863+ * GNU Lesser General Public License for more details.
864+ *
865+ * You should have received a copy of the GNU Lesser General Public License
866+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
867+ *
868+ */
869+
870+import QtQuick 2.0
871+import Ubuntu.Components.Themes.Ambiance 0.1
872+
873+ListItemOptionSelectorStyle {
874+ id: suruGradientStyle
875+
876+ chevron: "artwork/chevron_down@30.png"
877+ tick: "artwork/tick@30.png"
878+ colourComponent: false
879+}
880
881=== added directory 'tests/resources/optionselector'
882=== added file 'tests/resources/optionselector/test.png'
883Binary files tests/resources/optionselector/test.png 1970-01-01 00:00:00 +0000 and tests/resources/optionselector/test.png 2013-09-02 15:00:06 +0000 differ
884=== removed file 'tests/unit/tst_components/tst_optionselector.qml'
885--- tests/unit/tst_components/tst_optionselector.qml 2013-08-28 10:43:46 +0000
886+++ tests/unit/tst_components/tst_optionselector.qml 1970-01-01 00:00:00 +0000
887@@ -1,107 +0,0 @@
888-/*
889- * Copyright 2012 Canonical Ltd.
890- *
891- * This program is free software; you can redistribute it and/or modify
892- * it under the terms of the GNU Lesser General Public License as published by
893- * the Free Software Foundation; version 3.
894- *
895- * This program is distributed in the hope that it will be useful,
896- * but WITHOUT ANY WARRANTY; without even the implied warranty of
897- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
898- * GNU Lesser General Public License for more details.
899- *
900- * You should have received a copy of the GNU Lesser General Public License
901- * along with this program. If not, see <http://www.gnu.org/licenses/>.
902- */
903-
904-import QtQuick 2.0
905-import QtTest 1.0
906-import Ubuntu.Components 0.1
907-import Ubuntu.Test 0.1
908-
909-UbuntuTestCase {
910- name: "OptionSelectorAPI"
911-
912- function test_expanded() {
913- var listContainer = findChild(optionSelector, "listContainer");
914-
915- optionSelector.expanded = false;
916- compare(listContainer.isExpanded, false, "isExpanded should be true if list is an expanded one");
917-
918- optionSelector.expanded = true;
919- compare(listContainer.isExpanded, true, "isExpanded should be false if list is an expanded one");
920- }
921-
922- function test_states_and_signal() {
923- var listContainer = findChild(optionSelector, "listContainer");
924-
925- signalSpy.signalName = "scroll";
926- compare(signalSpy.count, 0);
927-
928- optionSelector.expanded = false;
929- compare(listContainer.state, "collapsed", "state should be collapsed");
930-
931- optionSelector.expanded = true;
932- compare(listContainer.state, "expanded", "state should be expanded");
933-
934- //Check if scroll signal was fired after expansion.
935- compare(signalSpy.count, 2);
936- }
937-
938- function test_text() {
939- compare(optionSelector.text,"","text is '' by default")
940- var newText = "Hello World!";
941- optionSelector.text = newText;
942- compare(optionSelector.text, newText, "set/get");
943- }
944-
945- function test_selectedIndex() {
946- compare(optionSelector.selectedIndex, 0, "selectedIndex is 0 by default");
947- }
948-
949- function test_values() {
950- compare(optionSelector.values,undefined,"values is undefined by default")
951- var newValues = ["value1","value2","value3"];
952- optionSelector.model = newValues;
953- compare(optionSelector.model, newValues, "set/get");
954- }
955-
956- function test_custom_model_delegate() {
957- compare(optionSelector.model, undefined, "model is undefined by default");
958- optionSelector.model = customModel;
959- optionSelector.delegate = selectorDelegate;
960- compare(optionSelector.model, customModel, "Model wasn't set correctly.");
961- compare(optionSelector.delegate, selectorDelegate, "Delegate hasn't been set correctly");
962- }
963-
964- Rectangle {
965- id: testItem
966- }
967-
968- OptionSelector {
969- id: optionSelector
970-
971- SignalSpy {
972- id: signalSpy
973- target: optionSelector
974- }
975- }
976-
977- OptionSelector {
978- id: optionSelectorCustomModel
979- }
980-
981- Component {
982- id: selectorDelegate
983-
984- OptionSelectorDelegate { text: name; subText: description }
985- }
986-
987- ListModel {
988- id: customModel
989- ListElement { name: "Name 1"; description: "Description 1" }
990- ListElement { name: "Name 2"; description: "Description 2" }
991- ListElement { name: "Name 3"; description: "Description 3" }
992- ListElement { name: "Name 4"; description: "Description 4" }
993- }
994-}
995
996=== added file 'tests/unit_x11/tst_components/tst_listitems_itemselector.qml'
997--- tests/unit_x11/tst_components/tst_listitems_itemselector.qml 1970-01-01 00:00:00 +0000
998+++ tests/unit_x11/tst_components/tst_listitems_itemselector.qml 2013-09-02 15:00:06 +0000
999@@ -0,0 +1,126 @@
1000+/*
1001+ * Copyright 2012 Canonical Ltd.
1002+ *
1003+ * This program is free software; you can redistribute it and/or modify
1004+ * it under the terms of the GNU Lesser General Public License as published by
1005+ * the Free Software Foundation; version 3.
1006+ *
1007+ * This program is distributed in the hope that it will be useful,
1008+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
1009+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
1010+ * GNU Lesser General Public License for more details.
1011+ *
1012+ * You should have received a copy of the GNU Lesser General Public License
1013+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
1014+ */
1015+
1016+import QtQuick 2.0
1017+import QtTest 1.0
1018+import Ubuntu.Components 0.1
1019+import Ubuntu.Components.ListItems 0.1 as ListItem
1020+import Ubuntu.Test 0.1
1021+
1022+Item {
1023+ width: 400
1024+ height: 400
1025+
1026+ Column {
1027+ anchors {
1028+ left: parent.left
1029+ right: parent.right
1030+ }
1031+ ListItem.ItemSelector {
1032+ id: selector
1033+
1034+ text: "TEST"
1035+ delegate: selectorDelegate
1036+ model: customModel
1037+ expanded: true
1038+ }
1039+
1040+ OptionSelectorDelegate {
1041+ id: testDelegate
1042+
1043+ text: "TEST"
1044+ subText: "test"
1045+ icon: "../../resources/optionselector/test.png"
1046+ constrainImage: true
1047+ }
1048+ }
1049+
1050+ Component {
1051+ id: selectorDelegate
1052+
1053+ OptionSelectorDelegate {
1054+ text: name
1055+ subText: description
1056+ icon: image
1057+ constrainImage: true
1058+ }
1059+ }
1060+
1061+ ListModel {
1062+ id: customModel
1063+ ListElement { name: "Name 1"; description: "Description 1"; image: "../../resources/optionselector/test.png" }
1064+ ListElement { name: "Name 2"; description: "Description 2"; image: "../../resources/optionselector/test.png" }
1065+ ListElement { name: "Name 3"; description: "Description 3"; image: "../../resources/optionselector/test.png" }
1066+ ListElement { name: "Name 4"; description: "Description 4"; image: "../../resources/optionselector/test.png" }
1067+ }
1068+
1069+ SignalSpy {
1070+ id: clickedSignal
1071+ target: selector
1072+ signalName: "delegateClicked"
1073+ }
1074+
1075+ UbuntuTestCase {
1076+ name: "ItemSelectorAPI"
1077+ when: windowShown
1078+
1079+ function test_expanded() {
1080+ var listContainer = findChild(selector, "listContainer");
1081+
1082+ selector.expanded = false;
1083+ compare(listContainer.isExpanded, false, "isExpanded should be true if list is an expanded one");
1084+ compare(listContainer.state, "collapsed", "state should be collapsed");
1085+
1086+ selector.expanded = true;
1087+ compare(listContainer.isExpanded, true, "isExpanded should be false if list is an expanded one");
1088+ compare(listContainer.state, "expanded", "state should be expanded");
1089+ }
1090+
1091+ function test_text() {
1092+ var newText = "Hello World!";
1093+ selector.text = newText;
1094+ compare(selector.text, newText, "set/get");
1095+ }
1096+
1097+ function test_selectedIndex() {
1098+ compare(selector.selectedIndex, 0, "selectedIndex is 0 by default");
1099+ }
1100+
1101+ function test_model() {
1102+ selector.model = undefined;
1103+ var newValues = ["value0","value1","value2","value3"];
1104+ selector.model = newValues;
1105+ compare(selector.model, newValues, "set/get");
1106+ }
1107+
1108+ function test_custom_model_delegate() {
1109+ compare(selector.model, customModel, "Model wasn't set correctly.");
1110+ compare(selector.delegate, selectorDelegate, "Delegate hasn't been set correctly");
1111+ }
1112+
1113+ function test_image_constraint() {
1114+ var image = findChild(testDelegate, "icon");
1115+ compare(image.height, testDelegate.height);
1116+ }
1117+
1118+ function test_signal() {
1119+ mouseMove(selector, 100, 100);
1120+ mouseClick(selector, 100, 100, Qt.LeftButton);
1121+ wait(100)
1122+ compare(clickedSignal.count, 1, "Clicked not emitted.");
1123+ }
1124+ }
1125+}
1126
1127=== added file 'tests/unit_x11/tst_components/tst_optionselector.qml'
1128--- tests/unit_x11/tst_components/tst_optionselector.qml 1970-01-01 00:00:00 +0000
1129+++ tests/unit_x11/tst_components/tst_optionselector.qml 2013-09-02 15:00:06 +0000
1130@@ -0,0 +1,125 @@
1131+/*
1132+ * Copyright 2012 Canonical Ltd.
1133+ *
1134+ * This program is free software; you can redistribute it and/or modify
1135+ * it under the terms of the GNU Lesser General Public License as published by
1136+ * the Free Software Foundation; version 3.
1137+ *
1138+ * This program is distributed in the hope that it will be useful,
1139+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
1140+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
1141+ * GNU Lesser General Public License for more details.
1142+ *
1143+ * You should have received a copy of the GNU Lesser General Public License
1144+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
1145+ */
1146+
1147+import QtQuick 2.0
1148+import QtTest 1.0
1149+import Ubuntu.Components 0.1
1150+import Ubuntu.Test 0.1
1151+
1152+Item {
1153+ width: 400
1154+ height: 400
1155+
1156+ Column {
1157+ anchors {
1158+ left: parent.left
1159+ right: parent.right
1160+ }
1161+ OptionSelector {
1162+ id: selector
1163+
1164+ text: "TEST"
1165+ delegate: selectorDelegate
1166+ model: customModel
1167+ expanded: true
1168+ }
1169+
1170+ OptionSelectorDelegate {
1171+ id: testDelegate
1172+
1173+ text: "TEST"
1174+ subText: "test"
1175+ icon: "../../resources/optionselector/test.png"
1176+ constrainImage: true
1177+ }
1178+ }
1179+
1180+ Component {
1181+ id: selectorDelegate
1182+
1183+ OptionSelectorDelegate {
1184+ text: name
1185+ subText: description
1186+ icon: image
1187+ constrainImage: true
1188+ }
1189+ }
1190+
1191+ ListModel {
1192+ id: customModel
1193+ ListElement { name: "Name 1"; description: "Description 1"; image: "../../resources/optionselector/test.png" }
1194+ ListElement { name: "Name 2"; description: "Description 2"; image: "../../resources/optionselector/test.png" }
1195+ ListElement { name: "Name 3"; description: "Description 3"; image: "../../resources/optionselector/test.png" }
1196+ ListElement { name: "Name 4"; description: "Description 4"; image: "../../resources/optionselector/test.png" }
1197+ }
1198+
1199+ SignalSpy {
1200+ id: clickedSignal
1201+ target: selector
1202+ signalName: "delegateClicked"
1203+ }
1204+
1205+ UbuntuTestCase {
1206+ name: "OptionSelectorAPI"
1207+ when: windowShown
1208+
1209+ function test_expanded() {
1210+ var listContainer = findChild(selector, "listContainer");
1211+
1212+ selector.expanded = false;
1213+ compare(listContainer.isExpanded, false, "isExpanded should be true if list is an expanded one");
1214+ compare(listContainer.state, "collapsed", "state should be collapsed");
1215+
1216+ selector.expanded = true;
1217+ compare(listContainer.isExpanded, true, "isExpanded should be false if list is an expanded one");
1218+ compare(listContainer.state, "expanded", "state should be expanded");
1219+ }
1220+
1221+ function test_text() {
1222+ var newText = "Hello World!";
1223+ selector.text = newText;
1224+ compare(selector.text, newText, "set/get");
1225+ }
1226+
1227+ function test_selectedIndex() {
1228+ compare(selector.selectedIndex, 0, "selectedIndex is 0 by default");
1229+ }
1230+
1231+ function test_model() {
1232+ selector.model = undefined;
1233+ var newValues = ["value0","value1","value2","value3"];
1234+ selector.model = newValues;
1235+ compare(selector.model, newValues, "set/get");
1236+ }
1237+
1238+ function test_custom_model_delegate() {
1239+ compare(selector.model, customModel, "Model wasn't set correctly.");
1240+ compare(selector.delegate, selectorDelegate, "Delegate hasn't been set correctly");
1241+ }
1242+
1243+ function test_image_constraint() {
1244+ var image = findChild(testDelegate, "icon");
1245+ compare(image.height, testDelegate.height);
1246+ }
1247+
1248+ function test_signal() {
1249+ mouseMove(selector, 100, 100);
1250+ mouseClick(selector, 100, 100, Qt.LeftButton);
1251+ wait(100)
1252+ compare(clickedSignal.count, 1, "Clicked not emitted.");
1253+ }
1254+ }
1255+}

Subscribers

People subscribed via source and target branches

to status/vote changes: