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

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

19
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
// 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;
} }
else { else {
this.item.classList.remove("collapsed"); this.item.classList.remove("collapsed");
} }
} super.resize(newSize);
super.resize(newWidth);
} }
} }

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);