[gnome-shell/wip/carlosg/appgrid-navigation: 5/5] appDisplay: Adapt to available extra space showing icon grids

[Carlos Garnacho <carlosg src gnome org>]

commit 3abcdcec91c5ee27a2c292d8673ddfc75989e2da
Author: Carlos Garnacho <carlosg gnome org>
Date:   Fri Feb 19 16:45:57 2021 +0100

    appDisplay: Adapt to available extra space showing icon grids
    
    Depending on the available horizontal space, we may want to manipulate
    the icon grid and scroll view spacing to result in an optimal layout
    that has space left to preview prev/next pages.
    
    The main change here is that, when adapting to the available size, the
    space given to a page does not necessarily match the available space,
    as we need to be able to show more than one page at a time.
    
    With this decoupling of available and page sizes in place, we now know
    how much space there is available in order to extend the padding between
    pages, or the fade effect applied to the previewed pages.
    
    Underneath, we rely a bit less on hardcoded CSS paddings, and a bit more
    on the StScrollView::content-padding property.
    
    All put together, gives us proper space management from ultra-wide
    displays, to display ratios that are close to the optimal grid ratio.

 data/theme/gnome-shell-sass/widgets/_app-grid.scss |  5 +--
 js/ui/appDisplay.js                                | 34 ++++++++++++++++---
 js/ui/iconGrid.js                                  | 39 +++++++++++++++++++---
 3 files changed, 64 insertions(+), 14 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss 
b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index 7a2c3aefb9..0a88d28e83 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -126,10 +126,8 @@ $app_grid_fg_color: #fff;
   }
 }
 
-// Some hacks I don't even know
 .apps-scroll-view {
-  // horizontal padding to make sure scrollbars or dash don't overlap content
-  padding: 0 88px;
+  padding: 0;
 }
 
 // shutdown and other actions in the grid
@@ -150,7 +148,6 @@ $app_grid_fg_color: #fff;
 
 .next-page-indicator,
 .prev-page-indicator {
-  margin: 72px;
   width: 24px;
   height: 24px;
 }
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 3e0f9b32ac..76128e7e8e 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -39,7 +39,7 @@ var APP_ICON_TITLE_COLLAPSE_TIME = 100;
 const FOLDER_DIALOG_ANIMATION_TIME = 200;
 
 const PAGE_PREVIEW_ANIMATION_TIME = 150;
-const PAGE_PREVIEW_FADE_EFFECT_OFFSET = 160;
+const PAGE_PREVIEW_FADE_EFFECT_MAX_OFFSET = 300;
 const PAGE_INDICATOR_FADE_TIME = 200;
 
 const OVERSHOOT_THRESHOLD = 20;
@@ -309,10 +309,19 @@ var BaseAppView = GObject.registerClass({
 
     _updateFadeForNavigation() {
         const fadeMargin = new Clutter.Margin();
-        fadeMargin.right = (this._pagesShown & SidePages.NEXT) !== 0
-            ? -PAGE_PREVIEW_FADE_EFFECT_OFFSET : 0;
-        fadeMargin.left = (this._pagesShown & SidePages.PREVIOUS) !== 0
-            ? -PAGE_PREVIEW_FADE_EFFECT_OFFSET : 0;
+
+        if (this._pagesShown & SidePages.NEXT) {
+            fadeMargin.right = Math.max(
+                -PAGE_PREVIEW_FADE_EFFECT_MAX_OFFSET,
+                -(this._availWidth - this._grid.layout_manager.pageWidth) / 2);
+        }
+
+        if (this._pagesShown & SidePages.PREVIOUS) {
+            fadeMargin.left = Math.max(
+                -PAGE_PREVIEW_FADE_EFFECT_MAX_OFFSET,
+                -(this._availWidth - this._grid.layout_manager.pageWidth) / 2);
+        }
+
         this._scrollView.update_fade_effect(fadeMargin);
     }
 
@@ -1040,8 +1049,23 @@ var BaseAppView = GObject.registerClass({
 
         this._grid.adaptToSize(availWidth, availHeight);
 
+        const horizontalPadding = (availWidth - this._grid.layout_manager.pageWidth) / 2;
+        const verticalPadding = (availHeight - this._grid.layout_manager.pageHeight) / 2;
+
+        this._scrollView.content_padding = new Clutter.Margin({
+            left: horizontalPadding,
+            right: horizontalPadding,
+            top: verticalPadding,
+            bottom: verticalPadding,
+        });
+
         this._availWidth = availWidth;
         this._availHeight = availHeight;
+
+        this._nextPageIndicator.marginLeft = horizontalPadding - 12;
+        this._nextPageIndicator.marginRight = horizontalPadding - 12;
+        this._prevPageIndicator.marginLeft = horizontalPadding - 12;
+        this._prevPageIndicator.marginRight = horizontalPadding - 12;
     }
 
     _syncClip() {
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index e8ac2b07ed..5dd898b7f0 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -15,6 +15,7 @@ var ANIMATION_MAX_DELAY_OUT_FOR_ITEM = 2 / 3 * ANIMATION_TIME_OUT;
 var ANIMATION_FADE_IN_TIME_FOR_ITEM = 1 / 4 * ANIMATION_TIME_IN;
 
 var PAGE_SWITCH_TIME = 300;
+var MAX_PAGE_PADDING = 200;
 
 var AnimationDirection = {
     IN: 0,
@@ -335,6 +336,8 @@ var IconGridLayout = GObject.registerClass({
             : IconSize.LARGE;
 
         this._pageSizeChanged = false;
+        this._availHeight = 0;
+        this._availWidth = 0;
         this._pageHeight = 0;
         this._pageWidth = 0;
         this._nPages = -1;
@@ -577,7 +580,7 @@ var IconGridLayout = GObject.registerClass({
             this._pageWidth - usedWidth - columnSpacingPerPage -
             this.pagePadding.left - this.pagePadding.right;
         const emptyVSpace =
-            this._pageHeight - usedHeight -  rowSpacingPerPage -
+            this._pageHeight - usedHeight - rowSpacingPerPage -
             this.pagePadding.top - this.pagePadding.bottom;
         let leftEmptySpace = this.pagePadding.left;
         let topEmptySpace = this.pagePadding.top;
@@ -969,12 +972,38 @@ var IconGridLayout = GObject.registerClass({
             resolve => this._iconSizeUpdateResolveCbs.push(resolve));
     }
 
-    adaptToSize(pageWidth, pageHeight) {
-        if (this._pageWidth === pageWidth && this._pageHeight === pageHeight)
+    adaptToSize(availWidth, availHeight) {
+        if (this._availWidth === availWidth && this._availHeight === availHeight)
             return;
 
-        this._pageWidth = pageWidth;
-        this._pageHeight = pageHeight;
+        this._availWidth = availWidth;
+        this._availHeight = availHeight;
+
+        const gridRatio = this.columnsPerPage / this.rowsPerPage;
+        const spaceRatio = availWidth / availHeight;
+
+        if (spaceRatio > gridRatio * 1.1) {
+            // Enough room for some preview
+            this._pageHeight = availHeight;
+            this._pageWidth = availHeight * gridRatio;
+
+            if (spaceRatio > gridRatio * 1.5) {
+                // Ultra-wide layout, give some extra space for
+                // the page area, but up to an extent.
+                const extraPageSpace = Math.min (
+                    (availWidth - this._pageWidth) / 2, MAX_PAGE_PADDING);
+                this._pageWidth += extraPageSpace;
+                this.pagePadding.left = extraPageSpace / 2;
+                this.pagePadding.right = extraPageSpace / 2;
+            }
+        } else {
+            // Not enough room, needs to shrink horizontally
+            this._pageWidth = availWidth * 0.8;
+            this._pageHeight = availHeight;
+            this.pagePadding.left = availWidth * 0.02;
+            this.pagePadding.right = availWidth * 0.02;
+        }
+
         this._pageSizeChanged = true;
 
         if (this._updateIconSizesLaterId === 0) {