From 4f006b033e1d6012226704dd538bca773f69673f Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 11 Oct 2018 15:40:59 +0200
Subject: [PATCH] collapse left panel when 50px past min-width

---
 src/components/structures/LoggedInView.js | 4 ++--
 src/resizer/distributors.js               | 7 ++++++-
 src/resizer/index.js                      | 3 ++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/LoggedInView.js b/src/components/structures/LoggedInView.js
index 174a742c44..a3a88f1958 100644
--- a/src/components/structures/LoggedInView.js
+++ b/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() {
diff --git a/src/resizer/distributors.js b/src/resizer/distributors.js
index bef3377df2..eda60c6fe3 100644
--- a/src/resizer/distributors.js
+++ b/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;
             }
diff --git a/src/resizer/index.js b/src/resizer/index.js
index 923471b1f2..fba384ebb9 100644
--- a/src/resizer/index.js
+++ b/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,
 };