Redesign: resizeable/collapsible sections #2210
Conversation
includes using flexbox in the room tile to avoid hardcoded width
as the resize handle is a sibling of the mxLeftPanel_container, that class is the one that has to collapse if we don't want to complicate the logic. So change style rules to check .mxLeftPanel_container.collapsed, and make left panel not break out of the container when it gets narrow by hiding the overflow
bwindels
force-pushed
the
bwindels/resizehandles
branch
from
42efbae
to
110e452
Compare
|
As I've already made these changes available on |
|
The e2e tests are broken because the "create room button" is missing for now in the redesign ftr. |
| @@ -155,7 +155,7 @@ class Tinter { | |||
|
|
|||
| tint(primaryColor, secondaryColor, tertiaryColor) { | |||
| return; | |||
|
|
|||
| // eslint-disable-next-line no-unreachable | |||
There was a problem hiding this comment.
Doesn't eslint have a valid point here? ;)
There was a problem hiding this comment.
it does :) The return got added as part of redesign experiments. I'd rather wait a bit to throw the whole Tinter out if that is OK.
| @@ -507,14 +558,16 @@ const LoggedInView = React.createClass({ | |||
| <div className='mx_MatrixChat_wrapper' aria-hidden={this.props.hideToSRUsers} onMouseDown={this._onMouseDown} onMouseUp={this._onMouseUp}> | |||
| { topBar } | |||
| <DragDropContext onDragEnd={this._onDragEnd}> | |||
| <div className={bodyClasses}> | |||
| <div ref={(div) => this.resizeContainer = div} className={bodyClasses}> | |||
There was a problem hiding this comment.
LoggedInView probably is a class where we want to avoid passing anonymous functions here if possible as we don't want it to re-render unnecessarily.
There was a problem hiding this comment.
so basically do ref={this.resizeContainer}? Curious how this causes a re-render.
There was a problem hiding this comment.
i assume dave is thinking of the 'closures' section of https://engineering.musefind.com/our-best-practices-for-writing-react-components-dec3eb5c3fc8
There was a problem hiding this comment.
right, because each new instance of the function !== the previous, causing the subcomponent to rerender.
element-hq/element-web#7162