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

Update progress window to use SVG icons (#4047)

Browse source 
* Fix translation progressWindow
* Use SVG icons, don't use determineAttachmentIcon() / getImageSrc()
* FeedItem#translate(): Pass itemDone params in correct order
* Why does FeedItem#clone() return JSON?
* Fix text misalignment
This commit is contained in:
Abe Jellinek 2024-04-30 05:32:54 -04:00 committed by GitHub
parent a5acf02264
commit d5194f234d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 78 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
chrome/content/zotero/fileInterface.js
View file

@ -630,10 +630,10 @@ var Zotero_File_Interface = new function() {
closeOnClick: false
});
progressWin.changeHeadline(Zotero.getString('fileInterface.importing'));
let icon = 'chrome://zotero/skin/treesource-unfiled' + (Zotero.hiDPI ? "@2x" : "") + '.png';
progress = new progressWin.ItemProgress(
icon, translation.path ? PathUtils.filename(translation.path) : translators[0].label
null, translation.path ? PathUtils.filename(translation.path) : translators[0].label
);
progress.setItemTypeAndIcon(null, 'unfiled');
progressWin.show();
translation.setHandler("itemDone", function () {
@ -683,15 +683,13 @@ var Zotero_File_Interface = new function() {
// Show popup on completion
if (showProgressWindow) {
progressWin.changeHeadline(Zotero.getString('fileInterface.importComplete'));
let icon;
if (numItems == 1) {
icon = translation.newItems[0].getImageSrc();
progress.setItemTypeAndIcon(translation.newItems[0].getItemTypeIconName());
}
else {
icon = 'chrome://zotero/skin/treesource-unfiled' + (Zotero.hiDPI ? "@2x" : "") + '.png';
progress.setItemTypeAndIcon(null, 'unfiled');
}
let text = Zotero.getString(`fileInterface.itemsWereImported`, numItems, numItems);
progress.setIcon(icon);
progress.setText(text);
// For synchronous translators, which don't update progress
progress.setProgress(100);

1
chrome/content/zotero/progressWindow.xhtml
View file

@ -27,6 +27,7 @@
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://global/skin/browser.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?>
<?xml-stylesheet href="chrome://zotero/skin/progressWindow.css"?>
<!DOCTYPE window SYSTEM "chrome://zotero/locale/zotero.dtd">
<window id="zotero-progress"

4
chrome/content/zotero/xpcom/attachments.js
View file

@ -1454,17 +1454,15 @@ Zotero.Attachments = new function () {
// If no eligible items, just show a popup saying no PDFs were found
if (!queue.length) {
let icon = 'chrome://zotero/skin/treeitem-attachment-pdf.png';
let progressWin = new Zotero.ProgressWindow();
let title = Zotero.getString('pane.items.menu.findAvailablePDF.multiple');
progressWin.changeHeadline(title);
let itemProgress = new progressWin.ItemProgress(
icon,
'attachmentPDF',
Zotero.getString('findPDF.noPDFsFound')
);
progressWin.show();
itemProgress.setProgress(100);
itemProgress.setIcon(icon);
progressWin.startCloseTimer(4000);
return;
}

2
chrome/content/zotero/xpcom/data/cachedTypes.js
View file

@ -504,7 +504,7 @@ Zotero.ItemTypes = new function() {
case 'tvBroadcast':
case 'videoRecording':
case 'webpage':
itemType = itemType.replace(/([A-Z])/g, '-$1').toLowerCase();
itemType = itemType.replace(/(?<=^|[^A-Z])([A-Z])/g, '-$1').toLowerCase();
return "chrome://zotero/skin/item-type/16/" + (isDark ? 'dark' : 'light') + "/" + itemType + suffix + ".svg";
}

88
chrome/content/zotero/xpcom/progressWindow.js
View file

@ -154,7 +154,7 @@ Zotero.ProgressWindow = function(options = {}) {
/**
* Changes the "headline" shown at the top of the progress window
*/
this.changeHeadline = _deferUntilWindowLoad(function changeHeadline(text, icon, postText) {
this.changeHeadline = _deferUntilWindowLoad(function changeHeadline(text, cssIconKey, postText) {
var doc = _progressWindow.document,
headline = doc.getElementById("zotero-progress-text-headline");
while(headline.hasChildNodes()) headline.removeChild(headline.firstChild);
@ -164,18 +164,19 @@ Zotero.ProgressWindow = function(options = {}) {
preNode.setAttribute("crop", "end");
headline.appendChild(preNode);
if(icon) {
var img = doc.createXULElement("image");
img.width = 16;
img.height = 16;
img.setAttribute("src", icon);
headline.appendChild(img);
if(cssIconKey) {
// No getCSSIcon() without a window context
let iconEl = doc.createElement('span');
iconEl.classList.add('icon');
iconEl.classList.add('icon-16');
iconEl.classList.add('icon-css');
iconEl.classList.add(`icon-${cssIconKey}`);
headline.appendChild(iconEl);
}
if(postText) {
var postNode = doc.createXULElement("label");
postNode.style.marginLeft = 0;
postNode.setAttribute("value", " "+postText);
postNode.setAttribute("value", postText);
postNode.setAttribute("crop", "end");
postNode.setAttribute("flex", "1");
headline.appendChild(postNode);
@ -281,16 +282,14 @@ Zotero.ProgressWindow = function(options = {}) {
* Creates a new object representing a line in the progressWindow. This is the OO
* version of addLines() above.
*/
this.ItemProgress = _deferUntilWindowLoad(function(iconSrc, text, parentItemProgress) {
this.ItemProgress = _deferUntilWindowLoad(function(itemType, text, parentItemProgress) {
this.setText(text);
this._image = _progressWindow.document.createXULElement("hbox");
this._image.setAttribute("class", "zotero-progress-item-icon");
this._image.setAttribute("flex", 0);
this._image.style.width = "16px";
this._image.style.backgroundRepeat = "no-repeat";
this._image.style.backgroundSize = "auto 16px";
this.setIcon(iconSrc);
if (itemType) {
this.setItemTypeAndIcon(itemType);
}
this._hbox = _progressWindow.document.createXULElement("hbox");
this._hbox.setAttribute("class", "zotero-progress-item-hbox");
@ -326,13 +325,17 @@ Zotero.ProgressWindow = function(options = {}) {
this.ItemProgress.prototype.setProgress = _deferUntilWindowLoad(function(percent) {
if(percent != 0 && percent != 100) {
// Indication of partial progress, so we will use the circular indicator
var nArcs = 20;
var nArcs = 20;
this._image.className = "";
this._image.style.width = "16px";
this._image.style.backgroundRepeat = "no-repeat";
this._image.style.backgroundSize = "auto 16px";
this._image.style.backgroundImage = "url('chrome://zotero/skin/progress_arcs.png')";
this._image.style.backgroundPosition = "-"+(Math.round(percent/100*nArcs)*16)+"px 0";
this._hbox.style.opacity = percent/200+.5;
} else if(percent == 100) {
this._image.style.backgroundImage = "url('"+this._iconSrc+"')";
this._image.style.backgroundPosition = "";
this._image.className = this._iconClassName;
this._image.style = "";
this._hbox.style.opacity = "1";
this._hbox.style.filter = "";
}
@ -340,12 +343,14 @@ Zotero.ProgressWindow = function(options = {}) {
/**
* Sets the icon for this item.
* @param {String} iconSrc
* @param {String} [itemType]
* @param {String} [cssIcon]
*/
this.ItemProgress.prototype.setIcon = _deferUntilWindowLoad(function(iconSrc) {
this._image.style.backgroundImage = "url('"+iconSrc+"')";
this._image.style.backgroundPosition = "";
this._iconSrc = iconSrc;
this.ItemProgress.prototype.setItemTypeAndIcon = _deferUntilWindowLoad(function(itemType, cssIcon = 'item-type') {
// No getCSSItemTypeIcon() without a window context
this._image.className = this._iconClassName = `icon icon-16 icon-css icon-${cssIcon}`;
this._image.dataset.itemType = itemType;
this._image.style = "";
});
this.ItemProgress.prototype.setText = _deferUntilWindowLoad(function (text) {
@ -406,9 +411,11 @@ Zotero.ProgressWindow = function(options = {}) {
name = Zotero.getString("pane.collections.library");
}
self.changeHeadline(Zotero.getString("ingester.scrapingTo"),
"chrome://zotero/skin/treesource-"+(collection ? "collection" : "library")+".png",
name+"\u2026");
self.changeHeadline(
Zotero.getString("ingester.scrapingTo"),
collection ? 'collection' : 'library',
name + "\u2026"
);
};
this.Translation.doneHandler = function(obj, returnValue) {
@ -428,34 +435,23 @@ Zotero.ProgressWindow = function(options = {}) {
_attachmentsMap = _attachmentsMap || new WeakMap();
return function(obj, dbItem, item) {
self.show();
var itemProgress = new self.ItemProgress(Zotero.ItemTypes.getImageSrc(item.itemType),
item.title);
var itemProgress = new self.ItemProgress(dbItem?.getItemTypeIconName() ?? item.itemType, item.title);
itemProgress.setProgress(100);
for(var i=0; i<item.attachments.length; i++) {
var attachment = item.attachments[i];
for(let attachment of item.attachments) {
// Create unsaved item to get icon
let attachmentItem = new Zotero.Item('attachment');
attachmentItem.attachmentContentType = attachment.mimeType;
if (attachment.linkMode) {
attachmentItem.attachmentLinkMode = attachment.linkMode;
}
_attachmentsMap.set(attachment,
new self.ItemProgress(
Zotero.Utilities.Internal.determineAttachmentIcon(attachment),
attachmentItem.getItemTypeIconName(),
attachment.title, itemProgress));
}
}
};
this.Translation.attachmentProgressHandler = function(_attachmentsMap) {
_attachmentsMap = _attachmentsMap || new WeakMap();
return function(obj, attachment, progress, error) {
var itemProgress = _attachmentsMap.get(attachment);
if(progress === false) {
itemProgress.setError();
} else {
itemProgress.setProgress(progress);
if(progress === 100) {
itemProgress.setIcon(Zotero.Utilities.Internal.determineAttachmentIcon(attachment));
}
}
}
};
this.Translation._scrapeError = function(description) {
self.changeHeadline(Zotero.getString("ingester.scrapeError"));
self.addDescription(description);

12
chrome/skin/default/zotero/zotero.css
View file

@ -31,17 +31,16 @@ label.zotero-text-link {
margin-bottom: 2px;
}
.zotero-progress-item-icon
{
.zotero-progress-icon-headline {
width: 16px;
height: 16px;
}
.zotero-progress-item-hbox
{
padding-left: 5px;
margin-top: 0;
margin-bottom: 0;
padding-inline-start: 5px;
padding-block: 2px;
margin-block: 0;
}
.zotero-progress-item-hbox[parent]
@ -52,7 +51,8 @@ label.zotero-text-link {
.zotero-progress-item-label
{
width: 210px;
margin-left: 5px;
margin-inline: 5px 0;
margin-block: 0;
}
.zotero-warning {

23
scss/progressWindow.scss Normal file
View file

@ -0,0 +1,23 @@
@import "abstracts/variables";
@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/placeholders";
@import "abstracts/utilities";
@import "abstracts/split-button";
@import "abstracts/svgicon";
@import "themes/light";
@import "themes/dark";
// Base
// --------------------------------------------------
@import "base/base";
@import "components/icons";
@import "components/collection-tree";
@import "components/item-tree";
label {
margin-block: 0;
}