mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-01 10:27:06 +03:00
Make the Groups page look more like the design
This commit is contained in:
parent
3892362386
commit
e5c1aeb14c
3 changed files with 39 additions and 9 deletions
|
@ -251,7 +251,6 @@ export default React.createClass({
|
||||||
|
|
||||||
case PageTypes.MyGroups:
|
case PageTypes.MyGroups:
|
||||||
page_element = <MyGroups />;
|
page_element = <MyGroups />;
|
||||||
if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.rightOpacity}/>;
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case PageTypes.CreateRoom:
|
case PageTypes.CreateRoom:
|
||||||
|
|
|
@ -16,7 +16,7 @@ limitations under the License.
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import sdk from '../../index';
|
import sdk from '../../index';
|
||||||
import { _t } 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';
|
||||||
|
@ -44,7 +44,7 @@ const GroupTile = React.createClass({
|
||||||
});
|
});
|
||||||
|
|
||||||
export default WithMatrixClient(React.createClass({
|
export default WithMatrixClient(React.createClass({
|
||||||
displayName: 'GroupList',
|
displayName: 'MyGroups',
|
||||||
|
|
||||||
propTypes: {
|
propTypes: {
|
||||||
matrixClient: React.PropTypes.object.isRequired,
|
matrixClient: React.PropTypes.object.isRequired,
|
||||||
|
@ -80,6 +80,7 @@ export default WithMatrixClient(React.createClass({
|
||||||
render: function() {
|
render: function() {
|
||||||
const Loader = sdk.getComponent("elements.Spinner");
|
const Loader = sdk.getComponent("elements.Spinner");
|
||||||
const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
|
const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
|
||||||
|
const TintableSvg = sdk.getComponent("elements.TintableSvg");
|
||||||
|
|
||||||
let content;
|
let content;
|
||||||
if (this.state.groups) {
|
if (this.state.groups) {
|
||||||
|
@ -105,12 +106,39 @@ export default WithMatrixClient(React.createClass({
|
||||||
|
|
||||||
return <div className="mx_MyGroups">
|
return <div className="mx_MyGroups">
|
||||||
<SimpleRoomHeader title={ _t("Groups") } />
|
<SimpleRoomHeader title={ _t("Groups") } />
|
||||||
<div className='mx_MyGroups_buttonRow'>
|
<div className='mx_MyGroups_joinCreateBox'>
|
||||||
<AccessibleButton className='mx_UserSettings_button' onClick={this._onCreateGroupClick}>
|
<div className="mx_MyGroups_createBox">
|
||||||
{_t('Create a new group')}
|
<div className="mx_MyGroups_joinCreateHeader">
|
||||||
</AccessibleButton>
|
{_t('Create a new group')}
|
||||||
|
</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>
|
||||||
{content}
|
|
||||||
</div>;
|
</div>;
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
|
@ -937,5 +937,8 @@
|
||||||
"Group IDs must be of the form +localpart:%(domain)s": "Group IDs must be of the form +localpart:%(domain)s",
|
"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",
|
"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",
|
"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>."
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue