From f499c60b129a0fc5cd28826d37d04f8b701cae4c Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 6 Jan 2016 02:29:08 +0000 Subject: [PATCH] sundry PR feedback --- src/Tinter.js | 47 +++++++++---------- src/components/structures/RoomView.js | 4 -- src/components/views/elements/TintableSvg.js | 3 +- src/components/views/messages/MFileBody.js | 4 -- src/components/views/messages/MImageBody.js | 4 -- src/components/views/rooms/MessageComposer.js | 4 -- src/components/views/rooms/RoomHeader.js | 4 -- 7 files changed, 23 insertions(+), 47 deletions(-) diff --git a/src/Tinter.js b/src/Tinter.js index 039a54bff9..e623fec93a 100644 --- a/src/Tinter.js +++ b/src/Tinter.js @@ -14,17 +14,11 @@ See the License for the specific language governing permissions and limitations under the License. */ -var dis = require('./dispatcher'); - -var registered = false; -if (!registered) { - dis.register(_onAction); -} - +// The colour keys to be replaced as referred to in SVGs var keyRgb = [ - "rgb(118, 207, 166)", - "rgb(234, 245, 240)", - "rgba(118, 207, 166, 0.2)", + "rgb(118, 207, 166)", // Vector Green + "rgb(234, 245, 240)", // Vector Light Green + "rgba(118, 207, 166, 0.2)", // BottomLeftMenu overlay (20% Vector Green) ]; // Some algebra workings for calculating the tint % of Vector Green & Light Green @@ -34,10 +28,11 @@ var keyRgb = [ // (255 - 118) x = 255 - 234 // x = (255 - 234) / (255 - 118) = 0.16 +// The colour keys to be replaced as referred to in SVGs var keyHex = [ - "#76CFA6", - "#EAF5F0", - "#D3EFE1", + "#76CFA6", // Vector Green + "#EAF5F0", // Vector Light Green + "#D3EFE1", // BottomLeftMenu overlay (20% Vector Green overlaid on Vector Light Green) ]; // cache of our replacement colours @@ -85,10 +80,11 @@ function calcCssFixups() { var ss = document.styleSheets[i]; for (var j = 0; j < ss.cssRules.length; j++) { var rule = ss.cssRules[j]; + if (!rule.style) continue; for (var k = 0; k < cssAttrs.length; k++) { var attr = cssAttrs[k]; for (var l = 0; l < keyRgb.length; l++) { - if (rule.style && rule.style[attr] === keyRgb[l]) { + if (rule.style[attr] === keyRgb[l]) { cssFixups.push({ style: rule.style, attr: attr, @@ -143,17 +139,6 @@ function applySvgFixups(fixups) { } } -function _onAction(payload) { - if (payload.action !== "svg_onload") return; - // XXX: we should probably faff around with toggling the visibility of the node to avoid flashing the wrong colour. - // (although this would result in an even worse flicker as the element redraws) - var fixups = calcSvgFixups([ payload.svg ]); - if (fixups.length) { - svgFixups = svgFixups.concat(fixups); // XXX: this leaks fixups - applySvgFixups(fixups); - } -} - function hexToRgb(color) { if (color[0] === '#') color = color.slice(1); if (color.length === 3) { @@ -210,5 +195,15 @@ module.exports = { // updated would be a PITA, so just brute-force search for the // key colour; cache the element and apply. applySvgFixups(svgFixups); - } + }, + + tintSvg: function(svg) { + // XXX: we should probably faff around with toggling the visibility of the node to avoid flashing the wrong colour. + // (although this would result in an even worse flicker as the element redraws) + var fixups = calcSvgFixups([ svg ]); + if (fixups.length) { + svgFixups = svgFixups.concat(fixups); // XXX: this leaks fixups + applySvgFixups(fixups); + } + }, }; diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index d206a06add..f8e1aee85b 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -1093,10 +1093,6 @@ 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'); diff --git a/src/components/views/elements/TintableSvg.js b/src/components/views/elements/TintableSvg.js index a4b66d8114..5bd19b85dc 100644 --- a/src/components/views/elements/TintableSvg.js +++ b/src/components/views/elements/TintableSvg.js @@ -19,6 +19,7 @@ limitations under the License. var React = require('react'); var ReactDOM = require("react-dom"); var dis = require("../../../dispatcher"); +var Tinter = require("../../../Tinter"); module.exports = React.createClass({ displayName: 'TintableSvg', @@ -41,7 +42,7 @@ module.exports = React.createClass({ }, onLoad: function(event) { - dis.dispatch({ action: "svg_onload", svg: event.target }); + Tinter.tintSvg(event.target); }, render: function() { diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js index a2dcfc3ff2..ed3bd04dcf 100644 --- a/src/components/views/messages/MFileBody.js +++ b/src/components/views/messages/MFileBody.js @@ -47,10 +47,6 @@ 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(); diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js index 703a32d40f..2b47f0a71c 100644 --- a/src/components/views/messages/MImageBody.js +++ b/src/components/views/messages/MImageBody.js @@ -97,10 +97,6 @@ module.exports = React.createClass({ return MatrixClientPeg.get().mxcUrlToHttp(content.url, 480, 360); }, - onSvgLoad: function(event) { - dis.dispatch({ action: "svg_onload", svg: event.target }); - }, - render: function() { var TintableSvg = sdk.getComponent("elements.TintableSvg"); var content = this.props.mxEvent.getContent(); diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js index 4ea62e75f8..e1a9bbd861 100644 --- a/src/components/views/rooms/MessageComposer.js +++ b/src/components/views/rooms/MessageComposer.js @@ -457,10 +457,6 @@ 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'}; diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index 9e726d01aa..01a215f3ec 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -67,10 +67,6 @@ module.exports = React.createClass({ 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"); var RoomAvatar = sdk.getComponent('avatars.RoomAvatar');