From fc648a949a40746c99d05922c27456cd5c88992d Mon Sep 17 00:00:00 2001 From: Abe Jellinek Date: Sat, 13 Apr 2024 00:44:17 -0700 Subject: [PATCH] Set main window min-width/height dynamically (#3841) Correctly calculates minimums when window is too small, so it grows when the collection tree is made bigger. --- .../content/zotero/standalone/standalone.js | 6 ++--- chrome/content/zotero/zoteroPane.js | 27 +++++++++++++------ chrome/content/zotero/zoteroPane.xhtml | 8 +++--- chrome/skin/default/zotero/overlay.css | 15 ++++++----- scss/abstracts/_variables.scss | 4 +++ scss/components/_contextPane.scss | 2 +- scss/components/_item-tree.scss | 2 +- scss/components/_mainWindow.scss | 6 ++++- scss/components/_toolbar.scss | 6 ++--- 9 files changed, 49 insertions(+), 27 deletions(-) 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 +}