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

Relax flexboxes in resizer on window resize 

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
Michael Telatynski 2020-10-13 16:11:58 +01:00
parent ba21c6ed36
commit 447ea9eb23
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
res/css/views/rooms/_AppsDrawer.scss
View File

@ -124,10 +124,6 @@ $MiniAppTileHeight: 200px;
display: flex;
flex-direction: column;
box-sizing: border-box;
& + .mx_AppTile {
}
}
.mx_AppTileFullWidth {

15
src/resizer/resizer.ts
View File

@ -27,6 +27,8 @@ classNames:
resizing: string
*/
import {throttle} from "lodash";
import FixedDistributor from "./distributors/fixed";
import Sizer from "./sizer";
import ResizeItem from "./item";
@ -76,10 +78,12 @@ export default class Resizer<C extends IConfig = IConfig> {
public attach() {
this.container.addEventListener("mousedown", this.onMouseDown, false);
window.addEventListener("resize", this.onResize);
}
public detach() {
this.container.removeEventListener("mousedown", this.onMouseDown, false);
window.removeEventListener("resize", this.onResize);
}
/**
@ -158,6 +162,17 @@ export default class Resizer<C extends IConfig = IConfig> {
body.addEventListener("mousemove", onMouseMove, false);
};
private onResize = throttle(() => {
const distributors = this.getResizeHandles().map(handle => {
const {distributor} = this.createSizerAndDistributor(<HTMLDivElement>handle);
return distributor;
});
// relax all items if they had any overconstrained flexboxes
distributors.forEach(d => d.start());
distributors.forEach(d => d.finish());
}, 100, {trailing: true, leading: true});
private createSizerAndDistributor(
resizeHandle: HTMLDivElement,
): {sizer: Sizer, distributor: FixedDistributor<any>} {