Merge pull request #4293 from matrix-org/t3chguy/fix_scrollbars

Fix ugly scrollbars in TabbedView (settings), emojipicker and widgets

src/components/structures/TabbedView.tsx

@@ -20,6 +20,7 @@ import * as React from "react";
 import {_t} from '../../languageHandler';
 import * as PropTypes from "prop-types";
 import * as sdk from "../../index";
+import AutoHideScrollbar from './AutoHideScrollbar';
 import { ReactNode } from "react";
 
 /**
@@ -113,9 +114,9 @@ export default class TabbedView extends React.Component<IProps, IState> {
     private _renderTabPanel(tab: Tab): React.ReactNode {
         return (
             <div className="mx_TabbedView_tabPanel" key={"mx_tabpanel_" + tab.label}>
-                <div className='mx_TabbedView_tabPanelContent'>
+                <AutoHideScrollbar className='mx_TabbedView_tabPanelContent'>
                     {tab.body}
-                </div>
+                </AutoHideScrollbar>
             </div>
         );
     }

src/components/views/emojipicker/EmojiPicker.js

@@ -22,6 +22,7 @@ import { _t } from '../../../languageHandler';
 
 import * as recent from '../../../emojipicker/recent';
 import {DATA_BY_CATEGORY, getEmojiFromUnicode} from "../../../emoji";
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 
 export const CATEGORY_HEADER_HEIGHT = 22;
 export const EMOJI_HEIGHT = 37;
@@ -214,7 +215,7 @@ class EmojiPicker extends React.Component {
             <div className="mx_EmojiPicker">
                 <Header categories={this.categories} defaultCategory="recent" onAnchorClick={this.scrollToCategory} />
                 <Search query={this.state.filter} onChange={this.onChangeFilter} />
-                <div className="mx_EmojiPicker_body" ref={this.bodyRef} onScroll={this.onScroll}>
+                <AutoHideScrollbar className="mx_EmojiPicker_body" wrappedRef={e => this.bodyRef.current = e} onScroll={this.onScroll}>
                     {this.categories.map(category => {
                         const emojis = this.memoizedDataByCategory[category.id];
                         const categoryElement = (<Category key={category.id} id={category.id} name={category.name}
@@ -226,7 +227,7 @@ class EmojiPicker extends React.Component {
                         heightBefore += height;
                         return categoryElement;
                     })}
-                </div>
+                </AutoHideScrollbar>
                 {this.state.previewEmoji || !this.props.showQuickReactions
                     ? <Preview emoji={this.state.previewEmoji} />
                     : <QuickReactions onClick={this.onClickEmoji} selectedEmojis={this.props.selectedEmojis} /> }

src/components/views/rooms/AuxPanel.js

@@ -27,6 +27,7 @@ import { _t } from '../../../languageHandler';
 import classNames from 'classnames';
 import RateLimitedFunc from '../../../ratelimitedfunc';
 import SettingsStore from "../../../settings/SettingsStore";
+import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 
 
 export default createReactClass({
@@ -264,14 +265,14 @@ export default createReactClass({
         }
 
         return (
-            <div className={classes} style={style} >
+            <AutoHideScrollbar className={classes} style={style} >
                 { stateViews }
                 { appsDrawer }
                 { fileDropTarget }
                 { callView }
                 { conferenceCallNotification }
                 { this.props.children }
-            </div>
+            </AutoHideScrollbar>
         );
     },
 });