Merge pull request #6664 from matrix-org/palid/fix/difficult-to-grab-scrollbar

Fix difficult to grab scrollbar

res/css/structures/_LeftPanel.scss

@@ -32,6 +32,10 @@ $roomListCollapsedWidth: 68px;
         display: flex;
         overflow: hidden;
         position: relative;
+
+        &[data-collapsed] {
+            max-width: $roomListCollapsedWidth;
+        }
     }
 }
 
@@ -40,12 +44,12 @@ $roomListCollapsedWidth: 68px;
 .mx_LeftPanel {
     background-color: $roomlist-bg-color;
     // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
-    min-width: 206px;
 
     // Create a row-based flexbox for the GroupFilterPanel and the room list
     display: flex;
     contain: content;
     position: relative;
+    flex-grow: 1;
 
     // Note: The 'room list' in this context is actually everything that isn't the tag
     // panel, such as the menu options, breadcrumbs, filtering, etc
@@ -178,6 +182,8 @@ $roomListCollapsedWidth: 68px;
         }
 
         .mx_LeftPanel_roomListWrapper {
+            // Make the y-scrollbar more responsive
+            padding-right: 2px;
             overflow: hidden;
             margin-top: 10px; // so we're not up against the search/filter
             flex: 1 0 0; // needed in Safari to properly set flex-basis
@@ -199,6 +205,7 @@ $roomListCollapsedWidth: 68px;
 
     // These styles override the defaults for the minimized (66px) layout
     &.mx_LeftPanel_minimized {
+        flex-grow: 0;
         min-width: unset;
         width: unset !important;
 

src/components/structures/LoggedInView.tsx

@@ -151,7 +151,8 @@ class LoggedInView extends React.Component<IProps, IState> {
     private dispatcherRef: string;
     protected readonly _matrixClient: MatrixClient;
     protected readonly _roomView: React.RefObject<any>;
-    protected readonly _resizeContainer: React.RefObject<ResizeHandle>;
+    protected readonly _resizeContainer: React.RefObject<HTMLDivElement>;
+    protected readonly resizeHandler: React.RefObject<HTMLDivElement>;
     protected compactLayoutWatcherRef: string;
     protected backgroundImageWatcherRef: string;
     protected resizer: Resizer;
@@ -176,6 +177,7 @@ class LoggedInView extends React.Component<IProps, IState> {
 
         this._roomView = React.createRef();
         this._resizeContainer = React.createRef();
+        this.resizeHandler = React.createRef();
     }
 
     componentDidMount() {
@@ -280,6 +282,7 @@ class LoggedInView extends React.Component<IProps, IState> {
             isItemCollapsed: domNode => {
                 return domNode.classList.contains("mx_LeftPanel_minimized");
             },
+            handler: this.resizeHandler.current,
         };
         const resizer = new Resizer(this._resizeContainer.current, CollapseDistributor, collapseConfig);
         resizer.setClassNames({
@@ -681,16 +684,17 @@ class LoggedInView extends React.Component<IProps, IState> {
                                 backgroundImage={this.state.backgroundImage}
                             />
                             <div
-                                ref={this._resizeContainer}
                                 className="mx_LeftPanel_wrapper--user"
+                                ref={this._resizeContainer}
+                                data-collapsed={this.props.collapseLhs ? true : undefined}
                             >
                                 <LeftPanel
                                     isMinimized={this.props.collapseLhs || false}
                                     resizeNotifier={this.props.resizeNotifier}
                                 />
-                                <ResizeHandle id="lp-resizer" />
                             </div>
                         </div>
+                        <ResizeHandle passRef={this.resizeHandler} id="lp-resizer" />
                         <div className="mx_RoomView_wrapper">
                             { pageElement }
                         </div>

src/components/views/elements/ResizeHandle.tsx

@@ -1,27 +1,27 @@
 
 import React from 'react'; // eslint-disable-line no-unused-vars
-import PropTypes from 'prop-types';
 
 //see src/resizer for the actual resizing code, this is just the DOM for the resize handle
-const ResizeHandle = (props) => {
+interface IResizeHandleProps {
+    vertical?: boolean;
+    reverse?: boolean;
+    id?: string;
+    passRef?: React.RefObject<HTMLDivElement>;
+}
+
+const ResizeHandle: React.FC<IResizeHandleProps> = ({ vertical, reverse, id, passRef }) => {
     const classNames = ['mx_ResizeHandle'];
-    if (props.vertical) {
+    if (vertical) {
         classNames.push('mx_ResizeHandle_vertical');
     } else {
         classNames.push('mx_ResizeHandle_horizontal');
     }
-    if (props.reverse) {
+    if (reverse) {
         classNames.push('mx_ResizeHandle_reverse');
     }
     return (
-        <div className={classNames.join(' ')} data-id={props.id}><div /></div>
+        <div ref={passRef} className={classNames.join(' ')} data-id={id}><div /></div>
     );
 };
 
-ResizeHandle.propTypes = {
-    vertical: PropTypes.bool,
-    reverse: PropTypes.bool,
-    id: PropTypes.string,
-};
-
 export default ResizeHandle;

src/resizer/distributors/collapse.ts

@@ -40,8 +40,13 @@ class CollapseItem extends ResizeItem<ICollapseConfig> {
 }
 
 export default class CollapseDistributor extends FixedDistributor<ICollapseConfig, CollapseItem> {
-    static createItem(resizeHandle: HTMLDivElement, resizer: Resizer<ICollapseConfig>, sizer: Sizer) {
+    static createItem(
-        return new CollapseItem(resizeHandle, resizer, sizer);
+        resizeHandle: HTMLDivElement,
+        resizer: Resizer<ICollapseConfig>,
+        sizer: Sizer,
+        container?: HTMLElement,
+    ): CollapseItem {
+        return new CollapseItem(resizeHandle, resizer, sizer, container);
     }
 
     private readonly toggleSize: number;
@@ -55,12 +60,9 @@ export default class CollapseDistributor extends FixedDistributor<ICollapseConfi
 
     public resize(newSize: number) {
         const isCollapsedSize = newSize < this.toggleSize;
-        if (isCollapsedSize && !this.isCollapsed) {
+        if (isCollapsedSize !== this.isCollapsed) {
-            this.isCollapsed = true;
+            this.isCollapsed = isCollapsedSize;
-            this.item.notifyCollapsed(true);
+            this.item.notifyCollapsed(isCollapsedSize);
-        } else if (!isCollapsedSize && this.isCollapsed) {
-            this.item.notifyCollapsed(false);
-            this.isCollapsed = false;
         }
         if (!isCollapsedSize) {
             super.resize(newSize);

src/resizer/item.ts

@@ -26,15 +26,20 @@ export default class ResizeItem<C extends IConfig = IConfig> {
         handle: HTMLElement,
         public readonly resizer: Resizer<C>,
         public readonly sizer: Sizer,
+        public readonly container?: HTMLElement,
     ) {
         this.reverse = resizer.isReverseResizeHandle(handle);
-        this.domNode = <HTMLElement>(this.reverse ? handle.nextElementSibling : handle.previousElementSibling);
+        if (container) {
+            this.domNode = <HTMLElement>(container);
+        } else {
+            this.domNode = <HTMLElement>(this.reverse ? handle.nextElementSibling : handle.previousElementSibling);
+        }
         this.id = handle.getAttribute("data-id");
     }
 
-    private copyWith(handle: HTMLElement, resizer: Resizer, sizer: Sizer) {
+    private copyWith(handle: HTMLElement, resizer: Resizer, sizer: Sizer, container?: HTMLElement) {
         const Ctor = this.constructor as typeof ResizeItem;
-        return new Ctor(handle, resizer, sizer);
+        return new Ctor(handle, resizer, sizer, container);
     }
 
     private advance(forwards: boolean) {

src/resizer/resizer.ts

@@ -35,6 +35,7 @@ export interface IConfig {
     onResizeStart?(): void;
     onResizeStop?(): void;
     onResized?(size: number, id: string, element: HTMLElement): void;
+    handler?: HTMLDivElement;
 }
 
 export default class Resizer<C extends IConfig = IConfig> {
@@ -46,8 +47,17 @@ export default class Resizer<C extends IConfig = IConfig> {
         public container: HTMLElement,
         private readonly distributorCtor: {
             new(item: ResizeItem): FixedDistributor<C, any>;
-            createItem(resizeHandle: HTMLDivElement, resizer: Resizer, sizer: Sizer): ResizeItem;
+            createItem(
-            createSizer(containerElement: HTMLElement, vertical: boolean, reverse: boolean): Sizer;
+                resizeHandle: HTMLDivElement,
+                resizer: Resizer,
+                sizer: Sizer,
+                container: HTMLElement
+            ): ResizeItem;
+            createSizer(
+                containerElement: HTMLElement,
+                vertical: boolean,
+                reverse: boolean
+            ): Sizer;
         },
         public readonly config?: C,
     ) {
@@ -68,12 +78,14 @@ export default class Resizer<C extends IConfig = IConfig> {
     }
 
     public attach() {
-        this.container.addEventListener("mousedown", this.onMouseDown, false);
+        const attachment = this?.config?.handler.parentElement ?? this.container;
+        attachment.addEventListener("mousedown", this.onMouseDown, false);
         window.addEventListener("resize", this.onResize);
     }
 
     public detach() {
-        this.container.removeEventListener("mousedown", this.onMouseDown, false);
+        const attachment = this?.config?.handler.parentElement ?? this.container;
+        attachment.removeEventListener("mousedown", this.onMouseDown, false);
         window.removeEventListener("resize", this.onResize);
     }
 
@@ -113,7 +125,8 @@ export default class Resizer<C extends IConfig = IConfig> {
         // use closest in case the resize handle contains
         // child dom nodes that can be the target
         const resizeHandle = event.target && (<HTMLDivElement>event.target).closest(`.${this.classNames.handle}`);
-        if (!resizeHandle || resizeHandle.parentElement !== this.container) {
+        const hasHandler = this?.config?.handler;
+        if (!resizeHandle || (!hasHandler && resizeHandle.parentElement !== this.container)) {
             return;
         }
         // prevent starting a drag operation
@@ -174,13 +187,17 @@ export default class Resizer<C extends IConfig = IConfig> {
         const vertical = resizeHandle.classList.contains(this.classNames.vertical);
         const reverse = this.isReverseResizeHandle(resizeHandle);
         const Distributor = this.distributorCtor;
+        const useItemContainer = this.config && this.config.handler ? this.container : undefined;
         const sizer = Distributor.createSizer(this.container, vertical, reverse);
-        const item = Distributor.createItem(resizeHandle, this, sizer);
+        const item = Distributor.createItem(resizeHandle, this, sizer, useItemContainer);
         const distributor = new Distributor(item);
         return { sizer, distributor };
     }
 
     private getResizeHandles() {
+        if (this?.config?.handler) {
+            return [this.config.handler];
+        }
         if (!this.container.children) return [];
         return Array.from(this.container.querySelectorAll(`.${this.classNames.handle}`)) as HTMLElement[];
     }