@@ -25,11 +25,12 @@ Rectangle {
25 property var model
25 property var model
26 property int selectedIndex: -1
26 property int selectedIndex: -1
27 readonly property double itemHeight: units.gu(4)
27 readonly property double itemHeight: units.gu(4)
28+ property int maxVisibleItems: 6
29 color: theme.palette.normal.background
30 color: theme.palette.normal.background
30− height: expanded ? optionToggleRepeater.count * itemHeight : itemHeight
31+ height: expanded ? maxVisibleItems * itemHeight : itemHeight
31 Behavior on height {
32 Behavior on height {
32− UbuntuNumberAnimation {}
33+ UbuntuNumberAnimation { id: heightAnimation }
35 width: parent.width
36 width: parent.width
@@ -38,81 +39,89 @@ Rectangle {
38 border.width: units.dp(1)
39 border.width: units.dp(1)
39 border.color: theme.palette.normal.base
40 border.color: theme.palette.normal.base
41− Column {
42+ Flickable {
42− id: optionToggleContent
43+ id: flickable
44+ interactive: expanded
45+ flickableDirection: Flickable.VerticalFlick
43 width: parent.width
46 width: parent.width
44−
47+ height: parent.height
48+ contentHeight: optionToggleRepeater.count * itemHeight
51+ id: optionToggleContent
45− Repeater {
54+ Repeater {
46− id: optionToggleRepeater
55+ id: optionToggleRepeater
47− model: optionToggle.model
56+ model: optionToggle.model
49− delegate: Loader {
58+ delegate: Loader {
50− asynchronous: true
59+ asynchronous: true
51− visible: status === Loader.Ready
60+ visible: status === Loader.Ready
53− Component {
62+ Component {
54− id: optionToggleEntry
63+ id: optionToggleEntry
56− AbstractButton {
65+ AbstractButton {
57− width: optionToggleContent.width
66+ width: optionToggleContent.width
58− height: optionToggle.itemHeight
67+ height: optionToggle.itemHeight
59− onClicked: {
68+ onClicked: {
60− if (expanded) {
69+ if (expanded) {
61− selectedIndex = index;
70+ selectedIndex = index;
66− ListItem.ThinDivider {
75+ ListItem.ThinDivider {
67− visible: expanded
76+ visible: expanded
74− leftMargin: units.gu(1)
76− rightMargin: units.gu(1)
77− verticalCenter: parent.verticalCenter
83+ leftMargin: units.gu(1)
85+ rightMargin: units.gu(3)
86+ verticalCenter: parent.verticalCenter
80− width: parent.width
89+ width: parent.width
81− text: expanded ? modelData : optionToggle.model[selectedIndex]
90+ text: expanded ? modelData : optionToggle.model[selectedIndex]
82− color: theme.palette.normal.backgroundSecondaryText
91+ color: theme.palette.normal.backgroundSecondaryText
83− font.weight: Font.Light
92+ font.weight: Font.Light
84− maximumLineCount: 1
93+ maximumLineCount: 1
85− elide: Text.ElideRight
94+ elide: Text.ElideRight
91− rightMargin: units.gu(1)
92− verticalCenter: parent.verticalCenter
100+ rightMargin: units.gu(1)
101+ verticalCenter: parent.verticalCenter
95− visible: index == 0
104+ visible: (index == 0 || !expanded) && !heightAnimation.running
96− name: optionToggle.height === optionToggle.itemHeight ? "down" : "up"
105+ name: expanded ? "up" : "down"
97− width: units.gu(2)
106+ width: units.gu(1.5)
98− height: width
107+ height: width
103− anchors {
111+ anchors {
104− right: parent.right
112+ right: parent.right
105− rightMargin: units.gu(1)
113+ rightMargin: units.gu(1)
106− verticalCenter: parent.verticalCenter
114+ verticalCenter: parent.verticalCenter
116+ visible: expanded && index == optionToggle.selectedIndex && index != 0
117+ height: units.gu(1.5)
118+ fillMode: Image.PreserveAspectFit
119+ source: Qt.resolvedUrl("Pages/data/Tick@30.png")
108− visible: expanded && index == optionToggle.selectedIndex && index != 0
109− height: units.gu(1.5)
110− fillMode: Image.PreserveAspectFit
111− source: Qt.resolvedUrl("Pages/data/Tick@30.png")
123+ sourceComponent: optionToggleEntry
115− sourceComponent: optionToggleEntry