imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Swap out the resizer lib for something more stable

Browse source 
react-resizer appears to be okay at tracking state, but it often desyncs from reality. re-resizer is more maintained and more broadly used (160k downloads vs 110k), and appears to generally do a better job of tracking the cursor.

The new library has some oddities though, such as deltas, touch support (hence the polyfill), and calling handles "Enable".

For https://github.com/vector-im/riot-web/issues/14022
This commit is contained in:
Travis Ralston 2020-07-07 19:36:26 -06:00
parent 7f757cd0f3
commit 15b6a273c9
6 changed files with 114 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

16
res/css/views/rooms/_RoomSublist2.scss
View file

@ -254,24 +254,26 @@ limitations under the License.
// Class name comes from the ResizableBox component
// The hover state needs to use the whole sublist, not just the resizable box,
// so that selector is below and one level higher.
.react-resizable-handle {
.mx_RoomSublist2_resizerHandle {
cursor: ns-resize;
border-radius: 3px;
// Update RESIZE_HANDLE_HEIGHT if this changes
height: 4px;
// Override styles from library
width: unset !important;
height: 4px !important; // Update RESIZE_HANDLE_HEIGHT if this changes
// This is positioned directly below the 'show more' button.
position: absolute;
bottom: 0;
bottom: 0 !important; // override from library
// Together, these make the bar 64px wide
left: calc(50% - 32px);
right: calc(50% - 32px);
// These are also overridden from the library
left: calc(50% - 32px) !important;
right: calc(50% - 32px) !important;
}
&:hover, &.mx_RoomSublist2_hasMenuOpen {
.react-resizable-handle {
.mx_RoomSublist2_resizerHandle {
opacity: 0.8;
background-color: $primary-fg-color;
}