Add a GeminiScrollbar to Your Communities

This commit is contained in:
Luke Barnard 2017-11-03 11:19:29 +00:00
parent 8800081cb9
commit 71c59eff2c

View file

@ -15,13 +15,14 @@ limitations under the License.
*/ */
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import GeminiScrollbar from 'react-gemini-scrollbar';
import {MatrixClient} from 'matrix-js-sdk'; import {MatrixClient} from 'matrix-js-sdk';
import sdk from '../../index'; import sdk from '../../index';
import { _t, _tJsx } from '../../languageHandler'; import { _t, _tJsx } from '../../languageHandler';
import withMatrixClient from '../../wrappers/withMatrixClient'; import withMatrixClient from '../../wrappers/withMatrixClient';
import AccessibleButton from '../views/elements/AccessibleButton'; import AccessibleButton from '../views/elements/AccessibleButton';
import dis from '../../dispatcher'; import dis from '../../dispatcher';
import PropTypes from 'prop-types';
import Modal from '../../Modal'; import Modal from '../../Modal';
import FlairStore from '../../stores/FlairStore'; import FlairStore from '../../stores/FlairStore';
@ -115,18 +116,17 @@ export default withMatrixClient(React.createClass({
const TintableSvg = sdk.getComponent("elements.TintableSvg"); const TintableSvg = sdk.getComponent("elements.TintableSvg");
let content; let content;
let contentHeader;
if (this.state.groups) { if (this.state.groups) {
const groupNodes = []; const groupNodes = [];
this.state.groups.forEach((g) => { this.state.groups.forEach((g) => {
groupNodes.push(<GroupTile groupId={g} />); groupNodes.push(<GroupTile groupId={g} />);
}); });
contentHeader = groupNodes.length > 0 ? <h3>{ _t('Your Communities') }</h3> : <div />;
content = groupNodes.length > 0 ? content = groupNodes.length > 0 ?
<div> <GeminiScrollbar className="mx_MyGroups_joinedGroups">
<h3>{ _t('Your Communities') }</h3> { groupNodes }
<div className="mx_MyGroups_joinedGroups"> </GeminiScrollbar> :
{ groupNodes }
</div>
</div> :
<div className="mx_MyGroups_placeholder"> <div className="mx_MyGroups_placeholder">
{ _t( { _t(
"You're not currently a member of any communities.", "You're not currently a member of any communities.",
@ -176,6 +176,7 @@ export default withMatrixClient(React.createClass({
</div> </div>
</div> </div>
<div className="mx_MyGroups_content"> <div className="mx_MyGroups_content">
{ contentHeader }
{ content } { content }
</div> </div>
</div>; </div>;