From 5210fab7cb11d860aa746421f4336f4f676549d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonas=20Dre=C3=9Fler?= <verdre@v0yd.nl>
Date: Tue, 16 Jan 2024 22:03:31 +0100
Subject: [PATCH] appDisplay: Move page indicators into container for the app
 grid

Right now the page indicators are positioned above the dash with a fixed
vertical distance of "spacing" as defined in ControlsManagerLayout.

There can be quite a big distance between dash and app grid on large screens
or certain aspect ratios though, and we want the page indicators to be
aligned right below the app grid, not right above the dash.

As a first step towards that, move the page indicators into the
scrollContainer that we use to allocate everything app grid related. To
actually align the indicator closer below the app grid, more complex changes
to the layout managers of the iconGrid will be necessary. We'll do those at
some later point, but for now this change seems nice to have anyway.
---
 .../gnome-shell-sass/widgets/_app-grid.scss   |  6 +++++
 js/ui/appDisplay.js                           | 23 +++++++++++++++----
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index 11640c8c4..baf8b9f6d 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -130,6 +130,12 @@ $page_indicator_size: 10px;
   }
 }
 
+// App Grid small pagination dots
+// the osk also has pagination dots, we only want margin here
+#overviewGroup .page-indicators {
+  margin-top: 12px;
+}
+
 .apps-scroll-view {
   padding: 0;
 }
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 6111c94a1..2fdb858a1 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -204,7 +204,7 @@ export const AppGrid = GObject.registerClass({
 const BaseAppViewGridLayout = GObject.registerClass(
 class BaseAppViewGridLayout extends Clutter.BinLayout {
     _init(grid, scrollView, nextPageIndicator, nextPageArrow,
-        previousPageIndicator, previousPageArrow) {
+        previousPageIndicator, previousPageArrow, pageIndicators) {
         if (!(grid instanceof AppGrid))
             throw new Error('Grid must be an AppGrid subclass');
 
@@ -216,6 +216,7 @@ class BaseAppViewGridLayout extends Clutter.BinLayout {
         this._previousPageArrow = previousPageArrow;
         this._nextPageIndicator = nextPageIndicator;
         this._nextPageArrow = nextPageArrow;
+        this._pageIndicators = pageIndicators;
 
         grid.connect('pages-changed', () => this._syncPageIndicatorsVisibility());
 
@@ -415,6 +416,13 @@ class BaseAppViewGridLayout extends Clutter.BinLayout {
         this._syncPageIndicators();
     }
 
+    vfunc_get_preferred_height(_container, forWidth) {
+        const [gridMinH, gridNatH] = this._grid.get_preferred_height(forWidth);
+        const [, pageIndicatorsH] = this._pageIndicators.get_preferred_height(-1);
+
+        return [gridNatH + pageIndicatorsH, gridNatH + pageIndicatorsH];
+    }
+
     vfunc_allocate(container, box) {
         const ltr = container.get_text_direction() !== Clutter.TextDirection.RTL;
         const indicatorsWidth = this._getIndicatorsWidth(box);
@@ -424,6 +432,10 @@ class BaseAppViewGridLayout extends Clutter.BinLayout {
             right: indicatorsWidth,
         });
 
+        this._pageWidth = box.get_width();
+
+        const [, pageIndicatorsHeight] = this._pageIndicators.get_preferred_height(-1);
+        box.y2 -= pageIndicatorsHeight;
         this._scrollView.allocate(box);
 
         const leftBox = box.copy();
@@ -439,7 +451,9 @@ class BaseAppViewGridLayout extends Clutter.BinLayout {
         this._nextPageArrow.allocate_align_fill(ltr ? rightBox : leftBox,
             0.5, 0.5, false, false);
 
-        this._pageWidth = box.get_width();
+        box.y1 = box.y2;
+        box.y2 = box.y1 + pageIndicatorsHeight;
+        this._pageIndicators.allocate(box);
     }
 
     goToPage(page, animate = true) {
@@ -601,13 +615,15 @@ var BaseAppView = GObject.registerClass({
         scrollContainer.add_child(this._nextPageIndicator);
         scrollContainer.add_child(this._nextPageArrow);
         scrollContainer.add_child(this._prevPageArrow);
+        scrollContainer.add_child(this._pageIndicators);
         scrollContainer.layoutManager = new BaseAppViewGridLayout(
             this._grid,
             this._scrollView,
             this._nextPageIndicator,
             this._nextPageArrow,
             this._prevPageIndicator,
-            this._prevPageArrow);
+            this._prevPageArrow,
+            this._pageIndicators);
         this._appGridLayout = scrollContainer.layoutManager;
         scrollContainer._delegate = this;
 
@@ -617,7 +633,6 @@ var BaseAppView = GObject.registerClass({
             y_expand: true,
         });
         this._box.add_child(scrollContainer);
-        this._box.add_child(this._pageIndicators);
 
         // Swipe
         this._swipeTracker = new SwipeTracker.SwipeTracker(this._scrollView,