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,
};