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

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", vertical: "mx_ResizeHandle_vertical",
reverse: "mx_ResizeHandle_reverse" reverse: "mx_ResizeHandle_reverse"
}; };
makeResizeable(this.resizeContainer, classNames, CollapseDistributor); const collapseToggleSize = 260 - 50;
makeResizeable(
this.resizeContainer,
classNames,
CollapseDistributor,
collapseToggleSize);
}, },
componentWillMount: function() { componentWillMount: function() {

27
src/resizer/distributors.js
View file

@ -17,29 +17,20 @@ class FixedDistributor {
class CollapseDistributor extends FixedDistributor { class CollapseDistributor extends FixedDistributor {
constructor(container, items, handleIndex, direction, sizer) { constructor(container, items, handleIndex, direction, sizer, toggleSize) {
super(container, items, handleIndex, direction, sizer); super(container, items, handleIndex, direction, sizer);
const style = getComputedStyle(this.item); this.toggleSize = toggleSize;
this.minWidth = parseInt(style.minWidth, 10); //auto becomes NaN
} }
resize(offset) { resize(offset) {
let newWidth = offset - this.sizer.getItemOffset(this.item); let newSize = offset - this.sizer.getItemOffset(this.item);
if (this.minWidth > 0) { if (newSize < this.toggleSize) {
// -50 this is to not collapse immediately this.item.classList.add("collapsed");
// 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");
}
} }
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 resizing: string
*/ */
function makeResizeable(container, classNames, distributorCtor, sizerCtor = Sizer) { function makeResizeable(container, classNames, distributorCtor, distributorCfg = undefined, sizerCtor = Sizer) {
function isResizeHandle(el) { function isResizeHandle(el) {
return el && el.classList.contains(classNames.handle); return el && el.classList.contains(classNames.handle);
@ -44,7 +44,9 @@ function makeResizeable(container, classNames, distributorCtor, sizerCtor = Size
}); });
const prevItem = resizeHandle.previousElementSibling; const prevItem = resizeHandle.previousElementSibling;
const handleIndex = items.indexOf(prevItem) + 1; 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 onMouseMove = (event) => {
const offset = sizer.offsetFromEvent(event); const offset = sizer.offsetFromEvent(event);