Lomiri
Loading...
Searching...
No Matches
Workspaces.qml
1/*
2 * Copyright (C) 2017 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
17import QtQuick 2.15
18import Lomiri.Components 1.3
19import GSettings 1.0
20import WindowManager 1.0
21import "MathUtils.js" as MathUtils
22import "../../Components"
23
24Item {
25 id: root
26 implicitWidth: listView.contentWidth
27 readonly property int minimumWidth: {
28 var count = Math.min(3, listView.count);
29 return listView.itemWidth * count + listView.spacing * (count - 1)
30 }
31
32 property QtObject screen: null
33 property alias workspaceModel: listView.model
34 property var background // TODO: should be stored in the workspace data
35 property int selectedIndex: -1
36 property bool readOnly: true
37 property var activeWorkspace: null
38 property Item availableDesktopArea
39
40 signal commitScreenSetup();
41 signal closeSpread();
42 signal clicked(var workspace);
43
44 DropArea {
45 anchors.fill: root
46
47 keys: ['workspace']
48
49 onEntered: {
50 var index = listView.getDropIndex(drag);
51 drag.source.workspace.assign(workspaceModel, index)
52 drag.source.inDropArea = true;
53 }
54
55 onPositionChanged: {
56 var index = listView.getDropIndex(drag);
57 if (listView.dropItemIndex == index) return;
58 listView.model.move(listView.dropItemIndex, index, 1);
59 listView.dropItemIndex = index;
60 }
61
62 onExited: {
63 drag.source.workspace.unassign()
64 listView.dropItemIndex = -1;
65 listView.hoveredWorkspaceIndex = -1;
66 drag.source.inDropArea = false;
67 }
68
69 onDropped: {
70 drop.accept(Qt.MoveAction);
71 listView.dropItemIndex = -1;
72 drag.source.inDropArea = false;
73 }
74 }
75 DropArea {
76 anchors.fill: parent
77 keys: ["application"]
78
79 onPositionChanged: {
80 listView.progressiveScroll(drag.x)
81 listView.updateDropProperties(drag)
82 }
83 onExited: {
84 listView.hoveredWorkspaceIndex = -1
85 }
86 onDropped: {
87 var surface = drag.source.surface;
88 drag.source.surface = null;
89 var workspace = listView.model.get(listView.hoveredWorkspaceIndex);
90 WorkspaceManager.moveSurfaceToWorkspace(surface, workspace);
91 drop.accept(Qt.MoveAction)
92 if (listView.hoveredHalf == "right") {
93 root.closeSpread();
94 workspace.activate();
95 }
96 surface.activate();
97 listView.hoveredWorkspaceIndex = -1
98 }
99 }
100
101 onSelectedIndexChanged: {
102 listView.positionViewAtIndex(selectedIndex, ListView.Center);
103 }
104
105 Item {
106 // We need to clip the listview as it has left/right margins and it would
107 // overlap with items next to it and eat mouse input. However, we can't
108 // just clip at the actual bounds as the delegates have the close button
109 // on hover which reaches a bit outside, so lets some margins for the clipping
110 anchors.fill: parent
111 anchors.margins: -units.gu(2)
112 clip: true
113
114
115 ListView {
116 id: listView
117 anchors {
118 fill: parent
119 topMargin: -parent.anchors.margins
120 bottomMargin: -parent.anchors.margins
121 leftMargin: -itemWidth - parent.anchors.margins
122 rightMargin: -itemWidth - parent.anchors.margins
123 }
124 boundsBehavior: Flickable.StopAtBounds
125
126 Behavior on contentX {
127 SmoothedAnimation { duration: 200 }
128 }
129
130 property var clickedWorkspace: null
131
132 orientation: ListView.Horizontal
133 spacing: units.gu(1)
134 leftMargin: itemWidth
135 rightMargin: itemWidth
136
137 // FIXME: Screen orientation changed event does not trigger properly
138 // so we rely on height getting changed when rotating hence updating the value as needed
139 readonly property bool screenIsLandscape: screen.orientation == Qt.LandscapeOrientation
140 || screen.orientation == Qt.InvertedLandscapeOrientation ? height > 0
141 : height < 0
142
143 // Get the screen size based on screen's current orientation
144 readonly property var screenSize: screen.availableModes[screen.currentModeIndex].size
145 readonly property real screenWidth: screenIsLandscape ? screenSize.width >= screenSize.height ? screenSize.width : screenSize.height
146 : screenSize.width >= screenSize.height ? screenSize.height : screenSize.width
147 readonly property real screenHeight: screenIsLandscape ? screenSize.width >= screenSize.height ? screenSize.height : screenSize.width
148 : screenSize.width >= screenSize.height ? screenSize.width : screenSize.height
149
150 readonly property real screenSpaceHeight: root.availableDesktopArea.height
151 readonly property real screenSpaceWidth: root.availableDesktopArea.width
152 readonly property real launcherWidth: screenWidth - screenSpaceWidth
153 property real itemWidth: height * screenSpaceWidth / screenSpaceHeight
154 property int foldingAreaWidth: itemWidth / 2
155 property int maxAngle: 40
156
157 property real realContentX: contentX - originX + leftMargin
158 property int dropItemIndex: -1
159 property int hoveredWorkspaceIndex: -1
160 property string hoveredHalf: "" // left or right
161
162 function getDropIndex(drag) {
163 var coords = mapToItem(listView.contentItem, drag.x, drag.y)
164 var index = Math.floor((drag.x + listView.realContentX) / (listView.itemWidth + listView.spacing));
165 if (index < 0) index = 0;
166 var upperLimit = dropItemIndex == -1 ? listView.count : listView.count - 1
167 if (index > upperLimit) index = upperLimit;
168 return index;
169 }
170
171 function updateDropProperties(drag) {
172 var coords = mapToItem(listView.contentItem, drag.x, drag.y)
173 var index = Math.floor(drag.x + listView.realContentX) / (listView.itemWidth + listView.spacing);
174 if (index < 0) {
175 listView.hoveredWorkspaceIndex = -1;
176 listView.hoveredHalf = "";
177 return;
178 }
179
180 var upperLimit = dropItemIndex == -1 ? listView.count : listView.count - 1
181 if (index > upperLimit) index = upperLimit;
182 listView.hoveredWorkspaceIndex = index;
183 var pixelsInTile = (drag.x + listView.realContentX) % (listView.itemWidth + listView.spacing);
184 listView.hoveredHalf = (pixelsInTile / listView.itemWidth) < .5 ? "left" : "right";
185 }
186
187 function progressiveScroll(mouseX) {
188 var progress = Math.max(0, Math.min(1, (mouseX - listView.itemWidth) / (width - listView.leftMargin * 2 - listView.itemWidth * 2)))
189 listView.contentX = listView.originX + (listView.contentWidth - listView.width + listView.leftMargin + listView.rightMargin) * progress - listView.leftMargin
190 }
191
192 displaced: Transition { LomiriNumberAnimation { properties: "x" } }
193
194 delegate: Item {
195 id: workspaceDelegate
196 objectName: "delegate" + index
197 height: parent.height
198 width: listView.itemWidth
199 Behavior on width { LomiriNumberAnimation {} }
200 visible: listView.dropItemIndex !== index
201
202 property int itemX: -listView.realContentX + index * (listView.itemWidth + listView.spacing)
203 property int distanceFromLeft: itemX //- listView.leftMargin
204 property int distanceFromRight: listView.width - listView.leftMargin - listView.rightMargin - itemX - listView.itemWidth
205
206 property int itemAngle: {
207 if (index == 0) {
208 if (distanceFromLeft < 0) {
209 var progress = (distanceFromLeft + listView.foldingAreaWidth) / listView.foldingAreaWidth
210 return MathUtils.linearAnimation(1, -1, 0, listView.maxAngle, Math.max(-1, Math.min(1, progress)));
211 }
212 return 0
213 }
214 if (index == listView.count - 1) {
215 if (distanceFromRight < 0) {
216 var progress = (distanceFromRight + listView.foldingAreaWidth) / listView.foldingAreaWidth
217 return MathUtils.linearAnimation(1, -1, 0, -listView.maxAngle, Math.max(-1, Math.min(1, progress)));
218 }
219 return 0
220 }
221
222 if (distanceFromLeft < listView.foldingAreaWidth) {
223 // itemX : 10gu = p : 100
224 var progress = distanceFromLeft / listView.foldingAreaWidth
225 return MathUtils.linearAnimation(1, -1, 0, listView.maxAngle, Math.max(-1, Math.min(1, progress)));
226 }
227 if (distanceFromRight < listView.foldingAreaWidth) {
228 var progress = distanceFromRight / listView.foldingAreaWidth
229 return MathUtils.linearAnimation(1, -1, 0, -listView.maxAngle, Math.max(-1, Math.min(1, progress)));
230 }
231 return 0
232 }
233
234 property int itemOffset: {
235 if (index == 0) {
236 if (distanceFromLeft < 0) {
237 return -distanceFromLeft
238 }
239 return 0
240 }
241 if (index == listView.count - 1) {
242 if (distanceFromRight < 0) {
243 return distanceFromRight
244 }
245 return 0
246 }
247
248 if (itemX < -listView.foldingAreaWidth) {
249 return -itemX
250 }
251 if (distanceFromLeft < listView.foldingAreaWidth) {
252 return (listView.foldingAreaWidth - distanceFromLeft) / 2
253 }
254
255 if (distanceFromRight < -listView.foldingAreaWidth) {
256 return distanceFromRight
257 }
258
259 if (distanceFromRight < listView.foldingAreaWidth) {
260 return -(listView.foldingAreaWidth - distanceFromRight) / 2
261 }
262
263 return 0
264 }
265
266 z: itemOffset < 0 ? itemOffset : -itemOffset
267 transform: [
268 Rotation {
269 angle: itemAngle
270 axis { x: 0; y: 1; z: 0 }
271 origin { x: itemAngle < 0 ? listView.itemWidth : 0; y: height / 2 }
272 },
273 Translate {
274 x: itemOffset
275 }
276 ]
277
278 WorkspacePreview {
279 id: workspacePreview
280 height: listView.height
281 width: listView.itemWidth - settings.launcherWidth
282 anchors.horizontalCenter: parent.horizontalCenter
283 screen: root.screen
284 background: root.background
285 screenHeight: listView.screenSpaceHeight
286 launcherWidth: listView.launcherWidth
287 containsDragLeft: listView.hoveredWorkspaceIndex == index && listView.hoveredHalf == "left"
288 containsDragRight: listView.hoveredWorkspaceIndex == index && listView.hoveredHalf == "right"
289 isActive: workspace.isSameAs(root.activeWorkspace)
290 isSelected: index === root.selectedIndex
291 workspace: model.workspace
292 }
293 MouseArea {
294 anchors.fill: parent
295 onClicked: {
296 root.clicked(model.workspace)
297 }
298 onDoubleClicked: {
299 model.workspace.activate();
300 root.closeSpread();
301 }
302 }
303
304 MouseArea {
305 id: closeMouseArea
306 objectName: "closeMouseArea"
307 anchors { left: parent.left; top: parent.top; leftMargin: -height / 2; topMargin: -height / 2 }
308 hoverEnabled: true
309 height: units.gu(4)
310 width: height
311 visible: !root.readOnly && listView.count > 1
312
313 onClicked: {
314 model.workspace.unassign();
315 root.commitScreenSetup();
316 }
317 Image {
318 id: closeImage
319 source: "../graphics/window-close.svg"
320 anchors.fill: closeMouseArea
321 anchors.margins: units.gu(1)
322 sourceSize.width: width
323 sourceSize.height: height
324 readonly property var mousePos: hoverMouseArea.mapToItem(workspaceDelegate, hoverMouseArea.mouseX, hoverMouseArea.mouseY)
325 readonly property bool shown: (hoverMouseArea.containsMouse || parent.containsMouse)
326 && mousePos.y < workspaceDelegate.width / 4
327 && mousePos.y > -units.gu(2)
328 && mousePos.x > -units.gu(2)
329 && mousePos.x < workspaceDelegate.height / 4
330 opacity: shown ? 1 : 0
331 visible: opacity > 0
332 Behavior on opacity { LomiriNumberAnimation { duration: LomiriAnimation.SnapDuration } }
333
334 }
335 }
336 }
337
338 MouseArea {
339 id: hoverMouseArea
340 anchors.fill: parent
341 hoverEnabled: true
342 propagateComposedEvents: true
343 anchors.leftMargin: listView.leftMargin
344 anchors.rightMargin: listView.rightMargin
345 enabled: !root.readOnly
346
347 property int draggedIndex: -1
348
349 property int startX: 0
350 property int startY: 0
351
352 onMouseXChanged: {
353 if (!pressed || dragging) {
354 listView.progressiveScroll(mouseX)
355 }
356 }
357 onMouseYChanged: {
358 if (Math.abs(mouseY - startY) > units.gu(3)) {
359 drag.axis = Drag.XAndYAxis;
360 }
361 }
362
363 onReleased: {
364 var result = fakeDragItem.Drag.drop();
365 // if (result == Qt.IgnoreAction) {
366 // WorkspaceManager.destroyWorkspace(fakeDragItem.workspace);
367 // }
368 root.commitScreenSetup();
369 drag.target = null;
370 }
371
372 property bool dragging: drag.active
373 onDraggingChanged: {
374 if (drag.active) {
375 var ws = listView.model.get(draggedIndex);
376 if (ws) ws.unassign();
377 }
378 }
379
380 onPressed: {
381 startX = mouseX;
382 startY = mouseY;
383 if (listView.model.count < 2) return;
384
385 var coords = mapToItem(listView.contentItem, mouseX, mouseY)
386 draggedIndex = listView.indexAt(coords.x, coords.y)
387 var clickedItem = listView.itemAt(coords.x, coords.y)
388
389 var itemCoords = clickedItem.mapToItem(listView, -listView.leftMargin, 0);
390 fakeDragItem.x = itemCoords.x
391 fakeDragItem.y = itemCoords.y
392 fakeDragItem.workspace = listView.model.get(draggedIndex)
393
394 var mouseCoordsInItem = mapToItem(clickedItem, mouseX, mouseY);
395 fakeDragItem.Drag.hotSpot.x = mouseCoordsInItem.x
396 fakeDragItem.Drag.hotSpot.y = mouseCoordsInItem.y
397
398 drag.axis = Drag.YAxis;
399 drag.target = fakeDragItem;
400 }
401
402 WorkspacePreview {
403 id: fakeDragItem
404 height: listView.height
405 width: listView.itemWidth
406 screen: root.screen
407 background: root.background
408 screenHeight: listView.screenSpaceHeight
409 launcherWidth: listView.launcherWidth
410 visible: Drag.active
411
412 Drag.active: hoverMouseArea.drag.active
413 Drag.keys: ['workspace']
414
415 property bool inDropArea: false
416
417 Rectangle {
418 anchors.fill: parent
419 color: "#33000000"
420 opacity: parent.inDropArea ? 0 : 1
421 Behavior on opacity { LomiriNumberAnimation { } }
422 Rectangle {
423 anchors.centerIn: parent
424 width: units.gu(6)
425 height: units.gu(6)
426 radius: width / 2
427 color: "#aa000000"
428 }
429
430 Icon {
431 height: units.gu(3)
432 width: height
433 anchors.centerIn: parent
434 name: "edit-delete"
435 color: "white"
436 }
437 }
438
439 states: [
440 State {
441 when: fakeDragItem.Drag.active
442 ParentChange { target: fakeDragItem; parent: shell }
443 }
444 ]
445 }
446 }
447 }
448 }
449}