collapse left panel when 50px past min-width

src/components/structures/LoggedInView.js

@@ -35,7 +35,7 @@ import RoomListStore from "../../stores/RoomListStore";
 import TagOrderActions from '../../actions/TagOrderActions';
 import RoomListActions from '../../actions/RoomListActions';
 import ResizeHandle from '../views/elements/ResizeHandle';
-import {makeResizeable, FixedDistributor} from '../../resizer'
+import {makeResizeable, CollapseDistributor} from '../../resizer'
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
 // NB. this is just for server notices rather than pinned messages in general.
@@ -98,7 +98,7 @@ const LoggedInView = React.createClass({
             vertical: "mx_ResizeHandle_vertical",
             reverse: "mx_ResizeHandle_reverse"
         };
-        makeResizeable(this.resizeContainer, classNames, FixedDistributor);
+        makeResizeable(this.resizeContainer, classNames, CollapseDistributor);
     },
 
     componentWillMount: function() {

src/resizer/distributors.js

@@ -26,7 +26,12 @@ class CollapseDistributor extends FixedDistributor {
     resize(offset) {
         let newWidth = offset - this.sizer.getItemOffset(this.item);
         if (this.minWidth > 0) {
-            if (offset < this.minWidth + 50) {
+            // -50 this is to not collapse immediately
+            // when moving the cursor past the minWidth
+            // to give some visual feedback you are about
+            // to collapse
+            // TODO: should 50 be configurable? minWidth/2 maybe?
+            if (offset < (this.minWidth - 50)) {
                 this.item.classList.add("collapsed");
                 newWidth = this.minWidth;
             }

src/resizer/index.js

@@ -1,10 +1,11 @@
 import {Sizer} from "./sizer";
-import {FixedDistributor, PercentageDistributor} from "./distributors";
+import {FixedDistributor, CollapseDistributor, PercentageDistributor} from "./distributors";
 import {makeResizeable} from "./event";
 
 module.exports = {
     makeResizeable,
     Sizer,
     FixedDistributor,
+    CollapseDistributor,
     PercentageDistributor,
 };