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

Proposed by Nicolas d'Offay
Status: Merged
Approved by: Cris Dywan
Approved revision: 724
Merged at revision: 722
Proposed branch: lp:~nicolas-doffay/ubuntu-ui-toolkit/ubuntu-shape-option-selector
Merge into: lp:ubuntu-ui-toolkit
Diff against target: 1049 lines (+824/-58)
15 files modified
CHANGES (+1/-1)
components.api (+17/-0)
examples/ubuntu-ui-toolkit-gallery/ListItems.qml (+0/-12)
examples/ubuntu-ui-toolkit-gallery/OptionSelectors.qml (+73/-0)
examples/ubuntu-ui-toolkit-gallery/WidgetsModel.qml (+5/-0)
modules/Ubuntu/Components/ListItems/Empty.qml (+9/-44)
modules/Ubuntu/Components/OptionSelector.qml (+198/-0)
modules/Ubuntu/Components/OptionSelectorDelegate.qml (+324/-0)
modules/Ubuntu/Components/Themes/Ambiance/OptionSelectorStyle.qml (+35/-0)
modules/Ubuntu/Components/Themes/Ambiance/qmldir (+1/-0)
modules/Ubuntu/Components/Themes/SuruDark/OptionSelectorStyle.qml (+23/-0)
modules/Ubuntu/Components/Themes/SuruGradient/OptionSelectorStyle.qml (+27/-0)
modules/Ubuntu/Components/qmldir (+2/-0)
tests/autopilot/ubuntuuitoolkit/tests/gallery/test_gallery.py (+2/-1)
tests/unit/tst_components/tst_optionselector.qml (+107/-0)
To merge this branch: bzr merge lp:~nicolas-doffay/ubuntu-ui-toolkit/ubuntu-shape-option-selector
Reviewer Review Type Date Requested Status
PS Jenkins bot continuous-integration Approve
Zsombor Egri Approve
Cris Dywan Approve
Michał Sawicz functional Approve
Review via email: mp+175242@code.launchpad.net

Commit message

Themed UbuntuShape OptionSelector.

Description of the change

Added UbuntuShape OptionSelector to components with Ambiance, SuruDark and SuruGradient themes.

To post a comment you must log in.
Revision history for this message
Cris Dywan (kalikiana) wrote :

selectedIndex needs "\qmlproperty int selectedIndex" to make it show the type in the docs.

"scrollContainer" seems a little magic - I'm seeing this for the first time and there's no type check. I have a "flickable" property elsewhere… does this expect a flickable? Or some other component?

How about documenting that "values" is indeed a list model? One might not expect that it's supported.

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: 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
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
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
Michał Sawicz (saviq) wrote :

There are a few visual issues - compare the two images:

http://ubuntuone.com/6OMAdfdJG4nACLEbqJJTYj
http://ubuntuone.com/3RBKZ3CYARvYRk0QN0JqGZ

* the only change there is expanding the list, but text shifts
* grey highlight overlays the borders (are you using an UbuntuShape with a ShaderEffectSource for this?)
* the border shape changes weird when expanding (like at the top it gets pretty thick)
* the chevron and "downward caret" signs are replaced in one frame - do we have design guidance on what the transition should be?
* same for the selected item hightlight - shouldn't there be a transition when you change the selection in the "expanded" OptionSelector?
* where is the full-width OptionSelector? And is it desired that ValueSelector isn't there in the gallery any more?

review: Needs Fixing
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
Nicolas d'Offay (nicolas-doffay) wrote :

Good points Saviq. Design's guidance is certainly required. The grey highlight was dealt with in a separate branch for the SDK. It was totally removed since it wasn't required in any components. Unsure as to why this is still here, going to do some digging.

Regarding the full width Option Selector, that will be landed immediatly after this is. They have been split into two separate components as per Florian's request.

The value selector is going to be deprecated, so I figured it would be a good idea to remove it from the gallery.

Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
Cris Dywan (kalikiana) wrote :

Which branch are you referring to wrt the grey highlight? Can you merge the changes here now?

And to re-cap, these design questions need to be resolved:
* the only change there is expanding the list, but text shifts
* the border shape changes weird when expanding (like at the top it gets pretty thick)
* the chevron and "downward caret" signs are replaced in one frame
* shouldn't there be a transition when you change the selection in the "expanded" OptionSelector?

review: Needs Information
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
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
Nicolas d'Offay (nicolas-doffay) wrote :

The issue with the UbuntuShape will hopefully be addressed by Loic's refactoring of it. Holding off on that 'til then.

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
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
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
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
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
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
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
Cris Dywan (kalikiana) wrote :

listItemClicked is missing from components.api.

Shouldn't listItemClicked() come after changing the values? Otherwise a callback handling this would see the old state with no easy way to see what will happen.

review: Needs Fixing
Revision history for this message
Nicolas d'Offay (nicolas-doffay) wrote :

I named it incorrectly! Good point about the state checking too. Moved it to the end.

Revision history for this message
Cris Dywan (kalikiana) wrote :

Nice stuff.

review: Approve
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
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
Michał Sawicz (saviq) wrote :

The animations are incorrect:
* when expanding, there should be no pause before the tick replaces the chevron - according to design, the chevron should finish fading out when the expansion finished, and that's when the tick is supposed to fade in
* ticks and chevrons should not cross-fade, but fade-out and fade-in in sequence
* ticks should fade-out/fade-in when changing positions

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: 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
Michał Sawicz (saviq) wrote :

* the first divider does not fade-out / in, the design says that all of them should.
* the chevron/tick fade-out/fade-in is only started *after* the expansion happened, the chevron fade-out should finish with the expansion and then the tick fade-in should start

Something is wrong with first item's tick animation, in gallery:
* expand the expandable selector
* observe the first item's tick
* select a different option - the first item's tick flickers

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: 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
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
PS Jenkins bot (ps-jenkins) wrote :
review: Needs Fixing (continuous-integration)
Revision history for this message
Michał Sawicz (saviq) wrote :

This looks good now!

review: Approve (functional)
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
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
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
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
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
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
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
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
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
Cris Dywan (kalikiana) wrote :

I'll be damned, r711 looks so dead simple just to fix Jenkins. For record, we need to get better ways to locally test and find such problems.

Love the delegate, nice and simple on the app side. A style we should consider in other places when it makes sense.

There's one problem theming-wise I see: with SuruGradient the icon used in the gallery won't change color. It should be supporting the colorizing done in eg. Icon. It would be nice to move the Image/ShaderEffect of Icon into a component like ColorizedIcon and re-use the code. This could also be used for the chevron.

review: Needs Fixing
Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Approve (continuous-integration)
Revision history for this message
Nicolas d'Offay (nicolas-doffay) wrote :

I think for this case it would be best to leave ColourizeIcon as it as, instead move the tick and chevron assets to where the "Icon" assets live and use an Image for that component. As for the image, I think the shader should be used in this case.

Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Approve (continuous-integration)
Revision history for this message
Cris Dywan (kalikiana) wrote :

> I think for this case it would be best to leave ColourizeIcon as it as,
> instead move the tick and chevron assets to where the "Icon" assets live and
> use an Image for that component. As for the image, I think the shader should
> be used in this case.

*nod* I'm fine with leaving that for a separate branch/ discussion. Theming works fine now with the shader.

review: Approve
716. By Zsombor Egri

Fixing Unity8 crash with the latest SDK release. (LP: #1217650)

Revision history for this message
Zsombor Egri (zsombi) wrote :

Guys, you made the PopoverForegroundStyle as internal, and that breaks Unity8. So I had to remove this from the trunk and set back for review. Please push it again once fixed.

Thx!

review: Needs Fixing
717. By Timo Jyrinki

Sync changelog.

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)
718. By PS Jenkins bot

Releasing 0.1.46+13.10.20130828-0ubuntu1 (revision 717 from lp:ubuntu-ui-toolkit).

Approved by PS Jenkins bot.

719. By Nicolas d'Offay

Comitted revert

720. By Nicolas d'Offay

Bazaar seemed to be confused, redid changes.

721. By Nicolas d'Offay

Merged trunk.

722. By Nicolas d'Offay

Updated docs.

723. By Nicolas d'Offay

Removed some text from the OptionSelectorDelegate.

724. By Nicolas d'Offay

Changed documentation again, OptionSelector is a component, not a ListItem.

Revision history for this message
PS Jenkins bot (ps-jenkins) wrote :
review: Approve (continuous-integration)
Revision history for this message
Zsombor Egri (zsombi) wrote :

good to go now :)

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

Subscribers

People subscribed via source and target branches

to status/vote changes: