PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
Fix ugly scrollbars in TabbedView (settings), emojipicker and widgets
This commit is contained in:
Michael Telatynski 2020-03-30 10:29:56 +01:00 committed by GitHub
commit 5375f888ea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/structures/TabbedView.tsx
View file

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

5
src/components/views/emojipicker/EmojiPicker.js
View file

@ -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} /> }

5
src/components/views/rooms/AuxPanel.js
View file

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