From c5dbdad5fc5a6215feb4033bfd03c65b6058c8b0 Mon Sep 17 00:00:00 2001
From: Georges Basile Stavracas Neto <georges.stavracas@gmail.com>
Date: Tue, 19 May 2020 14:19:05 -0300
Subject: [PATCH] iconGrid: Adapt grid layout according to available size

The new icon grid layout operates based on rows and columns, and
doesn't try to dynamically adapt it to fit to the container. In
this case, it is better to have a pre-defined set of well-known,
well-tested rows and columns, and switch between them based on
the aspect ratio of the screen.

Introduce a set of modes to the icon grid, and select the mode
that is closest to the aspect ratio.

https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1271
---
 js/ui/iconGrid.js | 59 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index 6a5b1dbbb..b6874d5b6 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -33,6 +33,25 @@ var APPICON_ANIMATION_OUT_TIME = 250;
 
 const ICON_POSITION_DELAY = 25;
 
+const defaultGridModes = [
+    {
+        rows: 8,
+        columns: 3,
+    },
+    {
+        rows: 6,
+        columns: 4,
+    },
+    {
+        rows: 4,
+        columns: 6,
+    },
+    {
+        rows: 3,
+        columns: 8,
+    },
+];
+
 var BaseIcon = GObject.registerClass(
 class BaseIcon extends St.Bin {
     _init(label, params) {
@@ -1149,7 +1168,9 @@ var IconGrid = GObject.registerClass({
             y_expand: true,
         });
 
+        this._gridModes = defaultGridModes;
         this._currentPage = 0;
+        this._currentMode = -1;
         this._clonesAnimating = [];
 
         this.connect('actor-added', this._childAdded.bind(this));
@@ -1189,6 +1210,38 @@ var IconGrid = GObject.registerClass({
         });
     }
 
+    _setGridMode(modeIndex) {
+        if (this._currentMode === modeIndex)
+            return;
+
+        this._currentMode = modeIndex;
+
+        if (modeIndex !== -1) {
+            const newMode = this._gridModes[modeIndex];
+
+            this.layout_manager.rows_per_page = newMode.rows;
+            this.layout_manager.columns_per_page = newMode.columns;
+        }
+    }
+
+    _findBestModeForSize(width, height) {
+        const sizeRatio = width / height;
+        let closestRatio = Infinity;
+        let bestMode = -1;
+
+        for (let modeIndex in this._gridModes) {
+            const mode = this._gridModes[modeIndex];
+            const modeRatio = mode.columns / mode.rows;
+
+            if (Math.abs(sizeRatio - modeRatio) < Math.abs(sizeRatio - closestRatio)) {
+                closestRatio = modeRatio;
+                bestMode = modeIndex;
+            }
+        }
+
+        this._setGridMode(bestMode);
+    }
+
     _childRemoved(grid, child) {
         child.disconnect(child._iconGridKeyFocusInId);
         delete child._iconGridKeyFocusInId;
@@ -1371,6 +1424,7 @@ var IconGrid = GObject.registerClass({
     }
 
     adaptToSize(width, height) {
+        this._findBestModeForSize(width, height);
         this.layout_manager.adaptToSize(width, height);
     }
 
@@ -1491,6 +1545,11 @@ var IconGrid = GObject.registerClass({
         });
     }
 
+    setGridModes(modes) {
+        this._gridModes = modes ? modes : defaultGridModes;
+        this.queue_relayout();
+    }
+
     get itemsPerPage() {
         const layoutManager = this.layout_manager;
         return layoutManager.rows_per_page * layoutManager.columns_per_page;