Merge lp:~nicolas-doffay/ubuntu-ui-toolkit/ubuntu-shape-option-selector into lp:ubuntu-ui-toolkit
- ubuntu-shape-option-selector
- Merge into trunk
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 | ||||
Related bugs: |
|
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.
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:633
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:634
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:635
http://
Executed test runs:
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
UNSTABLE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:636
http://
Executed test runs:
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
UNSTABLE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:639
http://
Executed test runs:
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
UNSTABLE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:640
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:641
http://
Executed test runs:
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
UNSTABLE: http://
Click here to trigger a rebuild:
http://
Michał Sawicz (saviq) wrote : | # |
There are a few visual issues - compare the two images:
http://
http://
* 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?
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:642
http://
Executed test runs:
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
UNSTABLE: http://
Click here to trigger a rebuild:
http://
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.
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:643
http://
Executed test runs:
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
UNSTABLE: http://
Click here to trigger a rebuild:
http://
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?
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:644
http://
Executed test runs:
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
UNSTABLE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:645
http://
Executed test runs:
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
UNSTABLE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:646
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:647
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
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.
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:648
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:649
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:651
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:652
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:653
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:653
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:654
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:655
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:657
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:658
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:659
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:660
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:661
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
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.
Nicolas d'Offay (nicolas-doffay) wrote : | # |
I named it incorrectly! Good point about the state checking too. Moved it to the end.
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:662
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:663
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:665
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:666
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
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
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:668
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:669
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:672
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
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
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:676
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:678
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:681
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:685
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:686
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:687
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
Michał Sawicz (saviq) wrote : | # |
This looks good now!
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:690
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:692
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:693
http://
Executed test runs:
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
UNSTABLE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:694
http://
Executed test runs:
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
UNSTABLE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:695
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:697
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:698
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:699
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:700
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:701
http://
Executed test runs:
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
UNSTABLE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:700
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:702
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:703
http://
Executed test runs:
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
UNSTABLE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:704
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:705
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:706
http://
Executed test runs:
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
UNSTABLE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:710
http://
Executed test runs:
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
UNSTABLE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
PASSED: Continuous integration, rev:711
http://
Executed test runs:
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
PASSED: Continuous integration, rev:712
http://
Executed test runs:
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
PASSED: Continuous integration, rev:713
http://
Executed test runs:
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
Click here to trigger a rebuild:
http://
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.
PS Jenkins bot (ps-jenkins) wrote : | # |
PASSED: Continuous integration, rev:714
http://
Executed test runs:
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
Click here to trigger a rebuild:
http://
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.
PS Jenkins bot (ps-jenkins) wrote : | # |
PASSED: Continuous integration, rev:717
http://
Executed test runs:
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
Click here to trigger a rebuild:
http://
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.
- 716. By Zsombor Egri
-
Fixing Unity8 crash with the latest SDK release. (LP: #1217650)
Zsombor Egri (zsombi) wrote : | # |
Guys, you made the PopoverForegrou
Thx!
- 717. By Timo Jyrinki
-
Sync changelog.
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:718
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:720
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
- 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 OptionSelectorD
elegate. - 724. By Nicolas d'Offay
-
Changed documentation again, OptionSelector is a component, not a ListItem.
PS Jenkins bot (ps-jenkins) wrote : | # |
PASSED: Continuous integration, rev:721
http://
Executed test runs:
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
Click here to trigger a rebuild:
http://
PS Jenkins bot (ps-jenkins) wrote : | # |
PASSED: Continuous integration, rev:724
http://
Executed test runs:
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
Click here to trigger a rebuild:
http://
Preview Diff
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' |
160 | Binary files examples/ubuntu-ui-toolkit-gallery/images.png 1970-01-01 00:00:00 +0000 and examples/ubuntu-ui-toolkit-gallery/images.png 2013-08-28 12:13:08 +0000 differ |
161 | === modified file 'modules/Ubuntu/Components/ListItems/Empty.qml' |
162 | --- modules/Ubuntu/Components/ListItems/Empty.qml 2013-08-28 08:06:11 +0000 |
163 | +++ modules/Ubuntu/Components/ListItems/Empty.qml 2013-08-28 12:13:08 +0000 |
164 | @@ -120,34 +120,7 @@ |
165 | 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' |
819 | Binary files modules/Ubuntu/Components/Themes/Ambiance/artwork/tick@30.png 2013-08-28 08:06:11 +0000 and modules/Ubuntu/Components/Themes/Ambiance/artwork/tick@30.png 1970-01-01 00:00:00 +0000 differ |
820 | === modified file 'modules/Ubuntu/Components/Themes/Ambiance/qmldir' |
821 | --- modules/Ubuntu/Components/Themes/Ambiance/qmldir 2013-08-28 08:06:11 +0000 |
822 | +++ modules/Ubuntu/Components/Themes/Ambiance/qmldir 2013-08-28 12:13:08 +0000 |
823 | @@ -5,6 +5,7 @@ |
824 | 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' |
894 | Binary files modules/Ubuntu/Components/Themes/SuruGradient/artwork/chevron_down@30.png 1970-01-01 00:00:00 +0000 and modules/Ubuntu/Components/Themes/SuruGradient/artwork/chevron_down@30.png 2013-08-28 12:13:08 +0000 differ |
895 | === added file 'modules/Ubuntu/Components/Themes/SuruGradient/artwork/tick@30.png' |
896 | Binary files modules/Ubuntu/Components/Themes/SuruGradient/artwork/tick@30.png 1970-01-01 00:00:00 +0000 and modules/Ubuntu/Components/Themes/SuruGradient/artwork/tick@30.png 2013-08-28 12:13:08 +0000 differ |
897 | === added file 'modules/Ubuntu/Components/artwork/chevron_down@30.png' |
898 | Binary files modules/Ubuntu/Components/artwork/chevron_down@30.png 1970-01-01 00:00:00 +0000 and modules/Ubuntu/Components/artwork/chevron_down@30.png 2013-08-28 12:13:08 +0000 differ |
899 | === added file 'modules/Ubuntu/Components/artwork/tick@30.png' |
900 | Binary files modules/Ubuntu/Components/artwork/tick@30.png 1970-01-01 00:00:00 +0000 and modules/Ubuntu/Components/artwork/tick@30.png 2013-08-28 12:13:08 +0000 differ |
901 | === modified file 'modules/Ubuntu/Components/qmldir' |
902 | --- modules/Ubuntu/Components/qmldir 2013-08-28 08:06:11 +0000 |
903 | +++ modules/Ubuntu/Components/qmldir 2013-08-28 12:13:08 +0000 |
904 | @@ -25,6 +25,8 @@ |
905 | 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 | +} |
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.