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

switch Tinter from using dispatch to a synchronous update when changing the colourscheme, to avoid CSS getting out of sync with SVG colours

Browse source
This commit is contained in:
Matthew Hodgson 2016-04-16 01:00:10 +01:00
parent 4fb31662e1
commit 8db14bde60
4 changed files with 60 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/structures/MatrixChat.js
View file

@ -600,13 +600,15 @@ module.exports = React.createClass({
var theAlias = MatrixTools.getCanonicalAliasForRoom(room);
if (theAlias) presentedId = theAlias;
var color_scheme_event = room.getAccountData("org.matrix.room.color_scheme");
var color_scheme = {};
if (color_scheme_event) {
color_scheme = color_scheme_event.getContent();
// XXX: we should validate the event
}
Tinter.tint(color_scheme.primary_color, color_scheme.secondary_color);
// No need to do this given RoomView triggers it itself...
// var color_scheme_event = room.getAccountData("org.matrix.room.color_scheme");
// var color_scheme = {};
// if (color_scheme_event) {
// color_scheme = color_scheme_event.getContent();
// // XXX: we should validate the event
// }
// console.log("Tinter.tint from _viewRoom");
// Tinter.tint(color_scheme.primary_color, color_scheme.secondary_color);
}
if (eventId) {

10
src/components/structures/RoomView.js
View file

@ -212,7 +212,9 @@ module.exports = React.createClass({
window.removeEventListener('resize', this.onResize);
Tinter.tint(); // reset colourscheme
// no need to do this as Dir & Settings are now overlays. It just burnt CPU.
// console.log("Tinter.tint from RoomView.unmount");
// Tinter.tint(); // reset colourscheme
},
onAction: function(payload) {
@ -345,7 +347,8 @@ module.exports = React.createClass({
if (color_scheme_event) {
color_scheme = color_scheme_event.getContent();
// XXX: we should validate the event
}
}
console.log("Tinter.tint from updateTint");
Tinter.tint(color_scheme.primary_color, color_scheme.secondary_color);
},
@ -354,6 +357,7 @@ module.exports = React.createClass({
if (event.getType === "org.matrix.room.color_scheme") {
var color_scheme = event.getContent();
// XXX: we should validate the event
console.log("Tinter.tint from onRoomAccountData");
Tinter.tint(color_scheme.primary_color, color_scheme.secondary_color);
}
}
@ -912,6 +916,7 @@ module.exports = React.createClass({
},
onCancelClick: function() {
console.log("updateTint from onCancelClick");
this.updateTint();
this.setState({editingRoomSettings: false});
},
@ -1179,6 +1184,7 @@ module.exports = React.createClass({
_gatherTimelinePanelRef: function(r) {
this.refs.messagePanel = r;
if(r) {
console.log("updateTint from RoomView._gatherTimelinePanelRef");
this.updateTint();
}
},

27
src/components/views/elements/TintableSvg.js
View file

@ -18,10 +18,9 @@ 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({
var TintableSvg = React.createClass({
displayName: 'TintableSvg',
propTypes: {
@ -31,28 +30,42 @@ module.exports = React.createClass({
className: React.PropTypes.string,
},
statics: {
// list of currently mounted TintableSvgs
mounts: {},
idSequence: 0,
},
componentWillMount: function() {
this.fixups = [];
this.dispatcherRef = dis.register(this.onAction);
},
componentDidMount: function() {
this.id = TintableSvg.idSequence++;
TintableSvg.mounts[this.id] = this;
// 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() {
delete TintableSvg.mounts[this.id];
ReactDOM.findDOMNode(this).removeEventListener('load', this.onLoad);
dis.unregister(this.dispatcherRef);
},
onAction: function(payload) {
if (payload.action !== 'tint_update') return;
shouldComponentUpdate: function(nextProps, nextState) {
// XXX: no dynamic TintableSvgs for now; speed above all else
return false;
},
tint: function() {
// TODO: only bother running this if the global tint settings have changed
// since we loaded!
Tinter.applySvgFixups(this.fixups);
},
onLoad: function(event) {
// console.log("TintableSvg.onLoad for " + this.props.src);
this.fixups = Tinter.calcSvgFixups([event.target]);
Tinter.applySvgFixups(this.fixups);
},
@ -67,3 +80,5 @@ module.exports = React.createClass({
);
}
});
module.exports = TintableSvg;