use factored out TintableSvg component for dynamic SVGs

This commit is contained in:
Matthew Hodgson 2016-01-06 02:11:34 +00:00
parent f9a34d21c8
commit cb29a04674
2 changed files with 6 additions and 5 deletions

View file

@ -100,6 +100,7 @@ module.exports = React.createClass({
render: function() {
var MemberList = sdk.getComponent('rooms.MemberList');
var TintableSvg = sdk.getComponent("elements.TintableSvg");
var buttonGroup;
var panel;
@ -127,12 +128,12 @@ module.exports = React.createClass({
buttonGroup =
<div className="mx_RightPanel_headerButtonGroup">
<div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }>
<object className="mx_Svg" type="image/svg+xml" data="img/members.svg" width="17" height="22"/>
<TintableSvg src="img/members.svg" width="17" height="22"/>
{ membersBadge }
{ membersHighlight }
</div>
<div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files">
<object className="mx_Svg" type="image/svg+xml" data="img/files.svg" width="17" height="22"/>
<TintableSvg src="img/files.svg" width="17" height="22"/>
{ filesHighlight }
</div>
</div>;

View file

@ -267,12 +267,12 @@ var RoomSubList = React.createClass({
},
_getHeaderJsx: function() {
var TintableSvg = sdk.getComponent("elements.TintableSvg");
return (
<h2 onClick={ this.onClick } className="mx_RoomSubList_label">
{ this.props.collapsed ? '' : this.props.label }
<object type="image/svg+xml" className="mx_RoomSubList_chevron mx_Svg"
onLoad={ this.onSvgLoad }
data={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
<TintableSvg className="mx_RoomSubList_chevron"
src={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
width="10" height="10" />
</h2>
);