Unfloat header and footer on view change
Since panels doesn't track page content updates, it may not catch cases
when it should be repositioned after view change.
For example opening dashboard after a diff view causes footer to obscure
the dashboard.
Also when changing file in diff view causes page height and scroll
position to change when diff is loaded which causes footer to be
mispositioned.
Change-Id: I3a633e2770f1ecb30319ac958bc362c57b376c05
diff --git a/polygerrit-ui/app/elements/gr-app.html b/polygerrit-ui/app/elements/gr-app.html
index 273a28c..9d3e2f2 100644
--- a/polygerrit-ui/app/elements/gr-app.html
+++ b/polygerrit-ui/app/elements/gr-app.html
@@ -105,7 +105,7 @@
color: #b71c1c;
}
</style>
- <gr-fixed-panel>
+ <gr-fixed-panel id="header">
<gr-main-header id="mainHeader" search-query="{{params.query}}">
</gr-main-header>
</gr-fixed-panel>
diff --git a/polygerrit-ui/app/elements/gr-app.js b/polygerrit-ui/app/elements/gr-app.js
index 438c996..aa9b644 100644
--- a/polygerrit-ui/app/elements/gr-app.js
+++ b/polygerrit-ui/app/elements/gr-app.js
@@ -136,7 +136,8 @@
if (this.params.justRegistered) {
this.$.registration.open();
}
- this.$.footer.update();
+ this.$.header.unfloat();
+ this.$.footer.unfloat();
},
_loginTapHandler(e) {
diff --git a/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel.js b/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel.js
index 1aedbf1..27cb373 100644
--- a/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel.js
+++ b/polygerrit-ui/app/elements/shared/gr-fixed-panel/gr-fixed-panel.js
@@ -75,6 +75,13 @@
return window.scrollY;
},
+ unfloat() {
+ this.$.header.style.top = '';
+ this._headerFloating = false;
+ this.customStyle['--header-height'] = '';
+ this.updateStyles();
+ },
+
update() {
this.debounce('update', () => {
this._updateDebounced();
@@ -155,12 +162,6 @@
}
},
- _unfloatHeader() {
- this._headerFloating = false;
- this.customStyle['--header-height'] = '';
- this.updateStyles();
- },
-
_floatHeader() {
this.customStyle['--header-height'] = this._headerHeight + 'px';
this.updateStyles();
