From 509ea7c4f3dd7adf9cb17cfa86f24ed29f9439dc Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 6 Jan 2016 02:11:07 +0000 Subject: [PATCH] factor out tintable SVGs into their own component, and use plain DOM onload rather than react synthetic events --- src/Tinter.js | 2 +- src/component-index.js | 9 +-- src/components/structures/RoomView.js | 9 +-- src/components/views/elements/TintableSvg.js | 56 +++++++++++++++++++ src/components/views/messages/MFileBody.js | 5 +- src/components/views/messages/MImageBody.js | 3 +- src/components/views/rooms/MessageComposer.js | 7 ++- src/components/views/rooms/RoomHeader.js | 11 ++-- 8 files changed, 82 insertions(+), 20 deletions(-) create mode 100644 src/components/views/elements/TintableSvg.js diff --git a/src/Tinter.js b/src/Tinter.js index b2d7b3347a..039a54bff9 100644 --- a/src/Tinter.js +++ b/src/Tinter.js @@ -102,7 +102,7 @@ function calcCssFixups() { } function calcSvgFixups(nodes) { - var svgs = nodes || document.getElementsByClassName("mx_Svg"); + var svgs = nodes || document.getElementsByClassName("mx_TintableSvg"); var fixups = []; for (var i = 0; i < svgs.length; i++) { diff --git a/src/component-index.js b/src/component-index.js index f10549ce4d..9e1a6ccfcf 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -23,14 +23,14 @@ limitations under the License. module.exports.components = {}; module.exports.components['structures.CreateRoom'] = require('./components/structures/CreateRoom'); -module.exports.components['structures.login.Login'] = require('./components/structures/login/Login'); -module.exports.components['structures.login.PostRegistration'] = require('./components/structures/login/PostRegistration'); -module.exports.components['structures.login.Registration'] = require('./components/structures/login/Registration'); module.exports.components['structures.MatrixChat'] = require('./components/structures/MatrixChat'); module.exports.components['structures.RoomView'] = require('./components/structures/RoomView'); module.exports.components['structures.ScrollPanel'] = require('./components/structures/ScrollPanel'); module.exports.components['structures.UploadBar'] = require('./components/structures/UploadBar'); module.exports.components['structures.UserSettings'] = require('./components/structures/UserSettings'); +module.exports.components['structures.login.Login'] = require('./components/structures/login/Login'); +module.exports.components['structures.login.PostRegistration'] = require('./components/structures/login/PostRegistration'); +module.exports.components['structures.login.Registration'] = require('./components/structures/login/Registration'); module.exports.components['views.avatars.MemberAvatar'] = require('./components/views/avatars/MemberAvatar'); module.exports.components['views.avatars.RoomAvatar'] = require('./components/views/avatars/RoomAvatar'); module.exports.components['views.create_room.CreateRoomButton'] = require('./components/views/create_room/CreateRoomButton'); @@ -41,6 +41,7 @@ module.exports.components['views.dialogs.LogoutPrompt'] = require('./components/ module.exports.components['views.dialogs.QuestionDialog'] = require('./components/views/dialogs/QuestionDialog'); module.exports.components['views.elements.EditableText'] = require('./components/views/elements/EditableText'); module.exports.components['views.elements.ProgressBar'] = require('./components/views/elements/ProgressBar'); +module.exports.components['views.elements.TintableSvg'] = require('./components/views/elements/TintableSvg'); module.exports.components['views.elements.UserSelector'] = require('./components/views/elements/UserSelector'); module.exports.components['views.login.CaptchaForm'] = require('./components/views/login/CaptchaForm'); module.exports.components['views.login.CasLogin'] = require('./components/views/login/CasLogin'); @@ -50,10 +51,10 @@ module.exports.components['views.login.LoginHeader'] = require('./components/vie module.exports.components['views.login.PasswordLogin'] = require('./components/views/login/PasswordLogin'); module.exports.components['views.login.RegistrationForm'] = require('./components/views/login/RegistrationForm'); module.exports.components['views.login.ServerConfig'] = require('./components/views/login/ServerConfig'); -module.exports.components['views.messages.MessageEvent'] = require('./components/views/messages/MessageEvent'); module.exports.components['views.messages.MFileBody'] = require('./components/views/messages/MFileBody'); module.exports.components['views.messages.MImageBody'] = require('./components/views/messages/MImageBody'); module.exports.components['views.messages.MVideoBody'] = require('./components/views/messages/MVideoBody'); +module.exports.components['views.messages.MessageEvent'] = require('./components/views/messages/MessageEvent'); module.exports.components['views.messages.TextualBody'] = require('./components/views/messages/TextualBody'); module.exports.components['views.messages.TextualEvent'] = require('./components/views/messages/TextualEvent'); module.exports.components['views.messages.UnknownBody'] = require('./components/views/messages/UnknownBody'); diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 387ed4b409..d206a06add 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -1104,6 +1104,7 @@ module.exports = React.createClass({ var RoomSettings = sdk.getComponent("rooms.RoomSettings"); var SearchBar = sdk.getComponent("rooms.SearchBar"); var ScrollPanel = sdk.getComponent("structures.ScrollPanel"); + var TintableSvg = sdk.getComponent("elements.TintableSvg"); if (!this.state.room) { if (this.props.roomId) { @@ -1198,7 +1199,7 @@ module.exports = React.createClass({
- + Auto-complete @@ -1272,7 +1273,7 @@ module.exports = React.createClass({ if (this.state.draggingFile) { fileDropTarget =
-
+
Drop File Here ; @@ -1310,7 +1311,7 @@ module.exports = React.createClass({ if (call.type === "video") { zoomButton = (
- + ); @@ -1342,7 +1343,7 @@ module.exports = React.createClass({ { videoMuteButton } { zoomButton } { statusBar } - + } diff --git a/src/components/views/elements/TintableSvg.js b/src/components/views/elements/TintableSvg.js new file mode 100644 index 0000000000..a4b66d8114 --- /dev/null +++ b/src/components/views/elements/TintableSvg.js @@ -0,0 +1,56 @@ +/* +Copyright 2015 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +'use strict'; + +var React = require('react'); +var ReactDOM = require("react-dom"); +var dis = require("../../../dispatcher"); + +module.exports = React.createClass({ + displayName: 'TintableSvg', + + propTypes: { + src: React.PropTypes.string.isRequired, + width: React.PropTypes.string.isRequired, + height: React.PropTypes.string.isRequired, + className: React.PropTypes.string, + }, + + componentDidMount: function() { + // we can't use onLoad on object due to https://github.com/facebook/react/pull/5781 + // so handle it with pure DOM instead + ReactDOM.findDOMNode(this).addEventListener('load', this.onLoad); + }, + + componentWillUnmount: function() { + ReactDOM.findDOMNode(this).removeEventListener('load', this.onLoad); + }, + + onLoad: function(event) { + dis.dispatch({ action: "svg_onload", svg: event.target }); + }, + + render: function() { + return ( + + ); + } +}); diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js index 7d6cd3d557..a2dcfc3ff2 100644 --- a/src/components/views/messages/MFileBody.js +++ b/src/components/views/messages/MFileBody.js @@ -19,6 +19,7 @@ limitations under the License. var React = require('react'); var filesize = require('filesize'); var MatrixClientPeg = require('../../../MatrixClientPeg'); +var sdk = require('../../../index'); var dis = require("../../../dispatcher"); module.exports = React.createClass({ @@ -57,12 +58,14 @@ module.exports = React.createClass({ var httpUrl = cli.mxcUrlToHttp(content.url); var text = this.presentableTextForFile(content); + var TintableSvg = sdk.getComponent("elements.TintableSvg"); + if (httpUrl) { return (
- + Download {text} diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js index 6936c8ee04..703a32d40f 100644 --- a/src/components/views/messages/MImageBody.js +++ b/src/components/views/messages/MImageBody.js @@ -102,6 +102,7 @@ module.exports = React.createClass({ }, render: function() { + var TintableSvg = sdk.getComponent("elements.TintableSvg"); var content = this.props.mxEvent.getContent(); var cli = MatrixClientPeg.get(); @@ -123,7 +124,7 @@ module.exports = React.createClass({
- + Download {content.body} ({ content.info && content.info.size ? filesize(content.info.size) : "Unknown size" }) diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index 8aa5513bcd..4ea62e75f8 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -465,6 +465,7 @@ module.exports = React.createClass({ var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId); var uploadInputStyle = {display: 'none'}; var MemberAvatar = sdk.getComponent('avatars.MemberAvatar'); + var TintableSvg = sdk.getComponent("elements.TintableSvg"); var callButton, videoCallButton, hangupButton; var call = CallHandler.getCallForRoom(this.props.room.roomId); @@ -478,11 +479,11 @@ module.exports = React.createClass({ else { callButton =
- + videoCallButton =
- + } @@ -497,7 +498,7 @@ module.exports = React.createClass({