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

Set main window min-width/height dynamically (#3841)

Browse source 
Correctly calculates minimums when window is too small, so it grows
when the collection tree is made bigger.
This commit is contained in:
Abe Jellinek 2024-04-13 00:44:17 -07:00 committed by GitHub
parent 860e2ce7ca
commit fc648a949a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 49 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
chrome/content/zotero/standalone/standalone.js
View file

@ -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':

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

@ -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) {

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

@ -1036,8 +1036,8 @@
<splitter id="zotero-collections-splitter" resizebefore="closest" resizeafter="closest" collapse="before"
zotero-persist="state"
onmousemove="document.getElementById('zotero-items-toolbar').setAttribute('state', this.getAttribute('state'));ZoteroPane_Local.updateToolbarPosition();"
oncommand="ZoteroPane_Local.updateToolbarPosition()">
onmousemove="document.getElementById('zotero-items-toolbar').setAttribute('state', this.getAttribute('state'));ZoteroPane_Local.updateLayoutConstraints();"
oncommand="ZoteroPane_Local.updateLayoutConstraints()">
<grippy id="zotero-collections-grippy"/>
</splitter>
@ -1155,8 +1155,8 @@
<splitter id="zotero-items-splitter" resizebefore="closest" resizeafter="closest" collapse="after" orient="horizontal" zotero-persist="state orient"
onmousemove="ZoteroPane.updateToolbarPosition()"
oncommand="ZoteroPane.updateToolbarPosition()">
onmousemove="ZoteroPane.updateLayoutConstraints()"
oncommand="ZoteroPane.updateLayoutConstraints()">
<grippy id="zotero-items-grippy"/>
</splitter>

15
chrome/skin/default/zotero/overlay.css
View file

@ -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;

4
scss/abstracts/_variables.scss
View file

@ -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;

2
scss/components/_contextPane.scss
View file

@ -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

2
scss/components/_item-tree.scss
View file

@ -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 {

6
scss/components/_mainWindow.scss
View file

@ -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;

6
scss/components/_toolbar.scss
View file

@ -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;
}
}
}