From 87297f8d29b5fe77b82ae3a0bc77267a7a449d17 Mon Sep 17 00:00:00 2001 From: Bogdan Abaev Date: Tue, 9 Jan 2024 14:11:25 -0500 Subject: [PATCH] fx115 fixes A number of style changes to fix layout for fx115. - Make panes occupy all width/height based on layout. - Display the tag splitter on windows and mac. - Fix to odd fx115 behavior that gives an un-collapsed pane the initial width of min-width * 2. - Ensure that whenever there is a width attribute on contextPane, it will be present in the style as well. - Set width = 0 on zotero pane when it is not selected because it kept preventing the contextPane from properly expanding. - Context pane has its height changed on splitter drag. - Set height of the context pane in stacked mode to 0 to avoid having a blank gap after collapse. - Remove negative margin before the toolbar if the collection tree is collapsed on mac. - Tweaks splitter styles to have mouse target of more than 1px. Added positive z-index to make sure splitters are not covered by panes. Splitter styles are somewhat unified for all platforms. - Fix lookup panel sizing - Quicksearch margin edits to not squize the input field. - Collection and quick search fields layout fixed - Use flex properties to fix layout - fix outline display for editable-text - fix the contextpane width going out of bounds - stacked itemPane is visible after layout change - In stacked view, prevent itemPane from being dragged so high that it covers itemTree and overlaps with toolbar --- .../content/zotero-platform/mac/overlay.css | 5 -- .../content/zotero-platform/unix/overlay.css | 10 +++ chrome/content/zotero/contextPane.js | 13 +++ .../zotero/elements/quickSearchTextbox.js | 2 +- chrome/content/zotero/zoteroPane.xhtml | 2 +- chrome/skin/default/zotero/itemPane.css | 3 +- chrome/skin/default/zotero/overlay.css | 84 ++++++++++++++++++- scss/abstracts/_mixins.scss | 1 - scss/components/_contextPane.scss | 29 ++++++- scss/components/_item-tree.scss | 5 +- scss/components/_mainWindow.scss | 3 + scss/components/_search.scss | 4 +- scss/components/_tabBar.scss | 1 + scss/components/_tagSelector.scss | 1 + scss/components/_toolbar.scss | 1 + 15 files changed, 148 insertions(+), 16 deletions(-) diff --git a/chrome/content/zotero-platform/mac/overlay.css b/chrome/content/zotero-platform/mac/overlay.css index 5df78466ac..11d0479ec2 100644 --- a/chrome/content/zotero-platform/mac/overlay.css +++ b/chrome/content/zotero-platform/mac/overlay.css @@ -1,8 +1,3 @@ -#zotero-items-toolbar[state=collapsed] -{ - margin-inline-start: -8px !important; -} - #zotero-pane toolbarseparator { margin-inline-start: 7px; } diff --git a/chrome/content/zotero-platform/unix/overlay.css b/chrome/content/zotero-platform/unix/overlay.css index f1ce472a21..49bc6bd38e 100644 --- a/chrome/content/zotero-platform/unix/overlay.css +++ b/chrome/content/zotero-platform/unix/overlay.css @@ -17,3 +17,13 @@ tab { #zotero-prefs .numberbox-input-box{ -moz-appearance: textfield; } + +#zotero-tags-splitter:not([state=collapsed]) { + min-height: 5px; +} + +#zotero-context-splitter-stacked { + -moz-appearance: none; + background-color: #ececec; + border-top: 1px solid hsla(0, 0%, 0%, 0.2); +} diff --git a/chrome/content/zotero/contextPane.js b/chrome/content/zotero/contextPane.js index e9e43f2c5a..710c8cb71a 100644 --- a/chrome/content/zotero/contextPane.js +++ b/chrome/content/zotero/contextPane.js @@ -63,6 +63,7 @@ var ZoteroContextPane = new function () { _panesDeck = document.createXULElement('deck'); _panesDeck.setAttribute('flex', 1); _panesDeck.setAttribute('selectedIndex', 0); + _panesDeck.classList = "zotero-context-panes-deck"; _contextPaneInner.append(_panesDeck); @@ -314,6 +315,10 @@ var ZoteroContextPane = new function () { if (!Zotero.Reader.getSidebarOpen()) { width = 0; } + 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'; @@ -338,6 +343,10 @@ var ZoteroContextPane = new function () { _contextPane.classList.remove('standard'); _sidenav.classList.add('stacked'); _contextPaneInner.append(_sidenav); + // Fx115: in stacked layout, make contextPane occupy all width and remove min-height + // needed for standard layout + _contextPane.style.width = 'auto'; + _contextPaneInner.style.removeProperty("min-height"); } else { _contextPaneSplitter.setAttribute('hidden', false); @@ -347,6 +356,10 @@ var ZoteroContextPane = new function () { _contextPane.classList.remove('stacked'); _sidenav.classList.remove('stacked'); _contextPane.append(_sidenav); + // FX115: in standard layout, make contextPane have the width it's supposed to and + // force it to occupy all height available + _contextPaneInner.style.minHeight = `100%`; + _contextPane.style.width = `${_contextPane.getAttribute("width")}px`; } if (Zotero_Tabs.selectedIndex > 0) { diff --git a/chrome/content/zotero/elements/quickSearchTextbox.js b/chrome/content/zotero/elements/quickSearchTextbox.js index a1fce023ea..3e822bc30b 100644 --- a/chrome/content/zotero/elements/quickSearchTextbox.js +++ b/chrome/content/zotero/elements/quickSearchTextbox.js @@ -32,7 +32,7 @@ this.searchTextbox = null; this.content = MozXULElement.parseXULToFragment(` - + `, ['chrome://zotero/locale/zotero.dtd']); } diff --git a/chrome/content/zotero/zoteroPane.xhtml b/chrome/content/zotero/zoteroPane.xhtml index a4d0773a3b..22f47568a1 100644 --- a/chrome/content/zotero/zoteroPane.xhtml +++ b/chrome/content/zotero/zoteroPane.xhtml @@ -1318,7 +1318,7 @@ > - +