PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into rxl881/invertOutlineColour

Browse source
This commit is contained in:
Richard Lewis 2017-11-15 15:08:28 +00:00
commit 24b9269ff5
1 changed files with 44 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
src/Tinter.js
View file

@ -19,6 +19,10 @@ const DEBUG = 0;
// utility to turn #rrggbb or rgb(r,g,b) into [red,green,blue] // utility to turn #rrggbb or rgb(r,g,b) into [red,green,blue]
function colorToRgb(color) { function colorToRgb(color) {
if (!color) {
return [0, 0, 0];
}
if (color[0] === '#') { if (color[0] === '#') {
color = color.slice(1); color = color.slice(1);
if (color.length === 3) { if (color.length === 3) {
@ -31,16 +35,17 @@ function colorToRgb(color) {
const g = (val >> 8) & 255; const g = (val >> 8) & 255;
const b = val & 255; const b = val & 255;
return [r, g, b]; return [r, g, b];
} } else {
else { const match = color.match(/rgb\((.*?),(.*?),(.*?)\)/);
let match = color.match(/rgb\((.*?),(.*?),(.*?)\)/);
if (match) { if (match) {
return [ parseInt(match[1]), return [
parseInt(match[2]), parseInt(match[1]),
parseInt(match[3]) ]; parseInt(match[2]),
parseInt(match[3]),
];
} }
} }
return [0,0,0]; return [0, 0, 0];
} }
// utility to turn [red,green,blue] into #rrggbb // utility to turn [red,green,blue] into #rrggbb
@ -155,9 +160,11 @@ class Tinter {
this.calcCssFixups(); this.calcCssFixups();
if (DEBUG) console.log("Tinter.tint(" + primaryColor + ", " + if (DEBUG) {
secondaryColor + ", " + console.log("Tinter.tint(" + primaryColor + ", " +
tertiaryColor + ")"); secondaryColor + ", " +
tertiaryColor + ")");
}
if (!primaryColor) { if (!primaryColor) {
primaryColor = this.keyRgb[0]; primaryColor = this.keyRgb[0];
@ -197,9 +204,11 @@ class Tinter {
this.colors[1] = secondaryColor; this.colors[1] = secondaryColor;
this.colors[2] = tertiaryColor; this.colors[2] = tertiaryColor;
if (DEBUG) console.log("Tinter.tint final: (" + primaryColor + ", " + if (DEBUG) {
secondaryColor + ", " + console.log("Tinter.tint final: (" + primaryColor + ", " +
tertiaryColor + ")"); secondaryColor + ", " +
tertiaryColor + ")");
}
// go through manually fixing up the stylesheets. // go through manually fixing up the stylesheets.
this.applyCssFixups(); this.applyCssFixups();
@ -249,18 +258,15 @@ class Tinter {
// update keyRgb from the current theme CSS itself, if it defines it // update keyRgb from the current theme CSS itself, if it defines it
if (document.getElementById('mx_theme_accentColor')) { if (document.getElementById('mx_theme_accentColor')) {
this.keyRgb[0] = window.getComputedStyle( this.keyRgb[0] = window.getComputedStyle(
document.getElementById('mx_theme_accentColor') document.getElementById('mx_theme_accentColor')).color;
).color;
} }
if (document.getElementById('mx_theme_secondaryAccentColor')) { if (document.getElementById('mx_theme_secondaryAccentColor')) {
this.keyRgb[1] = window.getComputedStyle( this.keyRgb[1] = window.getComputedStyle(
document.getElementById('mx_theme_secondaryAccentColor') document.getElementById('mx_theme_secondaryAccentColor')).color;
).color;
} }
if (document.getElementById('mx_theme_tertiaryAccentColor')) { if (document.getElementById('mx_theme_tertiaryAccentColor')) {
this.keyRgb[2] = window.getComputedStyle( this.keyRgb[2] = window.getComputedStyle(
document.getElementById('mx_theme_tertiaryAccentColor') document.getElementById('mx_theme_tertiaryAccentColor')).color;
).color;
} }
this.calcCssFixups(); this.calcCssFixups();
@ -283,9 +289,11 @@ class Tinter {
// cache our fixups // cache our fixups
if (this.cssFixups[this.theme]) return; if (this.cssFixups[this.theme]) return;
if (DEBUG) console.debug("calcCssFixups start for " + this.theme + " (checking " + if (DEBUG) {
document.styleSheets.length + console.debug("calcCssFixups start for " + this.theme + " (checking " +
" stylesheets)"); document.styleSheets.length +
" stylesheets)");
}
this.cssFixups[this.theme] = []; this.cssFixups[this.theme] = [];
@ -343,21 +351,24 @@ class Tinter {
} }
} }
} }
if (DEBUG) console.log("calcCssFixups end (" + if (DEBUG) {
this.cssFixups[this.theme].length + console.log("calcCssFixups end (" +
" fixups)"); this.cssFixups[this.theme].length +
" fixups)");
}
} }
applyCssFixups() { applyCssFixups() {
if (DEBUG) console.log("applyCssFixups start (" + if (DEBUG) {
this.cssFixups[this.theme].length + console.log("applyCssFixups start (" +
" fixups)"); this.cssFixups[this.theme].length +
" fixups)");
}
for (let i = 0; i < this.cssFixups[this.theme].length; i++) { for (let i = 0; i < this.cssFixups[this.theme].length; i++) {
const cssFixup = this.cssFixups[this.theme][i]; const cssFixup = this.cssFixups[this.theme][i];
try { try {
cssFixup.style[cssFixup.attr] = this.colors[cssFixup.index]; cssFixup.style[cssFixup.attr] = this.colors[cssFixup.index];
} } catch (e) {
catch (e) {
// Firefox Quantum explodes if you manually edit the CSS in the // Firefox Quantum explodes if you manually edit the CSS in the
// inspector and then try to do a tint, as apparently all the // inspector and then try to do a tint, as apparently all the
// fixups are then stale. // fixups are then stale.
@ -379,7 +390,7 @@ class Tinter {
if (DEBUG) console.log("calcSvgFixups start for " + svgs); if (DEBUG) console.log("calcSvgFixups start for " + svgs);
const fixups = []; const fixups = [];
for (let i = 0; i < svgs.length; i++) { for (let i = 0; i < svgs.length; i++) {
var svgDoc; let svgDoc;
try { try {
svgDoc = svgs[i].contentDocument; svgDoc = svgs[i].contentDocument;
} catch(e) { } catch(e) {
@ -390,7 +401,7 @@ class Tinter {
if (e.stack) { if (e.stack) {
msg += ' | stack: ' + e.stack; msg += ' | stack: ' + e.stack;
} }
console.error(e); console.error(msg);
} }
if (!svgDoc) continue; if (!svgDoc) continue;
const tags = svgDoc.getElementsByTagName("*"); const tags = svgDoc.getElementsByTagName("*");
@ -400,8 +411,7 @@ class Tinter {
const attr = this.svgAttrs[k]; const attr = this.svgAttrs[k];
for (let l = 0; l < this.keyHex.length; l++) { for (let l = 0; l < this.keyHex.length; l++) {
if (tag.getAttribute(attr) && if (tag.getAttribute(attr) &&
tag.getAttribute(attr).toUpperCase() === this.keyHex[l]) tag.getAttribute(attr).toUpperCase() === this.keyHex[l]) {
{
fixups.push({ fixups.push({
node: tag, node: tag,
attr: attr, attr: attr,