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() { render: function() {
var MemberList = sdk.getComponent('rooms.MemberList'); var MemberList = sdk.getComponent('rooms.MemberList');
var TintableSvg = sdk.getComponent("elements.TintableSvg");
var buttonGroup; var buttonGroup;
var panel; var panel;
@ -127,12 +128,12 @@ module.exports = React.createClass({
buttonGroup = buttonGroup =
<div className="mx_RightPanel_headerButtonGroup"> <div className="mx_RightPanel_headerButtonGroup">
<div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }> <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 } { membersBadge }
{ membersHighlight } { membersHighlight }
</div> </div>
<div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files"> <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 } { filesHighlight }
</div> </div>
</div>; </div>;

View file

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