support fixing up dynamically loaded SVGs
This commit is contained in:
Matthew Hodgson
parent
555abdae30
commit
001dc8612b
7 changed files with 74 additions and 25 deletions
|
|
@ -1093,6 +1093,10 @@ module.exports = React.createClass({
|
|||
});
|
||||
},
|
||||
|
||||
onSvgLoad: function(event) {
|
||||
dis.dispatch({ action: "svg_onload", svg: event.target });
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var RoomHeader = sdk.getComponent('rooms.RoomHeader');
|
||||
var MessageComposer = sdk.getComponent('rooms.MessageComposer');
|
||||
|
|
@ -1194,7 +1198,7 @@ module.exports = React.createClass({
|
|||
<div className="mx_RoomView_tabCompleteWrapper">
|
||||
<TabCompleteBar entries={this.tabComplete.peek(6)} />
|
||||
<div className="mx_RoomView_tabCompleteEol" title="->|">
|
||||
<object className="mx_Svg" type="image/svg+xml" data="img/eol.svg" width="22" height="16"/>
|
||||
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/eol.svg" width="22" height="16"/>
|
||||
Auto-complete
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1268,7 +1272,7 @@ module.exports = React.createClass({
|
|||
if (this.state.draggingFile) {
|
||||
fileDropTarget = <div className="mx_RoomView_fileDropTarget">
|
||||
<div className="mx_RoomView_fileDropTargetLabel" title="Drop File Here">
|
||||
<object className="mx_Svg" type="image/svg+xml" data="img/upload-big.svg" width="45" height="59"/><br/>
|
||||
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/upload-big.svg" width="45" height="59"/><br/>
|
||||
Drop File Here
|
||||
</div>
|
||||
</div>;
|
||||
|
|
@ -1306,7 +1310,7 @@ module.exports = React.createClass({
|
|||
if (call.type === "video") {
|
||||
zoomButton = (
|
||||
<div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick} title="Fill screen">
|
||||
<object className="mx_Svg" type="image/svg+xml" data="img/fullscreen.svg" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }}/>
|
||||
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" data="img/fullscreen.svg" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }}/>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
@ -1338,7 +1342,7 @@ module.exports = React.createClass({
|
|||
{ videoMuteButton }
|
||||
{ zoomButton }
|
||||
{ statusBar }
|
||||
<object className="mx_Svg" type="image/svg+xml" className="mx_RoomView_voipChevron" data="img/voip-chevron.svg" width="22" height="17"/>
|
||||
<object onLoad={ this.onSvgLoad } className="mx_Svg" type="image/svg+xml" className="mx_RoomView_voipChevron" data="img/voip-chevron.svg" width="22" height="17"/>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
|
|||
|
|
@ -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>;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue