From 555078a9935ade0ed3b0181a012a0a6a59cf2ef5 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Thu, 25 Jun 2020 16:03:56 -0600
Subject: [PATCH] Iterate on the new room list resize handle

Only show shadow when resizing, increase the hit area, and make the handle show up when the list itself is hovered.
---
 res/css/views/rooms/_RoomSublist2.scss      | 21 ++++++++++-----------
 src/components/views/rooms/RoomSublist2.tsx | 16 ++++++++++++++--
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss
index 5f2e9e093b..cbe471e4da 100644
--- a/res/css/views/rooms/_RoomSublist2.scss
+++ b/res/css/views/rooms/_RoomSublist2.scss
@@ -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;
+            }
         }
     }
 
diff --git a/src/components/views/rooms/RoomSublist2.tsx b/src/components/views/rooms/RoomSublist2.tsx
index 015ad5b646..7273e80c61 100644
--- a/src/components/views/rooms/RoomSublist2.tsx
+++ b/src/components/views/rooms/RoomSublist2.tsx
@@ -43,7 +43,7 @@ import { TagID } from "../../../stores/room-list/models";
  *******************************************************************/
 
 const SHOW_N_BUTTON_HEIGHT = 32; // As defined by CSS
-const RESIZE_HANDLE_HEIGHT = 3; // As defined by CSS
+const RESIZE_HANDLE_HEIGHT = 4; // As defined by CSS
 
 const MAX_PADDING_HEIGHT = SHOW_N_BUTTON_HEIGHT + RESIZE_HANDLE_HEIGHT;
 
@@ -70,6 +70,7 @@ interface IProps {
 interface IState {
     notificationState: ListNotificationState;
     menuDisplayed: boolean;
+    isResizing: boolean;
 }
 
 export default class RoomSublist2 extends React.Component<IProps, IState> {
@@ -82,6 +83,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
         this.state = {
             notificationState: new ListNotificationState(this.props.isInvite, this.props.tagId),
             menuDisplayed: false,
+            isResizing: false,
         };
         this.state.notificationState.setRooms(this.props.rooms);
     }
@@ -111,6 +113,14 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
         this.forceUpdate(); // because the layout doesn't trigger a re-render
     };
 
+    private onResizeStart = () => {
+        this.setState({isResizing: true});
+    };
+
+    private onResizeStop = () => {
+        this.setState({isResizing: false});
+    };
+
     private onShowAllClick = () => {
         this.props.layout.visibleTiles = this.props.layout.tilesWithPadding(this.numTiles, MAX_PADDING_HEIGHT);
         this.forceUpdate(); // because the layout doesn't trigger a re-render
@@ -359,7 +369,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
             const maxTilesFactored = layout.tilesWithResizerBoxFactor(tiles.length);
             const showMoreBtnClasses = classNames({
                 'mx_RoomSublist2_showNButton': true,
-                'mx_RoomSublist2_isCutting': layout.visibleTiles < maxTilesFactored,
+                'mx_RoomSublist2_isCutting': this.state.isResizing && layout.visibleTiles < maxTilesFactored,
             });
 
             // If we're hiding rooms, show a 'show more' button to the user. This button
@@ -438,6 +448,8 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                     resizeHandles={handles}
                     onResize={this.onResize}
                     className="mx_RoomSublist2_resizeBox"
+                    onResizeStart={this.onResizeStart}
+                    onResizeStop={this.onResizeStop}
                 >
                     {visibleTiles}
                     {showNButton}