Merge pull request #1580 from matrix-org/luke/groups-new-group-settings
Improve group creation UX
This commit is contained in:
commit
8fbe50a1cf
5 changed files with 40 additions and 4 deletions
|
@ -22,7 +22,7 @@ import MatrixClientPeg from '../../MatrixClientPeg';
|
|||
import sdk from '../../index';
|
||||
import dis from '../../dispatcher';
|
||||
import { sanitizedHtmlNode } from '../../HtmlUtils';
|
||||
import { _t } from '../../languageHandler';
|
||||
import { _t, _td, _tJsx } from '../../languageHandler';
|
||||
import AccessibleButton from '../views/elements/AccessibleButton';
|
||||
import Modal from '../../Modal';
|
||||
import classnames from 'classnames';
|
||||
|
@ -32,6 +32,17 @@ import GroupStore from '../../stores/GroupStore';
|
|||
import { showGroupAddRoomDialog } from '../../GroupAddressPicker';
|
||||
import GeminiScrollbar from 'react-gemini-scrollbar';
|
||||
|
||||
const LONG_DESC_PLACEHOLDER = _td(
|
||||
`<h1>HTML for your community's page</h1>
|
||||
<p>
|
||||
Use the long description to introduce new members to the community, or distribute
|
||||
some important <a href="foo">links</a>
|
||||
</p>
|
||||
<p>
|
||||
You can even use 'img' tags
|
||||
</p>
|
||||
`);
|
||||
|
||||
const RoomSummaryType = PropTypes.shape({
|
||||
room_id: PropTypes.string.isRequired,
|
||||
profile: PropTypes.shape({
|
||||
|
@ -392,6 +403,8 @@ export default React.createClass({
|
|||
|
||||
propTypes: {
|
||||
groupId: PropTypes.string.isRequired,
|
||||
// Whether this is the first time the group admin is viewing the group
|
||||
groupIsNew: PropTypes.bool,
|
||||
},
|
||||
|
||||
childContextTypes: {
|
||||
|
@ -422,7 +435,7 @@ export default React.createClass({
|
|||
|
||||
componentWillMount: function() {
|
||||
this._changeAvatarComponent = null;
|
||||
this._initGroupStore(this.props.groupId);
|
||||
this._initGroupStore(this.props.groupId, true);
|
||||
|
||||
MatrixClientPeg.get().on("Group.myMembership", this._onGroupMyMembership);
|
||||
},
|
||||
|
@ -449,7 +462,7 @@ export default React.createClass({
|
|||
this.setState({membershipBusy: false});
|
||||
},
|
||||
|
||||
_initGroupStore: function(groupId) {
|
||||
_initGroupStore: function(groupId, firstInit) {
|
||||
this._groupStore = GroupStoreCache.getGroupStore(MatrixClientPeg.get(), groupId);
|
||||
this._groupStore.registerListener(() => {
|
||||
const summary = this._groupStore.getSummary();
|
||||
|
@ -472,6 +485,9 @@ export default React.createClass({
|
|||
),
|
||||
error: null,
|
||||
});
|
||||
if (this.props.groupIsNew && firstInit) {
|
||||
this._onEditClick();
|
||||
}
|
||||
});
|
||||
this._groupStore.on('error', (err) => {
|
||||
this.setState({
|
||||
|
@ -868,6 +884,18 @@ export default React.createClass({
|
|||
let description = null;
|
||||
if (summary.profile && summary.profile.long_description) {
|
||||
description = sanitizedHtmlNode(summary.profile.long_description);
|
||||
} else if (this.state.isUserPrivileged) {
|
||||
description = <div
|
||||
className="mx_GroupView_groupDesc_placeholder"
|
||||
onClick={this._onEditClick}
|
||||
>
|
||||
{ _tJsx(
|
||||
'Your community hasn\'t got a Long Description, a HTML page to show to community members.<br />' +
|
||||
'Click here to open settings and give it one!',
|
||||
[/<br \/>/],
|
||||
[(sub) => <br />])
|
||||
}
|
||||
</div>;
|
||||
}
|
||||
const groupDescEditingClasses = classnames({
|
||||
"mx_GroupView_groupDesc": true,
|
||||
|
@ -879,6 +907,7 @@ export default React.createClass({
|
|||
<h3> { _t("Long Description (HTML)") } </h3>
|
||||
<textarea
|
||||
value={this.state.profileForm.long_description}
|
||||
placeholder={_t(LONG_DESC_PLACEHOLDER)}
|
||||
onChange={this._onLongDescChange}
|
||||
tabIndex="4"
|
||||
key="editLongDesc"
|
||||
|
|
|
@ -301,6 +301,7 @@ export default React.createClass({
|
|||
case PageTypes.GroupView:
|
||||
page_element = <GroupView
|
||||
groupId={this.props.currentGroupId}
|
||||
isNew={this.props.currentGroupIsNew}
|
||||
collapsedRhs={this.props.collapseRhs}
|
||||
/>;
|
||||
if (!this.props.collapseRhs) right_panel = <RightPanel groupId={this.props.currentGroupId} disabled={this.props.rightDisabled} />;
|
||||
|
|
|
@ -490,7 +490,10 @@ module.exports = React.createClass({
|
|||
case 'view_group':
|
||||
{
|
||||
const groupId = payload.group_id;
|
||||
this.setState({currentGroupId: groupId});
|
||||
this.setState({
|
||||
currentGroupId: groupId,
|
||||
currentGroupIsNew: payload.group_is_new,
|
||||
});
|
||||
this._setPage(PageTypes.GroupView);
|
||||
this.notifyNewScreen('group/' + groupId);
|
||||
}
|
||||
|
|
|
@ -81,6 +81,7 @@ export default React.createClass({
|
|||
dis.dispatch({
|
||||
action: 'view_group',
|
||||
group_id: result.group_id,
|
||||
group_is_new: true,
|
||||
});
|
||||
this.props.onFinished(true);
|
||||
}).catch((e) => {
|
||||
|
|
|
@ -672,6 +672,7 @@
|
|||
"You must <a>register</a> to use this functionality": "You must <a>register</a> to use this functionality",
|
||||
"You must join the room to see its files": "You must join the room to see its files",
|
||||
"There are no visible files in this room": "There are no visible files in this room",
|
||||
"<h1>HTML for your community's page</h1>\n<p>\n Use the long description to introduce new members to the community, or distribute\n some important <a href=\"foo\">links</a>\n</p>\n<p>\n You can even use 'img' tags\n</p>\n": "<h1>HTML for your community's page</h1>\n<p>\n Use the long description to introduce new members to the community, or distribute\n some important <a href=\"foo\">links</a>\n</p>\n<p>\n You can even use 'img' tags\n</p>\n",
|
||||
"Add rooms to the community summary": "Add rooms to the community summary",
|
||||
"Which rooms would you like to add to this summary?": "Which rooms would you like to add to this summary?",
|
||||
"Add to summary": "Add to summary",
|
||||
|
@ -703,6 +704,7 @@
|
|||
"You are a member of this community": "You are a member of this community",
|
||||
"Community Member Settings": "Community Member Settings",
|
||||
"Publish this community on your profile": "Publish this community on your profile",
|
||||
"Your community hasn't got a Long Description, a HTML page to show to community members.<br />Click here to open settings and give it one!": "Your community hasn't got a Long Description, a HTML page to show to community members.<br />Click here to open settings and give it one!",
|
||||
"Long Description (HTML)": "Long Description (HTML)",
|
||||
"Description": "Description",
|
||||
"Community %(groupId)s not found": "Community %(groupId)s not found",
|
||||
|
|
Loading…
Reference in a new issue