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

Support tooltiptext on ItemPane custom section head buttons

Browse source 
Fix ItemPane custom section head button event listener
Update ItemPaneManager document
This commit is contained in:
windingwind 2024-03-29 21:18:20 +08:00 committed by Dan Stillman
parent 849ffe0133
commit 4407c24329
2 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
chrome/content/zotero/elements/itemPaneSection.js
View file

@ -176,18 +176,21 @@ class ItemPaneSectionElementBase extends XULElementBase {
let styles = []; let styles = [];
for (let type of Object.keys(this._sectionButtons)) { for (let type of Object.keys(this._sectionButtons)) {
let { icon, darkIcon, onClick } = this._sectionButtons[type]; let { icon, darkIcon, l10nID, onClick } = this._sectionButtons[type];
if (!darkIcon) { if (!darkIcon) {
darkIcon = icon; darkIcon = icon;
} }
let listener = (event) => { let listener = (event) => {
let props = this._assembleProps(this._getHookProps()); let props = this._assembleProps(
props.event = event; this._getHookProps(),
{ event },
);
onClick(props); onClick(props);
}; };
this._section.addEventListener(type, listener); this._section.addEventListener(type, listener);
this._sectionListeners.push({ type, listener }); this._sectionListeners.push({ type, listener });
let button = this._section.querySelector(`.${type}`); let button = this._section.querySelector(`.${type}`);
button.dataset.l10nId = l10nID;
button.style = `--custom-button-icon-light: url('${icon}'); --custom-button-icon-dark: url('${darkIcon}');`; button.style = `--custom-button-icon-light: url('${icon}'); --custom-button-icon-dark: url('${darkIcon}');`;
} }
@ -234,7 +237,7 @@ class ItemPaneSectionElementBase extends XULElementBase {
} }
registerSectionButton(options) { registerSectionButton(options) {
let { type, icon, darkIcon, onClick } = options; let { type, icon, darkIcon, l10nID, onClick } = options;
if (!darkIcon) { if (!darkIcon) {
darkIcon = icon; darkIcon = icon;
} }
@ -243,7 +246,7 @@ class ItemPaneSectionElementBase extends XULElementBase {
return; return;
} }
this._sectionButtons[type.replace(/[^a-zA-Z0-9-_]/g, "-")] = { this._sectionButtons[type.replace(/[^a-zA-Z0-9-_]/g, "-")] = {
icon, darkIcon, onClick icon, darkIcon, l10nID, onClick
}; };
} }

5
chrome/content/zotero/xpcom/itemPaneManager.js
View file

@ -31,11 +31,14 @@
* @property {string} [darkIcon] - Icon URI in dark mode. If not set, use `icon` * @property {string} [darkIcon] - Icon URI in dark mode. If not set, use `icon`
* @typedef SectionL10n * @typedef SectionL10n
* @type {object} * @type {object}
* @property {string} l10nID - data-l10n-id for localization * @property {string} l10nID - data-l10n-id for localization of section header label
* @property {string} [l10nArgs] - data-l10n-args for localization * @property {string} [l10nArgs] - data-l10n-args for localization
* @typedef SectionButton * @typedef SectionButton
* @type {object} * @type {object}
* @property {string} type - Button type, must be valid DOMString and without "," * @property {string} type - Button type, must be valid DOMString and without ","
* @property {string} icon - Icon URI
* @property {string} [darkIcon] - Icon URI in dark mode. If not set, use `icon`
* @property {string} [l10nID] - data-l10n-id for localization of button tooltiptext
* @property {(props: SectionEventHookArgs) => void} onClick - Button click callback * @property {(props: SectionEventHookArgs) => void} onClick - Button click callback
* @typedef SectionBasicHookArgs * @typedef SectionBasicHookArgs
* @type {object} * @type {object}