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

Fix tinting for download icon

Browse source 
As shown in https://github.com/vector-im/element-web/issues/16546
This commit is contained in:
Travis Ralston 2021-03-09 12:54:20 -07:00
parent af9f17219b
commit a7debdd946
3 changed files with 42 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/usercontent/index.js
View file

@ -1,10 +1,8 @@
function remoteRender(event) {
const data = event.data;
const img = document.createElement("img");
const img = document.createElement("span"); // we'll mask it as an image
img.id = "img";
img.src = data.imgSrc;
img.style = data.imgStyle;
const a = document.createElement("a");
a.id = "a";
@ -16,6 +14,21 @@ function remoteRender(event) {
a.appendChild(img);
a.appendChild(document.createTextNode(data.textContent));
// Apply image style after so we can steal the anchor's colour.
// Style copied from a rendered version of mx_MFileBody_download_icon
img.style = "" +
"width: 12px; height: 12px;" +
"-webkit-mask-size: 12px;" +
"mask-size: 12px;" +
"-webkit-mask-position: center;" +
"mask-position: center;" +
"-webkit-mask-repeat: no-repeat;" +
"mask-repeat: no-repeat;" +
`-webkit-mask-image: url('${data.imgSrc}');` +
`mask-image: url('${data.imgSrc}');` +
`background-color: ${a.style.color};` +
"display: inline-block;";
const body = document.body;
// Don't display scrollbars if the link takes more than one line to display.
body.style = "margin: 0px; overflow: hidden";
@ -26,20 +39,8 @@ function remoteRender(event) {
}
}
function remoteSetTint(event) {
const data = event.data;
const img = document.getElementById("img");
img.src = data.imgSrc;
img.style = data.imgStyle;
const a = document.getElementById("a");
a.style = data.style;
}
window.onmessage = function(e) {
if (e.origin === window.location.origin) {
if (e.data.blob) remoteRender(e);
else remoteSetTint(e);
}
};