mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 11:47:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

fix new tinter problems

Browse source 
correctly handle skinned tertiaryColors (turns out they're used for the RoomSublist divider bars)
handle the fact that some room accountData apparently has ended up with rgb() colors in it...
This commit is contained in:
Matthew Hodgson 2017-11-15 01:01:17 +00:00
parent f05958e334
commit d6fc4ebe3c
1 changed files with 44 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/Tinter.js
View file

@ -17,23 +17,34 @@ limitations under the License.
const DEBUG = 0;
// utility to turn #rrggbb into [red,green,blue]
function hexToRgb(color) {
if (color[0] === '#') color = color.slice(1);
if (color.length === 3) {
color = color[0] + color[0] +
color[1] + color[1] +
color[2] + color[2];
// utility to turn #rrggbb or rgb(r,g,b) into [red,green,blue]
function colorToRgb(color) {
if (color[0] === '#') {
color = color.slice(1);
if (color.length === 3) {
color = color[0] + color[0] +
color[1] + color[1] +
color[2] + color[2];
}
const val = parseInt(color, 16);
const r = (val >> 16) & 255;
const g = (val >> 8) & 255;
const b = val & 255;
return [r, g, b];
}
const val = parseInt(color, 16);
const r = (val >> 16) & 255;
const g = (val >> 8) & 255;
const b = val & 255;
return [r, g, b];
else {
let match = color.match(/rgb\((.*?),(.*?),(.*?)\)/);
if (match) {
return [ parseInt(match[1]),
parseInt(match[2]),
parseInt(match[3]) ];
}
}
return [0,0,0];
}
// utility to turn [red,green,blue] into #rrggbb
function rgbToHex(rgb) {
function rgbToColor(rgb) {
const val = (rgb[0] << 16) | (rgb[1] << 8) | rgb[2];
return '#' + (0x1000000 + val).toString(16).slice(1);
}
@ -45,7 +56,7 @@ class Tinter {
this.keyRgb = [
"rgb(118, 207, 166)", // Vector Green
"rgb(234, 245, 240)", // Vector Light Green
"rgb(211, 239, 225)", // Unused: BottomLeftMenu (20% Green overlaid on Light Green)
"rgb(211, 239, 225)", // roomsublist-label-bg-color (20% Green overlaid on Light Green)
];
// Some algebra workings for calculating the tint % of Vector Green & Light Green
@ -59,7 +70,7 @@ class Tinter {
this.keyHex = [
"#76CFA6", // Vector Green
"#EAF5F0", // Vector Light Green
"#D3EFE1", // Unused: BottomLeftMenu (20% Green overlaid on Light Green)
"#D3EFE1", // roomsublist-label-bg-color (20% Green overlaid on Light Green)
"#FFFFFF", // white highlights of the SVGs (for switching to dark theme)
];
@ -132,28 +143,33 @@ class Tinter {
tint(primaryColor, secondaryColor, tertiaryColor) {
this.calcCssFixups();
if (DEBUG) console.log("Tinter.tint(" + primaryColor + ", " +
secondaryColor + ", " +
tertiaryColor + ")");
if (!primaryColor) {
primaryColor = this.keyRgb[0];
secondaryColor = this.keyRgb[1];
tertiaryColor = this.keyRgb[2];
}
if (!secondaryColor) {
const x = 0.16; // average weighting factor calculated from vector green & light green
const rgb = hexToRgb(primaryColor);
const rgb = colorToRgb(primaryColor);
rgb[0] = x * rgb[0] + (1 - x) * 255;
rgb[1] = x * rgb[1] + (1 - x) * 255;
rgb[2] = x * rgb[2] + (1 - x) * 255;
secondaryColor = rgbToHex(rgb);
secondaryColor = rgbToColor(rgb);
}
if (!tertiaryColor) {
const x = 0.19;
const rgb1 = hexToRgb(primaryColor);
const rgb2 = hexToRgb(secondaryColor);
const rgb1 = colorToRgb(primaryColor);
const rgb2 = colorToRgb(secondaryColor);
rgb1[0] = x * rgb1[0] + (1 - x) * rgb2[0];
rgb1[1] = x * rgb1[1] + (1 - x) * rgb2[1];
rgb1[2] = x * rgb1[2] + (1 - x) * rgb2[2];
tertiaryColor = rgbToHex(rgb1);
tertiaryColor = rgbToColor(rgb1);
}
if (this.forceTint == false &&
@ -169,7 +185,9 @@ class Tinter {
this.colors[1] = secondaryColor;
this.colors[2] = tertiaryColor;
if (DEBUG) console.log("Tinter.tint");
if (DEBUG) console.log("Tinter.tint final: (" + primaryColor + ", " +
secondaryColor + ", " +
tertiaryColor + ")");
// go through manually fixing up the stylesheets.
this.applyCssFixups();
@ -208,6 +226,11 @@ class Tinter {
document.getElementById('mx_theme_secondaryAccentColor')
).color;
}
if (document.getElementById('mx_theme_tertiaryAccentColor')) {
this.keyRgb[2] = window.getComputedStyle(
document.getElementById('mx_theme_tertiaryAccentColor')
).color;
}
this.calcCssFixups();
this.forceTint = true;