on xenial help sign in
WIP: working lang selector
2c09023Lukáš Tinkl
qml/Wizard/Pages/20-keyboard.qml+4−1
@@ -70,6 +70,7 @@ LocalComponents.Page {
70 }
70 }
71
71
72 Label {
72 Label {
73+ id: label1
73 anchors.left: parent.left
74 anchors.left: parent.left
74 anchors.right: parent.right
75 anchors.right: parent.right
75 text: i18n.tr("Keyboard language")
76 text: i18n.tr("Keyboard language")
@@ -90,6 +91,7 @@ LocalComponents.Page {
90 }
91 }
91
92
92 Label {
93 Label {
94+ id: label2
93 anchors.left: parent.left
95 anchors.left: parent.left
94 anchors.right: parent.right
96 anchors.right: parent.right
95 text: i18n.tr("Keyboard layout")
97 text: i18n.tr("Keyboard layout")
@@ -105,7 +107,8 @@ LocalComponents.Page {
105 model: layoutsModel
107 model: layoutsModel
106 currentIndex: -1
108 currentIndex: -1
107 opacity: langSelector.expanded ? 0.5 : 1
109 opacity: langSelector.expanded ? 0.5 : 1
108− height: childrenRect.height
110+ height: column.height - label1.height - langSelector.height - label2.height - column.spacing * 3
111+ enabled: !langSelector.expanded
109 Behavior on opacity {
112 Behavior on opacity {
110 UbuntuNumberAnimation {}
113 UbuntuNumberAnimation {}
111 }
114 }
qml/Wizard/WizardItemSelector.qml+74−65
@@ -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
28
29
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 }
33 }
34 }
34
35
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
40
41
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
49+
50+ Column {
51+ id: optionToggleContent
52+ width: parent.width
53+
45− Repeater {
54+ Repeater {
46− id: optionToggleRepeater
55+ id: optionToggleRepeater
47− model: optionToggle.model
56+ model: optionToggle.model
48−
57+
49− delegate: Loader {
58+ delegate: Loader {
50− asynchronous: true
59+ asynchronous: true
51− visible: status === Loader.Ready
60+ visible: status === Loader.Ready
52−
61+
53− Component {
62+ Component {
54− id: optionToggleEntry
63+ id: optionToggleEntry
55−
64+
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;
71+ }
72+ expanded = !expanded
62 }
73 }
63− expanded = !expanded
64− }
65
74
66− ListItem.ThinDivider {
75+ ListItem.ThinDivider {
67− visible: expanded
76+ 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
78 }
77 }
79
78
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+
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
86− }
87−
88− Icon {
89− anchors {
90− right: parent.right
91− rightMargin: units.gu(1)
92− verticalCenter: parent.verticalCenter
93 }
95 }
94
96
97+ Icon {
98+ anchors {
99+ right: parent.right
100+ rightMargin: units.gu(1)
101+ verticalCenter: parent.verticalCenter
102+ }
103+
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
99− }
108+ }
100
109
101− Image {
110+ Image {
102− id: checkIcon
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
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")
107 }
120 }
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")
112 }
121 }
113 }
122 }
123+ sourceComponent: optionToggleEntry
114 }
124 }
115− sourceComponent: optionToggleEntry
116 }
125 }
117 }
126 }
118 }
127 }