From 839851c90f80eec2bd24dd7ad6ec9e1bd1b0c84f Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 14 Jul 2020 21:49:51 +0100 Subject: [PATCH] Fix bug where 'show more' sometimes did nothing a3a1e2e01fa261698686fe8a1984b1dd5fc2197e added the padding to maxTilesPx which was confusing the calculation of whether we should be showing the 'show more' button or the 'show less' button. Hopefully this fixes the issue without undoing fixes from https://github.com/matrix-org/matrix-react-sdk/pull/4964 or the above commit by adding the padding in all cased in `get padding()`. --- src/components/views/rooms/RoomSublist2.tsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx index 68b7a585b5..ec937dcad3 100644 --- a/src/components/views/rooms/RoomSublist2.tsx +++ b/src/components/views/rooms/RoomSublist2.tsx @@ -127,11 +127,17 @@ export default class RoomSublist2 extends React.Component { private get padding() { let padding = RESIZE_HANDLE_HEIGHT; // this is used for calculating the max height of the whole container, - // and takes into account whether there should be room reserved for the show less button - // when fully expanded. We cannot check against the layout's defaultVisible tile count + // and takes into account whether there should be room reserved for the show more/less button + // when fully expanded. We can't rely purely on the layout's defaultVisible tile count // because there are conditions in which we need to know that the 'show more' button // is present while well under the default tile limit. - if (this.numTiles > this.numVisibleTiles) { + const needsShowMore = this.numTiles > this.numVisibleTiles; + + // ...but also check this or we'll miss if the section is expanded and we need a + // 'show less' + const needsShowLess = this.numTiles > this.layout.defaultVisibleTiles; + + if (needsShowMore || needsShowLess) { padding += SHOW_N_BUTTON_HEIGHT; } return padding; @@ -621,16 +627,13 @@ export default class RoomSublist2 extends React.Component { 'mx_RoomSublist2_showNButton': true, }); - if (this.numTiles > this.layout.defaultVisibleTiles) { - maxTilesPx += SHOW_N_BUTTON_HEIGHT; - } - // If we're hiding rooms, show a 'show more' button to the user. This button // floats above the resize handle, if we have one present. If the user has all // tiles visible, it becomes 'show less'. let showNButton = null; if (maxTilesPx > this.state.height) { + // the height of all the tiles is greater than the section height: we need a 'show more' button const nonPaddedHeight = this.state.height - RESIZE_HANDLE_HEIGHT - SHOW_N_BUTTON_HEIGHT; const amountFullyShown = Math.floor(nonPaddedHeight / this.layout.tileHeight); const numMissing = this.numTiles - amountFullyShown;