on f404864 help sign in
unity8/Launcher/LauncherPanel.qml
472 lines 22 kB history raw
1/*
2 * Copyright (C) 2013 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 */
17import QtQuick 2.0
18import Ubuntu.Components 0.1
19import Ubuntu.Components.ListItems 0.1 as ListItems
20import Unity 0.1
21import Unity.Launcher 0.1
22import Ubuntu.Components.Popups 0.1
23import "../Components/ListItems"
25Item {
26 id: root
28 rotation: inverted ? 180 : 0
30 property var model
31 property bool inverted: true
32 property bool dragging: false
33 property bool moving: launcherListView.moving || launcherListView.flicking
34 property bool preventHiding: moving || dndArea.draggedIndex >= 0 || dndArea.quickListPopover !== null || dndArea.pressed
35 property int highlightIndex: -1
37 signal applicationSelected(string desktopFile)
38 signal dashItemSelected(int index)
40 BorderImage {
41 id: background
42 source: "graphics/launcher_bg.sci"
43 anchors.fill: parent
44 anchors.rightMargin: root.inverted ? 0 : -units.gu(1)
45 anchors.leftMargin: root.inverted ? -units.gu(1) : 0
46 rotation: root.rotation
47 }
49 Column {
50 id: mainColumn
51 anchors {
52 fill: parent
53 leftMargin: units.gu(0.5)
54 rightMargin: units.gu(0.5)
55 }
57 MouseArea {
58 id: dashItem
59 width: parent.width
60 height: units.gu(7)
61 onClicked: root.dashItemSelected(0)
62 z: 1
63 Image {
64 objectName: "dashItem"
65 width: units.gu(5.5)
66 height: width
67 anchors.centerIn: parent
68 source: "graphics/home.png"
69 rotation: root.rotation
70 }
71 }
72 ThinDivider {
73 anchors {
74 left: parent.left
75 right: parent.right
76 margins: -mainColumn.anchors.leftMargin
77 }
78 rotation: root.rotation
79 }
81 Item {
82 anchors.left: parent.left
83 anchors.right: parent.right
84 height: parent.height - dashItem.height - parent.spacing*2
86 Item {
87 anchors.fill: parent
88 clip: true
90 ListView {
91 id: launcherListView
92 objectName: "launcherListView"
93 anchors {
94 fill: parent
95 topMargin: -extensionSize + units.gu(0.5)
96 bottomMargin: -extensionSize + units.gu(1)
97 }
98 topMargin: extensionSize
99 bottomMargin: extensionSize
100 height: parent.height - dashItem.height - parent.spacing*2
101 model: root.model
102 cacheBuffer: itemHeight * 3
103 snapMode: interactive ? ListView.SnapToItem : ListView.NoSnap
104 highlightRangeMode: ListView.ApplyRange
105 preferredHighlightBegin: (height - itemHeight) / 2
106 preferredHighlightEnd: (height + itemHeight) / 2
107 spacing: units.gu(0.5)
109 // The size of the area the ListView is extended to make sure items are not
110 // destroyed when dragging them outside the list. This needs to be at least
111 // itemHeight to prevent folded items from disappearing and DragArea limits
112 // need to be smaller than this size to avoid breakage.
113 property int extensionSize: itemHeight * 3
115 // The height of the area where icons start getting folded
116 property int foldingAreaHeight: itemHeight * 0.75
117 property int itemWidth: width
118 property int itemHeight: width * 7.5 / 8
119 property int clickFlickSpeed: units.gu(60)
120 property int draggedIndex: dndArea.draggedIndex
121 property real realContentY: contentY - originY + topMargin
122 property int realItemHeight: itemHeight + spacing
124 displaced: Transition {
125 NumberAnimation { properties: "x,y"; duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing }
126 }
128 delegate: FoldingLauncherDelegate {
129 id: launcherDelegate
130 objectName: "launcherDelegate" + index
131 itemHeight: launcherListView.itemHeight
132 itemWidth: launcherListView.itemWidth
133 width: itemWidth
134 height: itemHeight
135 iconName: model.icon
136 inverted: root.inverted
137 highlighted: dragging && index === root.highlightIndex
138 z: -Math.abs(offset)
139 maxAngle: 60
140 property bool dragging: false
142 ThinDivider {
143 id: dropIndicator
144 objectName: "dropIndicator"
145 anchors.centerIn: parent
146 width: parent.width + mainColumn.anchors.leftMargin + mainColumn.anchors.rightMargin
147 opacity: 0
148 }
150 states: [
151 State {
152 name: "selected"
153 when: dndArea.selectedItem === launcherDelegate && fakeDragItem.visible && !dragging
154 PropertyChanges {
155 target: launcherDelegate
156 itemOpacity: 0
157 }
158 },
159 State {
160 name: "dragging"
161 when: dragging
162 PropertyChanges {
163 target: launcherDelegate
164 height: units.gu(1)
165 itemOpacity: 0
166 }
167 PropertyChanges {
168 target: dropIndicator
169 opacity: 1
170 }
171 },
172 State {
173 name: "expanded"
174 when: dndArea.draggedIndex >= 0 && (dndArea.preDragging || dndArea.dragging || dndArea.postDragging) && dndArea.draggedIndex != index
175 PropertyChanges {
176 target: launcherDelegate
177 angle: 0
178 offset: 0
179 itemOpacity: 0.6
180 }
181 }
182 ]
184 transitions: [
185 Transition {
186 from: ""
187 to: "selected"
188 NumberAnimation { properties: "itemOpacity"; duration: UbuntuAnimation.FastDuration }
189 },
190 Transition {
191 from: "*"
192 to: "expanded"
193 NumberAnimation { properties: "itemOpacity"; duration: UbuntuAnimation.FastDuration }
194 UbuntuNumberAnimation { properties: "angle,offset" }
195 },
196 Transition {
197 from: "expanded"
198 to: ""
199 NumberAnimation { properties: "itemOpacity"; duration: UbuntuAnimation.BriskDuration }
200 UbuntuNumberAnimation { properties: "angle,offset" }
201 },
202 Transition {
203 from: "selected"
204 to: "dragging"
205 UbuntuNumberAnimation { properties: "height" }
206 NumberAnimation { target: dropIndicator; properties: "opacity"; duration: UbuntuAnimation.FastDuration }
207 },
208 Transition {
209 from: "dragging"
210 to: "*"
211 NumberAnimation { target: dropIndicator; properties: "opacity"; duration: UbuntuAnimation.FastDuration }
212 NumberAnimation { properties: "itemOpacity"; duration: UbuntuAnimation.BriskDuration }
213 SequentialAnimation {
214 UbuntuNumberAnimation { properties: "height" }
215 PropertyAction { target: dndArea; property: "postDragging"; value: false }
216 PropertyAction { target: dndArea; property: "draggedIndex"; value: -1 }
217 }
218 }
219 ]
220 }
222 MouseArea {
223 id: dndArea
224 objectName: "dndArea"
225 anchors {
226 fill: parent
227 topMargin: launcherListView.topMargin
228 bottomMargin: launcherListView.bottomMargin
229 }
230 drag.minimumY: -launcherListView.topMargin
231 drag.maximumY: height + launcherListView.bottomMargin
233 property int draggedIndex: -1
234 property var selectedItem
235 property bool preDragging: false
236 property bool dragging: selectedItem !== undefined && selectedItem.dragging
237 property bool postDragging: false
238 property int startX
239 property int startY
240 property var quickListPopover: null
242 onPressed: {
243 selectedItem = launcherListView.itemAt(mouseX, mouseY + launcherListView.realContentY)
244 selectedItem.highlighted = true
245 }
247 onClicked: {
248 var index = Math.floor((mouseY + launcherListView.realContentY) / launcherListView.realItemHeight);
249 var clickedItem = launcherListView.itemAt(mouseX, mouseY + launcherListView.realContentY)
251 // First/last item do the scrolling at more than 12 degrees
252 if (index == 0 || index == launcherListView.count - 1) {
253 if (clickedItem.angle > 12) {
254 launcherListView.flick(0, -launcherListView.clickFlickSpeed);
255 } else if (clickedItem.angle < -12) {
256 launcherListView.flick(0, launcherListView.clickFlickSpeed);
257 } else {
258 root.applicationSelected(LauncherModel.get(index).desktopFile);
259 }
260 return;
261 }
263 // the rest launches apps up to an angle of 30 degrees
264 if (clickedItem.angle > 30) {
265 launcherListView.flick(0, -launcherListView.clickFlickSpeed);
266 } else if (clickedItem.angle < -30) {
267 launcherListView.flick(0, launcherListView.clickFlickSpeed);
268 } else {
269 root.applicationSelected(LauncherModel.get(index).desktopFile);
270 }
271 }
273 onCanceled: {
274 selectedItem.highlighted = false
275 selectedItem = undefined;
276 preDragging = false;
277 postDragging = false;
278 }
280 onReleased: {
281 var droppedIndex = draggedIndex;
282 if (dragging) {
283 postDragging = true;
284 } else {
285 draggedIndex = -1;
286 }
288 selectedItem.highlighted = false
289 selectedItem.dragging = false;
290 selectedItem = undefined;
291 preDragging = false;
293 drag.target = undefined
295 progressiveScrollingTimer.stop();
296 launcherListView.interactive = true;
297 if (droppedIndex >= launcherListView.count - 2 && postDragging) {
298 launcherListView.flick(0, -launcherListView.clickFlickSpeed);
299 }
300 }
302 onPressAndHold: {
303 if (Math.abs(selectedItem.angle) > 30) {
304 return;
305 }
307 draggedIndex = Math.floor((mouseY + launcherListView.realContentY) / launcherListView.realItemHeight);
309 // Opening QuickList
310 var quickListModel = launcherListView.model.get(draggedIndex).quickList
311 var quickListAppId = launcherListView.model.get(draggedIndex).appId
313 quickListPopover = PopupUtils.open(popoverComponent, selectedItem,
314 {model: quickListModel, appId: quickListAppId})
316 launcherListView.interactive = false
318 var yOffset = draggedIndex > 0 ? (mouseY + launcherListView.realContentY) % (draggedIndex * launcherListView.realItemHeight) : mouseY + launcherListView.realContentY
320 fakeDragItem.iconName = launcherListView.model.get(draggedIndex).icon
321 fakeDragItem.x = 0
322 fakeDragItem.y = mouseY - yOffset + launcherListView.anchors.topMargin + launcherListView.topMargin
323 fakeDragItem.angle = selectedItem.angle * (root.inverted ? -1 : 1)
324 fakeDragItem.offset = selectedItem.offset * (root.inverted ? -1 : 1)
325 fakeDragItem.flatten()
326 drag.target = fakeDragItem
328 startX = mouseX
329 startY = mouseY
330 }
332 onPositionChanged: {
333 if (draggedIndex >= 0) {
334 if (!selectedItem.dragging) {
335 var distance = Math.max(Math.abs(mouseX - startX), Math.abs(mouseY - startY))
336 if (!preDragging && distance > units.gu(1.5)) {
337 preDragging = true;
338 PopupUtils.close(quickListPopover)
339 }
340 if (distance > launcherListView.itemHeight) {
341 selectedItem.dragging = true
342 preDragging = false;
343 }
344 }
345 if (!selectedItem.dragging) {
346 return
347 }
349 var itemCenterY = fakeDragItem.y + fakeDragItem.height / 2
351 // Move it down by the the missing size to compensate index calculation with only expanded items
352 itemCenterY += (launcherListView.itemHeight - selectedItem.height) / 2
354 if (mouseY > launcherListView.height - launcherListView.topMargin - launcherListView.bottomMargin - launcherListView.realItemHeight) {
355 progressiveScrollingTimer.downwards = false
356 progressiveScrollingTimer.start()
357 } else if (mouseY < launcherListView.realItemHeight) {
358 progressiveScrollingTimer.downwards = true
359 progressiveScrollingTimer.start()
360 } else {
361 progressiveScrollingTimer.stop()
362 }
364 var newIndex = (itemCenterY + launcherListView.realContentY) / launcherListView.realItemHeight
366 if (newIndex > draggedIndex + 1) {
367 newIndex = draggedIndex + 1
368 } else if (newIndex < draggedIndex) {
369 newIndex = draggedIndex -1
370 } else {
371 return
372 }
374 if (newIndex >= 0 && newIndex < launcherListView.count) {
375 launcherListView.model.move(draggedIndex, newIndex)
376 draggedIndex = newIndex
377 }
378 }
379 }
380 }
381 Timer {
382 id: progressiveScrollingTimer
383 interval: 2
384 repeat: true
385 running: false
386 property bool downwards: true
387 onTriggered: {
388 if (downwards) {
389 var minY = -launcherListView.topMargin
390 if (launcherListView.contentY > minY) {
391 launcherListView.contentY = Math.max(launcherListView.contentY - units.dp(2), minY)
392 }
393 } else {
394 var maxY = launcherListView.contentHeight - launcherListView.height + launcherListView.topMargin + launcherListView.originY
395 if (launcherListView.contentY < maxY) {
396 launcherListView.contentY = Math.min(launcherListView.contentY + units.dp(2), maxY)
397 }
398 }
399 }
400 }
401 }
402 }
404 LauncherDelegate {
405 id: fakeDragItem
406 objectName: "fakeDragItem"
407 visible: dndArea.draggedIndex >= 0 && !dndArea.postDragging
408 itemWidth: launcherListView.itemWidth
409 itemHeight: launcherListView.itemHeight
410 height: itemHeight
411 width: itemWidth
412 rotation: root.rotation
413 highlighted: true
414 itemOpacity: 0.8
416 function flatten() {
417 fakeDragItemAnimation.start();
418 }
420 UbuntuNumberAnimation {
421 id: fakeDragItemAnimation
422 target: fakeDragItem;
423 properties: "angle,offset";
424 to: 0
425 }
426 }
427 }
428 }
430 Component {
431 id: popoverComponent
433 Popover {
434 id: popover
435 property var model
436 property string appId
437 contentWidth: quickListColumn.width
438 foregroundStyle: QuicklistForegroundStyle {}
440 // FIXME: There's a bug in the Popover positioning that it covers the item in case it is rotated.
441 // https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1204470
442 // For now, let's move the Popover around with callerMargin.
443 // Remove popupMargin once the bug is fixed.
444 property int popupMargin: root.inverted ? launcherListView.itemHeight : 0;
446 callerMargin: units.gu(1) + popupMargin
448 Column {
449 id: quickListColumn
450 width: units.gu(30)
451 height: childrenRect.height
453 Repeater {
454 model: popover.model
456 ListItems.Standard {
457 objectName: "quickListEntry" + index
458 text: (model.clickable ? "" : "<b>") + model.label + (model.clickable ? "" : "</b>")
459 highlightWhenPressed: model.clickable
460 onClicked: {
461 if (!model.clickable) {
462 return;
463 }
464 LauncherModel.quickListActionInvoked(appId, index);
465 PopupUtils.close(popover);
466 }
467 }
468 }
469 }
470 }
471 }