imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Attempt to support a hard cutoff with the show more button

Browse source 
Known issues:
* Causes scroll jumps when the button gets added to DOM
* Resize handle is invisible when there's a show more button

TODO:
* Clean up comments
* Clean up useless code (all the padding stuff isn't needed)
This commit is contained in:
Travis Ralston 2020-07-09 13:07:13 -06:00
parent ce68314de9
commit 859f65659c
3 changed files with 84 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/components/views/rooms/RoomSublist2.tsx
View file

@ -119,7 +119,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
}
private get numVisibleTiles(): number {
const nVisible = Math.floor(this.layout.visibleTiles);
const nVisible = Math.ceil(this.layout.visibleTiles);
return Math.min(nVisible, this.numTiles);
}
@ -635,8 +635,8 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
// The padding is variable though, so figure out what we need padding for.
let padding = 0;
if (showNButton) padding += SHOW_N_BUTTON_HEIGHT;
padding += RESIZE_HANDLE_HEIGHT; // always append the handle height
//if (showNButton) padding += SHOW_N_BUTTON_HEIGHT;
//padding += RESIZE_HANDLE_HEIGHT; // always append the handle height
const relativeTiles = layout.tilesWithPadding(this.numTiles, padding);
const minTilesPx = layout.calculateTilesToPixelsMin(relativeTiles, layout.minVisibleTiles, padding);
@ -644,25 +644,32 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
const tilesWithoutPadding = Math.min(relativeTiles, layout.visibleTiles);
const tilesPx = layout.calculateTilesToPixelsMin(relativeTiles, tilesWithoutPadding, padding);
const handleWrapperClasses = classNames({
'mx_RoomSublist2_resizerHandles': true,
'mx_RoomSublist2_resizerHandles_showNButton': !!showNButton,
});
const dimensions = {
height: tilesPx,
};
content = (
<Resizable
size={dimensions as any}
minHeight={minTilesPx}
maxHeight={maxTilesPx}
onResizeStart={this.onResizeStart}
onResizeStop={this.onResizeStop}
onResize={this.onResize}
handleWrapperClass="mx_RoomSublist2_resizerHandles"
handleClasses={{bottom: "mx_RoomSublist2_resizerHandle"}}
className="mx_RoomSublist2_resizeBox"
enable={handles}
>
{visibleTiles}
<React.Fragment>
<Resizable
size={dimensions as any}
minHeight={minTilesPx}
maxHeight={maxTilesPx}
onResizeStart={this.onResizeStart}
onResizeStop={this.onResizeStop}
onResize={this.onResize}
handleWrapperClass={handleWrapperClasses}
handleClasses={{bottom: "mx_RoomSublist2_resizerHandle"}}
className="mx_RoomSublist2_resizeBox"
enable={handles}
>
{visibleTiles}
</Resizable>
{showNButton}
</Resizable>
</React.Fragment>
);
}

3
src/stores/room-list/ListLayout.ts
View file

@ -20,7 +20,8 @@ const TILE_HEIGHT_PX = 44;
// this comes from the CSS where the show more button is
// mathematically this percent of a tile when floating.
const RESIZER_BOX_FACTOR = 0.78;
//const RESIZER_BOX_FACTOR = 0.78;
const RESIZER_BOX_FACTOR = 0;
interface ISerializedListLayout {
numTiles: number;