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

fx115 fixes

Browse source 
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
This commit is contained in:
Bogdan Abaev 2024-01-09 14:11:25 -05:00 committed by Dan Stillman
parent f4a33cc2e1
commit 87297f8d29
15 changed files with 148 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
chrome/content/zotero-platform/mac/overlay.css
View file

@ -1,8 +1,3 @@
#zotero-items-toolbar[state=collapsed]
{
margin-inline-start: -8px !important;
}
#zotero-pane toolbarseparator {
margin-inline-start: 7px;
}

10
chrome/content/zotero-platform/unix/overlay.css
View file

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

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

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

2
chrome/content/zotero/elements/quickSearchTextbox.js
View file

@ -32,7 +32,7 @@
this.searchTextbox = null;
this.content = MozXULElement.parseXULToFragment(`
<hbox id="search-wrapper" flex="1" style="display: flex" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<hbox id="search-wrapper" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
</hbox>
`, ['chrome://zotero/locale/zotero.dtd']);
}

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

@ -1318,7 +1318,7 @@
>
<grippy/>
</splitter>
<vbox id="zotero-context-pane-inner" flex="1" zotero-persist="height"/>
<vbox id="zotero-context-pane-inner" zotero-persist="height"/>
</vbox>
<item-pane-sidenav id="zotero-context-pane-sidenav" class="zotero-view-item-sidenav" hidden="true"/>
</box>

3
chrome/skin/default/zotero/itemPane.css
View file

@ -10,12 +10,13 @@
.zotero-item-pane-content {
min-height: 0;
flex: 1;
}
.zotero-view-item-container {
display: flex;
flex-direction: row;
height: 0; /* Prevent overflow, somehow */
height: 0;
}
.zotero-view-item-main {

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

@ -1,7 +1,6 @@
#zotero-pane
{
min-height: 32px; /* must match value in ZoteroPane.updateTagSelectorSize() */
overflow: hidden;
}
/*
@ -182,7 +181,44 @@ TODO: Replace with SVG
#zotero-layout-switcher
{
height: 0;
min-width: 560px;
}
/*
Fx115: make panes occupy all availabel width/height after layout switch
*/
#zotero-layout-switcher[orient="horizontal"] :is(#zotero-items-pane-container, #zotero-item-pane) {
height: auto !important;
}
#zotero-layout-switcher[orient="vertical"],
#zotero-layout-switcher[orient="vertical"] :is(#zotero-items-pane-container, #zotero-item-pane) {
width: auto !important;
}
/*
Fix to odd fx115 behavior that gives an un-collapsed pane the initial width of min-width + last width
*/
#zotero-collections-pane[collapsed=true] {
min-width: 0px !important;
width: 0px !important;
}
#zotero-item-pane[collapsed=true] {
min-width: 0px !important;
width: 0px !important;
}
#zotero-context-pane[collapsed=true] {
min-width: 0px !important;
width: 0px !important;
}
/*
Fx115: this helps to avoid having a blank gap where the panel was before collapse
*/
#zotero-context-pane-inner[collapsed=true] {
height: 0 !important;
}
#zotero-pane toolbarseparator {
@ -199,12 +235,56 @@ TODO: Replace with SVG
padding: 0;
}
/*
Somewhat unified splitter styles
*/
#zotero-collections-splitter:not([state=collapsed]),
#zotero-items-splitter:not([state=collapsed]),
#zotero-context-splitter:not([state=collapsed]),
#zotero-context-splitter-stacked:not([state=collapsed])
{
border:none;
background-color: transparent;
}
#zotero-collections-splitter:not([state=collapsed]),
#zotero-items-splitter:not([state=collapsed])[orient=horizontal],
#zotero-context-splitter:not([state=collapsed])[orient=horizontal]
{
-moz-appearance: none;
width: 5px !important;
min-width: 5px;
/* Ensures all of the splitter serves as a mouse target */
z-index: 1;
}
#zotero-items-splitter:not([state=collapsed])[orient=horizontal],
#zotero-context-splitter:not([state=collapsed])[orient=horizontal],
#zotero-collections-splitter:not([state=collapsed]) {
border-inline-start: 1px solid #bdbdbd;
margin-inline-end: -4px;
}
#zotero-items-splitter[orient=vertical]:not([state=collapsed]),
#zotero-context-splitter-stacked
{
z-index: 1;
border-top: 1px solid #bdbdbd !important;
min-height: 5px;
margin-bottom: -4px;
}
#zotero-lookup-textbox {
margin: 4px;
padding: 2px;
-moz-box-flex: 1;
}
#zotero-lookup-panel {
min-height: 100px;
min-width: 500px;
}
#zotero-lookup-multiline-progress
{
height: 2em;

1
scss/abstracts/_mixins.scss
View file

@ -245,7 +245,6 @@
}
@media not (-moz-platform: windows) {
outline: none;
box-shadow: 0 0 0 var(--width-focus-border) var(--color-focus-border);
@if $thin {

29
scss/components/_contextPane.scss
View file

@ -2,6 +2,10 @@
min-width: $min-width-collections-pane + $min-width-items-pane;
}
#tabs-deck:not([selectedIndex="0"]) #zotero-pane {
width: 0; /* Prevent the main pane from stretching the deck of the reader */
}
#zotero-context-pane {
display: flex;
min-width: $min-width-context-pane;
@ -33,13 +37,30 @@
}
#zotero-context-pane-inner {
width: 0;
background: var(--material-background);
font: message-box;
font-size: inherit;
min-height: 100px;
height: 0;
pointer-events: auto;
background: var(--material-sidepane)
}
.zotero-context-panes-deck {
width: 100%;
display: block;
}
.zotero-context-panes-deck > deck {
height: 100%;
}
.zotero-view-item-container {
height: 100%;
}
#zotero-context-pane-inner {
height: 0;
}
#zotero-item-toolbar {
@ -92,3 +113,9 @@
#zotero-context-pane-inner[collapsed=true] .zotero-view-item > tabpanel > * {
overflow: unset !important;
}
// fx115 - stop width or height from being set by dragging the splitter
.zotero-view-item-sidenav {
width: auto !important;
height: auto !important;
}

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

@ -2,13 +2,12 @@
#zotero-items-pane-container {
min-width: $min-width-items-pane;
height: 150px;
min-height: 200px;
}
#zotero-items-pane {
min-width: $min-width-items-pane;
min-height: 150px;
height: 150px;
width: 290px;
}
#zotero-items-tree {

3
scss/components/_mainWindow.scss
View file

@ -11,3 +11,6 @@
// Let window chrome, tabs, and toolbar shrink even when sidebars overflow
min-width: 0;
}
#browser, #zotero-pane-stack, #zotero-trees {
min-height: 0;
}

4
scss/components/_search.scss
View file

@ -65,7 +65,9 @@ search-textbox {
// right: 2px padding + 8px dropmarker width + 4px padding + 6px padding
// Use explicit left/right padding here because this element is flipped in RTL (see below)
padding: 6px 4px 6px 6px;
margin: 0;
margin: 0px;
width: auto; // override fx115 default width
display: block; // override fx115 display:none on macOS
}
:is(search-textbox):-moz-locale-dir(rtl)::part(search-sign),

1
scss/components/_tabBar.scss
View file

@ -7,6 +7,7 @@
background: var(--material-tabbar);
-moz-window-dragging: drag;
min-height: var(--tab-min-height);
flex: 1;
@include macOS-inactive-opacity;

1
scss/components/_tagSelector.scss
View file

@ -13,6 +13,7 @@
min-height: 100px;
width: 100%;
display: flex;
height: 100%;
}
.tag-selector {

1
scss/components/_toolbar.scss
View file

@ -67,6 +67,7 @@
padding-inline-end: 6px;
margin: 0;
appearance: none;
height: 28px;
}
#zotero-collections-search.visible {