Move Locate to sidenav (#3747)

This commit is contained in:
Abe Jellinek 2024-05-14 04:19:58 -04:00 committed by GitHub
parent 7091fa3a58
commit 9eabc169c4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 51 additions and 62 deletions

View file

@ -28,11 +28,6 @@
{
class ItemPaneSidenav extends XULElementBase {
content = MozXULElement.parseXULToFragment(`
<html:div class="pin-wrapper">
<toolbarbutton
data-pane="toggle-collapse"/>
</html:div>
<html:div class="divider"/>
<html:div class="inherit-flex highlight-notes-inactive">
<html:div class="pin-wrapper">
<toolbarbutton
@ -104,6 +99,17 @@
data-pane="context-notes"/>
</html:div>
<html:div class="divider"/>
<html:div class="pin-wrapper">
<toolbarbutton
tooltiptext="&zotero.toolbar.openURL.label;"
type="menu"
data-action="locate">
<menupopup/>
</toolbarbutton>
</html:div>
<popupset>
<menupopup class="context-menu">
<menuitem class="menuitem-iconic zotero-menuitem-pin" data-l10n-id="pin-section"/>
@ -180,10 +186,6 @@
this.render();
}
get _showCollapseButton() {
return false;
}
isPanePinnable(id) {
return id !== 'info' && id !== 'context-all-notes' && id !== 'context-item-notes';
}
@ -209,6 +211,24 @@
this.addEventListener('click', this.handleButtonClick);
// Set up action toolbarbuttons
for (let toolbarbutton of this.querySelectorAll('toolbarbutton[data-action]')) {
let action = toolbarbutton.dataset.action;
if (action === 'locate') {
toolbarbutton.addEventListener('mousedown', async (event) => {
if (event.button !== 0 || toolbarbutton.open) {
return;
}
event.preventDefault();
let menu = toolbarbutton.querySelector('menupopup');
await Zotero_LocateMenu.buildLocateMenu(menu);
await document.l10n.translateFragment(menu);
toolbarbutton.open = true;
});
}
}
this.querySelector('.zotero-menuitem-pin').addEventListener('command', () => {
this.container.scrollToPane(this._contextMenuTarget, 'smooth');
this.pinnedPane = this._contextMenuTarget;
@ -226,7 +246,7 @@
if (!this.container) return;
let contextNotesPaneVisible = this._contextNotesPaneVisible;
let pinnedPane = this.pinnedPane;
for (let toolbarbutton of this.querySelectorAll('toolbarbutton')) {
for (let toolbarbutton of this.querySelectorAll('toolbarbutton[data-pane]')) {
let pane = toolbarbutton.dataset.pane;
// TEMP: never disable context notes button
if (this._contextNotesPane) {
@ -244,17 +264,6 @@
continue;
}
else if (pane == 'toggle-collapse') {
let hidden = !this._showCollapseButton;
toolbarbutton.parentElement.hidden = hidden;
toolbarbutton.parentElement.nextElementSibling.hidden = hidden; // Divider
toolbarbutton.setAttribute('data-l10n-id', 'sidenav-' + (this._collapsed ? 'expand' : 'collapse'));
toolbarbutton.classList.toggle('collapsed', this._collapsed);
continue;
}
toolbarbutton.setAttribute('aria-selected', !contextNotesPaneVisible && pane == pinnedPane);
// No need to set `hidden` here, since it's updated by ItemDetails#_handlePaneStatus
@ -262,6 +271,14 @@
toolbarbutton.parentElement.classList.toggle('pinned', pane == pinnedPane);
}
for (let toolbarbutton of this.querySelectorAll('toolbarbutton[data-action]')) {
let action = toolbarbutton.dataset.action;
if (action == 'locate') {
toolbarbutton.parentElement.hidden = false;
}
}
this.querySelector('.highlight-notes-active').classList.toggle('highlight', contextNotesPaneVisible);
this.querySelector('.highlight-notes-inactive').classList.toggle('highlight',
this._contextNotesPane && !contextNotesPaneVisible);
@ -338,12 +355,16 @@
renderDefaultStatus() {
if (this._defaultStatus) {
this.querySelectorAll('toolbarbutton').forEach((elem) => {
this.querySelectorAll('toolbarbutton[data-pane]').forEach((elem) => {
elem.disabled = true;
elem.parentElement.hidden = !(
["info", "abstract", "attachments", "notes", "libraries-collections", "tags", "related"]
.includes(elem.dataset.pane));
});
this.querySelectorAll('toolbarbutton[data-action]').forEach((elem) => {
elem.disabled = false;
});
}
else {
this.querySelectorAll('toolbarbutton').forEach((elem) => {
@ -367,12 +388,6 @@
}
this._contextNotesPaneVisible = true;
break;
case "toggle-collapse":
if (event.button !== 0) {
return;
}
this._collapsed = !this._collapsed;
break;
default: {
if (event.button !== 0) {
return;

View file

@ -34,7 +34,7 @@ var Zotero_LocateMenu = new function() {
/**
* Clear and build the locate menu
*/
this.buildLocateMenu = function (locateMenu) {
this.buildLocateMenu = async function (locateMenu) {
// clear menu
while(locateMenu.childElementCount > 0) {
locateMenu.removeChild(locateMenu.firstChild);
@ -43,7 +43,7 @@ var Zotero_LocateMenu = new function() {
var selectedItems = _getSelectedItems();
if(selectedItems.length) {
_addViewOptions(locateMenu, selectedItems, true, true, true);
await _addViewOptions(locateMenu, selectedItems, true, true, true);
var availableEngines = _getAvailableLocateEngines(selectedItems);
// add engines that are available for selected items

View file

@ -1,3 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.625 1H3V1.625V18.375V19H3.625H14.9698L13.7198 17.75H4.25V2.25H11.75V6.625V7.25H12.375H16.75V9.95176L18 11.2018V6.625V6.36612L17.8169 6.18306L12.8169 1.18306L12.6339 1H12.375H3.625ZM15.8661 6L13 3.13388V6H15.8661ZM17.4911 15.125H10V13.875H17.4911L15 11.3839L15.8839 10.5L19.8838 14.5L15.8839 18.5L15 17.6161L17.4911 15.125Z" fill="context-fill"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.7501 10C17.7501 11.4635 17.3445 12.8323 16.6394 14H18.0646C18.6634 12.795 19.0001 11.4368 19.0001 10C19.0001 5.02944 14.9707 1 10.0001 1C5.02956 1 1.00012 5.02944 1.00012 10C1.00012 14.9706 5.02956 19 10.0001 19C11.2322 19 12.4065 18.7524 13.4759 18.3043L12.5071 17.3355C11.7208 17.6042 10.8775 17.75 10.0001 17.75C5.71992 17.75 2.25012 14.2802 2.25012 10C2.25012 5.71979 5.71992 2.25 10.0001 2.25C14.2803 2.25 17.7501 5.71979 17.7501 10ZM14.884 10L10.884 14L10.0001 13.1161L12.4912 10.625L5.00012 10.625V9.375L12.4912 9.375L10.0001 6.88388L10.884 6L14.884 10ZM17 19L14 16H20L17 19Z" fill="context-fill"/>
</svg>

Before

Width:  |  Height:  |  Size: 501 B

After

Width:  |  Height:  |  Size: 762 B

View file

@ -1,3 +0,0 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 18H16.75L16.75 2H18V18ZM12.4911 10.625L2 10.625V9.375L12.4911 9.375L9 5.88388L9.88388 5L14.8839 10L9.88388 15L9 14.1161L12.4911 10.625Z" fill="context-fill"/>
</svg>

Before

Width:  |  Height:  |  Size: 315 B

View file

@ -1,3 +0,0 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 18H16.75L16.75 2H18L18 18ZM4.50898 9.375L8.00009 5.88388L7.11621 5L2.11621 10L7.11621 15L8.00009 14.1161L4.50898 10.625L15 10.625V9.375L4.50898 9.375Z" fill="context-fill"/>
</svg>

Before

Width:  |  Height:  |  Size: 330 B

View file

@ -1,5 +0,0 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="icon">
<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M3.625 1H3V1.625V18.375V19H3.625H14.9698L13.7198 17.75H4.25V2.25H11.75V6.625V7.25H12.375H16.75V9.95176L18 11.2018V6.625V6.36612L17.8169 6.18306L12.8169 1.18306L12.6339 1H12.375H3.625ZM15.8661 6L13 3.13388V6H15.8661ZM17.4911 15.125H10V13.875H17.4911L15 11.3839L15.8839 10.5L19.8838 14.5L15.8839 18.5L15 17.6161L17.4911 15.125Z" fill="context-fill"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 536 B

View file

@ -88,27 +88,16 @@ item-pane-sidenav {
}
}
// Special case for Notes context pane button:
// Notes context pane button
&[data-pane="context-notes"] {
list-style-image: url("chrome://zotero/skin/itempane/20/notes.svg");
fill: map.get($item-pane-sections, "notes");
stroke: map.get($item-pane-sections, "notes");
}
// Special case for Expand/Collapse button:
&[data-pane="toggle-collapse"] {
list-style-image: url("chrome://zotero/skin/itempane/20/collapse.svg");
&.collapsed {
list-style-image: url("chrome://zotero/skin/itempane/20/expand.svg");
}
&:-moz-locale-dir(rtl) {
transform: scaleX(-1);
}
fill: var(--fill-secondary);
stroke: var(--fill-secondary);
// Locate button
&[data-action="locate"] {
@include svgicon-menu("go-to", "universal", "20");
}
&[custom] {
@ -124,10 +113,6 @@ item-pane-sidenav {
}
}
&.stacked toolbarbutton[data-pane="toggle-collapse"] {
transform: rotate(90deg);
}
&:not(.stacked) > .divider {
width: 20px;
height: 0;
@ -140,7 +125,7 @@ item-pane-sidenav {
border-inline-end: 1px solid var(--fill-quinary);
}
menupopup {
.context-menu {
@include macOS-hide-menu-icons;
}
}