OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

fix new tinter problems 

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...
pull/21833/head
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

47
src/Tinter.js
View File

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