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