Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 21:24:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats 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 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() {

7
src/resizer/distributors.js
View File

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

3
src/resizer/index.js
View File

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