diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 8225e1208c..08e7eec6d7 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -33,13 +33,13 @@ limitations under the License. .mx_RoomSubList { min-height: 31px; - flex: 0 10000 content; + flex: 0 10000 auto; display: flex; flex-direction: column; } .mx_RoomSubList.resized-sized { - flex: 0 1 0; + flex: 0 1 auto; } .mx_RoomSubList_nonEmpty { diff --git a/src/resizer/distributors.js b/src/resizer/distributors.js index cb876bf98c..f19b864a09 100644 --- a/src/resizer/distributors.js +++ b/src/resizer/distributors.js @@ -39,6 +39,10 @@ class FixedDistributor { resizeFromContainerOffset(offset) { this.resize(offset - this.beforeOffset); } + + start() {} + + finish() {} } diff --git a/src/resizer/item.js b/src/resizer/item.js index e0e1ff809c..ac47e3aea6 100644 --- a/src/resizer/item.js +++ b/src/resizer/item.js @@ -82,4 +82,23 @@ export default class ResizeItem { callback(null, this.id, this.domNode); } } + + + first() { + const firstHandle = Array.from(this.domNode.parentElement.children).find(el => { + return this.resizer.isResizeHandle(el); + }); + if (firstHandle) { + return ResizeItem.fromResizeHandle(firstHandle, this.resizer, this.sizer); + } + } + + last() { + const lastHandle = Array.from(this.domNode.parentElement.children).reverse().find(el => { + return this.resizer.isResizeHandle(el); + }); + if (lastHandle) { + return ResizeItem.fromResizeHandle(lastHandle, this.resizer, this.sizer); + } + } } diff --git a/src/resizer/resizer.js b/src/resizer/resizer.js index 8bdbc6cffe..16440bcc48 100644 --- a/src/resizer/resizer.js +++ b/src/resizer/resizer.js @@ -107,6 +107,7 @@ export class Resizer { } const {sizer, distributor} = this._createSizerAndDistributor(resizeHandle); + distributor.start(); const onMouseMove = (event) => { const offset = sizer.offsetFromEvent(event); @@ -118,9 +119,11 @@ export class Resizer { if (this.classNames.resizing) { this.container.classList.remove(this.classNames.resizing); } + distributor.finish(); body.removeEventListener("mouseup", onMouseUp, false); body.removeEventListener("mousemove", onMouseMove, false); }; + // TODO: listen for mouseout on document here as well body.addEventListener("mouseup", onMouseUp, false); body.addEventListener("mousemove", onMouseMove, false); } diff --git a/src/resizer/room.js b/src/resizer/room.js index 59f47f31fc..6b2951a605 100644 --- a/src/resizer/room.js +++ b/src/resizer/room.js @@ -18,7 +18,7 @@ import {Sizer} from "./sizer"; class RoomSizer extends Sizer { setItemSize(item, size) { - item.style.flexBasis = `${Math.round(size)}px`; + item.style.maxHeight = `${Math.round(size)}px`; item.classList.add("resized-sized"); // const total = this.getTotalSize(); // const percent = size / total; @@ -27,7 +27,7 @@ class RoomSizer extends Sizer { } clearItemSize(item) { - item.style.flexBasis = null; + item.style.maxHeight = null; item.classList.remove("resized-sized"); } } @@ -87,44 +87,15 @@ class RoomDistributor { return item.domNode.classList.contains("resized-sized"); } - resize(size, interactive = false) { - // console.log("*** starting resize session with size", size); - - // grow/shrink items after first? - // const itemSize = this.item.size(); - // // - // if (size < itemSize) { - // let nextItem = this.item.next(); - // while (nextItem) - // } - - if (interactive) { - const nextItem = this.item.next(); - if (nextItem) { - // let item = nextItem; - // let hasUnsizedProceedingItem = false; - // while (item) { - // if (this._isSized(item)) { - // hasUnsizedProceedingItem = true; - // item = null; - // } else { - // item = item.next(); - // } - // } - // if (!hasUnsizedProceedingItem) { - nextItem.clearSize(); - // } - } - } - + resize(size) { + console.log("*** starting resize session with size", size); let item = this.item; while (item) { - // TODO: collapsed if (this._isCollapsed(item)) { item = item.previous(); } else if (size <= MIN_SIZE) { - // console.log(" - resizing", item.id, "to min size", MIN_SIZE); + console.log(" - resizing", item.id, "to min size", MIN_SIZE); item.setSize(MIN_SIZE); const remainder = MIN_SIZE - size; item = item.previous(); @@ -144,18 +115,33 @@ class RoomDistributor { } } else { - // console.log(" - resizing", item.id, "to size", size); + console.log(" - resizing", item.id, "to size", size); item.setSize(size); item = null; size = 0; } } } - // console.log("*** ending resize session"); + console.log("*** ending resize session"); } resizeFromContainerOffset(containerOffset) { - this.resize(containerOffset - this.item.offset(), true); + this.resize(containerOffset - this.item.offset()); + } + + start() { + console.log("RoomDistributor::start: setting all items to their actual size in pixels"); + let item = this.item.first(); + while(item) { + if (!this._isCollapsed(item)) { + item.setSize(item.size()); + } + item = item.next(); + } + } + + finish() { + } }