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

Improve MyGroups UI

Browse source 
as per design layed out by @tur2live!
This commit is contained in:
Luke Barnard 2017-10-19 16:18:01 +01:00
parent 21b684381d
commit b0f8619754
3 changed files with 40 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/components/structures/MyGroups.js
View file

@ -15,6 +15,7 @@ limitations under the License.
*/
import React from 'react';
import {MatrixClient} from 'matrix-js-sdk';
import sdk from '../../index';
import { _t, _tJsx } from '../../languageHandler';
import withMatrixClient from '../../wrappers/withMatrixClient';
@ -23,6 +24,8 @@ import dis from '../../dispatcher';
import PropTypes from 'prop-types';
import Modal from '../../Modal';
import FlairStore from '../../stores/FlairStore';
const GroupTile = React.createClass({
displayName: 'GroupTile',
@ -30,6 +33,22 @@ const GroupTile = React.createClass({
groupId: PropTypes.string.isRequired,
},
contextTypes: {
matrixClient: React.PropTypes.instanceOf(MatrixClient).isRequired,
},
getInitialState() {
return {
profile: null,
};
},
componentWillMount: function() {
FlairStore.getGroupProfileCached(this.context.matrixClient, this.props.groupId).then((profile) => {
this.setState({profile});
});
},
onClick: function(e) {
e.preventDefault();
dis.dispatch({
@ -39,7 +58,21 @@ const GroupTile = React.createClass({
},
render: function() {
return <a onClick={this.onClick} href="#">{ this.props.groupId }</a>;
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
const profile = this.state.profile || {};
const name = profile.name || this.props.groupId;
const desc = profile.shortDescription;
const httpUrl = profile.avatarUrl ? this.context.matrixClient.mxcUrlToHttp(profile.avatarUrl, 50, 50) : null;
return <AccessibleButton className="mx_GroupTile" onClick={this.onClick}>
<div className="mx_GroupTile_avatar">
<BaseAvatar name={name} url={httpUrl} width={50} height={50} />
</div>
<div className="mx_GroupTile_profile">
<h3 className="mx_GroupTile_name">{ name }</h3>
<div className="mx_GroupTile_desc">{ desc }</div>
<div className="mx_GroupTile_groupId">{ this.props.groupId }</div>
</div>
</AccessibleButton>;
},
});
@ -83,14 +116,9 @@ export default withMatrixClient(React.createClass({
if (this.state.groups) {
const groupNodes = [];
this.state.groups.forEach((g) => {
groupNodes.push(
<div key={g}>
<GroupTile groupId={g} />
</div>,
);
groupNodes.push(<GroupTile groupId={g} />);
});
content = <div>
<div>{ _t('You are a member of these communities:') }</div>
content = <div className="mx_MyGroups_joinedGroups">
{ groupNodes }
</div>;
} else if (this.state.error) {
@ -134,6 +162,7 @@ export default withMatrixClient(React.createClass({
</div>
</div>
<div className="mx_MyGroups_content">
<h3>{ _t('Your Communities') }</h3>
{ content }
</div>
</div>;