From 04edff29cf16c2623402c28e1e31820438f3d5ca Mon Sep 17 00:00:00 2001
From: Bruno Windels <bruno@windels.cloud>
Date: Wed, 15 Sep 2021 15:57:31 +0200
Subject: [PATCH] give more top padding to gaps that appear in the middle of
 the timeline

---
 .../session/room/timeline/tiles/GapTile.js       | 16 ++++++++++++++++
 .../web/ui/css/themes/element/timeline.css       |  8 ++++++++
 src/platform/web/ui/css/timeline.css             |  1 -
 .../web/ui/session/room/timeline/GapView.js      |  3 ++-
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/domain/session/room/timeline/tiles/GapTile.js b/src/domain/session/room/timeline/tiles/GapTile.js
index 0863b3b6..5b4bcea4 100644
--- a/src/domain/session/room/timeline/tiles/GapTile.js
+++ b/src/domain/session/room/timeline/tiles/GapTile.js
@@ -22,6 +22,7 @@ export class GapTile extends SimpleTile {
         super(options);
         this._loading = false;
         this._error = null;
+        this._isAtTop = true;
     }
 
     async fill() {
@@ -48,6 +49,21 @@ export class GapTile extends SimpleTile {
         this.fill();
     }
 
+    get isAtTop() {
+        return this._isAtTop;
+    }
+
+    updatePreviousSibling(prev) {
+        console.log("GapTile.updatePreviousSibling", prev);
+        super.updatePreviousSibling(prev);
+        const isAtTop = !prev;
+        if (this._isAtTop !== isAtTop) {
+            this._isAtTop = isAtTop;
+            console.log("isAtTop", this._isAtTop);
+            this.emitChange("isAtTop");
+        }
+    }
+
     updateEntry(entry, params) {
         super.updateEntry(entry, params);
         if (!entry.isGap) {
diff --git a/src/platform/web/ui/css/themes/element/timeline.css b/src/platform/web/ui/css/themes/element/timeline.css
index 408d10cc..1caf09d5 100644
--- a/src/platform/web/ui/css/themes/element/timeline.css
+++ b/src/platform/web/ui/css/themes/element/timeline.css
@@ -362,3 +362,11 @@ only loads when the top comes into view*/
 .GapView > :not(:first-child) {
     margin-left: 12px;
 }
+
+.GapView {
+    padding: 52px 20px;
+}
+
+.GapView.isAtTop {
+    padding: 52px 20px 12px 20px;
+}
diff --git a/src/platform/web/ui/css/timeline.css b/src/platform/web/ui/css/timeline.css
index ea669c92..dd34ba05 100644
--- a/src/platform/web/ui/css/timeline.css
+++ b/src/platform/web/ui/css/timeline.css
@@ -61,7 +61,6 @@ limitations under the License.
 
 .GapView {
     display: flex;
-    padding: 52px 20px 12px 20px;
 }
 
 .GapView > :nth-child(2) {
diff --git a/src/platform/web/ui/session/room/timeline/GapView.js b/src/platform/web/ui/session/room/timeline/GapView.js
index 07e4d967..07980b42 100644
--- a/src/platform/web/ui/session/room/timeline/GapView.js
+++ b/src/platform/web/ui/session/room/timeline/GapView.js
@@ -21,7 +21,8 @@ export class GapView extends TemplateView {
     render(t, vm) {
         const className = {
             GapView: true,
-            isLoading: vm => vm.isLoading
+            isLoading: vm => vm.isLoading,
+            isAtTop: vm => vm.isAtTop,
         };
         return t.li({className}, [
             spinner(t),