@@ -25,11 +25,12 @@ Rectangle {
2525 property var model
2626 property int selectedIndex: -1
2727 readonly property double itemHeight: units.gu(4)
28+ property int maxVisibleItems: 6
2829
2930 color: theme.palette.normal.background
30− height: expanded ? optionToggleRepeater.count * itemHeight : itemHeight
31+ height: expanded ? maxVisibleItems * itemHeight : itemHeight
3132 Behavior on height {
32− UbuntuNumberAnimation {}
33+ UbuntuNumberAnimation { id: heightAnimation }
3334 }
3435
3536 width: parent.width
@@ -38,81 +39,89 @@ Rectangle {
3839 border.width: units.dp(1)
3940 border.color: theme.palette.normal.base
4041
41− Column {
42− id: optionToggleContent
42+ Flickable {
43+ id: flickable
44+ interactive: expanded
45+ flickableDirection: Flickable.VerticalFlick
4346 width: parent.width
44−
45− Repeater {
46− id: optionToggleRepeater
47− model: optionToggle.model
48−
49− delegate: Loader {
50− asynchronous: true
51− visible: status === Loader.Ready
52−
53− Component {
54− id: optionToggleEntry
55−
56− AbstractButton {
57− width: optionToggleContent.width
58− height: optionToggle.itemHeight
59− onClicked: {
60− if (expanded) {
61− selectedIndex = index;
47+ height: parent.height
48+ contentHeight: optionToggleRepeater.count * itemHeight
49+
50+ Column {
51+ id: optionToggleContent
52+ width: parent.width
53+
54+ Repeater {
55+ id: optionToggleRepeater
56+ model: optionToggle.model
57+
58+ delegate: Loader {
59+ asynchronous: true
60+ visible: status === Loader.Ready
61+
62+ Component {
63+ id: optionToggleEntry
64+
65+ AbstractButton {
66+ width: optionToggleContent.width
67+ height: optionToggle.itemHeight
68+ onClicked: {
69+ if (expanded) {
70+ selectedIndex = index;
71+ }
72+ expanded = !expanded
6273 }
63− expanded = !expanded
64− }
6574
66− ListItem.ThinDivider {
67− visible: expanded
68− }
69−
70− Label {
71− id: delegateLabel
72− anchors {
73− left: parent.left
74− leftMargin: units.gu(1)
75− right: parent.right
76− rightMargin: units.gu(1)
77− verticalCenter: parent.verticalCenter
75+ ListItem.ThinDivider {
76+ visible: expanded
7877 }
7978
80− width: parent.width
81− text: expanded ? modelData : optionToggle.model[selectedIndex]
82− color: theme.palette.normal.backgroundSecondaryText
83− font.weight: Font.Light
84− maximumLineCount: 1
85− elide: Text.ElideRight
86− }
87−
88− Icon {
89− anchors {
90− right: parent.right
91− rightMargin: units.gu(1)
92− verticalCenter: parent.verticalCenter
79+ Label {
80+ id: delegateLabel
81+ anchors {
82+ left: parent.left
83+ leftMargin: units.gu(1)
84+ right: parent.right
85+ rightMargin: units.gu(3)
86+ verticalCenter: parent.verticalCenter
87+ }
88+
89+ width: parent.width
90+ text: expanded ? modelData : optionToggle.model[selectedIndex]
91+ color: theme.palette.normal.backgroundSecondaryText
92+ font.weight: Font.Light
93+ maximumLineCount: 1
94+ elide: Text.ElideRight
9395 }
9496
95− visible: index == 0
96− name: optionToggle.height === optionToggle.itemHeight ? "down" : "up"
97− width: units.gu(2)
98− height: width
99− }
97+ Icon {
98+ anchors {
99+ right: parent.right
100+ rightMargin: units.gu(1)
101+ verticalCenter: parent.verticalCenter
102+ }
103+
104+ visible: (index == 0 || !expanded) && !heightAnimation.running
105+ name: expanded ? "up" : "down"
106+ width: units.gu(1.5)
107+ height: width
108+ }
100109
101− Image {
102− id: checkIcon
103− anchors {
104− right: parent.right
105− rightMargin: units.gu(1)
106− verticalCenter: parent.verticalCenter
110+ Image {
111+ anchors {
112+ right: parent.right
113+ rightMargin: units.gu(1)
114+ verticalCenter: parent.verticalCenter
115+ }
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")
107120 }
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")
112121 }
113122 }
123+ sourceComponent: optionToggleEntry
114124 }
115− sourceComponent: optionToggleEntry
116125 }
117126 }
118127 }