Implement new resize handle for dogfooding

Smaller handle width, small shadow on the top of the show more button if there's more rooms to be shown. The resize handle also only shows when you're hovering in the area now.

The original design called for the shadow to show up only if the user is cutting a tile or dragging, however that is complicated implementation-wise. For speed and encouraging a dogfooding pattern we're going ahead with this behaviour instead.

res/css/views/rooms/_RoomSublist2.scss

@@ -226,6 +226,16 @@ limitations under the License.
             .mx_RoomSublist2_showLessButtonChevron {
                 mask-image: url('$(res)/img/feather-customised/chevron-up.svg');
             }
+
+            &.mx_RoomSublist2_isCutting::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                height: 4px;
+                box-shadow: 0px -2px 3px rgba(46, 47, 50, 0.08);
+            }
         }
 
         // Class name comes from the ResizableBox component
@@ -233,31 +243,31 @@ limitations under the License.
         // so that selector is below and one level higher.
         .react-resizable-handle {
             cursor: ns-resize;
-            border-radius: 2px;
+            border-radius: 3px;
+
+            // Update the render() function for RoomSublist2 if this changes
+            height: 3px;
 
             // This is positioned directly below the 'show more' button.
             position: absolute;
             bottom: 0;
-            left: 0;
-            right: 0;
 
-            // This is to visually align the bar in the list. Should be 12px from
+            // Together, these make the bar 48px wide
-            // either side of the list. We define this after the positioning to
+            left: calc(50% - 24px);
-            // trick the browser.
+            right: calc(50% - 24px);
-            margin-left: 4px;
+        }
-            margin-right: 4px;
+
+        // 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;
         }
     }
 
     // The aforementioned selector for the hover state.
     &:hover, &.mx_RoomSublist2_hasMenuOpen {
-        .react-resizable-handle {
-            opacity: 0.2;
-
-            // Update the render() function for RoomSublist2 if this changes
-            border: 2px solid $primary-fg-color;
-        }
-
         &:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer {
             // If the header doesn't have an aux button we still need to hide the badge for
             // the menu button.

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 = 4; // As defined by CSS
+const RESIZE_HANDLE_HEIGHT = 3; // As defined by CSS
 
 const MAX_PADDING_HEIGHT = SHOW_N_BUTTON_HEIGHT + RESIZE_HANDLE_HEIGHT;
 
@@ -356,6 +356,12 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
             const nVisible = Math.floor(layout.visibleTiles);
             const visibleTiles = tiles.slice(0, nVisible);
 
+            const maxTilesFactored = layout.tilesWithResizerBoxFactor(tiles.length);
+            const showMoreBtnClasses = classNames({
+                'mx_RoomSublist2_showNButton': true,
+                'mx_RoomSublist2_isCutting': layout.visibleTiles < maxTilesFactored,
+            });
+
             // If we're hiding rooms, show a 'show more' button to the user. This button
             // floats above the resize handle, if we have one present. If the user has all
             // tiles visible, it becomes 'show less'.
@@ -370,7 +376,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                 );
                 if (this.props.isMinimized) showMoreText = null;
                 showNButton = (
-                    <div onClick={this.onShowAllClick} className='mx_RoomSublist2_showNButton'>
+                    <div onClick={this.onShowAllClick} className={showMoreBtnClasses}>
                         <span className='mx_RoomSublist2_showMoreButtonChevron mx_RoomSublist2_showNButtonChevron'>
                             {/* set by CSS masking */}
                         </span>
@@ -386,7 +392,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
                 );
                 if (this.props.isMinimized) showLessText = null;
                 showNButton = (
-                    <div onClick={this.onShowLessClick} className='mx_RoomSublist2_showNButton'>
+                    <div onClick={this.onShowLessClick} className={showMoreBtnClasses}>
                         <span className='mx_RoomSublist2_showLessButtonChevron mx_RoomSublist2_showNButtonChevron'>
                             {/* set by CSS masking */}
                         </span>

src/stores/room-list/ListLayout.ts

@@ -18,6 +18,10 @@ import { TagID } from "./models";
 
 const TILE_HEIGHT_PX = 44;
 
+// the .65 comes from the CSS where the show more button is
+// mathematically 65% of a tile when floating.
+const RESIZER_BOX_FACTOR = 0.65;
+
 interface ISerializedListLayout {
     numTiles: number;
     showPreviews: boolean;
@@ -77,15 +81,13 @@ export class ListLayout {
     }
 
     public get minVisibleTiles(): number {
-        // the .65 comes from the CSS where the show more button is
+        return 1 + RESIZER_BOX_FACTOR;
-        // mathematically 65% of a tile when floating.
-        return 1.65;
     }
 
     public get defaultVisibleTiles(): number {
         // TODO: Remove dogfood flag
         const val = Number(localStorage.getItem("mx_dogfood_rl_defTiles") || 4);
-        return val + 0.65; // see minVisibleTiles for where the .65 comes from
+        return val + RESIZER_BOX_FACTOR;
     }
 
     public calculateTilesToPixelsMin(maxTiles: number, n: number, possiblePadding: number): number {
@@ -99,6 +101,10 @@ export class ListLayout {
         return this.tilesToPixels(Math.min(maxTiles, n)) + padding;
     }
 
+    public tilesWithResizerBoxFactor(n: number): number {
+        return n + RESIZER_BOX_FACTOR;
+    }
+
     public tilesWithPadding(n: number, paddingPx: number): number {
         return this.pixelsToTiles(this.tilesToPixelsWithPadding(n, paddingPx));
     }