PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Add rule to enforce spacing in curly brackets in JSX children

Browse source 
This required an updated in version of eslint-plugin-react to 7.4.0.
This commit is contained in:
Luke Barnard 2017-09-28 11:21:06 +01:00
parent e70336af11
commit 6b9a2909df
47 changed files with 355 additions and 354 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintrc.js
View file

@ -44,7 +44,7 @@ module.exports = {
// <Element prop={ consideredError} prop={notConsideredError} /> // <Element prop={ consideredError} prop={notConsideredError} />
// //
// https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/docs/rules/jsx-curly-spacing.md // https://github.com/yannickcr/eslint-plugin-react/blob/HEAD/docs/rules/jsx-curly-spacing.md
"react/jsx-curly-spacing": ["error", "never"], "react/jsx-curly-spacing": ["error", {"when": "never", "children": {"when": "always"}}],
// Assert spacing before self-closing JSX tags, and no spacing before or // Assert spacing before self-closing JSX tags, and no spacing before or
// after the closing slash, and no spacing after the opening bracket of // after the closing slash, and no spacing after the opening bracket of

4
jenkins.sh
View file

@ -21,9 +21,7 @@ npm run test -- --no-colors
npm run lintall -- -f checkstyle -o eslint.xml || true npm run lintall -- -f checkstyle -o eslint.xml || true
# re-run the linter, excluding any files known to have errors or warnings. # re-run the linter, excluding any files known to have errors or warnings.
./node_modules/.bin/eslint --max-warnings 0 \ npm run lintwithexclusions
--ignore-path .eslintignore.errorfiles \
src test
# delete the old tarball, if it exists # delete the old tarball, if it exists
rm -f matrix-react-sdk-*.tgz rm -f matrix-react-sdk-*.tgz

3
package.json
View file

@ -39,6 +39,7 @@
"start": "parallelshell \"npm run build:watch\" \"npm run reskindex:watch\"", "start": "parallelshell \"npm run build:watch\" \"npm run reskindex:watch\"",
"lint": "eslint src/", "lint": "eslint src/",
"lintall": "eslint src/ test/", "lintall": "eslint src/ test/",
"lintwithexclusions": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test",
"clean": "rimraf lib", "clean": "rimraf lib",
"prepublish": "npm run clean && npm run build && git rev-parse HEAD > git-revision.txt", "prepublish": "npm run clean && npm run build && git rev-parse HEAD > git-revision.txt",
"test": "karma start --single-run=true --browsers ChromeHeadless", "test": "karma start --single-run=true --browsers ChromeHeadless",
@ -99,7 +100,7 @@
"eslint-config-google": "^0.7.1", "eslint-config-google": "^0.7.1",
"eslint-plugin-babel": "^4.0.1", "eslint-plugin-babel": "^4.0.1",
"eslint-plugin-flowtype": "^2.30.0", "eslint-plugin-flowtype": "^2.30.0",
"eslint-plugin-react": "^6.9.0", "eslint-plugin-react": "^7.4.0",
"expect": "^1.16.0", "expect": "^1.16.0",
"json-loader": "^0.5.3", "json-loader": "^0.5.3",
"karma": "^1.7.0", "karma": "^1.7.0",

4
src/SlashCommands.js
View file

@ -254,7 +254,7 @@ const commands = {
title: _t("Ignored user"), title: _t("Ignored user"),
description: ( description: (
<div> <div>
<p>{_t("You are now ignoring %(userId)s", {userId: userId})}</p> <p>{ _t("You are now ignoring %(userId)s", {userId: userId}) }</p>
</div> </div>
), ),
hasCancelButton: false, hasCancelButton: false,
@ -281,7 +281,7 @@ const commands = {
title: _t("Unignored user"), title: _t("Unignored user"),
description: ( description: (
<div> <div>
<p>{_t("You are no longer ignoring %(userId)s", {userId: userId})}</p> <p>{ _t("You are no longer ignoring %(userId)s", {userId: userId}) }</p>
</div> </div>
), ),
hasCancelButton: false, hasCancelButton: false,

8
src/async-components/views/dialogs/ExportE2eKeysDialog.js
View file

@ -136,13 +136,13 @@ export default React.createClass({
) } ) }
</p> </p>
<div className='error'> <div className='error'>
{this.state.errStr} { this.state.errStr }
</div> </div>
<div className='mx_E2eKeysDialog_inputTable'> <div className='mx_E2eKeysDialog_inputTable'>
<div className='mx_E2eKeysDialog_inputRow'> <div className='mx_E2eKeysDialog_inputRow'>
<div className='mx_E2eKeysDialog_inputLabel'> <div className='mx_E2eKeysDialog_inputLabel'>
<label htmlFor='passphrase1'> <label htmlFor='passphrase1'>
{_t("Enter passphrase")} { _t("Enter passphrase") }
</label> </label>
</div> </div>
<div className='mx_E2eKeysDialog_inputCell'> <div className='mx_E2eKeysDialog_inputCell'>
@ -155,7 +155,7 @@ export default React.createClass({
<div className='mx_E2eKeysDialog_inputRow'> <div className='mx_E2eKeysDialog_inputRow'>
<div className='mx_E2eKeysDialog_inputLabel'> <div className='mx_E2eKeysDialog_inputLabel'>
<label htmlFor='passphrase2'> <label htmlFor='passphrase2'>
{_t("Confirm passphrase")} { _t("Confirm passphrase") }
</label> </label>
</div> </div>
<div className='mx_E2eKeysDialog_inputCell'> <div className='mx_E2eKeysDialog_inputCell'>
@ -172,7 +172,7 @@ export default React.createClass({
disabled={disableForm} disabled={disableForm}
/> />
<button onClick={this._onCancelClick} disabled={disableForm}> <button onClick={this._onCancelClick} disabled={disableForm}>
{_t("Cancel")} { _t("Cancel") }
</button> </button>
</div> </div>
</form> </form>

10
src/async-components/views/dialogs/ImportE2eKeysDialog.js
View file

@ -134,13 +134,13 @@ export default React.createClass({
) } ) }
</p> </p>
<div className='error'> <div className='error'>
{this.state.errStr} { this.state.errStr }
</div> </div>
<div className='mx_E2eKeysDialog_inputTable'> <div className='mx_E2eKeysDialog_inputTable'>
<div className='mx_E2eKeysDialog_inputRow'> <div className='mx_E2eKeysDialog_inputRow'>
<div className='mx_E2eKeysDialog_inputLabel'> <div className='mx_E2eKeysDialog_inputLabel'>
<label htmlFor='importFile'> <label htmlFor='importFile'>
{_t("File to import")} { _t("File to import") }
</label> </label>
</div> </div>
<div className='mx_E2eKeysDialog_inputCell'> <div className='mx_E2eKeysDialog_inputCell'>
@ -153,14 +153,14 @@ export default React.createClass({
<div className='mx_E2eKeysDialog_inputRow'> <div className='mx_E2eKeysDialog_inputRow'>
<div className='mx_E2eKeysDialog_inputLabel'> <div className='mx_E2eKeysDialog_inputLabel'>
<label htmlFor='passphrase'> <label htmlFor='passphrase'>
{_t("Enter passphrase")} { _t("Enter passphrase") }
</label> </label>
</div> </div>
<div className='mx_E2eKeysDialog_inputCell'> <div className='mx_E2eKeysDialog_inputCell'>
<input ref='passphrase' id='passphrase' <input ref='passphrase' id='passphrase'
size='64' type='password' size='64' type='password'
onChange={this._onFormChange} onChange={this._onFormChange}
disabled={disableForm}/> disabled={disableForm} />
</div> </div>
</div> </div>
</div> </div>
@ -170,7 +170,7 @@ export default React.createClass({
disabled={!this.state.enableSubmit || disableForm} disabled={!this.state.enableSubmit || disableForm}
/> />
<button onClick={this._onCancelClick} disabled={disableForm}> <button onClick={this._onCancelClick} disabled={disableForm}>
{_t("Cancel")} { _t("Cancel") }
</button> </button>
</div> </div>
</form> </form>

4
src/autocomplete/CommandProvider.js
View file

@ -129,7 +129,7 @@ export default class CommandProvider extends AutocompleteProvider {
component: (<TextualCompletion component: (<TextualCompletion
title={result.command} title={result.command}
subtitle={result.args} subtitle={result.args}
description={ _t(result.description) } description={_t(result.description)}
/>), />),
range, range,
}; };
@ -150,7 +150,7 @@ export default class CommandProvider extends AutocompleteProvider {
renderCompletions(completions: [React.Component]): ?React.Component { renderCompletions(completions: [React.Component]): ?React.Component {
return <div className="mx_Autocomplete_Completion_container_block"> return <div className="mx_Autocomplete_Completion_container_block">
{completions} { completions }
</div>; </div>;
} }
} }

2
src/autocomplete/RoomProvider.js
View file

@ -106,7 +106,7 @@ export default class RoomProvider extends AutocompleteProvider {
renderCompletions(completions: [React.Component]): ?React.Component { renderCompletions(completions: [React.Component]): ?React.Component {
return <div className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate"> return <div className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate">
{completions} { completions }
</div>; </div>;
} }
} }

146
src/components/structures/GroupView.js
View file

@ -106,9 +106,9 @@ const CategoryRoomList = React.createClass({
const TintableSvg = sdk.getComponent("elements.TintableSvg"); const TintableSvg = sdk.getComponent("elements.TintableSvg");
const addButton = this.props.editing ? const addButton = this.props.editing ?
(<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddRoomsClicked}> (<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddRoomsClicked}>
<TintableSvg src="img/icons-create-room.svg" width="64" height="64"/> <TintableSvg src="img/icons-create-room.svg" width="64" height="64" />
<div className="mx_GroupView_featuredThings_addButton_label"> <div className="mx_GroupView_featuredThings_addButton_label">
{_t('Add a Room')} { _t('Add a Room') }
</div> </div>
</AccessibleButton>) : <div />; </AccessibleButton>) : <div />;
@ -117,17 +117,19 @@ const CategoryRoomList = React.createClass({
key={r.room_id} key={r.room_id}
groupId={this.props.groupId} groupId={this.props.groupId}
editing={this.props.editing} editing={this.props.editing}
summaryInfo={r}/>; summaryInfo={r} />;
}); });
let catHeader = <div />; let catHeader = <div />;
if (this.props.category && this.props.category.profile) { if (this.props.category && this.props.category.profile) {
catHeader = <div className="mx_GroupView_featuredThings_category">{this.props.category.profile.name}</div>; catHeader = <div className="mx_GroupView_featuredThings_category">
{ this.props.category.profile.name }
</div>;
} }
return <div className="mx_GroupView_featuredThings_container"> return <div className="mx_GroupView_featuredThings_container">
{catHeader} { catHeader }
{roomNodes} { roomNodes }
{addButton} { addButton }
</div>; </div>;
}, },
}); });
@ -196,9 +198,9 @@ const FeaturedRoom = React.createClass({
let roomNameNode = null; let roomNameNode = null;
if (permalink) { if (permalink) {
roomNameNode = <a href={permalink} onClick={this.onClick} >{roomName}</a>; roomNameNode = <a href={permalink} onClick={this.onClick} >{ roomName }</a>;
} else { } else {
roomNameNode = <span>{roomName}</span>; roomNameNode = <span>{ roomName }</span>;
} }
const deleteButton = this.props.editing ? const deleteButton = this.props.editing ?
@ -208,13 +210,13 @@ const FeaturedRoom = React.createClass({
width="14" width="14"
height="14" height="14"
alt="Delete" alt="Delete"
onClick={this.onDeleteClicked}/> onClick={this.onDeleteClicked} />
: <div />; : <div />;
return <AccessibleButton className="mx_GroupView_featuredThing" onClick={this.onClick}> return <AccessibleButton className="mx_GroupView_featuredThing" onClick={this.onClick}>
<RoomAvatar oobData={oobData} width={64} height={64} /> <RoomAvatar oobData={oobData} width={64} height={64} />
<div className="mx_GroupView_featuredThing_name">{roomNameNode}</div> <div className="mx_GroupView_featuredThing_name">{ roomNameNode }</div>
{deleteButton} { deleteButton }
</AccessibleButton>; </AccessibleButton>;
}, },
}); });
@ -278,9 +280,9 @@ const RoleUserList = React.createClass({
const TintableSvg = sdk.getComponent("elements.TintableSvg"); const TintableSvg = sdk.getComponent("elements.TintableSvg");
const addButton = this.props.editing ? const addButton = this.props.editing ?
(<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}> (<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}>
<TintableSvg src="img/icons-create-room.svg" width="64" height="64"/> <TintableSvg src="img/icons-create-room.svg" width="64" height="64" />
<div className="mx_GroupView_featuredThings_addButton_label"> <div className="mx_GroupView_featuredThings_addButton_label">
{_t('Add a User')} { _t('Add a User') }
</div> </div>
</AccessibleButton>) : <div />; </AccessibleButton>) : <div />;
const userNodes = this.props.users.map((u) => { const userNodes = this.props.users.map((u) => {
@ -288,16 +290,16 @@ const RoleUserList = React.createClass({
key={u.user_id} key={u.user_id}
summaryInfo={u} summaryInfo={u}
editing={this.props.editing} editing={this.props.editing}
groupId={this.props.groupId}/>; groupId={this.props.groupId} />;
}); });
let roleHeader = <div />; let roleHeader = <div />;
if (this.props.role && this.props.role.profile) { if (this.props.role && this.props.role.profile) {
roleHeader = <div className="mx_GroupView_featuredThings_category">{this.props.role.profile.name}</div>; roleHeader = <div className="mx_GroupView_featuredThings_category">{ this.props.role.profile.name }</div>;
} }
return <div className="mx_GroupView_featuredThings_container"> return <div className="mx_GroupView_featuredThings_container">
{roleHeader} { roleHeader }
{userNodes} { userNodes }
{addButton} { addButton }
</div>; </div>;
}, },
}); });
@ -349,7 +351,7 @@ const FeaturedUser = React.createClass({
const name = this.props.summaryInfo.displayname || this.props.summaryInfo.user_id; const name = this.props.summaryInfo.displayname || this.props.summaryInfo.user_id;
const permalink = 'https://matrix.to/#/' + this.props.summaryInfo.user_id; const permalink = 'https://matrix.to/#/' + this.props.summaryInfo.user_id;
const userNameNode = <a href={permalink} onClick={this.onClick}>{name}</a>; const userNameNode = <a href={permalink} onClick={this.onClick}>{ name }</a>;
const httpUrl = MatrixClientPeg.get() const httpUrl = MatrixClientPeg.get()
.mxcUrlToHttp(this.props.summaryInfo.avatar_url, 64, 64); .mxcUrlToHttp(this.props.summaryInfo.avatar_url, 64, 64);
@ -360,13 +362,13 @@ const FeaturedUser = React.createClass({
width="14" width="14"
height="14" height="14"
alt="Delete" alt="Delete"
onClick={this.onDeleteClicked}/> onClick={this.onDeleteClicked} />
: <div />; : <div />;
return <AccessibleButton className="mx_GroupView_featuredThing" onClick={this.onClick}> return <AccessibleButton className="mx_GroupView_featuredThing" onClick={this.onClick}>
<BaseAvatar name={name} url={httpUrl} width={64} height={64} /> <BaseAvatar name={name} url={httpUrl} width={64} height={64} />
<div className="mx_GroupView_featuredThing_name">{userNameNode}</div> <div className="mx_GroupView_featuredThing_name">{ userNameNode }</div>
{deleteButton} { deleteButton }
</AccessibleButton>; </AccessibleButton>;
}, },
}); });
@ -632,7 +634,7 @@ export default React.createClass({
const defaultCategoryNode = <CategoryRoomList const defaultCategoryNode = <CategoryRoomList
rooms={defaultCategoryRooms} rooms={defaultCategoryRooms}
groupId={this.props.groupId} groupId={this.props.groupId}
editing={this.state.editing}/>; editing={this.state.editing} />;
const categoryRoomNodes = Object.keys(categoryRooms).map((catId) => { const categoryRoomNodes = Object.keys(categoryRooms).map((catId) => {
const cat = summary.rooms_section.categories[catId]; const cat = summary.rooms_section.categories[catId];
return <CategoryRoomList return <CategoryRoomList
@ -640,15 +642,15 @@ export default React.createClass({
rooms={categoryRooms[catId]} rooms={categoryRooms[catId]}
category={cat} category={cat}
groupId={this.props.groupId} groupId={this.props.groupId}
editing={this.state.editing}/>; editing={this.state.editing} />;
}); });
return <div className="mx_GroupView_featuredThings"> return <div className="mx_GroupView_featuredThings">
<div className="mx_GroupView_featuredThings_header"> <div className="mx_GroupView_featuredThings_header">
{_t('Featured Rooms:')} { _t('Featured Rooms:') }
</div> </div>
{defaultCategoryNode} { defaultCategoryNode }
{categoryRoomNodes} { categoryRoomNodes }
</div>; </div>;
}, },
@ -673,7 +675,7 @@ export default React.createClass({
const noRoleNode = <RoleUserList const noRoleNode = <RoleUserList
users={noRoleUsers} users={noRoleUsers}
groupId={this.props.groupId} groupId={this.props.groupId}
editing={this.state.editing}/>; editing={this.state.editing} />;
const roleUserNodes = Object.keys(roleUsers).map((roleId) => { const roleUserNodes = Object.keys(roleUsers).map((roleId) => {
const role = summary.users_section.roles[roleId]; const role = summary.users_section.roles[roleId];
return <RoleUserList return <RoleUserList
@ -681,15 +683,15 @@ export default React.createClass({
users={roleUsers[roleId]} users={roleUsers[roleId]}
role={role} role={role}
groupId={this.props.groupId} groupId={this.props.groupId}
editing={this.state.editing}/>; editing={this.state.editing} />;
}); });
return <div className="mx_GroupView_featuredThings"> return <div className="mx_GroupView_featuredThings">
<div className="mx_GroupView_featuredThings_header"> <div className="mx_GroupView_featuredThings_header">
{_t('Featured Users:')} { _t('Featured Users:') }
</div> </div>
{noRoleNode} { noRoleNode }
{roleUserNodes} { roleUserNodes }
</div>; </div>;
}, },
@ -708,18 +710,18 @@ export default React.createClass({
return <div className="mx_GroupView_membershipSection mx_GroupView_membershipSection_invited"> return <div className="mx_GroupView_membershipSection mx_GroupView_membershipSection_invited">
<div className="mx_GroupView_membershipSection_description"> <div className="mx_GroupView_membershipSection_description">
{_t("%(inviter)s has invited you to join this group", {inviter: group.inviter.userId})} { _t("%(inviter)s has invited you to join this group", {inviter: group.inviter.userId}) }
</div> </div>
<div className="mx_GroupView_membership_buttonContainer"> <div className="mx_GroupView_membership_buttonContainer">
<AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton" <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
onClick={this._onAcceptInviteClick} onClick={this._onAcceptInviteClick}
> >
{_t("Accept")} { _t("Accept") }
</AccessibleButton> </AccessibleButton>
<AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton" <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
onClick={this._onRejectInviteClick} onClick={this._onRejectInviteClick}
> >
{_t("Decline")} { _t("Decline") }
</AccessibleButton> </AccessibleButton>
</div> </div>
</div>; </div>;
@ -740,13 +742,13 @@ export default React.createClass({
publicisedButton = <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton" publicisedButton = <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
onClick={this._onPubliciseOffClick} onClick={this._onPubliciseOffClick}
> >
{_t("Unpublish")} { _t("Unpublish") }
</AccessibleButton>; </AccessibleButton>;
} }
publicisedSection = <div className="mx_GroupView_membershipSubSection"> publicisedSection = <div className="mx_GroupView_membershipSubSection">
{_t("This group is published on your profile")} { _t("This group is published on your profile") }
<div className="mx_GroupView_membership_buttonContainer"> <div className="mx_GroupView_membership_buttonContainer">
{publicisedButton} { publicisedButton }
</div> </div>
</div>; </div>;
} else { } else {
@ -754,13 +756,13 @@ export default React.createClass({
publicisedButton = <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton" publicisedButton = <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
onClick={this._onPubliciseOnClick} onClick={this._onPubliciseOnClick}
> >
{_t("Publish")} { _t("Publish") }
</AccessibleButton>; </AccessibleButton>;
} }
publicisedSection = <div className="mx_GroupView_membershipSubSection"> publicisedSection = <div className="mx_GroupView_membershipSubSection">
{_t("This group is not published on your profile")} { _t("This group is not published on your profile") }
<div className="mx_GroupView_membership_buttonContainer"> <div className="mx_GroupView_membership_buttonContainer">
{publicisedButton} { publicisedButton }
</div> </div>
</div>; </div>;
} }
@ -768,17 +770,17 @@ export default React.createClass({
return <div className="mx_GroupView_membershipSection mx_GroupView_membershipSection_joined"> return <div className="mx_GroupView_membershipSection mx_GroupView_membershipSection_joined">
<div className="mx_GroupView_membershipSubSection"> <div className="mx_GroupView_membershipSubSection">
<div className="mx_GroupView_membershipSection_description"> <div className="mx_GroupView_membershipSection_description">
{youAreAMemberText} { youAreAMemberText }
</div> </div>
<div className="mx_GroupView_membership_buttonContainer"> <div className="mx_GroupView_membership_buttonContainer">
<AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton" <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
onClick={this._onLeaveClick} onClick={this._onLeaveClick}
> >
{_t("Leave")} { _t("Leave") }
</AccessibleButton> </AccessibleButton>
</div> </div>
</div> </div>
{publicisedSection} { publicisedSection }
</div>; </div>;
} }
@ -818,15 +820,15 @@ export default React.createClass({
avatarNode = ( avatarNode = (
<div className="mx_GroupView_avatarPicker"> <div className="mx_GroupView_avatarPicker">
<label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label"> <label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
{avatarImage} { avatarImage }
</label> </label>
<div className="mx_GroupView_avatarPicker_edit"> <div className="mx_GroupView_avatarPicker_edit">
<label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label"> <label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
<img src="img/camera.svg" <img src="img/camera.svg"
alt={ _t("Upload avatar") } title={ _t("Upload avatar") } alt={_t("Upload avatar")} title={_t("Upload avatar")}
width="17" height="15" /> width="17" height="15" />
</label> </label>
<input id="avatarInput" className="mx_GroupView_uploadInput" type="file" onChange={this._onAvatarSelected}/> <input id="avatarInput" className="mx_GroupView_uploadInput" type="file" onChange={this._onAvatarSelected} />
</div> </div>
</div> </div>
); );
@ -846,13 +848,13 @@ export default React.createClass({
<AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton" <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
onClick={this._onSaveClick} key="_saveButton" onClick={this._onSaveClick} key="_saveButton"
> >
{_t('Save')} { _t('Save') }
</AccessibleButton>, </AccessibleButton>,
); );
rightButtons.push( rightButtons.push(
<AccessibleButton className="mx_RoomHeader_cancelButton" onClick={this._onCancelClick} key="_cancelButton"> <AccessibleButton className="mx_RoomHeader_cancelButton" onClick={this._onCancelClick} key="_cancelButton">
<img src="img/cancel.svg" className="mx_filterFlipColor" <img src="img/cancel.svg" className="mx_filterFlipColor"
width="18" height="18" alt={_t("Cancel")}/> width="18" height="18" alt={_t("Cancel")} />
</AccessibleButton>, </AccessibleButton>,
); );
roomBody = <div> roomBody = <div>
@ -860,8 +862,8 @@ export default React.createClass({
onChange={this._onLongDescChange} onChange={this._onLongDescChange}
tabIndex="3" tabIndex="3"
/> />
{this._getFeaturedRoomsNode()} { this._getFeaturedRoomsNode() }
{this._getFeaturedUsersNode()} { this._getFeaturedUsersNode() }
</div>; </div>;
} else { } else {
const groupAvatarUrl = summary.profile ? summary.profile.avatar_url : null; const groupAvatarUrl = summary.profile ? summary.profile.avatar_url : null;
@ -872,41 +874,41 @@ export default React.createClass({
/>; />;
if (summary.profile && summary.profile.name) { if (summary.profile && summary.profile.name) {
nameNode = <div> nameNode = <div>
<span>{summary.profile.name}</span> <span>{ summary.profile.name }</span>
<span className="mx_GroupView_header_groupid"> <span className="mx_GroupView_header_groupid">
({this.props.groupId}) ({ this.props.groupId })
</span> </span>
</div>; </div>;
} else { } else {
nameNode = <span>{this.props.groupId}</span>; nameNode = <span>{ this.props.groupId }</span>;
} }
shortDescNode = <span>{summary.profile.short_description}</span>; shortDescNode = <span>{ summary.profile.short_description }</span>;
let description = null; let description = null;
if (summary.profile && summary.profile.long_description) { if (summary.profile && summary.profile.long_description) {
description = sanitizedHtmlNode(summary.profile.long_description); description = sanitizedHtmlNode(summary.profile.long_description);
} }
roomBody = <div> roomBody = <div>
{this._getMembershipSection()} { this._getMembershipSection() }
<div className="mx_GroupView_groupDesc">{description}</div> <div className="mx_GroupView_groupDesc">{ description }</div>
{this._getFeaturedRoomsNode()} { this._getFeaturedRoomsNode() }
{this._getFeaturedUsersNode()} { this._getFeaturedUsersNode() }
</div>; </div>;
if (summary.user && summary.user.is_privileged) { if (summary.user && summary.user.is_privileged) {
rightButtons.push( rightButtons.push(
<AccessibleButton className="mx_GroupHeader_button" <AccessibleButton className="mx_GroupHeader_button"
onClick={this._onEditClick} title={_t("Edit Group")} key="_editButton" onClick={this._onEditClick} title={_t("Edit Group")} key="_editButton"
> >
<TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/> <TintableSvg src="img/icons-settings-room.svg" width="16" height="16" />
</AccessibleButton>, </AccessibleButton>,
); );
} }
if (this.props.collapsedRhs) { if (this.props.collapsedRhs) {
rightButtons.push( rightButtons.push(
<AccessibleButton className="mx_GroupHeader_button" <AccessibleButton className="mx_GroupHeader_button"
onClick={this._onShowRhsClick} title={ _t('Show panel') } key="_maximiseButton" onClick={this._onShowRhsClick} title={_t('Show panel')} key="_maximiseButton"
> >
<TintableSvg src="img/maximise.svg" width="10" height="16"/> <TintableSvg src="img/maximise.svg" width="10" height="16" />
</AccessibleButton>, </AccessibleButton>,
); );
} }
@ -919,40 +921,40 @@ export default React.createClass({
<div className={classnames(headerClasses)}> <div className={classnames(headerClasses)}>
<div className="mx_GroupView_header_leftCol"> <div className="mx_GroupView_header_leftCol">
<div className="mx_GroupView_header_avatar"> <div className="mx_GroupView_header_avatar">
{avatarNode} { avatarNode }
</div> </div>
<div className="mx_GroupView_header_info"> <div className="mx_GroupView_header_info">
<div className="mx_GroupView_header_name"> <div className="mx_GroupView_header_name">
{nameNode} { nameNode }
</div> </div>
<div className="mx_GroupView_header_shortDesc"> <div className="mx_GroupView_header_shortDesc">
{shortDescNode} { shortDescNode }
</div> </div>
</div> </div>
</div> </div>
<div className="mx_GroupView_header_rightCol"> <div className="mx_GroupView_header_rightCol">
{rightButtons} { rightButtons }
</div> </div>
</div> </div>
{roomBody} { roomBody }
</div> </div>
); );
} else if (this.state.error) { } else if (this.state.error) {
if (this.state.error.httpStatus === 404) { if (this.state.error.httpStatus === 404) {
return ( return (
<div className="mx_GroupView_error"> <div className="mx_GroupView_error">
Group {this.props.groupId} not found Group { this.props.groupId } not found
</div> </div>
); );
} else { } else {
let extraText; let extraText;
if (this.state.error.errcode === 'M_UNRECOGNIZED') { if (this.state.error.errcode === 'M_UNRECOGNIZED') {
extraText = <div>{_t('This Home server does not support groups')}</div>; extraText = <div>{ _t('This Home server does not support groups') }</div>;
} }
return ( return (
<div className="mx_GroupView_error"> <div className="mx_GroupView_error">
Failed to load {this.props.groupId} Failed to load { this.props.groupId }
{extraText} { extraText }
</div> </div>
); );
} }

4
src/components/structures/MatrixChat.js
View file

@ -853,7 +853,7 @@ module.exports = React.createClass({
title: _t("Leave room"), title: _t("Leave room"),
description: ( description: (
<span> <span>
{_t("Are you sure you want to leave the room '%(roomName)s'?", {roomName: roomToLeave.name})} { _t("Are you sure you want to leave the room '%(roomName)s'?", {roomName: roomToLeave.name}) }
</span> </span>
), ),
onFinished: (shouldLeave) => { onFinished: (shouldLeave) => {
@ -1450,7 +1450,7 @@ module.exports = React.createClass({
return ( return (
<div className="mx_MatrixChat_splash"> <div className="mx_MatrixChat_splash">
<Spinner /> <Spinner />
<a href="#" className="mx_MatrixChat_splashButtons" onClick={ this.onLogoutClick }> <a href="#" className="mx_MatrixChat_splashButtons" onClick={this.onLogoutClick}>
{ _t('Logout') } { _t('Logout') }
</a> </a>
</div> </div>

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

@ -39,7 +39,7 @@ const GroupTile = React.createClass({
}, },
render: function() { render: function() {
return <a onClick={this.onClick} href="#">{this.props.groupId}</a>; return <a onClick={this.onClick} href="#">{ this.props.groupId }</a>;
}, },
}); });
@ -90,51 +90,51 @@ export default withMatrixClient(React.createClass({
); );
}); });
content = <div> content = <div>
<div>{_t('You are a member of these groups:')}</div> <div>{ _t('You are a member of these groups:') }</div>
{groupNodes} { groupNodes }
</div>; </div>;
} else if (this.state.error) { } else if (this.state.error) {
content = <div className="mx_MyGroups_error"> content = <div className="mx_MyGroups_error">
{_t('Error whilst fetching joined groups')} { _t('Error whilst fetching joined groups') }
</div>; </div>;
} else { } else {
content = <Loader />; content = <Loader />;
} }
return <div className="mx_MyGroups"> return <div className="mx_MyGroups">
<SimpleRoomHeader title={ _t("Groups") } /> <SimpleRoomHeader title={_t("Groups")} />
<div className='mx_MyGroups_joinCreateBox'> <div className='mx_MyGroups_joinCreateBox'>
<div className="mx_MyGroups_createBox"> <div className="mx_MyGroups_createBox">
<div className="mx_MyGroups_joinCreateHeader"> <div className="mx_MyGroups_joinCreateHeader">
{_t('Create a new group')} { _t('Create a new group') }
</div> </div>
<AccessibleButton className='mx_MyGroups_joinCreateButton' onClick={this._onCreateGroupClick}> <AccessibleButton className='mx_MyGroups_joinCreateButton' onClick={this._onCreateGroupClick}>
<TintableSvg src="img/icons-create-room.svg" width="50" height="50" /> <TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
</AccessibleButton> </AccessibleButton>
{_t( { _t(
'Create a group to represent your community! '+ 'Create a group to represent your community! '+
'Define a set of rooms and your own custom homepage '+ 'Define a set of rooms and your own custom homepage '+
'to mark out your space in the Matrix universe.', 'to mark out your space in the Matrix universe.',
)} ) }
</div> </div>
<div className="mx_MyGroups_joinBox"> <div className="mx_MyGroups_joinBox">
<div className="mx_MyGroups_joinCreateHeader"> <div className="mx_MyGroups_joinCreateHeader">
{_t('Join an existing group')} { _t('Join an existing group') }
</div> </div>
<AccessibleButton className='mx_MyGroups_joinCreateButton' onClick={this._onJoinGroupClick}> <AccessibleButton className='mx_MyGroups_joinCreateButton' onClick={this._onJoinGroupClick}>
<TintableSvg src="img/icons-create-room.svg" width="50" height="50" /> <TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
</AccessibleButton> </AccessibleButton>
{_tJsx( { _tJsx(
'To join an existing group you\'ll have to '+ 'To join an existing group you\'ll have to '+
'know its group identifier; this will look '+ 'know its group identifier; this will look '+
'something like <i>+example:matrix.org</i>.', 'something like <i>+example:matrix.org</i>.',
/<i>(.*)<\/i>/, /<i>(.*)<\/i>/,
(sub) => <i>{sub}</i>, (sub) => <i>{ sub }</i>,
)} ) }
</div> </div>
</div> </div>
<div className="mx_MyGroups_content"> <div className="mx_MyGroups_content">
{content} { content }
</div> </div>
</div>; </div>;
}, },

184
src/components/structures/UserSettings.js
View file

@ -52,7 +52,7 @@ const gHVersionLabel = function(repo, token='') {
} else { } else {
url = `https://github.com/${repo}/commit/${token.split('-')[0]}`; url = `https://github.com/${repo}/commit/${token.split('-')[0]}`;
} }
return <a target="_blank" rel="noopener" href={url}>{token}</a>; return <a target="_blank" rel="noopener" href={url}>{ token }</a>;
}; };
// Enumerate some simple 'flip a bit' UI settings (if any). // Enumerate some simple 'flip a bit' UI settings (if any).
@ -674,7 +674,7 @@ module.exports = React.createClass({
<div> <div>
<h3>Referral</h3> <h3>Referral</h3>
<div className="mx_UserSettings_section"> <div className="mx_UserSettings_section">
{_t("Refer a friend to Riot:")} <a href={href}>{href}</a> { _t("Refer a friend to Riot:") } <a href={href}>{ href }</a>
</div> </div>
</div> </div>
); );
@ -693,7 +693,7 @@ module.exports = React.createClass({
_renderLanguageSetting: function() { _renderLanguageSetting: function() {
const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown'); const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
return <div> return <div>
<label htmlFor="languageSelector">{_t('Interface Language')}</label> <label htmlFor="languageSelector">{ _t('Interface Language') }</label>
<LanguageDropdown ref="language" onOptionChange={this.onLanguageChange} <LanguageDropdown ref="language" onOptionChange={this.onLanguageChange}
className="mx_UserSettings_language" className="mx_UserSettings_language"
value={this.state.language} value={this.state.language}
@ -716,7 +716,7 @@ module.exports = React.createClass({
<table> <table>
<tbody> <tbody>
<tr> <tr>
<td><strong>{_t('Autocomplete Delay (ms):')}</strong></td> <td><strong>{ _t('Autocomplete Delay (ms):') }</strong></td>
<td> <td>
<input <input
type="number" type="number"
@ -737,8 +737,8 @@ module.exports = React.createClass({
return <div className="mx_UserSettings_toggle"> return <div className="mx_UserSettings_toggle">
<input id="urlPreviewsDisabled" <input id="urlPreviewsDisabled"
type="checkbox" type="checkbox"
defaultChecked={ UserSettingsStore.getUrlPreviewsDisabled() } defaultChecked={UserSettingsStore.getUrlPreviewsDisabled()}
onChange={ this._onPreviewsDisabledChanged } onChange={this._onPreviewsDisabledChanged}
/> />
<label htmlFor="urlPreviewsDisabled"> <label htmlFor="urlPreviewsDisabled">
{ _t("Disable inline URL previews by default") } { _t("Disable inline URL previews by default") }
@ -759,13 +759,13 @@ module.exports = React.createClass({
if (setting.fn) setting.fn(e.target.checked); if (setting.fn) setting.fn(e.target.checked);
}; };
return <div className="mx_UserSettings_toggle" key={ setting.id }> return <div className="mx_UserSettings_toggle" key={setting.id}>
<input id={ setting.id } <input id={setting.id}
type="checkbox" type="checkbox"
defaultChecked={ this._syncedSettings[setting.id] } defaultChecked={this._syncedSettings[setting.id]}
onChange={ onChange } onChange={onChange}
/> />
<label htmlFor={ setting.id }> <label htmlFor={setting.id}>
{ _t(setting.label) } { _t(setting.label) }
</label> </label>
</div>; </div>;
@ -784,15 +784,15 @@ module.exports = React.createClass({
value: setting.value, value: setting.value,
}); });
}; };
return <div className="mx_UserSettings_toggle" key={ setting.id + "_" + setting.value }> return <div className="mx_UserSettings_toggle" key={setting.id + "_" + setting.value}>
<input id={ setting.id + "_" + setting.value } <input id={setting.id + "_" + setting.value}
type="radio" type="radio"
name={ setting.id } name={setting.id}
value={ setting.value } value={setting.value}
checked={ this._syncedSettings[setting.id] === setting.value } checked={this._syncedSettings[setting.id] === setting.value}
onChange={ onChange } onChange={onChange}
/> />
<label htmlFor={ setting.id + "_" + setting.value }> <label htmlFor={setting.id + "_" + setting.value}>
{ setting.label } { setting.label }
</label> </label>
</div>; </div>;
@ -829,10 +829,10 @@ module.exports = React.createClass({
<h3>{ _t("Cryptography") }</h3> <h3>{ _t("Cryptography") }</h3>
<div className="mx_UserSettings_section mx_UserSettings_cryptoSection"> <div className="mx_UserSettings_section mx_UserSettings_cryptoSection">
<ul> <ul>
<li><label>{_t("Device ID:")}</label> <li><label>{ _t("Device ID:") }</label>
<span><code>{deviceId}</code></span></li> <span><code>{ deviceId }</code></span></li>
<li><label>{_t("Device key:")}</label> <li><label>{ _t("Device key:") }</label>
<span><code><b>{identityKey}</b></code></span></li> <span><code><b>{ identityKey }</b></code></span></li>
</ul> </ul>
{ importExportButtons } { importExportButtons }
</div> </div>
@ -851,11 +851,11 @@ module.exports = React.createClass({
<h3>{ _t("Ignored Users") }</h3> <h3>{ _t("Ignored Users") }</h3>
<div className="mx_UserSettings_section mx_UserSettings_ignoredUsersSection"> <div className="mx_UserSettings_section mx_UserSettings_ignoredUsersSection">
<ul> <ul>
{this.state.ignoredUsers.map(function(userId) { { this.state.ignoredUsers.map(function(userId) {
return (<IgnoredUser key={userId} return (<IgnoredUser key={userId}
userId={userId} userId={userId}
onUnignored={updateHandler}></IgnoredUser>); onUnignored={updateHandler}></IgnoredUser>);
})} }) }
</ul> </ul>
</div> </div>
</div> </div>
@ -871,13 +871,13 @@ module.exports = React.createClass({
if (setting.fn) setting.fn(e.target.checked); if (setting.fn) setting.fn(e.target.checked);
}; };
return <div className="mx_UserSettings_toggle" key={ setting.id }> return <div className="mx_UserSettings_toggle" key={setting.id}>
<input id={ setting.id } <input id={setting.id}
type="checkbox" type="checkbox"
defaultChecked={ this._localSettings[setting.id] } defaultChecked={this._localSettings[setting.id]}
onChange={ onChange } onChange={onChange}
/> />
<label htmlFor={ setting.id }> <label htmlFor={setting.id}>
{ _t(setting.label) } { _t(setting.label) }
</label> </label>
</div>; </div>;
@ -887,8 +887,8 @@ module.exports = React.createClass({
const DevicesPanel = sdk.getComponent('settings.DevicesPanel'); const DevicesPanel = sdk.getComponent('settings.DevicesPanel');
return ( return (
<div> <div>
<h3>{_t("Devices")}</h3> <h3>{ _t("Devices") }</h3>
<DevicesPanel className="mx_UserSettings_section"/> <DevicesPanel className="mx_UserSettings_section" />
</div> </div>
); );
}, },
@ -903,7 +903,7 @@ module.exports = React.createClass({
<div className="mx_UserSettings_section"> <div className="mx_UserSettings_section">
<p>{ _t("Found a bug?") }</p> <p>{ _t("Found a bug?") }</p>
<button className="mx_UserSettings_button danger" <button className="mx_UserSettings_button danger"
onClick={this._onBugReportClicked}>{_t('Report it')} onClick={this._onBugReportClicked}>{ _t('Report it') }
</button> </button>
</div> </div>
</div> </div>
@ -911,13 +911,13 @@ module.exports = React.createClass({
}, },
_renderAnalyticsControl: function() { _renderAnalyticsControl: function() {
if (!SdkConfig.get().piwik) return <div/>; if (!SdkConfig.get().piwik) return <div />;
return <div> return <div>
<h3>{ _t('Analytics') }</h3> <h3>{ _t('Analytics') }</h3>
<div className="mx_UserSettings_section"> <div className="mx_UserSettings_section">
{_t('Riot collects anonymous analytics to allow us to improve the application.')} { _t('Riot collects anonymous analytics to allow us to improve the application.') }
{ANALYTICS_SETTINGS_LABELS.map( this._renderLocalSetting )} { ANALYTICS_SETTINGS_LABELS.map( this._renderLocalSetting ) }
</div> </div>
</div>; </div>;
}, },
@ -947,10 +947,10 @@ module.exports = React.createClass({
type="checkbox" type="checkbox"
id={feature.id} id={feature.id}
name={feature.id} name={feature.id}
defaultChecked={ UserSettingsStore.isFeatureEnabled(feature.id) } defaultChecked={UserSettingsStore.isFeatureEnabled(feature.id)}
onChange={ onChange } onChange={onChange}
/> />
<label htmlFor={feature.id}>{feature.name}</label> <label htmlFor={feature.id}>{ feature.name }</label>
</div>); </div>);
}); });
@ -964,7 +964,7 @@ module.exports = React.createClass({
<h3>{ _t("Labs") }</h3> <h3>{ _t("Labs") }</h3>
<div className="mx_UserSettings_section"> <div className="mx_UserSettings_section">
<p>{ _t("These are experimental features that may break in unexpected ways") }. { _t("Use with caution") }.</p> <p>{ _t("These are experimental features that may break in unexpected ways") }. { _t("Use with caution") }.</p>
{features} { features }
</div> </div>
</div> </div>
); );
@ -997,10 +997,10 @@ module.exports = React.createClass({
const platform = PlatformPeg.get(); const platform = PlatformPeg.get();
if ('canSelfUpdate' in platform && platform.canSelfUpdate() && 'startUpdateCheck' in platform) { if ('canSelfUpdate' in platform && platform.canSelfUpdate() && 'startUpdateCheck' in platform) {
return <div> return <div>
<h3>{_t('Updates')}</h3> <h3>{ _t('Updates') }</h3>
<div className="mx_UserSettings_section"> <div className="mx_UserSettings_section">
<AccessibleButton className="mx_UserSettings_button" onClick={platform.startUpdateCheck}> <AccessibleButton className="mx_UserSettings_button" onClick={platform.startUpdateCheck}>
{_t('Check for update')} { _t('Check for update') }
</AccessibleButton> </AccessibleButton>
</div> </div>
</div>; </div>;
@ -1026,7 +1026,7 @@ module.exports = React.createClass({
reject = ( reject = (
<AccessibleButton className="mx_UserSettings_button danger" <AccessibleButton className="mx_UserSettings_button danger"
onClick={onClick}> onClick={onClick}>
{_t("Reject all %(invitedRooms)s invites", {invitedRooms: invitedRooms.length})} { _t("Reject all %(invitedRooms)s invites", {invitedRooms: invitedRooms.length}) }
</AccessibleButton> </AccessibleButton>
); );
} }
@ -1034,7 +1034,7 @@ module.exports = React.createClass({
return <div> return <div>
<h3>{ _t("Bulk Options") }</h3> <h3>{ _t("Bulk Options") }</h3>
<div className="mx_UserSettings_section"> <div className="mx_UserSettings_section">
{reject} { reject }
</div> </div>
</div>; </div>;
}, },
@ -1052,7 +1052,7 @@ module.exports = React.createClass({
defaultChecked={settings['auto-launch']} defaultChecked={settings['auto-launch']}
onChange={this._onAutoLaunchChanged} onChange={this._onAutoLaunchChanged}
/> />
<label htmlFor="auto-launch">{_t('Start automatically after system login')}</label> <label htmlFor="auto-launch">{ _t('Start automatically after system login') }</label>
</div> </div>
</div> </div>
</div>; </div>;
@ -1064,7 +1064,7 @@ module.exports = React.createClass({
}, },
_mapWebRtcDevicesToSpans: function(devices) { _mapWebRtcDevicesToSpans: function(devices) {
return devices.map((device) => <span key={device.deviceId}>{device.label}</span>); return devices.map((device) => <span key={device.deviceId}>{ device.label }</span>);
}, },
_setAudioInput: function(deviceId) { _setAudioInput: function(deviceId) {
@ -1100,15 +1100,15 @@ module.exports = React.createClass({
if (this.state.mediaDevices === false) { if (this.state.mediaDevices === false) {
return ( return (
<p className="mx_UserSettings_link" onClick={this._requestMediaPermissions}> <p className="mx_UserSettings_link" onClick={this._requestMediaPermissions}>
{_t('Missing Media Permissions, click here to request.')} { _t('Missing Media Permissions, click here to request.') }
</p> </p>
); );
} else if (!this.state.mediaDevices) return; } else if (!this.state.mediaDevices) return;
const Dropdown = sdk.getComponent('elements.Dropdown'); const Dropdown = sdk.getComponent('elements.Dropdown');
let microphoneDropdown = <p>{_t('No Microphones detected')}</p>; let microphoneDropdown = <p>{ _t('No Microphones detected') }</p>;
let webcamDropdown = <p>{_t('No Webcams detected')}</p>; let webcamDropdown = <p>{ _t('No Webcams detected') }</p>;
const defaultOption = { const defaultOption = {
deviceId: '', deviceId: '',
@ -1125,12 +1125,12 @@ module.exports = React.createClass({
} }
microphoneDropdown = <div> microphoneDropdown = <div>
<h4>{_t('Microphone')}</h4> <h4>{ _t('Microphone') }</h4>
<Dropdown <Dropdown
className="mx_UserSettings_webRtcDevices_dropdown" className="mx_UserSettings_webRtcDevices_dropdown"
value={this.state.activeAudioInput || defaultInput} value={this.state.activeAudioInput || defaultInput}
onOptionChange={this._setAudioInput}> onOptionChange={this._setAudioInput}>
{this._mapWebRtcDevicesToSpans(audioInputs)} { this._mapWebRtcDevicesToSpans(audioInputs) }
</Dropdown> </Dropdown>
</div>; </div>;
} }
@ -1145,25 +1145,25 @@ module.exports = React.createClass({
} }
webcamDropdown = <div> webcamDropdown = <div>
<h4>{_t('Camera')}</h4> <h4>{ _t('Camera') }</h4>
<Dropdown <Dropdown
className="mx_UserSettings_webRtcDevices_dropdown" className="mx_UserSettings_webRtcDevices_dropdown"
value={this.state.activeVideoInput || defaultInput} value={this.state.activeVideoInput || defaultInput}
onOptionChange={this._setVideoInput}> onOptionChange={this._setVideoInput}>
{this._mapWebRtcDevicesToSpans(videoInputs)} { this._mapWebRtcDevicesToSpans(videoInputs) }
</Dropdown> </Dropdown>
</div>; </div>;
} }
return <div> return <div>
{microphoneDropdown} { microphoneDropdown }
{webcamDropdown} { webcamDropdown }
</div>; </div>;
}, },
_renderWebRtcSettings: function() { _renderWebRtcSettings: function() {
return <div> return <div>
<h3>{_t('VoIP')}</h3> <h3>{ _t('VoIP') }</h3>
<div className="mx_UserSettings_section"> <div className="mx_UserSettings_section">
{ WEBRTC_SETTINGS_LABELS.map(this._renderLocalSetting) } { WEBRTC_SETTINGS_LABELS.map(this._renderLocalSetting) }
{ this._renderWebRtcDeviceSettings() } { this._renderWebRtcDeviceSettings() }
@ -1229,7 +1229,7 @@ module.exports = React.createClass({
return ( return (
<div className="mx_UserSettings_profileTableRow" key={pidIndex}> <div className="mx_UserSettings_profileTableRow" key={pidIndex}>
<div className="mx_UserSettings_profileLabelCell"> <div className="mx_UserSettings_profileLabelCell">
<label htmlFor={id}>{this.nameForMedium(val.medium)}</label> <label htmlFor={id}>{ this.nameForMedium(val.medium) }</label>
</div> </div>
<div className="mx_UserSettings_profileInputCell"> <div className="mx_UserSettings_profileInputCell">
<input type="text" key={val.address} id={id} <input type="text" key={val.address} id={id}
@ -1237,7 +1237,7 @@ module.exports = React.createClass({
/> />
</div> </div>
<div className="mx_UserSettings_threepidButton mx_filterFlipColor"> <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
<img src="img/cancel-small.svg" width="14" height="14" alt={ _t("Remove") } <img src="img/cancel-small.svg" width="14" height="14" alt={_t("Remove")}
onClick={onRemoveClick} /> onClick={onRemoveClick} />
</div> </div>
</div> </div>
@ -1250,16 +1250,16 @@ module.exports = React.createClass({
addEmailSection = ( addEmailSection = (
<div className="mx_UserSettings_profileTableRow" key="_newEmail"> <div className="mx_UserSettings_profileTableRow" key="_newEmail">
<div className="mx_UserSettings_profileLabelCell"> <div className="mx_UserSettings_profileLabelCell">
<label>{_t('Email')}</label> <label>{ _t('Email') }</label>
</div> </div>
<div className="mx_UserSettings_profileInputCell"> <div className="mx_UserSettings_profileInputCell">
<EditableText <EditableText
ref="add_email_input" ref="add_email_input"
className="mx_UserSettings_editable" className="mx_UserSettings_editable"
placeholderClassName="mx_UserSettings_threepidPlaceholder" placeholderClassName="mx_UserSettings_threepidPlaceholder"
placeholder={ _t("Add email address") } placeholder={_t("Add email address")}
blurToCancel={ false } blurToCancel={false}
onValueChanged={ this._onAddEmailEditFinished } /> onValueChanged={this._onAddEmailEditFinished} />
</div> </div>
<div className="mx_UserSettings_threepidButton mx_filterFlipColor"> <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
<img src="img/plus.svg" width="14" height="14" alt={_t("Add")} onClick={this._addEmail} /> <img src="img/plus.svg" width="14" height="14" alt={_t("Add")} onClick={this._addEmail} />
@ -1307,8 +1307,8 @@ module.exports = React.createClass({
return ( return (
<div className="mx_UserSettings"> <div className="mx_UserSettings">
<SimpleRoomHeader <SimpleRoomHeader
title={ _t("Settings") } title={_t("Settings")}
onCancelClick={ this.props.onClose } onCancelClick={this.props.onClose}
/> />
<GeminiScrollbar className="mx_UserSettings_body" <GeminiScrollbar className="mx_UserSettings_body"
@ -1326,21 +1326,21 @@ module.exports = React.createClass({
<ChangeDisplayName /> <ChangeDisplayName />
</div> </div>
</div> </div>
{threepidsSection} { threepidsSection }
</div> </div>
<div className="mx_UserSettings_avatarPicker"> <div className="mx_UserSettings_avatarPicker">
<div onClick={ this.onAvatarPickerClick }> <div onClick={this.onAvatarPickerClick}>
<ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl} <ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl}
showUploadSection={false} className="mx_UserSettings_avatarPicker_img"/> showUploadSection={false} className="mx_UserSettings_avatarPicker_img" />
</div> </div>
<div className="mx_UserSettings_avatarPicker_edit"> <div className="mx_UserSettings_avatarPicker_edit">
<label htmlFor="avatarInput" ref="file_label"> <label htmlFor="avatarInput" ref="file_label">
<img src="img/camera.svg" className="mx_filterFlipColor" <img src="img/camera.svg" className="mx_filterFlipColor"
alt={ _t("Upload avatar") } title={ _t("Upload avatar") } alt={_t("Upload avatar")} title={_t("Upload avatar")}
width="17" height="15" /> width="17" height="15" />
</label> </label>
<input id="avatarInput" type="file" onChange={this.onAvatarSelected}/> <input id="avatarInput" type="file" onChange={this.onAvatarSelected} />
</div> </div>
</div> </div>
</div> </div>
@ -1357,37 +1357,37 @@ module.exports = React.createClass({
</div> : null </div> : null
} }
{accountJsx} { accountJsx }
</div> </div>
{this._renderReferral()} { this._renderReferral() }
{notificationArea} { notificationArea }
{this._renderUserInterfaceSettings()} { this._renderUserInterfaceSettings() }
{this._renderLabs()} { this._renderLabs() }
{this._renderWebRtcSettings()} { this._renderWebRtcSettings() }
{this._renderDevicesPanel()} { this._renderDevicesPanel() }
{this._renderCryptoInfo()} { this._renderCryptoInfo() }
{this._renderIgnoredUsers()} { this._renderIgnoredUsers() }
{this._renderBulkOptions()} { this._renderBulkOptions() }
{this._renderBugReport()} { this._renderBugReport() }
{PlatformPeg.get().isElectron() && this._renderElectronSettings()} { PlatformPeg.get().isElectron() && this._renderElectronSettings() }
{this._renderAnalyticsControl()} { this._renderAnalyticsControl() }
<h3>{ _t("Advanced") }</h3> <h3>{ _t("Advanced") }</h3>
<div className="mx_UserSettings_section"> <div className="mx_UserSettings_section">
<div className="mx_UserSettings_advanced"> <div className="mx_UserSettings_advanced">
{ _t("Logged in as:") } {this._me} { _t("Logged in as:") } { this._me }
</div> </div>
<div className="mx_UserSettings_advanced"> <div className="mx_UserSettings_advanced">
{_t('Access Token:')} { _t('Access Token:') }
<span className="mx_UserSettings_advanced_spoiler" <span className="mx_UserSettings_advanced_spoiler"
onClick={this._showSpoiler} onClick={this._showSpoiler}
data-spoiler={ MatrixClientPeg.get().getAccessToken() }> data-spoiler={MatrixClientPeg.get().getAccessToken()}>
&lt;{ _t("click to reveal") }&gt; &lt;{ _t("click to reveal") }&gt;
</span> </span>
</div> </div>
@ -1398,23 +1398,23 @@ module.exports = React.createClass({
{ _t("Identity Server is") } { MatrixClientPeg.get().getIdentityServerUrl() } { _t("Identity Server is") } { MatrixClientPeg.get().getIdentityServerUrl() }
</div> </div>
<div className="mx_UserSettings_advanced"> <div className="mx_UserSettings_advanced">
{_t('matrix-react-sdk version:')} {(REACT_SDK_VERSION !== '<local>') { _t('matrix-react-sdk version:') } { (REACT_SDK_VERSION !== '<local>')
? gHVersionLabel('matrix-org/matrix-react-sdk', REACT_SDK_VERSION) ? gHVersionLabel('matrix-org/matrix-react-sdk', REACT_SDK_VERSION)
: REACT_SDK_VERSION : REACT_SDK_VERSION
}<br/> }<br />
{_t('riot-web version:')} {(this.state.vectorVersion !== undefined) { _t('riot-web version:') } { (this.state.vectorVersion !== undefined)
? gHVersionLabel('vector-im/riot-web', this.state.vectorVersion) ? gHVersionLabel('vector-im/riot-web', this.state.vectorVersion)
: 'unknown' : 'unknown'
}<br/> }<br />
{ _t("olm version:") } {olmVersionString}<br/> { _t("olm version:") } { olmVersionString }<br />
</div> </div>
</div> </div>
{this._renderCheckUpdate()} { this._renderCheckUpdate() }
{this._renderClearCache()} { this._renderClearCache() }
{this._renderDeactivateAccount()} { this._renderDeactivateAccount() }
</GeminiScrollbar> </GeminiScrollbar>
</div> </div>

20
src/components/views/dialogs/AddressPickerDialog.js
View file

@ -495,7 +495,7 @@ module.exports = React.createClass({
const AddressTile = sdk.getComponent("elements.AddressTile"); const AddressTile = sdk.getComponent("elements.AddressTile");
for (let i = 0; i < this.state.userList.length; i++) { for (let i = 0; i < this.state.userList.length; i++) {
query.push( query.push(
<AddressTile key={i} address={this.state.userList[i]} canDismiss={true} onDismissed={ this.onDismissed(i) } />, <AddressTile key={i} address={this.state.userList[i]} canDismiss={true} onDismissed={this.onDismissed(i)} />,
); );
} }
} }
@ -529,24 +529,24 @@ module.exports = React.createClass({
validTypesList: validTypeDescriptions.join(", "), validTypesList: validTypeDescriptions.join(", "),
}); });
error = <div className="mx_ChatInviteDialog_error"> error = <div className="mx_ChatInviteDialog_error">
{_t("You have entered an invalid address.")} { _t("You have entered an invalid address.") }
<br /> <br />
{tryUsing} { tryUsing }
</div>; </div>;
} else if (this.state.searchError) { } else if (this.state.searchError) {
error = <div className="mx_ChatInviteDialog_error">{this.state.searchError}</div>; error = <div className="mx_ChatInviteDialog_error">{ this.state.searchError }</div>;
} else if ( } else if (
this.state.query.length > 0 && this.state.query.length > 0 &&
this.state.queryList.length === 0 && this.state.queryList.length === 0 &&
!this.state.busy !this.state.busy
) { ) {
error = <div className="mx_ChatInviteDialog_error">{_t("No results")}</div>; error = <div className="mx_ChatInviteDialog_error">{ _t("No results") }</div>;
} else { } else {
addressSelector = ( addressSelector = (
<AddressSelector ref={(ref) => {this.addressSelector = ref;}} <AddressSelector ref={(ref) => {this.addressSelector = ref;}}
addressList={ this.state.queryList } addressList={this.state.queryList}
onSelected={ this.onSelected } onSelected={this.onSelected}
truncateAt={ TRUNCATE_QUERY_LIST } truncateAt={TRUNCATE_QUERY_LIST}
/> />
); );
} }
@ -554,7 +554,7 @@ module.exports = React.createClass({
return ( return (
<div className="mx_ChatInviteDialog" onKeyDown={this.onKeyDown}> <div className="mx_ChatInviteDialog" onKeyDown={this.onKeyDown}>
<div className="mx_Dialog_title"> <div className="mx_Dialog_title">
{this.props.title} { this.props.title }
</div> </div>
<AccessibleButton className="mx_ChatInviteDialog_cancel" <AccessibleButton className="mx_ChatInviteDialog_cancel"
onClick={this.onCancel} > onClick={this.onCancel} >
@ -570,7 +570,7 @@ module.exports = React.createClass({
</div> </div>
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
<button className="mx_Dialog_primary" onClick={this.onButtonClick}> <button className="mx_Dialog_primary" onClick={this.onButtonClick}>
{this.props.button} { this.props.button }
</button> </button>
</div> </div>
</div> </div>

10
src/components/views/dialogs/ConfirmRedactDialog.js
View file

@ -52,20 +52,20 @@ export default React.createClass({
return ( return (
<BaseDialog className="mx_ConfirmUserActionDialog" onFinished={this.props.onFinished} <BaseDialog className="mx_ConfirmUserActionDialog" onFinished={this.props.onFinished}
onEnterPressed={ this.onOk } onEnterPressed={this.onOk}
title={title} title={title}
> >
<div className="mx_Dialog_content"> <div className="mx_Dialog_content">
{_t("Are you sure you wish to remove (delete) this event? " + { _t("Are you sure you wish to remove (delete) this event? " +
"Note that if you delete a room name or topic change, it could undo the change.")} "Note that if you delete a room name or topic change, it could undo the change.") }
</div> </div>
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
<button className={confirmButtonClass} onClick={this.onOk}> <button className={confirmButtonClass} onClick={this.onOk}>
{_t("Remove")} { _t("Remove") }
</button> </button>
<button onClick={this.onCancel}> <button onClick={this.onCancel}>
{_t("Cancel")} { _t("Cancel") }
</button> </button>
</div> </div>
</BaseDialog> </BaseDialog>

14
src/components/views/dialogs/ConfirmUserActionDialog.js
View file

@ -88,7 +88,7 @@ export default React.createClass({
<form onSubmit={this.onOk}> <form onSubmit={this.onOk}>
<input className="mx_ConfirmUserActionDialog_reasonField" <input className="mx_ConfirmUserActionDialog_reasonField"
ref={this._collectReasonField} ref={this._collectReasonField}
placeholder={ _t("Reason") } placeholder={_t("Reason")}
autoFocus={true} autoFocus={true}
/> />
</form> </form>
@ -112,22 +112,22 @@ export default React.createClass({
return ( return (
<BaseDialog className="mx_ConfirmUserActionDialog" onFinished={this.props.onFinished} <BaseDialog className="mx_ConfirmUserActionDialog" onFinished={this.props.onFinished}
onEnterPressed={ this.onOk } onEnterPressed={this.onOk}
title={title} title={title}
> >
<div className="mx_Dialog_content"> <div className="mx_Dialog_content">
<div className="mx_ConfirmUserActionDialog_avatar"> <div className="mx_ConfirmUserActionDialog_avatar">
{avatar} { avatar }
</div> </div>
<div className="mx_ConfirmUserActionDialog_name">{name}</div> <div className="mx_ConfirmUserActionDialog_name">{ name }</div>
<div className="mx_ConfirmUserActionDialog_userId">{userId}</div> <div className="mx_ConfirmUserActionDialog_userId">{ userId }</div>
</div> </div>
{reasonBox} { reasonBox }
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
<button className={confirmButtonClass} <button className={confirmButtonClass}
onClick={this.onOk} autoFocus={!this.props.askReason} onClick={this.onOk} autoFocus={!this.props.askReason}
> >
{this.props.action} { this.props.action }
</button> </button>
<button onClick={this.onCancel}> <button onClick={this.onCancel}>

12
src/components/views/dialogs/CreateGroupDialog.js
View file

@ -142,8 +142,8 @@ export default React.createClass({
// rather than displaying what the server gives us, but synapse doesn't give // rather than displaying what the server gives us, but synapse doesn't give
// any yet. // any yet.
createErrorNode = <div className="error"> createErrorNode = <div className="error">
<div>{_t('Room creation failed')}</div> <div>{ _t('Room creation failed') }</div>
<div>{this.state.createError.message}</div> <div>{ this.state.createError.message }</div>
</div>; </div>;
} }
@ -156,7 +156,7 @@ export default React.createClass({
<div className="mx_Dialog_content"> <div className="mx_Dialog_content">
<div className="mx_CreateGroupDialog_inputRow"> <div className="mx_CreateGroupDialog_inputRow">
<div className="mx_CreateGroupDialog_label"> <div className="mx_CreateGroupDialog_label">
<label htmlFor="groupname">{_t('Group Name')}</label> <label htmlFor="groupname">{ _t('Group Name') }</label>
</div> </div>
<div> <div>
<input id="groupname" className="mx_CreateGroupDialog_input" <input id="groupname" className="mx_CreateGroupDialog_input"
@ -169,7 +169,7 @@ export default React.createClass({
</div> </div>
<div className="mx_CreateGroupDialog_inputRow"> <div className="mx_CreateGroupDialog_inputRow">
<div className="mx_CreateGroupDialog_label"> <div className="mx_CreateGroupDialog_label">
<label htmlFor="groupid">{_t('Group ID')}</label> <label htmlFor="groupid">{ _t('Group ID') }</label>
</div> </div>
<div> <div>
<input id="groupid" className="mx_CreateGroupDialog_input" <input id="groupid" className="mx_CreateGroupDialog_input"
@ -182,9 +182,9 @@ export default React.createClass({
</div> </div>
</div> </div>
<div className="error"> <div className="error">
{this.state.groupIdError} { this.state.groupIdError }
</div> </div>
{createErrorNode} { createErrorNode }
</div> </div>
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
<button onClick={this._onCancel}> <button onClick={this._onCancel}>

16
src/components/views/dialogs/DeviceVerifyDialog.js
View file

@ -28,25 +28,25 @@ export default function DeviceVerifyDialog(props) {
const body = ( const body = (
<div> <div>
<p> <p>
{_t("To verify that this device can be trusted, please contact its " + { _t("To verify that this device can be trusted, please contact its " +
"owner using some other means (e.g. in person or a phone call) " + "owner using some other means (e.g. in person or a phone call) " +
"and ask them whether the key they see in their User Settings " + "and ask them whether the key they see in their User Settings " +
"for this device matches the key below:")} "for this device matches the key below:") }
</p> </p>
<div className="mx_UserSettings_cryptoSection"> <div className="mx_UserSettings_cryptoSection">
<ul> <ul>
<li><label>{_t("Device name")}:</label> <span>{ props.device.getDisplayName() }</span></li> <li><label>{ _t("Device name") }:</label> <span>{ props.device.getDisplayName() }</span></li>
<li><label>{_t("Device ID")}:</label> <span><code>{ props.device.deviceId}</code></span></li> <li><label>{ _t("Device ID") }:</label> <span><code>{ props.device.deviceId }</code></span></li>
<li><label>{_t("Device key")}:</label> <span><code><b>{ key }</b></code></span></li> <li><label>{ _t("Device key") }:</label> <span><code><b>{ key }</b></code></span></li>
</ul> </ul>
</div> </div>
<p> <p>
{_t("If it matches, press the verify button below. " + { _t("If it matches, press the verify button below. " +
"If it doesn't, then someone else is intercepting this device " + "If it doesn't, then someone else is intercepting this device " +
"and you probably want to press the blacklist button instead.")} "and you probably want to press the blacklist button instead.") }
</p> </p>
<p> <p>
{_t("In future this verification process will be more sophisticated.")} { _t("In future this verification process will be more sophisticated.") }
</p> </p>
</div> </div>
); );

4
src/components/views/dialogs/ErrorDialog.js
View file

@ -63,11 +63,11 @@ export default React.createClass({
<BaseDialog className="mx_ErrorDialog" onFinished={this.props.onFinished} <BaseDialog className="mx_ErrorDialog" onFinished={this.props.onFinished}
title={this.props.title || _t('Error')}> title={this.props.title || _t('Error')}>
<div className="mx_Dialog_content"> <div className="mx_Dialog_content">
{this.props.description || _t('An error has occurred.')} { this.props.description || _t('An error has occurred.') }
</div> </div>
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
<button ref="button" className="mx_Dialog_primary" onClick={this.props.onFinished}> <button ref="button" className="mx_Dialog_primary" onClick={this.props.onFinished}>
{this.props.button || _t('OK')} { this.props.button || _t('OK') }
</button> </button>
</div> </div>
</BaseDialog> </BaseDialog>

12
src/components/views/dialogs/KeyShareDialog.js
View file

@ -126,17 +126,17 @@ export default React.createClass({
return ( return (
<div> <div>
<p>{text}</p> <p>{ text }</p>
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
<button onClick={this._onVerifyClicked}> <button onClick={this._onVerifyClicked}>
{_t('Start verification')} { _t('Start verification') }
</button> </button>
<button onClick={this._onShareClicked}> <button onClick={this._onShareClicked}>
{_t('Share without verifying')} { _t('Share without verifying') }
</button> </button>
<button onClick={this._onIgnoreClicked}> <button onClick={this._onIgnoreClicked}>
{_t('Ignore request')} { _t('Ignore request') }
</button> </button>
</div> </div>
</div> </div>
@ -154,7 +154,7 @@ export default React.createClass({
} else { } else {
content = ( content = (
<div> <div>
<p>{_t('Loading device info...')}</p> <p>{ _t('Loading device info...') }</p>
<Spinner /> <Spinner />
</div> </div>
); );
@ -165,7 +165,7 @@ export default React.createClass({
onFinished={this.props.onFinished} onFinished={this.props.onFinished}
title={_t('Encryption key request')} title={_t('Encryption key request')}
> >
{content} { content }
</BaseDialog> </BaseDialog>
); );
}, },

12
src/components/views/dialogs/QuestionDialog.js
View file

@ -55,7 +55,7 @@ export default React.createClass({
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const cancelButton = this.props.hasCancelButton ? ( const cancelButton = this.props.hasCancelButton ? (
<button onClick={this.onCancel}> <button onClick={this.onCancel}>
{_t("Cancel")} { _t("Cancel") }
</button> </button>
) : null; ) : null;
const buttonClasses = classnames({ const buttonClasses = classnames({
@ -64,18 +64,18 @@ export default React.createClass({
}); });
return ( return (
<BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished} <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished}
onEnterPressed={ this.onOk } onEnterPressed={this.onOk}
title={this.props.title} title={this.props.title}
> >
<div className="mx_Dialog_content"> <div className="mx_Dialog_content">
{this.props.description} { this.props.description }
</div> </div>
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
<button className={buttonClasses} onClick={this.onOk} autoFocus={this.props.focus}> <button className={buttonClasses} onClick={this.onOk} autoFocus={this.props.focus}>
{this.props.button || _t('OK')} { this.props.button || _t('OK') }
</button> </button>
{this.props.extraButtons} { this.props.extraButtons }
{cancelButton} { cancelButton }
</div> </div>
</BaseDialog> </BaseDialog>
); );

18
src/components/views/dialogs/SessionRestoreErrorDialog.js
View file

@ -45,10 +45,10 @@ export default React.createClass({
if (SdkConfig.get().bug_report_endpoint_url) { if (SdkConfig.get().bug_report_endpoint_url) {
bugreport = ( bugreport = (
<p> <p>
{_tJsx( { _tJsx(
"Otherwise, <a>click here</a> to send a bug report.", "Otherwise, <a>click here</a> to send a bug report.",
/<a>(.*?)<\/a>/, (sub) => <a onClick={this._sendBugReport} key="bugreport" href='#'>{sub}</a>, /<a>(.*?)<\/a>/, (sub) => <a onClick={this._sendBugReport} key="bugreport" href='#'>{ sub }</a>,
)} ) }
</p> </p>
); );
} }
@ -57,19 +57,19 @@ export default React.createClass({
<BaseDialog className="mx_ErrorDialog" onFinished={this.props.onFinished} <BaseDialog className="mx_ErrorDialog" onFinished={this.props.onFinished}
title={_t('Unable to restore session')}> title={_t('Unable to restore session')}>
<div className="mx_Dialog_content"> <div className="mx_Dialog_content">
<p>{_t("We encountered an error trying to restore your previous session. If " + <p>{ _t("We encountered an error trying to restore your previous session. If " +
"you continue, you will need to log in again, and encrypted chat " + "you continue, you will need to log in again, and encrypted chat " +
"history will be unreadable.")}</p> "history will be unreadable.") }</p>
<p>{_t("If you have previously used a more recent version of Riot, your session " + <p>{ _t("If you have previously used a more recent version of Riot, your session " +
"may be incompatible with this version. Close this window and return " + "may be incompatible with this version. Close this window and return " +
"to the more recent version.")}</p> "to the more recent version.") }</p>
{bugreport} { bugreport }
</div> </div>
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
<button className="mx_Dialog_primary" onClick={this._continueClicked}> <button className="mx_Dialog_primary" onClick={this._continueClicked}>
{_t("Continue anyway")} { _t("Continue anyway") }
</button> </button>
</div> </div>
</BaseDialog> </BaseDialog>

6
src/components/views/dialogs/SetEmailDialog.js
View file

@ -130,10 +130,10 @@ export default React.createClass({
const emailInput = this.state.emailBusy ? <Spinner /> : <EditableText const emailInput = this.state.emailBusy ? <Spinner /> : <EditableText
className="mx_SetEmailDialog_email_input" className="mx_SetEmailDialog_email_input"
placeholder={ _t("Email address") } placeholder={_t("Email address")}
placeholderClassName="mx_SetEmailDialog_email_input_placeholder" placeholderClassName="mx_SetEmailDialog_email_input_placeholder"
blurToCancel={ false } blurToCancel={false}
onValueChanged={ this.onEmailAddressChanged } />; onValueChanged={this.onEmailAddressChanged} />;
return ( return (
<BaseDialog className="mx_SetEmailDialog" <BaseDialog className="mx_SetEmailDialog"

12
src/components/views/dialogs/SetMxIdDialog.js
View file

@ -226,7 +226,7 @@ export default React.createClass({
let usernameIndicator = null; let usernameIndicator = null;
let usernameBusyIndicator = null; let usernameBusyIndicator = null;
if (this.state.usernameBusy) { if (this.state.usernameBusy) {
usernameBusyIndicator = <Spinner w="24" h="24"/>; usernameBusyIndicator = <Spinner w="24" h="24" />;
} else { } else {
const usernameAvailable = this.state.username && const usernameAvailable = this.state.username &&
this.state.usernameCheckSupport && !this.state.usernameError; this.state.usernameCheckSupport && !this.state.usernameError;
@ -275,17 +275,17 @@ export default React.createClass({
/<a>(.*?)<\/a>/, /<a>(.*?)<\/a>/,
], ],
[ [
(sub) => <span>{this.props.homeserverUrl}</span>, (sub) => <span>{ this.props.homeserverUrl }</span>,
(sub) => <a href="#" onClick={this.props.onDifferentServerClicked}>{sub}</a>, (sub) => <a href="#" onClick={this.props.onDifferentServerClicked}>{ sub }</a>,
], ],
)} ) }
</p> </p>
<p> <p>
{ _tJsx( { _tJsx(
'If you already have a Matrix account you can <a>log in</a> instead.', 'If you already have a Matrix account you can <a>log in</a> instead.',
/<a>(.*?)<\/a>/, /<a>(.*?)<\/a>/,
[(sub) => <a href="#" onClick={this.props.onLoginClick}>{sub}</a>], [(sub) => <a href="#" onClick={this.props.onLoginClick}>{ sub }</a>],
)} ) }
</p> </p>
{ auth } { auth }
{ authErrorIndicator } { authErrorIndicator }

6
src/components/views/dialogs/TextInputDialog.js
View file

@ -65,10 +65,10 @@ export default React.createClass({
> >
<div className="mx_Dialog_content"> <div className="mx_Dialog_content">
<div className="mx_TextInputDialog_label"> <div className="mx_TextInputDialog_label">
<label htmlFor="textinput"> {this.props.description} </label> <label htmlFor="textinput"> { this.props.description } </label>
</div> </div>
<div> <div>
<input id="textinput" ref="textinput" className="mx_TextInputDialog_input" defaultValue={this.props.value} autoFocus={this.props.focus} size="64" onKeyDown={this.onKeyDown}/> <input id="textinput" ref="textinput" className="mx_TextInputDialog_input" defaultValue={this.props.value} autoFocus={this.props.focus} size="64" onKeyDown={this.onKeyDown} />
</div> </div>
</div> </div>
<div className="mx_Dialog_buttons"> <div className="mx_Dialog_buttons">
@ -76,7 +76,7 @@ export default React.createClass({
{ _t("Cancel") } { _t("Cancel") }
</button> </button>
<button className="mx_Dialog_primary" onClick={this.onOk}> <button className="mx_Dialog_primary" onClick={this.onOk}>
{this.props.button} { this.props.button }
</button> </button>
</div> </div>
</BaseDialog> </BaseDialog>

8
src/components/views/elements/AppPermission.js
View file

@ -50,16 +50,16 @@ export default class AppPermission extends React.Component {
let e2eWarningText; let e2eWarningText;
if (this.props.isRoomEncrypted) { if (this.props.isRoomEncrypted) {
e2eWarningText = e2eWarningText =
<span className='mx_AppPermissionWarningTextLabel'>{_t('NOTE: Apps are not end-to-end encrypted')}</span>; <span className='mx_AppPermissionWarningTextLabel'>{ _t('NOTE: Apps are not end-to-end encrypted') }</span>;
} }
return ( return (
<div className='mx_AppPermissionWarning'> <div className='mx_AppPermissionWarning'>
<div className='mx_AppPermissionWarningImage'> <div className='mx_AppPermissionWarningImage'>
<img src='img/warning.svg' alt={_t('Warning!')}/> <img src='img/warning.svg' alt={_t('Warning!')} />
</div> </div>
<div className='mx_AppPermissionWarningText'> <div className='mx_AppPermissionWarningText'>
<span className='mx_AppPermissionWarningTextLabel'>{_t('Do you want to load widget from URL:')}</span> <span className='mx_AppPermissionWarningTextURL'>{this.state.curlBase}</span> <span className='mx_AppPermissionWarningTextLabel'>{ _t('Do you want to load widget from URL:') }</span> <span className='mx_AppPermissionWarningTextURL'>{ this.state.curlBase }</span>
{e2eWarningText} { e2eWarningText }
</div> </div>
<input <input
className='mx_AppPermissionButton' className='mx_AppPermissionButton'

14
src/components/views/elements/AppTile.js
View file

@ -261,7 +261,7 @@ export default React.createClass({
if (this.state.loading) { if (this.state.loading) {
appTileBody = ( appTileBody = (
<div className='mx_AppTileBody mx_AppLoading'> <div className='mx_AppTileBody mx_AppLoading'>
<MessageSpinner msg='Loading...'/> <MessageSpinner msg='Loading...' />
</div> </div>
); );
} else if (this.state.hasPermissionToLoad == true) { } else if (this.state.hasPermissionToLoad == true) {
@ -312,19 +312,19 @@ export default React.createClass({
return ( return (
<div className={this.props.fullWidth ? "mx_AppTileFullWidth" : "mx_AppTile"} id={this.props.id}> <div className={this.props.fullWidth ? "mx_AppTileFullWidth" : "mx_AppTile"} id={this.props.id}>
<div ref="menu_bar" className="mx_AppTileMenuBar" onClick={this.onClickMenuBar}> <div ref="menu_bar" className="mx_AppTileMenuBar" onClick={this.onClickMenuBar}>
{this.formatAppTileName()} { this.formatAppTileName() }
<span className="mx_AppTileMenuBarWidgets"> <span className="mx_AppTileMenuBarWidgets">
{/* Edit widget */} { /* Edit widget */ }
{showEditButton && <img { showEditButton && <img
src="img/edit.svg" src="img/edit.svg"
className="mx_filterFlipColor mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding" className="mx_filterFlipColor mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
width="8" height="8" width="8" height="8"
alt={_t('Edit')} alt={_t('Edit')}
title={_t('Edit')} title={_t('Edit')}
onClick={this._onEditClick} onClick={this._onEditClick}
/>} /> }
{/* Delete widget */} { /* Delete widget */ }
<img src={deleteIcon} <img src={deleteIcon}
className={deleteClasses} className={deleteClasses}
width="8" height="8" width="8" height="8"
@ -334,7 +334,7 @@ export default React.createClass({
/> />
</span> </span>
</div> </div>
{appTileBody} { appTileBody }
</div> </div>
); );
}, },

4
src/components/views/elements/AppWarning.js
View file

@ -6,10 +6,10 @@ const AppWarning = (props) => {
return ( return (
<div className='mx_AppPermissionWarning'> <div className='mx_AppPermissionWarning'>
<div className='mx_AppPermissionWarningImage'> <div className='mx_AppPermissionWarningImage'>
<img src='img/warning.svg' alt={_t('Warning!')}/> <img src='img/warning.svg' alt={_t('Warning!')} />
</div> </div>
<div className='mx_AppPermissionWarningText'> <div className='mx_AppPermissionWarningText'>
<span className='mx_AppPermissionWarningTextLabel'>{props.errorMsg}</span> <span className='mx_AppPermissionWarningTextLabel'>{ props.errorMsg }</span>
</div> </div>
</div> </div>
); );

4
src/components/views/elements/Flair.js
View file

@ -238,11 +238,11 @@ export default class Flair extends React.Component {
return <div />; return <div />;
} }
const avatars = this.state.profiles.map((profile, index) => { const avatars = this.state.profiles.map((profile, index) => {
return <FlairAvatar key={index} groupProfile={profile}/>; return <FlairAvatar key={index} groupProfile={profile} />;
}); });
return ( return (
<span className="mx_Flair" style={{"marginLeft": "5px", "verticalAlign": "-3px"}}> <span className="mx_Flair" style={{"marginLeft": "5px", "verticalAlign": "-3px"}}>
{avatars} { avatars }
</span> </span>
); );
} }

6
src/components/views/elements/ManageIntegsButton.js
View file

@ -80,7 +80,7 @@ export default class ManageIntegsButton extends React.Component {
}); });
if (this.state.scalarError && !this.scalarClient.hasCredentials()) { if (this.state.scalarError && !this.scalarClient.hasCredentials()) {
integrationsWarningTriangle = <img src="img/warning.svg" title={_t('Integrations Error')} width="17"/>; integrationsWarningTriangle = <img src="img/warning.svg" title={_t('Integrations Error')} width="17" />;
// Popup shown when hovering over integrationsButton_error (via CSS) // Popup shown when hovering over integrationsButton_error (via CSS)
integrationsErrorPopup = ( integrationsErrorPopup = (
<span className="mx_RoomSettings_integrationsButton_errorPopup"> <span className="mx_RoomSettings_integrationsButton_errorPopup">
@ -90,8 +90,8 @@ export default class ManageIntegsButton extends React.Component {
} }
integrationsButton = ( integrationsButton = (
<AccessibleButton className={integrationsButtonClasses} onClick={this.onManageIntegrations} title={ _t('Manage Integrations') }> <AccessibleButton className={integrationsButtonClasses} onClick={this.onManageIntegrations} title={_t('Manage Integrations')}>
<TintableSvg src="img/icons-apps.svg" width="35" height="35"/> <TintableSvg src="img/icons-apps.svg" width="35" height="35" />
{ integrationsWarningTriangle } { integrationsWarningTriangle }
{ integrationsErrorPopup } { integrationsErrorPopup }
</AccessibleButton> </AccessibleButton>

4
src/components/views/elements/MessageSpinner.js
View file

@ -26,8 +26,8 @@ module.exports = React.createClass({
const msg = this.props.msg || "Loading..."; const msg = this.props.msg || "Loading...";
return ( return (
<div className="mx_Spinner"> <div className="mx_Spinner">
<div className="mx_Spinner_Msg">{msg}</div>&nbsp; <div className="mx_Spinner_Msg">{ msg }</div>&nbsp;
<img src="img/spinner.gif" width={w} height={h} className={imgClass}/> <img src="img/spinner.gif" width={w} height={h} className={imgClass} />
</div> </div>
); );
}, },

12
src/components/views/elements/Pill.js
View file

@ -167,7 +167,7 @@ const Pill = React.createClass({
userId = member.userId; userId = member.userId;
linkText = member.rawDisplayName.replace(' (IRC)', ''); // FIXME when groups are done linkText = member.rawDisplayName.replace(' (IRC)', ''); // FIXME when groups are done
if (this.props.shouldShowPillAvatar) { if (this.props.shouldShowPillAvatar) {
avatar = <MemberAvatar member={member} width={16} height={16}/>; avatar = <MemberAvatar member={member} width={16} height={16} />;
} }
pillClass = 'mx_UserPill'; pillClass = 'mx_UserPill';
href = null; href = null;
@ -180,7 +180,7 @@ const Pill = React.createClass({
if (room) { if (room) {
linkText = (room ? getDisplayAliasForRoom(room) : null) || resource; linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
if (this.props.shouldShowPillAvatar) { if (this.props.shouldShowPillAvatar) {
avatar = <RoomAvatar room={room} width={16} height={16}/>; avatar = <RoomAvatar room={room} width={16} height={16} />;
} }
pillClass = 'mx_RoomPill'; pillClass = 'mx_RoomPill';
} }
@ -195,12 +195,12 @@ const Pill = React.createClass({
if (this.state.pillType) { if (this.state.pillType) {
return this.props.inMessage ? return this.props.inMessage ?
<a className={classes} href={href} onClick={onClick} title={resource} data-offset-key={this.props.offsetKey}> <a className={classes} href={href} onClick={onClick} title={resource} data-offset-key={this.props.offsetKey}>
{avatar} { avatar }
{linkText} { linkText }
</a> : </a> :
<span className={classes} title={resource} data-offset-key={this.props.offsetKey}> <span className={classes} title={resource} data-offset-key={this.props.offsetKey}>
{avatar} { avatar }
{linkText} { linkText }
</span>; </span>;
} else { } else {
// Deliberately render nothing if the URL isn't recognised // Deliberately render nothing if the URL isn't recognised

6
src/components/views/elements/TruncatedList.js
View file

@ -46,7 +46,7 @@ module.exports = React.createClass({
truncateAt: 2, truncateAt: 2,
createOverflowElement: function(overflowCount, totalCount) { createOverflowElement: function(overflowCount, totalCount) {
return ( return (
<div>{_t("And %(count)s more...", {count: overflowCount})}</div> <div>{ _t("And %(count)s more...", {count: overflowCount}) }</div>
); );
}, },
}; };
@ -93,8 +93,8 @@ module.exports = React.createClass({
return ( return (
<div className={this.props.className}> <div className={this.props.className}>
{childNodes} { childNodes }
{overflowNode} { overflowNode }
</div> </div>
); );
}, },

8
src/components/views/groups/GroupInviteTile.js
View file

@ -50,7 +50,7 @@ export default React.createClass({
className="mx_GroupInviteTile_name" className="mx_GroupInviteTile_name"
dir="auto" dir="auto"
> >
{this.props.group.name} { this.props.group.name }
</EmojiText>; </EmojiText>;
const badge = <div className="mx_GroupInviteTile_badge">!</div>; const badge = <div className="mx_GroupInviteTile_badge">!</div>;
@ -58,11 +58,11 @@ export default React.createClass({
return ( return (
<AccessibleButton className="mx_GroupInviteTile" onClick={this.onClick}> <AccessibleButton className="mx_GroupInviteTile" onClick={this.onClick}>
<div className="mx_GroupInviteTile_avatarContainer"> <div className="mx_GroupInviteTile_avatarContainer">
{av} { av }
</div> </div>
<div className="mx_GroupInviteTile_nameContainer"> <div className="mx_GroupInviteTile_nameContainer">
{label} { label }
{badge} { badge }
</div> </div>
</AccessibleButton> </AccessibleButton>
); );

14
src/components/views/groups/GroupMemberInfo.js
View file

@ -128,7 +128,7 @@ module.exports = withMatrixClient(React.createClass({
kickButton = ( kickButton = (
<AccessibleButton className="mx_MemberInfo_field" <AccessibleButton className="mx_MemberInfo_field"
onClick={this._onKick}> onClick={this._onKick}>
{_t('Remove from group')} { _t('Remove from group') }
</AccessibleButton> </AccessibleButton>
); );
@ -143,11 +143,11 @@ module.exports = withMatrixClient(React.createClass({
if (kickButton || adminButton) { if (kickButton || adminButton) {
adminTools = adminTools =
<div className="mx_MemberInfo_adminTools"> <div className="mx_MemberInfo_adminTools">
<h3>{_t("Admin Tools")}</h3> <h3>{ _t("Admin Tools") }</h3>
<div className="mx_MemberInfo_buttons"> <div className="mx_MemberInfo_buttons">
{kickButton} { kickButton }
{adminButton} { adminButton }
</div> </div>
</div>; </div>;
} }
@ -173,13 +173,13 @@ module.exports = withMatrixClient(React.createClass({
<div className="mx_MemberInfo"> <div className="mx_MemberInfo">
<GeminiScrollbar autoshow={true}> <GeminiScrollbar autoshow={true}>
<AccessibleButton className="mx_MemberInfo_cancel"onClick={this._onCancel}> <AccessibleButton className="mx_MemberInfo_cancel"onClick={this._onCancel}>
<img src="img/cancel.svg" width="18" height="18"/> <img src="img/cancel.svg" width="18" height="18" />
</AccessibleButton> </AccessibleButton>
<div className="mx_MemberInfo_avatar"> <div className="mx_MemberInfo_avatar">
{avatar} { avatar }
</div> </div>
<EmojiText element="h2">{groupMemberName}</EmojiText> <EmojiText element="h2">{ groupMemberName }</EmojiText>
<div className="mx_MemberInfo_profile"> <div className="mx_MemberInfo_profile">
<div className="mx_MemberInfo_profileField"> <div className="mx_MemberInfo_profileField">

4
src/components/views/groups/GroupMemberList.js
View file

@ -135,7 +135,7 @@ export default withMatrixClient(React.createClass({
<form autoComplete="off"> <form autoComplete="off">
<input className="mx_GroupMemberList_query" id="mx_GroupMemberList_query" type="text" <input className="mx_GroupMemberList_query" id="mx_GroupMemberList_query" type="text"
onChange={this.onSearchQueryChanged} value={this.state.searchQuery} onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
placeholder={ _t('Filter group members') } /> placeholder={_t('Filter group members')} />
</form> </form>
); );
@ -146,7 +146,7 @@ export default withMatrixClient(React.createClass({
<GeminiScrollbar autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper"> <GeminiScrollbar autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
<TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt} <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt}
createOverflowElement={this._createOverflowTile}> createOverflowElement={this._createOverflowTile}>
{this.makeGroupMemberTiles(this.state.searchQuery)} { this.makeGroupMemberTiles(this.state.searchQuery) }
</TruncatedList> </TruncatedList>
</GeminiScrollbar> </GeminiScrollbar>
</div> </div>

4
src/components/views/groups/GroupRoomList.js
View file

@ -123,7 +123,7 @@ export default React.createClass({
<form autoComplete="off"> <form autoComplete="off">
<input className="mx_GroupRoomList_query" id="mx_GroupRoomList_query" type="text" <input className="mx_GroupRoomList_query" id="mx_GroupRoomList_query" type="text"
onChange={this.onSearchQueryChanged} value={this.state.searchQuery} onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
placeholder={ _t('Filter group rooms') } /> placeholder={_t('Filter group rooms')} />
</form> </form>
); );
@ -134,7 +134,7 @@ export default React.createClass({
<GeminiScrollbar autoshow={true} className="mx_GroupRoomList_joined mx_GroupRoomList_outerWrapper"> <GeminiScrollbar autoshow={true} className="mx_GroupRoomList_joined mx_GroupRoomList_outerWrapper">
<TruncatedList className="mx_GroupRoomList_wrapper" truncateAt={this.state.truncateAt} <TruncatedList className="mx_GroupRoomList_wrapper" truncateAt={this.state.truncateAt}
createOverflowElement={this._createOverflowTile}> createOverflowElement={this._createOverflowTile}>
{this.makeGroupRoomTiles(this.state.searchQuery)} { this.makeGroupRoomTiles(this.state.searchQuery) }
</TruncatedList> </TruncatedList>
</GeminiScrollbar> </GeminiScrollbar>
</div> </div>

4
src/components/views/groups/GroupRoomTile.js
View file

@ -71,10 +71,10 @@ const GroupRoomTile = React.createClass({
return ( return (
<AccessibleButton className="mx_GroupRoomTile" onClick={this.onClick}> <AccessibleButton className="mx_GroupRoomTile" onClick={this.onClick}>
<div className="mx_GroupRoomTile_avatar"> <div className="mx_GroupRoomTile_avatar">
{av} { av }
</div> </div>
<div className="mx_GroupRoomTile_name"> <div className="mx_GroupRoomTile_name">
{name} { name }
</div> </div>
</AccessibleButton> </AccessibleButton>
); );

2
src/components/views/login/LoginFooter.js
View file

@ -25,7 +25,7 @@ module.exports = React.createClass({
render: function() { render: function() {
return ( return (
<div className="mx_Login_links"> <div className="mx_Login_links">
<a href="https://matrix.org">{_t("powered by Matrix")}</a> <a href="https://matrix.org">{ _t("powered by Matrix") }</a>
</div> </div>
); );
}, },

6
src/components/views/messages/SenderProfile.js
View file

@ -32,9 +32,9 @@ export default function SenderProfile(props) {
return ( return (
<div className="mx_SenderProfile" dir="auto" onClick={props.onClick}> <div className="mx_SenderProfile" dir="auto" onClick={props.onClick}>
<EmojiText className="mx_SenderProfile_name">{name || ''}</EmojiText> <EmojiText className="mx_SenderProfile_name">{ name || '' }</EmojiText>
{props.enableFlair ? <Flair userId={mxEvent.getSender()} /> : null} { props.enableFlair ? <Flair userId={mxEvent.getSender()} /> : null }
{props.aux ? <EmojiText className="mx_SenderProfile_aux"> {props.aux}</EmojiText> : null} { props.aux ? <EmojiText className="mx_SenderProfile_aux"> { props.aux }</EmojiText> : null }
</div> </div>
); );
} }

2
src/components/views/messages/UnknownBody.js
View file

@ -31,7 +31,7 @@ module.exports = React.createClass({
const text = this.props.mxEvent.getContent().body; const text = this.props.mxEvent.getContent().body;
return ( return (
<span className="mx_UnknownBody" title={tooltip}> <span className="mx_UnknownBody" title={tooltip}>
{text} { text }
</span> </span>
); );
}, },

6
src/components/views/rooms/AppsDrawer.js
View file

@ -231,16 +231,16 @@ module.exports = React.createClass({
"mx_AddWidget_button" "mx_AddWidget_button"
} }
title={_t('Add a widget')}> title={_t('Add a widget')}>
[+] {_t('Add a widget')} [+] { _t('Add a widget') }
</div>; </div>;
} }
return ( return (
<div className="mx_AppsDrawer"> <div className="mx_AppsDrawer">
<div id="apps" className="mx_AppsContainer"> <div id="apps" className="mx_AppsContainer">
{apps} { apps }
</div> </div>
{this._canUserModify() && addWidget} { this._canUserModify() && addWidget }
</div> </div>
); );
}, },

2
src/components/views/rooms/ForwardMessage.js
View file

@ -61,7 +61,7 @@ module.exports = React.createClass({
render: function() { render: function() {
return ( return (
<div className="mx_ForwardMessage"> <div className="mx_ForwardMessage">
<h1>{_t('Please select the destination room for this message')}</h1> <h1>{ _t('Please select the destination room for this message') }</h1>
</div> </div>
); );
}, },

38
src/components/views/rooms/RoomHeader.js
View file

@ -186,18 +186,18 @@ module.exports = React.createClass({
saveButton = ( saveButton = (
<AccessibleButton className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}> <AccessibleButton className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>
{_t("Save")} { _t("Save") }
</AccessibleButton> </AccessibleButton>
); );
} }
if (this.props.onCancelClick) { if (this.props.onCancelClick) {
cancelButton = <CancelButton onClick={this.props.onCancelClick}/>; cancelButton = <CancelButton onClick={this.props.onCancelClick} />;
} }
if (this.props.saving) { if (this.props.saving) {
const Spinner = sdk.getComponent("elements.Spinner"); const Spinner = sdk.getComponent("elements.Spinner");
spinner = <div className="mx_RoomHeader_spinner"><Spinner/></div>; spinner = <div className="mx_RoomHeader_spinner"><Spinner /></div>;
} }
if (canSetRoomName) { if (canSetRoomName) {
@ -254,7 +254,7 @@ module.exports = React.createClass({
} }
if (topic) { if (topic) {
topicElement = topicElement =
<div className="mx_RoomHeader_topic" ref="topic" title={ topic } dir="auto">{ topic }</div>; <div className="mx_RoomHeader_topic" ref="topic" title={topic} dir="auto">{ topic }</div>;
} }
} }
@ -262,16 +262,16 @@ module.exports = React.createClass({
if (canSetRoomAvatar) { if (canSetRoomAvatar) {
roomAvatar = ( roomAvatar = (
<div className="mx_RoomHeader_avatarPicker"> <div className="mx_RoomHeader_avatarPicker">
<div onClick={ this.onAvatarPickerClick }> <div onClick={this.onAvatarPickerClick}>
<ChangeAvatar ref="changeAvatar" room={this.props.room} showUploadSection={false} width={48} height={48} /> <ChangeAvatar ref="changeAvatar" room={this.props.room} showUploadSection={false} width={48} height={48} />
</div> </div>
<div className="mx_RoomHeader_avatarPicker_edit"> <div className="mx_RoomHeader_avatarPicker_edit">
<label htmlFor="avatarInput" ref="file_label"> <label htmlFor="avatarInput" ref="file_label">
<img src="img/camera.svg" <img src="img/camera.svg"
alt={ _t("Upload avatar") } title={ _t("Upload avatar") } alt={_t("Upload avatar")} title={_t("Upload avatar")}
width="17" height="15" /> width="17" height="15" />
</label> </label>
<input id="avatarInput" type="file" onChange={ this.onAvatarSelected }/> <input id="avatarInput" type="file" onChange={this.onAvatarSelected} />
</div> </div>
</div> </div>
); );
@ -286,7 +286,7 @@ module.exports = React.createClass({
if (this.props.onSettingsClick) { if (this.props.onSettingsClick) {
settingsButton = settingsButton =
<AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title={_t("Settings")}> <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSettingsClick} title={_t("Settings")}>
<TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/> <TintableSvg src="img/icons-settings-room.svg" width="16" height="16" />
</AccessibleButton>; </AccessibleButton>;
} }
@ -301,24 +301,24 @@ module.exports = React.createClass({
let forgetButton; let forgetButton;
if (this.props.onForgetClick) { if (this.props.onForgetClick) {
forgetButton = forgetButton =
<AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title={ _t("Forget room") }> <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title={_t("Forget room")}>
<TintableSvg src="img/leave.svg" width="26" height="20"/> <TintableSvg src="img/leave.svg" width="26" height="20" />
</AccessibleButton>; </AccessibleButton>;
} }
let searchButton; let searchButton;
if (this.props.onSearchClick && this.props.inRoom) { if (this.props.onSearchClick && this.props.inRoom) {
searchButton = searchButton =
<AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title={ _t("Search") }> <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title={_t("Search")}>
<TintableSvg src="img/icons-search.svg" width="35" height="35"/> <TintableSvg src="img/icons-search.svg" width="35" height="35" />
</AccessibleButton>; </AccessibleButton>;
} }
let rightPanelButtons; let rightPanelButtons;
if (this.props.collapsedRhs) { if (this.props.collapsedRhs) {
rightPanelButtons = rightPanelButtons =
<AccessibleButton className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title={ _t('Show panel') }> <AccessibleButton className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title={_t('Show panel')}>
<TintableSvg src="img/maximise.svg" width="10" height="16"/> <TintableSvg src="img/maximise.svg" width="10" height="16" />
</AccessibleButton>; </AccessibleButton>;
} }
@ -342,7 +342,7 @@ module.exports = React.createClass({
} }
return ( return (
<div className={ "mx_RoomHeader " + (this.props.editing ? "mx_RoomHeader_editing" : "") }> <div className={"mx_RoomHeader " + (this.props.editing ? "mx_RoomHeader_editing" : "")}>
<div className="mx_RoomHeader_wrapper"> <div className="mx_RoomHeader_wrapper">
<div className="mx_RoomHeader_leftRow"> <div className="mx_RoomHeader_leftRow">
<div className="mx_RoomHeader_avatar"> <div className="mx_RoomHeader_avatar">
@ -353,10 +353,10 @@ module.exports = React.createClass({
{ topicElement } { topicElement }
</div> </div>
</div> </div>
{spinner} { spinner }
{saveButton} { saveButton }
{cancelButton} { cancelButton }
{rightRow} { rightRow }
</div> </div>
</div> </div>
); );

2
src/components/views/rooms/SimpleRoomHeader.js
View file

@ -26,7 +26,7 @@ export function CancelButton(props) {
return ( return (
<AccessibleButton className='mx_RoomHeader_cancelButton' onClick={onClick}> <AccessibleButton className='mx_RoomHeader_cancelButton' onClick={onClick}>
<img src="img/cancel.svg" className='mx_filterFlipColor' <img src="img/cancel.svg" className='mx_filterFlipColor'
width="18" height="18" alt={_t("Cancel")}/> width="18" height="18" alt={_t("Cancel")} />
</AccessibleButton> </AccessibleButton>
); );
} }

10
src/components/views/voip/CallView.js
View file

@ -129,17 +129,17 @@ module.exports = React.createClass({
if (this.state.call && this.state.call.type === "voice" && this.props.showVoice) { if (this.state.call && this.state.call.type === "voice" && this.props.showVoice) {
const callRoom = MatrixClientPeg.get().getRoom(this.state.call.roomId); const callRoom = MatrixClientPeg.get().getRoom(this.state.call.roomId);
voice = ( voice = (
<div className="mx_CallView_voice" onClick={ this.props.onClick }> <div className="mx_CallView_voice" onClick={this.props.onClick}>
{_t("Active call (%(roomName)s)", {roomName: callRoom.name})} { _t("Active call (%(roomName)s)", {roomName: callRoom.name}) }
</div> </div>
); );
} }
return ( return (
<div> <div>
<VideoView ref="video" onClick={ this.props.onClick } <VideoView ref="video" onClick={this.props.onClick}
onResize={ this.props.onResize } onResize={this.props.onResize}
maxHeight={ this.props.maxVideoHeight } maxHeight={this.props.maxVideoHeight}
/> />
{ voice } { voice }
</div> </div>

6
src/components/views/voip/IncomingCallBox.js
View file

@ -62,17 +62,17 @@ module.exports = React.createClass({
<div className="mx_IncomingCallBox" id="incomingCallBox"> <div className="mx_IncomingCallBox" id="incomingCallBox">
<img className="mx_IncomingCallBox_chevron" src="img/chevron-left.png" width="9" height="16" /> <img className="mx_IncomingCallBox_chevron" src="img/chevron-left.png" width="9" height="16" />
<div className="mx_IncomingCallBox_title"> <div className="mx_IncomingCallBox_title">
{incomingCallText} { incomingCallText }
</div> </div>
<div className="mx_IncomingCallBox_buttons"> <div className="mx_IncomingCallBox_buttons">
<div className="mx_IncomingCallBox_buttons_cell"> <div className="mx_IncomingCallBox_buttons_cell">
<div className="mx_IncomingCallBox_buttons_decline" onClick={this.onRejectClick}> <div className="mx_IncomingCallBox_buttons_decline" onClick={this.onRejectClick}>
{_t("Decline")} { _t("Decline") }
</div> </div>
</div> </div>
<div className="mx_IncomingCallBox_buttons_cell"> <div className="mx_IncomingCallBox_buttons_cell">
<div className="mx_IncomingCallBox_buttons_accept" onClick={this.onAnswerClick}> <div className="mx_IncomingCallBox_buttons_accept" onClick={this.onAnswerClick}>
{_t("Accept")} { _t("Accept") }
</div> </div>
</div> </div>
</div> </div>

4
src/components/views/voip/VideoView.js
View file

@ -110,13 +110,13 @@ module.exports = React.createClass({
const maxVideoHeight = fullscreenElement ? null : this.props.maxHeight; const maxVideoHeight = fullscreenElement ? null : this.props.maxHeight;
return ( return (
<div className="mx_VideoView" ref={this.setContainer} onClick={ this.props.onClick }> <div className="mx_VideoView" ref={this.setContainer} onClick={this.props.onClick}>
<div className="mx_VideoView_remoteVideoFeed"> <div className="mx_VideoView_remoteVideoFeed">
<VideoFeed ref="remote" onResize={this.props.onResize} <VideoFeed ref="remote" onResize={this.props.onResize}
maxHeight={maxVideoHeight} /> maxHeight={maxVideoHeight} />
</div> </div>
<div className="mx_VideoView_localVideoFeed"> <div className="mx_VideoView_localVideoFeed">
<VideoFeed ref="local"/> <VideoFeed ref="local" />
</div> </div>
</div> </div>
); );