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),