imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
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 {_t} from '../../languageHandler';
import * as PropTypes from "prop-types"; import * as PropTypes from "prop-types";
import * as sdk from "../../index"; import * as sdk from "../../index";
import AutoHideScrollbar from './AutoHideScrollbar';
import { ReactNode } from "react"; import { ReactNode } from "react";
/** /**
@ -113,9 +114,9 @@ export default class TabbedView extends React.Component<IProps, IState> {
private _renderTabPanel(tab: Tab): React.ReactNode { private _renderTabPanel(tab: Tab): React.ReactNode {
return ( return (
<div className="mx_TabbedView_tabPanel" key={"mx_tabpanel_" + tab.label}> <div className="mx_TabbedView_tabPanel" key={"mx_tabpanel_" + tab.label}>
<div className='mx_TabbedView_tabPanelContent'> <AutoHideScrollbar className='mx_TabbedView_tabPanelContent'>
{tab.body} {tab.body}
</div> </AutoHideScrollbar>
</div> </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 * as recent from '../../../emojipicker/recent';
import {DATA_BY_CATEGORY, getEmojiFromUnicode} from "../../../emoji"; import {DATA_BY_CATEGORY, getEmojiFromUnicode} from "../../../emoji";
import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
export const CATEGORY_HEADER_HEIGHT = 22; export const CATEGORY_HEADER_HEIGHT = 22;
export const EMOJI_HEIGHT = 37; export const EMOJI_HEIGHT = 37;
@ -214,7 +215,7 @@ class EmojiPicker extends React.Component {
<div className="mx_EmojiPicker"> <div className="mx_EmojiPicker">
<Header categories={this.categories} defaultCategory="recent" onAnchorClick={this.scrollToCategory} /> <Header categories={this.categories} defaultCategory="recent" onAnchorClick={this.scrollToCategory} />
<Search query={this.state.filter} onChange={this.onChangeFilter} /> <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 => { {this.categories.map(category => {
const emojis = this.memoizedDataByCategory[category.id]; const emojis = this.memoizedDataByCategory[category.id];
const categoryElement = (<Category key={category.id} id={category.id} name={category.name} const categoryElement = (<Category key={category.id} id={category.id} name={category.name}
@ -226,7 +227,7 @@ class EmojiPicker extends React.Component {
heightBefore += height; heightBefore += height;
return categoryElement; return categoryElement;
})} })}
</div> </AutoHideScrollbar>
{this.state.previewEmoji || !this.props.showQuickReactions {this.state.previewEmoji || !this.props.showQuickReactions
? <Preview emoji={this.state.previewEmoji} /> ? <Preview emoji={this.state.previewEmoji} />
: <QuickReactions onClick={this.onClickEmoji} selectedEmojis={this.props.selectedEmojis} /> } : <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 classNames from 'classnames';
import RateLimitedFunc from '../../../ratelimitedfunc'; import RateLimitedFunc from '../../../ratelimitedfunc';
import SettingsStore from "../../../settings/SettingsStore"; import SettingsStore from "../../../settings/SettingsStore";
import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
export default createReactClass({ export default createReactClass({
@ -264,14 +265,14 @@ export default createReactClass({
} }
return ( return (
<div className={classes} style={style} > <AutoHideScrollbar className={classes} style={style} >
{ stateViews } { stateViews }
{ appsDrawer } { appsDrawer }
{ fileDropTarget } { fileDropTarget }
{ callView } { callView }
{ conferenceCallNotification } { conferenceCallNotification }
{ this.props.children } { this.props.children }
</div> </AutoHideScrollbar>
); );
}, },
}); });