[gnome-shell/wip/carlosg/appgrid-navigation: 6/11] js/appDisplay: Implement side page previews while DnDing

[Carlos Garnacho <carlosg src gnome org>]

commit f0fbee035dd027fa388ec71603c16f9cfa10da1f
Author: Carlos Garnacho <carlosg gnome org>
Date:   Wed Feb 3 12:51:17 2021 +0100

    js/appDisplay: Implement side page previews while DnDing
    
    When DnDing an icon, we show both previous/next page, and optionally
    a "placeholder" actor to allow creating new pages. These sides on the
    scrollview are drop targets themselves, allowing to drop an app onto
    the next/prev page without further navigation.
    
    Still, preserve the checks to maybe switch to prev/next page without
    finishing the DnD operation, for finer grained operations.

 data/theme/gnome-shell-sass/widgets/_app-grid.scss |  4 ++
 js/ui/appDisplay.js                                | 46 +++++++++++++++++++---
 2 files changed, 45 insertions(+), 5 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss 
b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index eb9a3f4b91..c28bdb0e60 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -142,6 +142,10 @@ $app_grid_fg_color: #fff;
   background: rgba(255, 255, 255, 0.05);
   width: 88px;
 
+  &.dnd {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
   &.next {
     &:ltr { border-radius: 15px 0px 0px 15px; }
     &:rtl { border-radius: 0px 15px 15px 0px; }
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 6679bfd6b7..5b7ca5408f 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -56,6 +56,7 @@ var SidePages = {
     NONE: 0,
     PREVIOUS: 1 << 0,
     NEXT: 1 << 1,
+    DND: 1 << 2,
 };
 
 function _getCategories(info) {
@@ -154,6 +155,7 @@ var BaseAppView = GObject.registerClass({
             enable_mouse_scrolling: false,
         });
         this._scrollView.set_policy(St.PolicyType.EXTERNAL, St.PolicyType.NEVER);
+        this._scrollView._delegate = this;
 
         this._canScroll = true; // limiting scrolling speed
         this._scrollTimeoutId = 0;
@@ -606,6 +608,7 @@ var BaseAppView = GObject.registerClass({
             dragMotion: this._onDragMotion.bind(this),
         };
         DND.addDragMonitor(this._dragMonitor);
+        this._slideSidePages(SidePages.PREVIOUS | SidePages.NEXT | SidePages.DND);
     }
 
     _onDragMotion(dragEvent) {
@@ -632,22 +635,31 @@ var BaseAppView = GObject.registerClass({
         }
 
         this._resetOvershoot();
+        this._slideSidePages(SidePages.NONE);
+        delete this._dropPage;
     }
 
     _onDragCancelled() {
         // At this point, the positions aren't stored yet, thus _redisplay()
         // will move all items to their original positions
         this._redisplay();
+        this._slideSidePages(SidePages.NONE);
     }
 
     _canAccept(source) {
         return source instanceof AppViewItem;
     }
 
-    handleDragOver(source) {
+    handleDragOver(source, _actor, x, y) {
         if (!this._canAccept(source))
             return DND.DragMotionResult.NO_DROP;
 
+        this._dropPage = this._pageForCoords(x, y);
+        if (this._dropPage &&
+            this._dropPage === SidePages.PREVIOUS &&
+            this._grid.currentPage === 0)
+            delete this._dropPage;
+
         return DND.DragMotionResult.MOVE_DROP;
     }
 
@@ -655,8 +667,16 @@ var BaseAppView = GObject.registerClass({
         if (!this._canAccept(source))
             return false;
 
-        // Dropped before the icon was moved
-        if (this._delayedMoveData) {
+        if (this._dropPage) {
+            const increment = this._dropPage === SidePages.NEXT ? 1 : -1;
+            const { currentPage, nPages } = this._grid;
+            const page = Math.min(currentPage + increment, nPages);
+            const position = page < nPages ? -1 : 0;
+
+            this._moveItem(source, page, position);
+            this.goToPage(page);
+        } else if (this._delayedMoveData) {
+            // Dropped before the icon was moved
             const { page, position } = this._delayedMoveData;
 
             this._moveItem(source, page, position);
@@ -1036,10 +1056,17 @@ var BaseAppView = GObject.registerClass({
             let translationX = (1 - adjustment.value) * 100 * page;
             translationX = rtl ? -translationX : translationX;
             const nextPage = this._grid.currentPage + page;
-            if (nextPage >= 0 &&
-                nextPage < this._grid.nPages - 1) {
+            const hasFollowingPage = nextPage >= 0 &&
+                nextPage < this._grid.nPages;
+
+            if (hasFollowingPage) {
                 const items = this._grid.getItemsAtPage(nextPage);
                 items.forEach(item => (item.translation_x = translationX));
+            }
+            if (hasFollowingPage ||
+                (page > 0 &&
+                 this._grid.layout_manager.allow_incomplete_pages &&
+                 (state & SidePages.DND) !== 0)) {
                 indicator.set({
                     visible: true,
                     opacity: adjustment.value * 255,
@@ -1073,8 +1100,17 @@ var BaseAppView = GObject.registerClass({
         this._pagesShown = state;
         const showingNextPage = state & SidePages.NEXT;
         const showingPrevPage = state & SidePages.PREVIOUS;
+        const dnd = state & SidePages.DND;
         let adjustment;
 
+        if (dnd) {
+            this._nextPageIndicator.add_style_class_name('dnd');
+            this._prevPageIndicator.add_style_class_name('dnd');
+        } else {
+            this._nextPageIndicator.remove_style_class_name('dnd');
+            this._prevPageIndicator.remove_style_class_name('dnd');
+        }
+
         adjustment = this._getPagePreviewAdjustment(1);
         if (showingNextPage) {
             adjustment = this._setupPagePreview(1, state);