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

dont base collapse toggle size on min-width, as it's not available in collapsed state

Browse Source
This commit is contained in:
Bruno Windels 2018-10-16 12:26:08 +02:00
parent 01471abdc5
commit c56975d93d
3 changed files with 19 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/structures/LoggedInView.js
View File

@ -98,7 +98,12 @@ const LoggedInView = React.createClass({
vertical: "mx_ResizeHandle_vertical",
reverse: "mx_ResizeHandle_reverse"
};
makeResizeable(this.resizeContainer, classNames, CollapseDistributor);
const collapseToggleSize = 260 - 50;
makeResizeable(
this.resizeContainer,
classNames,
CollapseDistributor,
collapseToggleSize);
},
componentWillMount: function() {

27
src/resizer/distributors.js
View File

@ -17,29 +17,20 @@ class FixedDistributor {
class CollapseDistributor extends FixedDistributor {
constructor(container, items, handleIndex, direction, sizer) {
constructor(container, items, handleIndex, direction, sizer, toggleSize) {
super(container, items, handleIndex, direction, sizer);
const style = getComputedStyle(this.item);
this.minWidth = parseInt(style.minWidth, 10); //auto becomes NaN
this.toggleSize = toggleSize;
}
resize(offset) {
let newWidth = offset - this.sizer.getItemOffset(this.item);
if (this.minWidth > 0) {
// -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;
}
else {
this.item.classList.remove("collapsed");
}
let newSize = offset - this.sizer.getItemOffset(this.item);
if (newSize < this.toggleSize) {
this.item.classList.add("collapsed");
}
super.resize(newWidth);
else {
this.item.classList.remove("collapsed");
}
super.resize(newSize);
}
}

6
src/resizer/event.js
View File

@ -12,7 +12,7 @@ classNames:
resizing: string
*/
function makeResizeable(container, classNames, distributorCtor, sizerCtor = Sizer) {
function makeResizeable(container, classNames, distributorCtor, distributorCfg = undefined, sizerCtor = Sizer) {
function isResizeHandle(el) {
return el && el.classList.contains(classNames.handle);
@ -44,7 +44,9 @@ function makeResizeable(container, classNames, distributorCtor, sizerCtor = Size
});
const prevItem = resizeHandle.previousElementSibling;
const handleIndex = items.indexOf(prevItem) + 1;
const distributor = new distributorCtor(container, items, handleIndex, direction, sizer);
const distributor = new distributorCtor(
container, items, handleIndex,
direction, sizer, distributorCfg);
const onMouseMove = (event) => {
const offset = sizer.offsetFromEvent(event);