OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #4974 from matrix-org/jryans/sticky-pop 

Tweak sticky header hiding to avoid pop
pull/21833/head
Bruno Windels 2020-07-14 12:29:53 +00:00 committed by GitHub
parent f394190423 a09f773edd
commit 309c178d73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
res/css/views/rooms/_RoomSublist2.scss
View File

@ -47,12 +47,6 @@ limitations under the License.
padding-bottom: 8px;
height: 24px;
// Hide the header container if the contained element is stickied.
// We don't use display:none as that causes the header to go away too.
&.mx_RoomSublist2_headerContainer_hasSticky {
height: 0;
}
.mx_RoomSublist2_stickable {
flex: 1;
max-width: 100%;
@ -180,6 +174,15 @@ limitations under the License.
}
}
// In the general case, we leave height of headers alone even if sticky, so
// that the sublists below them do not jump. However, that leaves a gap
// when scrolled to the top above the first sublist (whose header can only
// ever stick to top), so we force height to 0 for only that first header.
// See also https://github.com/vector-im/riot-web/issues/14429.
&:first-child .mx_RoomSublist2_headerContainer {
height: 0;
}
.mx_RoomSublist2_resizeBox {
position: relative;

7
src/components/structures/LeftPanel2.tsx
View File

@ -165,7 +165,6 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
// layout updates.
for (const header of targetStyles.keys()) {
const style = targetStyles.get(header);
const headerContainer = header.parentElement; // .mx_RoomSublist2_headerContainer
if (style.makeInvisible) {
// we will have already removed the 'display: none', so add it back.
@ -205,9 +204,6 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
if (!header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) {
header.classList.add("mx_RoomSublist2_headerContainer_sticky");
}
if (!headerContainer.classList.contains("mx_RoomSublist2_headerContainer_hasSticky")) {
headerContainer.classList.add("mx_RoomSublist2_headerContainer_hasSticky");
}
const newWidth = `${headerStickyWidth}px`;
if (header.style.width !== newWidth) {
@ -217,9 +213,6 @@ export default class LeftPanel2 extends React.Component<IProps, IState> {
if (header.classList.contains("mx_RoomSublist2_headerContainer_sticky")) {
header.classList.remove("mx_RoomSublist2_headerContainer_sticky");
}
if (headerContainer.classList.contains("mx_RoomSublist2_headerContainer_hasSticky")) {
headerContainer.classList.remove("mx_RoomSublist2_headerContainer_hasSticky");
}
if (header.style.width) {
header.style.removeProperty('width');
}