mirror of https://github.com/vector-im/riot-web
Relax flexboxes in resizer on window resize
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>pull/21833/head
parent
ba21c6ed36
commit
447ea9eb23
|
@ -124,10 +124,6 @@ $MiniAppTileHeight: 200px;
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
& + .mx_AppTile {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AppTileFullWidth {
|
||||
|
|
|
@ -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>} {
|
||||
|
|
Loading…
Reference in New Issue