diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 2d471ee198..04587491a7 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -33,7 +33,7 @@ limitations under the License. .mx_RoomSubList { min-height: 31px; - flex: 0 100000000 auto; + flex: 0 1 auto; display: flex; flex-direction: column; } @@ -50,15 +50,15 @@ limitations under the License. flex: none !important; } -.mx_RoomSubList.resized-all { - flex: 0 1 auto; -} +// .mx_RoomSubList.resized-all { +// flex: 0 1 auto; +// } .mx_RoomSubList.resized-sized { /* resizer set max-height on resized-sized, so that limits the height and hence needs a very small flex-shrink */ - flex: 0 10000 auto; + flex: 1 0 auto; } .mx_RoomSubList_labelContainer { diff --git a/src/resizer/item.js b/src/resizer/item.js index ad508150a5..5bee473292 100644 --- a/src/resizer/item.js +++ b/src/resizer/item.js @@ -69,7 +69,6 @@ export default class ResizeItem { setSize(size) { this.sizer.setItemSize(this.domNode, size); - console.log("resizing", this.domNode, "to", size, this.size()); const callback = this.resizer.distributorCtor.onResized; if (callback) { callback(size, this.id, this.domNode); diff --git a/src/resizer/room.js b/src/resizer/room.js index fda09940b1..5f3d8c1e6f 100644 --- a/src/resizer/room.js +++ b/src/resizer/room.js @@ -19,6 +19,7 @@ import {Sizer} from "./sizer"; class RoomSizer extends Sizer { setItemSize(item, size) { item.style.maxHeight = `${Math.round(size)}px`; + item.classList.add("resized-sized"); } } @@ -45,7 +46,10 @@ const MIN_SIZE = 70; // - items at maxContentHeight can't be resized larger // if you shrink the predecesor, and start dragging down again afterwards, which item has to grow? - +/* + either items before (starting from first or last) + or +*/ class RoomDistributor { constructor(item) { this.item = item; @@ -55,24 +59,14 @@ class RoomDistributor { return 1; } - // returns the remainder of size it didn't consume for this item - _sizeItem(item, size) { - // if collapsed, do nothing and subtract own height - if (item.domNode.classList.contains("mx_RoomSubList_hidden")) { - return; - } else if (size < MIN_SIZE) { - item.setSize(MIN_SIZE); - } else { - const scrollItem = item.domNode.querySelector(".mx_RoomSubList_scroll"); - const headerHeight = item.size() - scrollItem.offsetHeight; - const maxContentHeight = headerHeight + scrollItem.scrollHeight; - // avoid flexbox growing larger than the content height - if (size > maxContentHeight) { - item.setSize(maxContentHeight); - } else { - item.setSize(size); - } - } + _isCollapsed(item) { + return item.domNode.classList.contains("mx_RoomSubList_hidden"); + } + + _contentSize(item) { + const scrollItem = item.domNode.querySelector(".mx_RoomSubList_scroll"); + const headerHeight = item.size() - scrollItem.offsetHeight; + return headerHeight + scrollItem.scrollHeight; } resize(size) { @@ -80,28 +74,36 @@ class RoomDistributor { console.log("NEGATIVE SIZE RESIZE RESIZE RESIZE!!!", size); } let item = this.item; + + // cache result of this loop? + // move to item that is at position of cursor // this would happen if the cursor goes beyond the min-height - while (item && size < 0) { - item = item.previous(); - if (item) { - size = item.size() - size - this._handleSize(); - } - } - // change size of item and previous items from here - while(item && size > 0) { - const itemSize = item.size(); - this._sizeItem(item, size); - const delta = item.size() - itemSize; - const remainder = size - delta; - // pass remainder to previous item - if (remainder !== 0) { + while (item) { + // TODO: collapsed + if (size <= MIN_SIZE) { + item.setSize(MIN_SIZE); + const remainder = MIN_SIZE - size; item = item.previous(); if (item) { size = item.size() - remainder - this._handleSize(); } - } else { - item = null; + } + else { + const contentSize = this._contentSize(item); + if (size > contentSize) { + item.setSize(contentSize); + const remainder = size - contentSize; + item = item.previous(); + if (item) { + size = item.size() + remainder; // todo: handle size here? + } + } + else { + item.setSize(size); + item = null; + size = 0; + } } } }