Merge pull request #4836 from matrix-org/travis/room-list/resize-handle

Implement new resize handle for dogfooding

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));
     }