mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Fix React icons only using 2x image once (#2324)

Browse source 
a1267bc fixed repeated re-appending of '@2x' by moving the modified URL
to a local variable, but it still set hasHiDPI to false permanently;
this meant that icons displayed repeatedly in the same window, like the
tab close button, would only use their 2x versions the first time they
were displayed (in the case of tabs, this is the library tab's invisible
close button, so *no* tabs got visible 2x buttons).

This commit moves the HiDPI check and URL modification out of the render
function and instead runs it a single time when i() is first called.
This commit is contained in:
Abe Jellinek 2022-02-03 21:38:01 -08:00 committed by GitHub
parent 8de1ddcaf4
commit e8b574da0b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
chrome/content/zotero/components/icons.jsx
View file

@ -24,24 +24,21 @@ module.exports = { Icon }
function i(name, svgOrSrc, hasHiDPI = true) { function i(name, svgOrSrc, hasHiDPI = true) {
if (typeof svgOrSrc == 'string' && hasHiDPI && window.devicePixelRatio >= 1.25) {
// N.B. In Electron we can use css-image-set
let parts = svgOrSrc.split('.');
parts[parts.length - 2] = parts[parts.length - 2] + '@2x';
svgOrSrc = parts.join('.');
}
const icon = class extends PureComponent { const icon = class extends PureComponent {
render() { render() {
let props = Object.assign({}, this.props); let props = Object.assign({}, this.props);
props.name = name.toLowerCase(); props.name = name.toLowerCase();
if (typeof svgOrSrc == 'string') { if (typeof svgOrSrc == 'string') {
let finalSrc = svgOrSrc;
// N.B. In Electron we can use css-image-set
// Also N.B. this modifies svgOrSrc and hasHiDPI for all future invocations
// of this function
if (hasHiDPI && window.devicePixelRatio >= 1.25) {
let parts = svgOrSrc.split('.');
parts[parts.length - 2] = parts[parts.length - 2] + '@2x';
finalSrc = parts.join('.');
hasHiDPI = false;
}
if (!("style" in props)) props.style = {}; if (!("style" in props)) props.style = {};
props.style.backgroundImage = `url(${finalSrc})`; props.style.backgroundImage = `url(${svgOrSrc})`;
props.className = props.className || ""; props.className = props.className || "";
props.className += " icon-bg"; props.className += " icon-bg";
// We use css background-image. // We use css background-image.