imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

support fixing up dynamically loaded SVGs

Browse source
This commit is contained in:
Matthew Hodgson 2016-01-05 03:34:52 +00:00
parent 555abdae30
commit 001dc8612b
7 changed files with 74 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/views/messages/MFileBody.js
View file

@ -19,6 +19,7 @@ limitations under the License.
var React = require('react');
var filesize = require('filesize');
var MatrixClientPeg = require('../../../MatrixClientPeg');
var dis = require("../../../dispatcher");
module.exports = React.createClass({
displayName: 'MFileBody',
@ -45,6 +46,10 @@ module.exports = React.createClass({
return linkText;
},
onSvgLoad: function(event) {
dis.dispatch({ action: "svg_onload", svg: event.target });
},
render: function() {
var content = this.props.mxEvent.getContent();
var cli = MatrixClientPeg.get();
@ -57,7 +62,7 @@ module.exports = React.createClass({
<span className="mx_MFileBody">
<div className="mx_MImageBody_download">
<a href={cli.mxcUrlToHttp(content.url)} target="_blank">
<img src="img/download.png" width="10" height="12"/>
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/download.svg" width="12" height="14"/>
Download {text}
</a>
</div>

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

@ -118,7 +118,7 @@ module.exports = React.createClass({
</a>
<div className="mx_MImageBody_download">
<a href={cli.mxcUrlToHttp(content.url)} target="_blank">
<img src="img/download.png" width="10" height="12"/>
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/download.svg" width="12" height="14"/>
Download {content.body} ({ content.info && content.info.size ? filesize(content.info.size) : "Unknown size" })
</a>
</div>

10
src/components/views/rooms/MessageComposer.js
View file

@ -457,6 +457,10 @@ module.exports = React.createClass({
});
},
onSvgLoad: function(event) {
dis.dispatch({ action: "svg_onload", svg: event.target });
},
render: function() {
var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId);
var uploadInputStyle = {display: 'none'};
@ -474,11 +478,11 @@ module.exports = React.createClass({
else {
callButton =
<div className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick} title="Voice call">
<object className="mx_Svg" type="image/svg+xml" data="img/voice.svg" width="16" height="26"/>
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/voice.svg" width="16" height="26"/>
</div>
videoCallButton =
<div className="mx_MessageComposer_videocall" onClick={this.onCallClick} title="Video call">
<object className="mx_Svg" type="image/svg+xml" data="img/call.svg" width="30" height="22"/>
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/call.svg" width="30" height="22"/>
</div>
}
@ -493,7 +497,7 @@ module.exports = React.createClass({
<textarea ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder="Type a message..." />
</div>
<div className="mx_MessageComposer_upload" onClick={this.onUploadClick} title="Upload file">
<object className="mx_Svg" type="image/svg+xml" data="img/upload.svg" width="19" height="24"/>
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/upload.svg" width="19" height="24"/>
<input type="file" style={uploadInputStyle} ref="uploadInput" onChange={this.onUploadFileSelected} />
</div>
{ hangupButton }

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

@ -66,6 +66,10 @@ module.exports = React.createClass({
getRoomName: function() {
return this.refs.name_edit.value;
},
onSvgLoad: function(event) {
dis.dispatch({ action: "svg_onload", svg: event.target });
},
render: function() {
var EditableText = sdk.getComponent("elements.EditableText");
@ -136,7 +140,7 @@ module.exports = React.createClass({
if (this.props.onLeaveClick) {
leave_button =
<div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onLeaveClick} title="Leave room">
<object className="mx_Svg" type="image/svg+xml" data="img/leave.svg"
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/leave.svg"
width="26" height="20"/>
</div>;
}
@ -145,7 +149,7 @@ module.exports = React.createClass({
if (this.props.onForgetClick) {
forget_button =
<div className="mx_RoomHeader_button mx_RoomHeader_leaveButton" onClick={this.props.onForgetClick} title="Forget room">
<object className="mx_Svg" type="image/svg+xml" data="img/leave.svg"
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/leave.svg"
width="26" height="20"/>
</div>;
}