mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-01 10:27:06 +03:00
Code Issues Projects Releases Packages Wiki Activity

Make the Groups page look more like the design

Browse source
This commit is contained in:
David Baker 2017-06-30 13:59:49 +01:00
parent 3892362386
commit e5c1aeb14c
3 changed files with 39 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/structures/LoggedInView.js
View file

@ -251,7 +251,6 @@ export default React.createClass({
case PageTypes.MyGroups:
page_element = <MyGroups />;
if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.rightOpacity}/>;
break;
case PageTypes.CreateRoom:

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

@ -16,7 +16,7 @@ limitations under the License.
import React from 'react';
import sdk from '../../index';
import { _t } from '../../languageHandler';
import { _t, _tJsx } from '../../languageHandler';
import WithMatrixClient from '../../wrappers/WithMatrixClient';
import AccessibleButton from '../views/elements/AccessibleButton';
import dis from '../../dispatcher';
@ -44,7 +44,7 @@ const GroupTile = React.createClass({
});
export default WithMatrixClient(React.createClass({
displayName: 'GroupList',
displayName: 'MyGroups',
propTypes: {
matrixClient: React.PropTypes.object.isRequired,
@ -80,6 +80,7 @@ export default WithMatrixClient(React.createClass({
render: function() {
const Loader = sdk.getComponent("elements.Spinner");
const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
const TintableSvg = sdk.getComponent("elements.TintableSvg");
let content;
if (this.state.groups) {
@ -105,12 +106,39 @@ export default WithMatrixClient(React.createClass({
return <div className="mx_MyGroups">
<SimpleRoomHeader title={ _t("Groups") } />
<div className='mx_MyGroups_buttonRow'>
<AccessibleButton className='mx_UserSettings_button' onClick={this._onCreateGroupClick}>
<div className='mx_MyGroups_joinCreateBox'>
<div className="mx_MyGroups_createBox">
<div className="mx_MyGroups_joinCreateHeader">
{_t('Create a new group')}
</AccessibleButton>
</div>
<AccessibleButton className='mx_MyGroups_joinCreateButton' onClick={this._onCreateGroupClick}>
<TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
</AccessibleButton>
{_t(
'Create a group to represent your community! '+
'Define a set of rooms and your own custom homepage '+
'to mark out your space in the Matrix universe.'
)}
</div>
<div className="mx_MyGroups_joinBox">
<div className="mx_MyGroups_joinCreateHeader">
{_t('Join an existing group')}
</div>
<AccessibleButton className='mx_MyGroups_joinCreateButton' onClick={this._onJoinGroupClick}>
<TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
</AccessibleButton>
{_tJsx(
'To join an exisitng group you\'ll have to '+
'know its group identifier; this will look '+
'something like <i>+example:matrix.org</i>.',
/<i>(.*)<\/i>/,
(sub) => <i>{sub}</i>,
)}
</div>
</div>
<div className="mx_MyGroups_content">
{content}
</div>
</div>;
},
}));

5
src/i18n/strings/en_EN.json
View file

@ -937,5 +937,8 @@
"Group IDs must be of the form +localpart:%(domain)s": "Group IDs must be of the form +localpart:%(domain)s",
"It is currently only possible to create groups on your own home server: use a group ID ending with %(domain)s": "It is currently only possible to create groups on your own home server: use a group ID ending with %(domain)s",
"Room creation failed": "Room creation failed",
"You are a member of these groups": "You are a member of these groups"
"You are a member of these groups": "You are a member of these groups",
"Create a group to represent your community! Define a set of rooms and your own custom homepage to mark out your space in the Matrix universe.": "Create a group to represent your community! Define a set of rooms and your own custom homepage to mark out your space in the Matrix universe.",
"Join an existing group": "Join an existing group",
"To join an exisitng group you'll have to know its group identifier; this will look something like <i>+example:matrix.org</i>.": "To join an exisitng group you'll have to know its group identifier; this will look something like <i>+example:matrix.org</i>."
}