Improve room sublist resizing

res/css/structures/_RoomSubList.scss

@@ -33,13 +33,25 @@ limitations under the License.
 
 .mx_RoomSubList {
     min-height: 31px;
-    flex: 0 100000000 auto;
+    flex: 0 10000 auto;
     display: flex;
     flex-direction: column;
 }
 
+.mx_RoomSubList.resized-sized {
+    /*
+    flex-basis to 0 so sublists
+    are not shrinking/growing relative
+    to their content (as would be the case with auto),
+    as this intervenes with sizing an item exactly
+    when not available space is available
+    in the flex container
+    */
+    flex: 1 1 0;
+}
+
 .mx_RoomSubList_nonEmpty {
-    min-height: 70px;
+    min-height: 74px;
 
     .mx_AutoHideScrollbar_offset {
         padding-bottom: 4px;
@@ -50,17 +62,6 @@ limitations under the License.
     flex: none !important;
 }
 
-.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;
-}
-
 .mx_RoomSubList_labelContainer {
     display: flex;
     flex-direction: row;

src/components/views/rooms/RoomList.js

@@ -36,7 +36,7 @@ import GroupStore from '../../../stores/GroupStore';
 import RoomSubList from '../../structures/RoomSubList';
 import ResizeHandle from '../elements/ResizeHandle';
 
-import {Resizer, RoomDistributor, RoomSizer} from '../../../resizer'
+import {Resizer, RoomSubListDistributor} from '../../../resizer'
 const HIDE_CONFERENCE_CHANS = true;
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
 
@@ -153,7 +153,11 @@ module.exports = React.createClass({
         if (typeof newSize === "string") {
             newSize = Number.MAX_SAFE_INTEGER;
         }
-        this.subListSizes[id] = newSize;
+        if (newSize === null) {
+            delete this.subListSizes[id];
+        } else {
+            this.subListSizes[id] = newSize;
+        }
         window.localStorage.setItem("mx_roomlist_sizes", JSON.stringify(this.subListSizes));
         // update overflow indicators
         this._checkSubListsOverflow();
@@ -164,7 +168,7 @@ module.exports = React.createClass({
         const cfg = {
             onResized: this._onSubListResize,
         };
-        this.resizer = new Resizer(this.resizeContainer, RoomDistributor, cfg, RoomSizer);
+        this.resizer = new Resizer(this.resizeContainer, RoomSubListDistributor, cfg);
         this.resizer.setClassNames({
             handle: "mx_ResizeHandle",
             vertical: "mx_ResizeHandle_vertical",
@@ -724,4 +728,4 @@ module.exports = React.createClass({
             </div>
         );
     },
-});
+});

src/resizer/distributors/collapse.js

@@ -0,0 +1,53 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import FixedDistributor from "./fixed";
+import ResizeItem from "../item";
+
+class CollapseItem extends ResizeItem {
+    notifyCollapsed(collapsed) {
+        const callback = this.resizer.config.onCollapsed;
+        if (callback) {
+            callback(collapsed, this.id, this.domNode);
+        }
+    }
+}
+
+export default class CollapseDistributor extends FixedDistributor {
+    static createItem(resizeHandle, resizer, sizer) {
+        return new CollapseItem(resizeHandle, resizer, sizer);
+    }
+
+    constructor(item, config) {
+        super(item);
+        this.toggleSize = config && config.toggleSize;
+        this.isCollapsed = false;
+    }
+
+    resize(newSize) {
+        const isCollapsedSize = newSize < this.toggleSize;
+        if (isCollapsedSize && !this.isCollapsed) {
+            this.isCollapsed = true;
+            this.item.notifyCollapsed(true);
+        } else if (!isCollapsedSize && this.isCollapsed) {
+            this.item.notifyCollapsed(false);
+            this.isCollapsed = false;
+        }
+        if (!isCollapsedSize) {
+            super.resize(newSize);
+        }
+    }
+}

src/resizer/distributors/fixed.js

@@ -0,0 +1,57 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import ResizeItem from "../item";
+import Sizer from "../sizer";
+
+/**
+distributors translate a moving cursor into
+CSS/DOM changes by calling the sizer
+
+they have two methods:
+    `resize` receives then new item size
+    `resizeFromContainerOffset` receives resize handle location
+        within the container bounding box. For internal use.
+        This method usually ends up calling `resize` once the start offset is subtracted.
+the offset from the container edge of where
+the mouse cursor is.
+*/
+export default class FixedDistributor {
+    static createItem(resizeHandle, resizer, sizer) {
+        return new ResizeItem(resizeHandle, resizer, sizer);
+    }
+
+    static createSizer(containerElement, vertical, reverse) {
+        return new Sizer(containerElement, vertical, reverse);
+    }
+
+    constructor(item) {
+        this.item = item;
+        this.beforeOffset = item.offset();
+    }
+
+    resize(size) {
+        this.item.setSize(size);
+    }
+
+    resizeFromContainerOffset(offset) {
+        this.resize(offset - this.beforeOffset);
+    }
+
+    start() {}
+
+    finish() {}
+}