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

Fix MacOS non-native checkbox menu options should be indented even if no checkbox

Browse source
This commit is contained in:
windingwind 2023-12-18 04:31:26 +08:00 committed by Dan Stillman
parent 7ca6a7a37b
commit a8016b1b2f
2 changed files with 37 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
chrome/content/zotero/customElements.js
View file

@ -80,6 +80,12 @@ Services.scriptloader.loadSubScript('chrome://zotero/content/elements/annotation
if (!this._zoteroInitialized) {
this._zoteroInitialized = true;
// Following the implementation from https://searchfox.org/mozilla-esr102/source/toolkit/content/widgets/menupopup.js
let haveCheckableChild = this.querySelector(
":scope > menuitem:not([hidden]):is([type=checkbox],[type=radio])"
);
this.toggleAttribute("needsgutter", haveCheckableChild);
/**
* Add fade animation to the popup
* animate="false" will disable the animation
@ -92,8 +98,16 @@ Services.scriptloader.loadSubScript('chrome://zotero/content/elements/annotation
this.setAttribute("animate", "open");
}
// Update animate attribute when the popup is shown
this.addEventListener("popupshowing", () => {
this.addEventListener("popupshowing", (e) => {
if (this !== e.target) {
return;
}
// Following the implementation from https://searchfox.org/mozilla-esr102/source/toolkit/content/widgets/menupopup.js
let haveCheckableChild = this.querySelector(
":scope > menuitem:not([hidden]):is([type=checkbox],[type=radio])"
);
this.toggleAttribute("needsgutter", haveCheckableChild);
// Update animate attribute when the popup is shown
if (this.getAttribute("animate") === "false") {
return;
}

21
scss/mac/_menupopup.scss
View file

@ -25,7 +25,7 @@ menupopup {
display: inline-block;
vertical-align: middle;
line-height: 0;
width: 15px;
width: 14px;
margin-inline-start: 0px !important;
}
}
@ -34,6 +34,18 @@ menupopup {
appearance: auto;
}
}
&[needsgutter] {
menu, menuitem {
padding-left: 20px;
// Add padding here so that it won't look weird when the customElement.js is not yet loaded
&:is([checked="true"], [selected="true"]) {
padding-left: 6px;
}
}
}
menuseparator {
appearance: none;
margin-left: 15px;
@ -42,6 +54,13 @@ menupopup {
padding-bottom: 0px;
@include light-dark(border-color, rgba(170, 170, 170, 0.5), rgba(100, 100, 100, 0.5));
}
.menu-right {
appearance: none;
@include svgicon-menu("chevron-8", "universal", "8");
rotate: -90deg;
margin-inline-end: 0px;
}
}
// Modified based on rules from https://searchfox.org/mozilla-esr102/source/browser/base/content/browser.css