@@ -0,0 +1,213 @@
1+import QtQuick 2.4
2+import Ubuntu.Components 1.3
3+import Unity.Launcher 0.1
4+import Utils 0.1
5+import "../Components"
6+
7+Rectangle {
8+ id: root
9+ color: "#BF000000"
10+
11+ property int panelWidth: 0
12+ readonly property bool moving: listLoader.item && listLoader.item.moving
13+
14+ signal applicationSelected(string appId)
15+
16+ AppDrawerModel {
17+ id: appDrawerModel
18+ }
19+
20+ AppDrawerProxyModel {
21+ id: sortProxyModel
22+ source: appDrawerModel
23+ filterString: searchField.text
24+ }
25+
26+ Item {
27+ id: contentContainer
28+ anchors.fill: parent
29+ anchors.leftMargin: root.panelWidth
30+
31+ TextField {
32+ id: searchField
33+ anchors { left: parent.left; top: parent.top; right: parent.right; margins: units.gu(1) }
34+ placeholderText: i18n.tr("Search...")
35+ }
36+
37+ Item {
38+ id: sectionsContainer
39+ anchors { left: parent.left; top: searchField.bottom; right: parent.right; }
40+ height: sections.height
41+ clip: true
42+ z: 2
43+
44+ Sections {
45+ id: sections
46+ width: parent.width
47+ actions: [
48+ Action {
49+ text: "A-Z"
50+ },
51+ Action {
52+ text: "Most used"
53+ }
54+ ]
55+
56+ Rectangle {
57+ anchors.bottom: parent.bottom
58+ height: units.dp(1)
59+ color: 'gray'
60+ width: contentContainer.width
61+ }
62+ }
63+ }
64+
65+ Loader {
66+ id: listLoader
67+ anchors { left: parent.left; top: sectionsContainer.bottom; right: parent.right; bottom: parent.bottom; leftMargin: units.gu(1); rightMargin: units.gu(1) }
68+ sourceComponent: sections.selectedIndex == 0 ? aToZComponent : mostUsedComponent
69+ }
70+
71+ Component {
72+ id: mostUsedComponent
73+ ListView {
74+ anchors.fill: parent
75+ topMargin: units.gu(1)
76+ bottomMargin: units.gu(1)
77+ spacing: units.gu(1)
78+ clip: true
79+
80+ header: MoreAppsHeader {
81+ width: parent.width
82+ height: units.gu(6)
83+ }
84+
85+ model: AppDrawerProxyModel {
86+ source: sortProxyModel
87+ group: AppDrawerProxyModel.GroupByAll
88+ }
89+
90+ delegate: UbuntuShape {
91+ width: parent.width
92+ color: "#20ffffff"
93+ aspect: UbuntuShape.Flat
94+ // NOTE: Cannot use gridView.rows here as it would evaluate to 0 at first and only update later,
95+ // which messes up the ListView.
96+ height: (Math.ceil(mostUsedGridView.model.count / mostUsedGridView.columns) * mostUsedGridView.delegateHeight) + units.gu(2)
97+
98+ DrawerGridView {
99+ id: mostUsedGridView
100+ anchors.fill: parent
101+ topMargin: units.gu(1)
102+ bottomMargin: units.gu(1)
103+ clip: true
104+
105+ model: sortProxyModel
106+
107+
108+ delegateWidth: units.gu(8)
109+ delegateHeight: units.gu(10)
110+ delegate: drawerDelegateComponent
111+ }
112+ }
113+ }
114+ }
115+
116+ Component {
117+ id: aToZComponent
118+ ListView {
119+ anchors.fill: parent
120+ topMargin: units.gu(1)
121+ bottomMargin: units.gu(1)
122+ spacing: units.gu(1)
123+ clip: true
124+
125+ header: MoreAppsHeader {
126+ width: parent.width
127+ height: units.gu(6)
128+ }
129+
130+ model: AppDrawerProxyModel {
131+ source: sortProxyModel
132+ group: AppDrawerProxyModel.GroupByAToZ
133+ }
134+
135+ delegate: UbuntuShape {
136+ width: parent.width
137+ color: "#20ffffff"
138+ aspect: UbuntuShape.Flat
139+
140+ // NOTE: Cannot use gridView.rows here as it would evaluate to 0 at first and only update later,
141+ // which messes up the ListView.
142+ height: (Math.ceil(gridView.model.count / gridView.columns) * gridView.delegateHeight) +
143+ categoryNameLabel.implicitHeight + units.gu(2)
144+
145+ Label {
146+ id: categoryNameLabel
147+ anchors { left: parent.left; top: parent.top; right: parent.right; margins: units.gu(1) }
148+ text: model.letter
149+ }
150+
151+ DrawerGridView {
152+ id: gridView
153+ anchors { left: parent.left; top: categoryNameLabel.bottom; right: parent.right; topMargin: units.gu(1) }
154+ height: rows * delegateHeight
155+
156+ interactive: false
157+
158+ model: AppDrawerProxyModel {
159+ id: categoryModel
160+ source: sortProxyModel
161+ filterLetter: model.letter
162+ }
163+ delegateWidth: units.gu(8)
164+ delegateHeight: units.gu(10)
165+ delegate: drawerDelegateComponent
166+ }
167+ }
168+ }
169+ }
170+ }
171+
172+ Component {
173+ id: drawerDelegateComponent
174+ AbstractButton {
175+ width: GridView.view.cellWidth
176+ height: units.gu(10)
177+
178+ onClicked: root.applicationSelected(model.appId)
179+
180+ Column {
181+ width: units.gu(8)
182+ anchors.horizontalCenter: parent.horizontalCenter
183+ height: childrenRect.height
184+ spacing: units.gu(1)
185+
186+ UbuntuShape {
187+ id: appIcon
188+ width: units.gu(6)
189+ height: 7.5 / 8 * width
190+ anchors.horizontalCenter: parent.horizontalCenter
191+ backgroundMode: UbuntuShape.SolidColor
192+ backgroundColor: UbuntuColors.lightGrey
193+ radius: "medium"
194+ borderSource: 'undefined'
195+ source: Image {
196+ id: sourceImage
197+ sourceSize.width: appIcon.width
198+ source: model.icon
199+ }
200+ sourceFillMode: UbuntuShape.PreserveAspectCrop
201+ }
202+
203+ Label {
204+ text: model.name
205+ width: parent.width
206+ horizontalAlignment: Text.AlignHCenter
207+ fontSize: "small"
208+ elide: Text.ElideRight
209+ }
210+ }
211+ }
212+ }
213+}