From 70805d04eb1cf22d5fc119957a95a0d670adbc4c Mon Sep 17 00:00:00 2001 From: Marco Martin Date: Wed, 24 Mar 2021 14:48:56 +0100 Subject: [PATCH] finished moving the horizontal flicking in component --- .../contents/ui/launcher/FlickablePages.qml | 87 ++++++++++++++++--- .../contents/ui/launcher/HomeDelegate.qml | 45 ++-------- .../contents/ui/launcher/LauncherRepeater.qml | 42 +++++++++ .../launcher/private/DragGestureHandler.qml | 9 +- .../private}/ScrollIndicator.qml | 0 .../homescreen/package/contents/ui/main.qml | 74 ++-------------- 6 files changed, 135 insertions(+), 122 deletions(-) rename containments/homescreen/package/contents/ui/{ => launcher/private}/ScrollIndicator.qml (100%) diff --git a/containments/homescreen/package/contents/ui/launcher/FlickablePages.qml b/containments/homescreen/package/contents/ui/launcher/FlickablePages.qml index f84fa877..6b7db30e 100644 --- a/containments/homescreen/package/contents/ui/launcher/FlickablePages.qml +++ b/containments/homescreen/package/contents/ui/launcher/FlickablePages.qml @@ -13,9 +13,7 @@ import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.plasma.components 3.0 as PlasmaComponents import org.kde.draganddrop 2.0 as DragDrop -import "launcher" as Launcher -//TODO: everything using this will eventually move in Launcher -import "launcher/private" as LauncherPrivate +import "private" as Private import org.kde.plasma.private.containmentlayoutmanager 1.0 as ContainmentLayoutManager @@ -27,11 +25,7 @@ import org.kde.plasma.private.mobileshell 1.0 as MobileShell Flickable { id: mainFlickable - anchors { - fill: parent - topMargin: plasmoid.availableScreenRect.y - bottomMargin: favoriteStrip.height + plasmoid.screenGeometry.height - plasmoid.availableScreenRect.height - plasmoid.availableScreenRect.y - } + property AppDrawer appDrawer opacity: 1 - appDrawer.openFactor transform: Translate { @@ -53,13 +47,63 @@ Flickable { onContentYChanged: MobileShell.HomeScreenControls.homeScreenPosition = contentY - LauncherPrivate.DragGestureHandler { + + //Autoscroll related functions + function scrollLeft() { + if (mainFlickable.atXBeginning) { + return; + } + autoScrollTimer.scrollRight = false; + autoScrollTimer.running = true; + scrollLeftIndicator.opacity = 1; + scrollRightIndicator.opacity = 0; + } + + function scrollRight() { + if (mainFlickable.atXEnd) { + return; + } + autoScrollTimer.scrollRight = true; + autoScrollTimer.running = true; + scrollLeftIndicator.opacity = 0; + scrollRightIndicator.opacity = 1; + } + + function stopScroll() { + autoScrollTimer.running = false; + scrollLeftIndicator.opacity = 0; + scrollRightIndicator.opacity = 0; + } + + function snapPage() { + scrollAnim.running = false; + scrollAnim.to = mainFlickable.width * Math.round(mainFlickable.contentX / mainFlickable.width) + scrollAnim.running = true; + } + + Timer { + id: autoScrollTimer + property bool scrollRight: true + repeat: true + interval: 1500 + onTriggered: { + scrollAnim.to = scrollRight ? + //Scroll Right + Math.min(mainFlickable.contentItem.width - mainFlickable.width, mainFlickable.contentX + mainFlickable.width) : + //Scroll Left + Math.max(0, mainFlickable.contentX - mainFlickable.width); + + scrollAnim.running = true; + } + } + + Private.DragGestureHandler { id: gestureHandler target: appletsLayout - appDrawer: appDrawer + appDrawer: mainFlickable.appDrawer mainFlickable: mainFlickable - enabled: root.focus && appDrawer.status !== Launcher.AppDrawer.Status.Open && !appletsLayout.editMode && !plasmoid.editMode && !launcherDragManager.active - onSnapPage: root.snapPage(); + enabled: root.focus && appDrawer.status !== AppDrawer.Status.Open && !appletsLayout.editMode && !plasmoid.editMode && !launcherDragManager.active + onSnapPage: mainFlickable.snapPage(); } NumberAnimation { @@ -84,6 +128,25 @@ Flickable { visible: count > 1 currentIndex: Math.round(mainFlickable.contentX / mainFlickable.width) } + + Private.ScrollIndicator { + id: scrollLeftIndicator + parent: mainFlickable + anchors { + left: parent.left + leftMargin: units.smallSpacing + } + elementId: "left-arrow" + } + Private.ScrollIndicator { + id: scrollRightIndicator + parent: mainFlickable + anchors { + right: parent.right + rightMargin: units.smallSpacing + } + elementId: "right-arrow" + } } diff --git a/containments/homescreen/package/contents/ui/launcher/HomeDelegate.qml b/containments/homescreen/package/contents/ui/launcher/HomeDelegate.qml index 20edf1be..91255d8a 100644 --- a/containments/homescreen/package/contents/ui/launcher/HomeDelegate.qml +++ b/containments/homescreen/package/contents/ui/launcher/HomeDelegate.qml @@ -57,6 +57,12 @@ ContainmentLayoutManager.ItemContainer { onApplicationRunningChanged: { syncDelegateGeometry(); } + onDragActiveChanged: { + if (dragActive) { + removeButton.show(); + mouseArea.enabled = true; + } + } Connections { target: mainFlickable function onCancelEditModeForItemsRequested() { @@ -79,45 +85,6 @@ ContainmentLayoutManager.ItemContainer { } } - onDragActiveChanged: { - launcherDragManager.active = dragActive - if (dragActive) { - // Must be 0, 0 as at this point dragCenterX and dragCenterY are on the drag before" - launcherDragManager.startDrag(delegate); - launcherDragManager.currentlyDraggedDelegate = delegate; - removeButton.show(); - mouseArea.enabled = true; - } else { - launcherDragManager.dropItem(delegate, dragCenterX, dragCenterY); - plasmoid.editMode = false; - editMode = false; - plasmoid.fullRepresentationItem.stopScroll(); - launcherDragManager.currentlyDraggedDelegate = null; - forceActiveFocus(); - } - } - - onUserDrag: { - dragCenterX = dragCenter.x; - dragCenterY = dragCenter.y; - launcherDragManager.dragItem(delegate, dragCenter.x, dragCenter.y); - - delegate.width = appletsLayout.cellWidth; - delegate.height = appletsLayout.cellHeight; - - var pos = plasmoid.fullRepresentationItem.mapFromItem(delegate, dragCenter.x, dragCenter.y); - //SCROLL LEFT - if (pos.x < units.gridUnit) { - plasmoid.fullRepresentationItem.scrollLeft(); - //SCROLL RIGHT - } else if (pos.x > mainFlickable.width - units.gridUnit) { - plasmoid.fullRepresentationItem.scrollRight(); - //DON't SCROLL - } else { - plasmoid.fullRepresentationItem.stopScroll(); - } - } - contentItem: MouseArea { id: mouseArea onClicked: { diff --git a/containments/homescreen/package/contents/ui/launcher/LauncherRepeater.qml b/containments/homescreen/package/contents/ui/launcher/LauncherRepeater.qml index 16397c60..cbe767fc 100644 --- a/containments/homescreen/package/contents/ui/launcher/LauncherRepeater.qml +++ b/containments/homescreen/package/contents/ui/launcher/LauncherRepeater.qml @@ -28,6 +28,10 @@ Repeater { property int cellWidth property int cellHeight + signal scrollLeftRequested + signal scrollRightRequested + signal stopScrollRequested + delegate: HomeDelegate { id: delegate width: launcherRepeater.cellWidth @@ -57,6 +61,44 @@ Repeater { } } + onUserDrag: { + dragCenterX = dragCenter.x; + dragCenterY = dragCenter.y; + launcherDragManager.dragItem(delegate, dragCenter.x, dragCenter.y); + + delegate.width = appletsLayout.cellWidth; + delegate.height = appletsLayout.cellHeight; + + var pos = plasmoid.fullRepresentationItem.mapFromItem(delegate, dragCenter.x, dragCenter.y); + + //SCROLL LEFT + if (pos.x < units.gridUnit) { + launcherRepeater.scrollLeftRequested(); + //SCROLL RIGHT + } else if (pos.x > mainFlickable.width - units.gridUnit) { + launcherRepeater.scrollRightRequested(); + //DON't SCROLL + } else { + launcherRepeater.stopScrollRequested(); + } + } + + onDragActiveChanged: { + launcherDragManager.active = dragActive + if (dragActive) { + // Must be 0, 0 as at this point dragCenterX and dragCenterY are on the drag before" + launcherDragManager.startDrag(delegate); + launcherDragManager.currentlyDraggedDelegate = delegate; + } else { + launcherDragManager.dropItem(delegate, dragCenterX, dragCenterY); + plasmoid.editMode = false; + editMode = false; + launcherRepeater.stopScrollRequested(); + launcherDragManager.currentlyDraggedDelegate = null; + forceActiveFocus(); + } + } + onLaunch: (x, y, icon, title) => { if (icon !== "") { print(delegate.iconItem) diff --git a/containments/homescreen/package/contents/ui/launcher/private/DragGestureHandler.qml b/containments/homescreen/package/contents/ui/launcher/private/DragGestureHandler.qml index d5d615e5..01a1c4fa 100644 --- a/containments/homescreen/package/contents/ui/launcher/private/DragGestureHandler.qml +++ b/containments/homescreen/package/contents/ui/launcher/private/DragGestureHandler.qml @@ -11,6 +11,7 @@ import org.kde.plasma.core 2.0 as PlasmaCore import ".." as Launcher DragHandler { + id: root yAxis.enabled: enabled xAxis.enabled: enabled property Flickable mainFlickable @@ -27,16 +28,16 @@ DragHandler { property int __scrollDirection: DragGestureHandler.None onTranslationChanged: { if (active) { - if (appDrawer.offset > PlasmaCore.Units.gridUnit) { + if (root.appDrawer.offset > PlasmaCore.Units.gridUnit) { __scrollDirection = DragGestureHandler.Vertical; snapPage(); } else if (Math.abs(mainFlickable.contentX - __initialMainFlickableX) > PlasmaCore.Units.gridUnit) { __scrollDirection = DragGestureHandler.Horizontal; - appDrawer.close(); + root.appDrawer.close(); } if (__scrollDirection !== DragGestureHandler.Horizontal) { - appDrawer.offset = -translation.y; + root.appDrawer.offset = -translation.y; } if (__scrollDirection !== DragGestureHandler.Vertical) { mainFlickable.contentX = Math.max(0, __initialMainFlickableX - translation.x); @@ -48,7 +49,7 @@ DragHandler { __initialMainFlickableX = mainFlickable.contentX; } else { __scrollDirection = DragGestureHandler.None; - appDrawer.snapDrawerStatus(); + root.appDrawer.snapDrawerStatus(); snapPage(); } } diff --git a/containments/homescreen/package/contents/ui/ScrollIndicator.qml b/containments/homescreen/package/contents/ui/launcher/private/ScrollIndicator.qml similarity index 100% rename from containments/homescreen/package/contents/ui/ScrollIndicator.qml rename to containments/homescreen/package/contents/ui/launcher/private/ScrollIndicator.qml diff --git a/containments/homescreen/package/contents/ui/main.qml b/containments/homescreen/package/contents/ui/main.qml index 0b6071c3..aa1987d9 100644 --- a/containments/homescreen/package/contents/ui/main.qml +++ b/containments/homescreen/package/contents/ui/main.qml @@ -32,32 +32,6 @@ FocusScope { property Item toolBox //BEGIN functions - //Autoscroll related functions - function scrollLeft() { - if (mainFlickable.atXBeginning) { - return; - } - autoScrollTimer.scrollRight = false; - autoScrollTimer.running = true; - scrollLeftIndicator.opacity = 1; - scrollRightIndicator.opacity = 0; - } - - function scrollRight() { - if (mainFlickable.atXEnd) { - return; - } - autoScrollTimer.scrollRight = true; - autoScrollTimer.running = true; - scrollLeftIndicator.opacity = 0; - scrollRightIndicator.opacity = 1; - } - - function stopScroll() { - autoScrollTimer.running = false; - scrollLeftIndicator.opacity = 0; - scrollRightIndicator.opacity = 0; - } function recalculateMaxFavoriteCount() { if (!componentComplete) { @@ -67,12 +41,6 @@ FocusScope { plasmoid.nativeInterface.applicationListModel.maxFavoriteCount = Math.max(4, Math.floor(Math.min(width, height) / appletsLayout.cellWidth)); } - function snapPage() { - scrollAnim.running = false; - scrollAnim.to = mainFlickable.width * Math.round(mainFlickable.contentX / mainFlickable.width) - scrollAnim.running = true; - } - //END functions @@ -121,25 +89,9 @@ FocusScope { } } - Timer { - id: autoScrollTimer - property bool scrollRight: true - repeat: true - interval: 1500 - onTriggered: { - scrollAnim.to = scrollRight ? - //Scroll Right - Math.min(mainFlickable.contentItem.width - mainFlickable.width, mainFlickable.contentX + mainFlickable.width) : - //Scroll Left - Math.max(0, mainFlickable.contentX - mainFlickable.width); - - scrollAnim.running = true; - } - } - Connections { target: plasmoid - onEditModeChanged: { + function onEditModeChanged() { appletsLayout.editMode = plasmoid.editMode } } @@ -161,6 +113,8 @@ FocusScope { bottomMargin: favoriteStrip.height + plasmoid.screenGeometry.height - plasmoid.availableScreenRect.height - plasmoid.availableScreenRect.y } + appDrawer: appDrawer + // TODO: span on multiple pages DragDrop.DropArea { id: dropArea @@ -322,6 +276,9 @@ FocusScope { cellHeight: appletsLayout.cellHeight appletsLayout: appletsLayout favoriteStrip: favoriteStrip + onScrollLeftRequested: mainFlickable.scrollLeft() + onScrollRightRequested: mainFlickable.scrollRight() + onStopScrollRequested: mainFlickable.stopScroll() } } } @@ -335,23 +292,6 @@ FocusScope { bottomPadding: favoriteStrip.height + plasmoid.screenGeometry.height - plasmoid.availableScreenRect.height - plasmoid.availableScreenRect.y } - ScrollIndicator { - id: scrollLeftIndicator - anchors { - left: parent.left - leftMargin: units.smallSpacing - } - elementId: "left-arrow" - } - ScrollIndicator { - id: scrollRightIndicator - anchors { - right: parent.right - rightMargin: units.smallSpacing - } - elementId: "right-arrow" - } - Launcher.FavoriteStrip { id: favoriteStrip anchors { @@ -367,7 +307,7 @@ FocusScope { appDrawer: appDrawer mainFlickable: mainFlickable enabled: root.focus && appDrawer.status !== Launcher.AppDrawer.Status.Open && !appletsLayout.editMode && !plasmoid.editMode && !launcherDragManager.active - onSnapPage: root.snapPage(); + onSnapPage: mainFlickable.snapPage(); } TapHandler { target: favoriteStrip