diff --git a/chrome/content/zotero/standalone/standalone.js b/chrome/content/zotero/standalone/standalone.js
index d83b7c3b5d..832a895551 100644
--- a/chrome/content/zotero/standalone/standalone.js
+++ b/chrome/content/zotero/standalone/standalone.js
@@ -75,7 +75,7 @@ const ZoteroStandalone = new function() {
this.switchReaderSubtype(subtype);
}
}
- setTimeout(() => ZoteroPane.updateToolbarPosition(), 0);
+ setTimeout(() => ZoteroPane.updateLayoutConstraints(), 0);
}
}
},
@@ -512,7 +512,7 @@ const ZoteroStandalone = new function() {
document.getElementById('zotero-collections-splitter').setAttribute('state', 'collapsed');
collectionsPane.setAttribute('collapsed', true);
}
- ZoteroPane.updateToolbarPosition();
+ ZoteroPane.updateLayoutConstraints();
break;
case 'item-pane':
@@ -527,7 +527,7 @@ const ZoteroStandalone = new function() {
document.getElementById('zotero-items-splitter').setAttribute('state', 'collapsed');
itemPane.setAttribute('collapsed', true);
}
- ZoteroPane.updateToolbarPosition();
+ ZoteroPane.updateLayoutConstraints();
break;
case 'tag-selector':
diff --git a/chrome/content/zotero/zoteroPane.js b/chrome/content/zotero/zoteroPane.js
index a3f4303561..aeecb95bd0 100644
--- a/chrome/content/zotero/zoteroPane.js
+++ b/chrome/content/zotero/zoteroPane.js
@@ -117,16 +117,15 @@ var ZoteroPane = new function()
Zotero.UIProperties.registerRoot(document.getElementById('zotero-context-pane'));
this.itemPane = document.querySelector("#zotero-item-pane");
ZoteroPane_Local.updateLayout();
- ZoteroPane_Local.updateToolbarPosition();
this.updateWindow();
window.addEventListener("resize", () => {
this.updateWindow();
let tabsDeck = document.querySelector('#tabs-deck')
if (!tabsDeck || tabsDeck.getAttribute('selectedIndex') == 0) {
- this.updateToolbarPosition();
+ this.updateLayoutConstraints();
}
});
- window.setTimeout(this.updateToolbarPosition.bind(this), 0);
+ window.setTimeout(this.updateLayoutConstraints.bind(this), 0);
Zotero.updateQuickSearchBox(document);
@@ -768,7 +767,6 @@ var ZoteroPane = new function()
this.unserializePersist();
this.updateLayout();
- this.updateToolbarPosition();
this.initContainers();
// Focus the quicksearch on pane open
@@ -5988,15 +5986,17 @@ var ZoteroPane = new function()
itemsSplitter.setAttribute("orient", "vertical");
sidenav.classList.add("stacked");
this.itemPane.classList.add("stacked");
+ document.documentElement.classList.add("stacked");
}
- else { // three-vertical-pane
+ else { // three-vertical-pane
layoutSwitcher.setAttribute("orient", "horizontal");
itemsSplitter.setAttribute("orient", "horizontal");
sidenav.classList.remove("stacked");
this.itemPane.classList.remove("stacked");
+ document.documentElement.classList.remove("stacked");
}
- this.updateToolbarPosition();
+ this.updateLayoutConstraints();
if (ZoteroPane.itemsView) {
// Need to immediately rerender the items here without any debouncing
// since tree height will have changed
@@ -6093,15 +6093,26 @@ var ZoteroPane = new function()
/**
- * Moves around the toolbar when the user moves around the pane
+ * Update the window min-width/height, collections search width, tag selector, and sidenav
+ * when the window or elements within it are resized.
*/
- this.updateToolbarPosition = function () {
+ this.updateLayoutConstraints = function () {
var paneStack = document.getElementById("zotero-pane-stack");
if (paneStack.hidden) return;
+ var titlebar = document.getElementById('zotero-title-bar');
+ var trees = document.getElementById('zotero-trees');
+ var itemsPaneContainer = document.getElementById('zotero-items-pane-container');
var collectionsPane = document.getElementById("zotero-collections-pane");
var tagSelector = document.getElementById("zotero-tag-selector");
+ // Calculate the heights of the components that aren't able to shrink automatically
+ // when the window is resized
+ let fixedComponentWidth = trees.scrollWidth - itemsPaneContainer.scrollWidth;
+ let fixedComponentHeight = titlebar.scrollHeight + trees.scrollHeight - itemsPaneContainer.scrollHeight;
+ document.documentElement.style.setProperty('--width-of-fixed-components', `${fixedComponentWidth}px`);
+ document.documentElement.style.setProperty('--height-of-fixed-components', `${fixedComponentHeight}px`);
+
var collectionsPaneWidth = collectionsPane.getBoundingClientRect().width;
tagSelector.style.maxWidth = collectionsPaneWidth + 'px';
if (ZoteroPane.itemsView) {
diff --git a/chrome/content/zotero/zoteroPane.xhtml b/chrome/content/zotero/zoteroPane.xhtml
index 0648204f1d..839d6e9c1b 100644
--- a/chrome/content/zotero/zoteroPane.xhtml
+++ b/chrome/content/zotero/zoteroPane.xhtml
@@ -1036,8 +1036,8 @@
+ onmousemove="document.getElementById('zotero-items-toolbar').setAttribute('state', this.getAttribute('state'));ZoteroPane_Local.updateLayoutConstraints();"
+ oncommand="ZoteroPane_Local.updateLayoutConstraints()">
@@ -1155,8 +1155,8 @@
+ onmousemove="ZoteroPane.updateLayoutConstraints()"
+ oncommand="ZoteroPane.updateLayoutConstraints()">
diff --git a/chrome/skin/default/zotero/overlay.css b/chrome/skin/default/zotero/overlay.css
index 83beae75b5..96f0b9bfcc 100644
--- a/chrome/skin/default/zotero/overlay.css
+++ b/chrome/skin/default/zotero/overlay.css
@@ -174,18 +174,21 @@ TODO: Replace with SVG
text-decoration: underline;
}
-#zotero-layout-switcher
-{
- min-width: 560px;
-}
-
/*
- Fx115: make panes occupy all availabel width/height after layout switch
+ Fx115: make panes occupy all available width/height after layout switch
+ or splitter expand/collapse.
+ The splitter element stores state in the style attribute's width/height
+ properties, and if we remove them, the splitter breaks. So we override
+ them here with !important.
*/
#zotero-layout-switcher[orient="horizontal"] :is(#zotero-items-pane-container, #zotero-item-pane) {
height: auto !important;
}
+#zotero-layout-switcher[orient="horizontal"] #zotero-items-pane-container {
+ width: auto !important;
+}
+
#zotero-layout-switcher[orient="vertical"],
#zotero-layout-switcher[orient="vertical"] :is(#zotero-items-pane-container, #zotero-item-pane) {
width: auto !important;
diff --git a/scss/abstracts/_variables.scss b/scss/abstracts/_variables.scss
index 2e5909d1a6..a4bdd0159c 100644
--- a/scss/abstracts/_variables.scss
+++ b/scss/abstracts/_variables.scss
@@ -107,8 +107,12 @@ $tagColorsLookup: (
// Layout constants
// --------------------------------------------------
+$min-width-tabs-deck: 570px;
$min-width-collections-pane: 200px;
$min-width-items-pane: 370px;
$min-width-item-pane: 300px;
$min-width-context-pane: 300px;
$width-sidenav: 37px;
+
+$height-toolbar: 41px;
+$min-height-items-pane: 150px;
diff --git a/scss/components/_contextPane.scss b/scss/components/_contextPane.scss
index 2001a1a31a..2b49f502f0 100644
--- a/scss/components/_contextPane.scss
+++ b/scss/components/_contextPane.scss
@@ -1,5 +1,5 @@
#tabs-deck {
- min-width: $min-width-collections-pane + $min-width-items-pane;
+ min-width: $min-width-tabs-deck;
& > :not(.deck-selected) {
// Hide all sub-trees that are in the invisible tab deck
diff --git a/scss/components/_item-tree.scss b/scss/components/_item-tree.scss
index b1e01a61f1..f6d6d0ff7a 100644
--- a/scss/components/_item-tree.scss
+++ b/scss/components/_item-tree.scss
@@ -3,7 +3,7 @@
#zotero-items-pane-container {
min-width: $min-width-items-pane;
height: 150px;
- min-height: 200px;
+ min-height: $min-height-items-pane;
}
#zotero-items-pane {
diff --git a/scss/components/_mainWindow.scss b/scss/components/_mainWindow.scss
index ba25ae19db..8df2a95c87 100644
--- a/scss/components/_mainWindow.scss
+++ b/scss/components/_mainWindow.scss
@@ -3,10 +3,14 @@
}
#main-window {
- min-width: $min-width-collections-pane + $min-width-items-pane + $min-width-item-pane + $width-sidenav;
+ min-width: max(var(--width-of-fixed-components) + $min-width-items-pane, $min-width-tabs-deck);
min-height: 300px;
}
+#main-window.stacked {
+ min-height: calc(var(--height-of-fixed-components) + $min-height-items-pane + $height-toolbar);
+}
+
#zotero-pane {
min-width: 0;
min-height: 0;
diff --git a/scss/components/_toolbar.scss b/scss/components/_toolbar.scss
index 8f8fb9ce11..cc35b2da72 100644
--- a/scss/components/_toolbar.scss
+++ b/scss/components/_toolbar.scss
@@ -1,6 +1,6 @@
.toolbar {
- height: 41px !important; /* Hard-code this to fix toolbar icon compression on Linux */
- min-height: 41px; /* Needed to prevent squashing by stretched tag selector */
+ height: $height-toolbar !important; /* Hard-code this to fix toolbar icon compression on Linux */
+ min-height: $height-toolbar; /* Needed to prevent squashing by stretched tag selector */
margin: 0;
padding: 0px 8px 0px 8px;
min-width: 1px;
@@ -121,4 +121,4 @@ toolbox {
background: Menu;
appearance: initial;
}
-}
\ No newline at end of file
+}