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

Merge pull request #4865 from matrix-org/travis/room-list/default-vis

Browse source 
Improve resizing interactions in the new room list
This commit is contained in:
Travis Ralston 2020-07-01 11:59:54 -06:00 • committed by GitHub
commit 2cd6fae2ce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -91,6 +91,12 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
return (this.props.rooms || []).length;
}
private get numVisibleTiles(): number {
if (!this.props.layout) return 0;
const nVisible = Math.floor(this.props.layout.visibleTiles);
return Math.min(nVisible, this.numTiles);
}
public componentDidUpdate() {
this.state.notificationState.setRooms(this.props.rooms);
}
@ -107,7 +113,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
private onResize = (e: React.MouseEvent, data: ResizeCallbackData) => {
const direction = e.movementY < 0 ? -1 : +1;
const tileDiff = this.props.layout.pixelsToTiles(Math.abs(e.movementY)) * direction;
this.props.layout.visibleTiles += tileDiff;
this.props.layout.setVisibleTilesWithin(tileDiff, this.numTiles);
this.forceUpdate(); // because the layout doesn't trigger a re-render
};
@ -173,13 +179,17 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
}
};
private renderTiles(): React.ReactElement[] {
if (this.props.layout && this.props.layout.isCollapsed) return []; // don't waste time on rendering
private renderVisibleTiles(): React.ReactElement[] {
if (this.props.layout && this.props.layout.isCollapsed) {
// don't waste time on rendering
return [];
}
const tiles: React.ReactElement[] = [];
if (this.props.rooms) {
for (const room of this.props.rooms) {
const visibleRooms = this.props.rooms.slice(0, this.numVisibleTiles);
for (const room of visibleRooms) {
tiles.push(
<RoomTile2
room={room}
@ -343,7 +353,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
public render(): React.ReactElement {
// TODO: Error boundary: https://github.com/vector-im/riot-web/issues/14185
const tiles = this.renderTiles();
const visibleTiles = this.renderVisibleTiles();
const classes = classNames({
'mx_RoomSublist2': true,
@ -352,13 +362,10 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
});
let content = null;
if (tiles.length > 0) {
if (visibleTiles.length > 0) {
const layout = this.props.layout; // to shorten calls
const nVisible = Math.floor(layout.visibleTiles);
const visibleTiles = tiles.slice(0, nVisible);
const maxTilesFactored = layout.tilesWithResizerBoxFactor(tiles.length);
const maxTilesFactored = layout.tilesWithResizerBoxFactor(this.numTiles);
const showMoreBtnClasses = classNames({
'mx_RoomSublist2_showNButton': true,
'mx_RoomSublist2_isCutting': this.state.isResizing && layout.visibleTiles < maxTilesFactored,
@ -368,9 +375,9 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
// 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 (tiles.length > nVisible) {
if (this.numTiles > visibleTiles.length) {
// we have a cutoff condition - add the button to show all
const numMissing = tiles.length - visibleTiles.length;
const numMissing = this.numTiles - visibleTiles.length;
let showMoreText = (
<span className='mx_RoomSublist2_showNButtonText'>
{_t("Show %(count)s more", {count: numMissing})}
@ -385,7 +392,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
{showMoreText}
</div>
);
} else if (tiles.length <= nVisible && tiles.length > this.props.layout.defaultVisibleTiles) {
} else if (this.numTiles <= visibleTiles.length && this.numTiles > this.props.layout.defaultVisibleTiles) {
// we have all tiles visible - add a button to show less
let showLessText = (
<span className='mx_RoomSublist2_showNButtonText'>
@ -405,7 +412,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
// Figure out if we need a handle
let handles = ['s'];
if (layout.visibleTiles >= tiles.length && tiles.length <= layout.minVisibleTiles) {
if (layout.visibleTiles >= this.numTiles && this.numTiles <= layout.minVisibleTiles) {
handles = []; // no handles, we're at a minimum
}
@ -424,9 +431,9 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
if (showNButton) padding += SHOW_N_BUTTON_HEIGHT;
padding += RESIZE_HANDLE_HEIGHT; // always append the handle height
const relativeTiles = layout.tilesWithPadding(tiles.length, padding);
const relativeTiles = layout.tilesWithPadding(this.numTiles, padding);
const minTilesPx = layout.calculateTilesToPixelsMin(relativeTiles, layout.minVisibleTiles, padding);
const maxTilesPx = layout.tilesToPixelsWithPadding(tiles.length, padding);
const maxTilesPx = layout.tilesToPixelsWithPadding(this.numTiles, padding);
const tilesWithoutPadding = Math.min(relativeTiles, layout.visibleTiles);
const tilesPx = layout.calculateTilesToPixelsMin(relativeTiles, tilesWithoutPadding, padding);