From 447ea9eb2332f1d3b675d18bd8db1658d3cb8aa1 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 13 Oct 2020 16:11:58 +0100 Subject: [PATCH] Relax flexboxes in resizer on window resize Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/views/rooms/_AppsDrawer.scss | 4 ---- src/resizer/resizer.ts | 15 +++++++++++++++ 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index bbbfc21cd1..df064cdf40 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -124,10 +124,6 @@ $MiniAppTileHeight: 200px; display: flex; flex-direction: column; box-sizing: border-box; - - & + .mx_AppTile { - - } } .mx_AppTileFullWidth { diff --git a/src/resizer/resizer.ts b/src/resizer/resizer.ts index 3ab8914fb5..f1ee187be1 100644 --- a/src/resizer/resizer.ts +++ b/src/resizer/resizer.ts @@ -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 { 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 { body.addEventListener("mousemove", onMouseMove, false); }; + private onResize = throttle(() => { + const distributors = this.getResizeHandles().map(handle => { + const {distributor} = this.createSizerAndDistributor(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} {