scriptoriumadmin/zotero
1
0
Fork 0
mirror of https://github.com/zotero/zotero.git synced 2026-09-27 01:21:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Show item pane toggle everywhere

Browse source
This commit is contained in:
Abe Jellinek 2025-05-06 12:05:31 -04:00
parent 55423024ea
commit 4b5bee37b1
11 changed files with 140 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
chrome/content/zotero/contextPane.js
View file

@ -57,12 +57,10 @@ var ZoteroContextPane = new function () {
_contextPaneInner.setAttribute('collapsed', !!collapsed);
_contextPaneSplitter.setAttribute('state', collapsed ? 'collapsed' : 'open');
_contextPaneSplitterStacked.setAttribute('state', collapsed ? 'collapsed' : 'open');
_update();
this.update();
}
});
this.update = _update;
this.focus = () => {
return _contextPaneInner.handleFocus();
};
@ -71,10 +69,6 @@ var ZoteroContextPane = new function () {
_loadingMessageContainer.classList.toggle('hidden', !isShow);
};
this.updateAddToNote = _updateAddToNote;
this.togglePane = _togglePane;
this.init = function () {
if (!Zotero) {
return;
@ -93,18 +87,18 @@ var ZoteroContextPane = new function () {
this.context = _contextPaneInner;
window.addEventListener('resize', _update);
Zotero.Reader.onChangeSidebarWidth = _updatePaneWidth;
Zotero.Reader.onToggleSidebar = _updatePaneWidth;
window.addEventListener('resize', this.update);
Zotero.Reader.onChangeSidebarWidth = this._updatePaneWidth;
Zotero.Reader.onToggleSidebar = this._updatePaneWidth;
};
this.destroy = function () {
window.removeEventListener('resize', _update);
window.removeEventListener('resize', this.update);
Zotero.Reader.onChangeSidebarWidth = () => {};
Zotero.Reader.onToggleSidebar = () => {};
};
function _updateAddToNote() {
this.updateAddToNote = () => {
let reader = Zotero.Reader.getByTabID(Zotero_Tabs.selectedID);
if (reader) {
let editor = ZoteroContextPane.activeEditor;
@ -113,34 +107,28 @@ var ZoteroContextPane = new function () {
&& (editor.item.deleted || editor.item.parentItem && editor.item.parentItem.deleted);
reader.enableAddToNote(!!editor && !libraryReadOnly && !noteReadOnly);
}
}
};
function _updatePaneWidth() {
this._updatePaneWidth = () => {
let stacked = _isStacked();
let width = Zotero.Reader.getSidebarWidth() + 'px';
if (!Zotero.Reader.getSidebarOpen()) {
width = 0;
}
let readerSidebarWidth = (Zotero.Reader.getSidebarOpen() ? Zotero.Reader.getSidebarWidth() : 0)
+ 'px';
let contextPaneWidth = _contextPane.getAttribute("width");
if (contextPaneWidth && !_contextPane.style.width) {
_contextPane.style.width = `${contextPaneWidth}px`;
}
if (Zotero.rtl) {
_contextPane.style.left = 0;
_contextPane.style.right = stacked ? width : 'unset';
_contextPane.style.right = stacked ? readerSidebarWidth : 'unset';
}
else {
_contextPane.style.left = stacked ? width : 'unset';
_contextPane.style.left = stacked ? readerSidebarWidth : 'unset';
_contextPane.style.right = 0;
}
}
};
function _isStacked() {
return Zotero.Prefs.get('layout') == 'stacked';
}
function _update() {
if (Zotero_Tabs.selectedIndex == 0) {
this.update = () => {
if (Zotero_Tabs.selectedType === 'library') {
return;
}
if (_isStacked()) {
@ -174,28 +162,32 @@ var ZoteroContextPane = new function () {
_contextPane.style.width = `${_contextPane.getAttribute("width")}px`;
}
if (Zotero_Tabs.selectedIndex > 0) {
var height = null;
if (_isStacked()) {
height = 0;
if (_contextPane.getAttribute('collapsed') != 'true') {
height = _contextPaneInner.getBoundingClientRect().height;
}
}
Zotero.Reader.setBottomPlaceholderHeight(height);
}
Zotero.Reader.setContextPaneOpen(!this.collapsed);
_updatePaneWidth();
_updateAddToNote();
var height = null;
if (_isStacked()) {
height = 0;
if (_contextPane.getAttribute('collapsed') != 'true') {
height = _contextPaneInner.getBoundingClientRect().height;
}
}
Zotero.Reader.setBottomPlaceholderHeight(height);
this._updatePaneWidth();
this.updateAddToNote();
ZoteroPane.updateLayoutConstraints();
};
this.togglePane = () => {
this.collapsed = !this.collapsed;
};
function _isStacked() {
return Zotero.Prefs.get('layout') == 'stacked';
}
function _isLibraryReadOnly(libraryID) {
return !Zotero.Libraries.get(libraryID).editable;
}
function _togglePane() {
this.collapsed = !this.collapsed;
}
};

23
chrome/content/zotero/elements/itemPaneSidenav.js
View file

@ -28,6 +28,14 @@
{
class ItemPaneSidenav extends XULElementBase {
content = MozXULElement.parseXULToFragment(`
<!-- Standard mode only: Toggle Item/Context Pane button -->
<toolbarbutton class="btn"
data-action="toggle-pane"
tabindex="0"
/>
<html:div class="divider"/>
<html:div class="inherit-flex highlight-notes-inactive" tabindex="0" role="tab" data-l10n-id="sidenav-main-btn-grouping">
<!-- Buttons will be added dynamically -->
</html:div>
@ -215,6 +223,11 @@
for (let button of this.querySelectorAll('.btn[data-action]')) {
let action = button.dataset.action;
if (action === 'toggle-pane') {
button.addEventListener('command', () => {
this._collapsed = !this._collapsed;
});
}
if (action === 'locate') {
button.addEventListener('mousedown', async (event) => {
if (event.button !== 0 || button.open) {
@ -313,9 +326,15 @@
for (let button of this.querySelectorAll('.btn[data-action]')) {
let action = button.dataset.action;
if (action == 'locate') {
if (action == 'toggle-pane' || action == 'locate') {
button.parentElement.hidden = false;
}
if (action == 'toggle-pane') {
document.l10n.setAttributes(button,
Zotero_Tabs.selectedType === 'library'
? 'toggle-item-pane'
: 'toggle-context-pane');
}
}
this.querySelector('.highlight-notes-active').classList.toggle('highlight', contextNotesPaneVisible);
@ -601,7 +620,7 @@
return {
index,
position: index === 0 ? 0 : index * (btnSize + btnGap) + btnGap / 2
}
};
};
handleKeyDown = (event) => {

13
chrome/content/zotero/xpcom/reader.js
View file

@ -201,6 +201,7 @@ class ReaderInstance {
sidebarWidth: this._sidebarWidth,
sidebarOpen: this._sidebarOpen,
bottomPlaceholderHeight: this._bottomPlaceholderHeight,
contextPaneOpen: this._contextPaneOpen,
rtl: Zotero.rtl,
fontSize: Zotero.Prefs.get('fontSize'),
localizedStrings: {
@ -1236,6 +1237,7 @@ class ReaderTab extends ReaderInstance {
super(options);
this._sidebarWidth = options.sidebarWidth;
this._sidebarOpen = options.sidebarOpen;
this._contextPaneOpen = options.bottomPlaceholderHeight;
this._bottomPlaceholderHeight = options.bottomPlaceholderHeight;
this._showContextPaneToggle = true;
this._onToggleSidebarCallback = options.onToggleSidebar;
@ -1388,6 +1390,7 @@ class ReaderWindow extends ReaderInstance {
super(options);
this._sidebarWidth = options.sidebarWidth;
this._sidebarOpen = options.sidebarOpen;
this._contextPaneOpen = false;
this._bottomPlaceholderHeight = 0;
this._onClose = options.onClose;
@ -1800,6 +1803,7 @@ class Reader {
constructor() {
this._sidebarWidth = 240;
this._sidebarOpen = false;
this._contextPaneOpen = false;
this._bottomPlaceholderHeight = 0;
this._readers = [];
this._notifierID = Zotero.Notifier.registerObserver(this, ['item', 'setting', 'tab'], 'reader');
@ -1925,6 +1929,14 @@ class Reader {
}
this._setSidebarState();
}
setContextPaneOpen(open) {
this._contextPaneOpen = open;
let readers = this._readers.filter(r => r instanceof ReaderTab);
for (let reader of readers) {
reader.setContextPaneOpen(open);
}
}
setBottomPlaceholderHeight(height) {
this._bottomPlaceholderHeight = height;
@ -2107,6 +2119,7 @@ class Reader {
background: openInBackground,
sidebarWidth: this._sidebarWidth,
sidebarOpen: this._sidebarOpen,
contextPaneOpen: this._contextPaneOpen,
bottomPlaceholderHeight: this._bottomPlaceholderHeight,
preventJumpback: preventJumpback,
onToggleSidebar: (open) => {

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

@ -6853,8 +6853,14 @@ var ZoteroPane = new function()
this.handleTagSelectorResize();
this.itemPane.handleResize();
}
};
this.toggleItemPane = function () {
this.itemPane.collapsed = !this.itemPane.collapsed;
this.updateLayoutConstraints();
};
// Set the label of the dynamic tooltip. Can be used when we cannot set .tooltiptext
// property, e.g. if we don't want the tooltip to be announced by screenreaders.

9
chrome/content/zotero/zoteroPane.xhtml
View file

@ -1344,6 +1344,15 @@
onkeydown="ZoteroPane_Local.handleSearchKeypress(this, event)"
oninput="ZoteroPane_Local.handleSearchInput(this, event)"
oncommand="ZoteroPane_Local.search()"/>
<!-- Stacked mode only: Toggle Item Pane button -->
<toolbarbutton
id="zotero-tb-toggle-item-pane-stacked"
class="zotero-tb-button"
tabindex="-1"
data-l10n-id="toggle-item-pane"
oncommand="ZoteroPane.toggleItemPane()"
/>
</hbox>
</toolbar>

5
chrome/locale/en-US/zotero/zotero.ftl
View file

@ -537,6 +537,11 @@ sidenav-reorder-down =
sidenav-reorder-reset =
.label = Reset Section Order
toggle-item-pane =
.tooltiptext = Toggle Item Pane
toggle-context-pane =
.tooltiptext = Toggle Context Pane
pin-section =
.label = Pin Section
unpin-section =

5
chrome/skin/default/zotero/20/universal/sidebar-bottom.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 15V16.25L14 16.25V15L6 15Z" fill="context-fill"/>
<path d="M6 12.75V14L12 14V12.75L6 12.75Z" fill="context-fill"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17 17.75C17 18.4404 16.4404 19 15.75 19L4.25 19C3.55964 19 3 18.4404 3 17.75L3 2.25C3 1.55964 3.55964 1 4.25 1L15.75 1C16.4404 1 17 1.55964 17 2.25L17 17.75ZM15.75 2.25L15.75 10L4.25 10L4.25 2.25L15.75 2.25ZM15.75 17.75L15.75 11.25L4.25 11.25L4.25 17.75L15.75 17.75Z" fill="context-fill"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 570 B

6
chrome/skin/default/zotero/20/universal/sidebar.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 7.25H4V6H7V7.25Z" fill="context-fill"/>
<path d="M7 10.25H4V9H7V10.25Z" fill="context-fill"/>
<path d="M7 13.25H4V12H7V13.25Z" fill="context-fill"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 3C1.55964 3 1 3.55964 1 4.25V15.75C1 16.4404 1.55964 17 2.25 17H17.75C18.4404 17 19 16.4404 19 15.75V4.25C19 3.55964 18.4404 3 17.75 3H2.25ZM17.75 4.25H10V15.75H17.75V4.25ZM2.25 4.25H8.75V15.75H2.25V4.25Z" fill="context-fill"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 547 B

14
scss/components/_toolbar.scss
View file

@ -122,6 +122,20 @@
margin-top: 1px;
}
#zotero-tb-toggle-item-pane-stacked {
// Hidden except in Stacked mode
display: none;
}
#main-window.stacked #zotero-toolbar-item-tree {
padding-inline-end: 0;
#zotero-tb-toggle-item-pane-stacked { // Keep nested for specificity
display: flex;
margin-inline-start: 9px;
}
}
toolbox {
@media (-moz-platform: linux) {
background: Menu;

1
scss/components/_toolbarbutton.scss
View file

@ -74,6 +74,7 @@ $toolbarbutton-icons: (
tabs-menu: "chevron",
sync-error: "error",
sync: "sync",
toggle-item-pane-stacked: "sidebar-bottom",
);
@each $cls, $icon in $toolbarbutton-icons {

25
scss/elements/_itemPaneSidenav.scss
View file

@ -108,16 +108,35 @@ item-pane-sidenav {
stroke: map.get($item-pane-sections, "notes");
}
// Locate button
&[data-action="locate"] {
&[data-action="locate"], &[data-action="toggle-pane"] {
color: var(--fill-secondary);
}
&[data-action="locate"] {
@include svgicon-menu("go-to", "universal", "20");
// Locate is flipped in RTL
&:-moz-locale-dir(rtl) {
transform: scaleX(-1);
}
}
&[data-action="toggle-pane"] {
@include svgicon-menu("sidebar", "universal", "20");
// ...And Toggle Item/Context Pane is flipped in LTR
&:-moz-locale-dir(ltr) {
transform: scaleX(-1);
}
// Hide in Stacked mode, since we show it in the toolbar instead
@include state("item-pane-sidenav.stacked") {
&, & + .divider {
display: none;
}
}
}
&[custom] {
@media (prefers-color-scheme: light) {
background-image: var(--custom-sidenav-icon-light);