on xenial help sign in
WIP: custom item selector
93b6a81Lukáš Tinkl
qml/Wizard/Pages/20-keyboard.qml+4−5
@@ -15,7 +15,6 @@
15 */
15 */
16
16
17import QtQuick 2.4
17import QtQuick 2.4
18−import QtQuick.Layouts 1.1
19import Ubuntu.Components 1.3
18import Ubuntu.Components 1.3
20import Ubuntu.Components.ListItems 1.3
19import Ubuntu.Components.ListItems 1.3
21import Ubuntu.SystemSettings.LanguagePlugin 1.0
20import Ubuntu.SystemSettings.LanguagePlugin 1.0
@@ -59,7 +58,7 @@ LocalComponents.Page {
59
58
60 property string selectedKeymap: ""
59 property string selectedKeymap: ""
61
60
62− ColumnLayout {
61+ Column {
63 id: column
62 id: column
64 spacing: units.gu(2)
63 spacing: units.gu(2)
65
64
@@ -77,7 +76,7 @@ LocalComponents.Page {
77 font.weight: Font.Normal
76 font.weight: Font.Normal
78 }
77 }
79
78
80− ItemSelector {
79+ LocalComponents.WizardItemSelector {
81 id: langSelector
80 id: langSelector
82 objectName: "langSelector"
81 objectName: "langSelector"
83 anchors.left: parent.left
82 anchors.left: parent.left
@@ -98,7 +97,6 @@ LocalComponents.Page {
98 }
97 }
99
98
100 ListView {
99 ListView {
101− Layout.fillHeight: true
102 id: keyboardListView
100 id: keyboardListView
103 clip: true
101 clip: true
104 anchors.left: parent.left
102 anchors.left: parent.left
@@ -106,7 +104,8 @@ LocalComponents.Page {
106 snapMode: ListView.SnapToItem
104 snapMode: ListView.SnapToItem
107 model: layoutsModel
105 model: layoutsModel
108 currentIndex: -1
106 currentIndex: -1
109− opacity: langSelector.currentlyExpanded ? 0.5 : 1
107+ opacity: langSelector.expanded ? 0.5 : 1
108+ height: childrenRect.height
110 Behavior on opacity {
109 Behavior on opacity {
111 UbuntuNumberAnimation {}
110 UbuntuNumberAnimation {}
112 }
111 }
qml/Wizard/WizardItemSelector.qmlnew file+119
@@ -0,0 +1,119 @@
1+/*
2+ * Copyright (C) 2016 Canonical, Ltd.
3+ *
4+ * This program is free software; you can redistribute it and/or modify
5+ * it under the terms of the GNU General Public License as published by
6+ * the Free Software Foundation; version 3.
7+ *
8+ * This program is distributed in the hope that it will be useful,
9+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
10+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+ * GNU General Public License for more details.
12+ *
13+ * You should have received a copy of the GNU General Public License
14+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
15+ */
16+
17+import QtQuick 2.4
18+import Ubuntu.Components 1.3
19+import Ubuntu.Components.ListItems 1.3 as ListItem
20+
21+Rectangle {
22+ id: optionToggle
23+
24+ property bool expanded
25+ property var model
26+ property int selectedIndex: -1
27+ readonly property double itemHeight: units.gu(4)
28+
29+ color: theme.palette.normal.background
30+ height: expanded ? optionToggleRepeater.count * itemHeight : itemHeight
31+ Behavior on height {
32+ UbuntuNumberAnimation {}
33+ }
34+
35+ width: parent.width
36+ radius: units.gu(0.6)
37+ clip: true
38+ border.width: units.dp(1)
39+ border.color: theme.palette.normal.base
40+
41+ Column {
42+ id: optionToggleContent
43+ 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;
62+ }
63+ expanded = !expanded
64+ }
65+
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
78+ }
79+
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
93+ }
94+
95+ visible: index == 0
96+ name: optionToggle.height === optionToggle.itemHeight ? "down" : "up"
97+ width: units.gu(2)
98+ height: width
99+ }
100+
101+ Image {
102+ id: checkIcon
103+ anchors {
104+ right: parent.right
105+ rightMargin: units.gu(1)
106+ verticalCenter: parent.verticalCenter
107+ }
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+ }
113+ }
114+ }
115+ sourceComponent: optionToggleEntry
116+ }
117+ }
118+ }
119+}