PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

collapse left panel when 50px past min-width

Browse source
This commit is contained in:
Bruno Windels 2018-10-11 15:40:59 +02:00
parent d6774fd8ee
commit 4f006b033e
3 changed files with 10 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/structures/LoggedInView.js
View file

@ -35,7 +35,7 @@ import RoomListStore from "../../stores/RoomListStore";
import TagOrderActions from '../../actions/TagOrderActions'; import TagOrderActions from '../../actions/TagOrderActions';
import RoomListActions from '../../actions/RoomListActions'; import RoomListActions from '../../actions/RoomListActions';
import ResizeHandle from '../views/elements/ResizeHandle'; 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) // 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. // 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. // 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", vertical: "mx_ResizeHandle_vertical",
reverse: "mx_ResizeHandle_reverse" reverse: "mx_ResizeHandle_reverse"
}; };
makeResizeable(this.resizeContainer, classNames, FixedDistributor); makeResizeable(this.resizeContainer, classNames, CollapseDistributor);
}, },
componentWillMount: function() { componentWillMount: function() {

7
src/resizer/distributors.js
View file

@ -26,7 +26,12 @@ class CollapseDistributor extends FixedDistributor {
resize(offset) { resize(offset) {
let newWidth = offset - this.sizer.getItemOffset(this.item); let newWidth = offset - this.sizer.getItemOffset(this.item);
if (this.minWidth > 0) { 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"); this.item.classList.add("collapsed");
newWidth = this.minWidth; newWidth = this.minWidth;
} }

3
src/resizer/index.js
View file

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