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

Iterate on the new room list resize handle

Browse source 
Only show shadow when resizing, increase the hit area, and make the handle show up when the list itself is hovered.
This commit is contained in:
Travis Ralston 2020-06-25 16:03:56 -06:00
parent bebd0a35af
commit 555078a993
2 changed files with 24 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -245,24 +245,23 @@ limitations under the License.
cursor: ns-resize;
border-radius: 3px;
// Update the render() function for RoomSublist2 if this changes
height: 3px;
// Update RESIZE_HANDLE_HEIGHT if this changes
height: 4px;
// This is positioned directly below the 'show more' button.
position: absolute;
bottom: 0;
// Together, these make the bar 48px wide
left: calc(50% - 24px);
right: calc(50% - 24px);
// Together, these make the bar 64px wide
left: calc(50% - 32px);
right: calc(50% - 32px);
}
// TODO: Use less sketchy selector by replacing the resize component entirely
// This causes flickering.
.mx_RoomSublist2_showNButton:hover + .react-resizable-handle,
.react-resizable-handle:hover {
opacity: 0.8;
background-color: $primary-fg-color;
&:hover, &.mx_RoomSublist2_hasMenuOpen {
.react-resizable-handle {
opacity: 0.8;
background-color: $primary-fg-color;
}
}
}