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

Fix header columns being misaligned with table columns in item tree

Browse source 
And reindent _virtualized-table.scss
This commit is contained in:
Adomas Venčkauskas 2021-04-23 12:05:00 +03:00 committed by Dan Stillman
parent 431d7e1eaa
commit 55c758c9d0
2 changed files with 228 additions and 211 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
chrome/content/zotero/components/virtualized-table.jsx
View file

@ -1083,7 +1083,10 @@ class VirtualizedTable extends React.Component {
const header = document.querySelector(`#${this.props.id} .virtualized-table-header`);
const scrollbarWidth = Math.max(0,
tree.getBoundingClientRect().width - jsWindow.getBoundingClientRect().width);
header.style.width = `calc(100% - ${scrollbarWidth}px)`;
// Should be kept up to date with the _virtualized-table.scss value
// for .virtualized-table-header
const paddingInlineStart = 6;
header.style.width = `calc(100% - ${scrollbarWidth+paddingInlineStart}px)`;
}
/**

16
scss/components/_virtualized-table.scss
View file

@ -11,6 +11,7 @@
display: flex;
height: 0;
flex-direction: column;
> div {
display: flex;
flex: 1;
@ -32,6 +33,7 @@
&.resizing {
cursor: col-resize;
.cell {
cursor: col-resize;
}
@ -80,6 +82,7 @@
&.drop {
color: $shade-0 !important;
background: $shade-5 !important;
* {
pointer-events: none !important;
}
@ -92,9 +95,11 @@
background-color: $shade-5;
pointer-events: none;
}
span.drop-before {
top: 0;
}
span.drop-after {
bottom: -1px;
}
@ -137,6 +142,7 @@
height: 2em;
overflow: hidden;
border-inline-end: 1px solid #ddd;
padding-inline-start: 6px;
&.static-columns {
pointer-events: none;
@ -176,10 +182,15 @@
overflow: hidden;
text-overflow: ellipsis;
}
&:first-child .label {
margin-inline-start: 4px;
}
&.cell-icon {
> .label {
margin-inline-start: 0;
}
justify-content: center;
}
@ -196,7 +207,7 @@
}
}
.virtualized-table-body, .drag-image-container{
.virtualized-table-body, .drag-image-container {
flex: 1 0;
max-width: 100%;
overflow: auto;
@ -213,6 +224,7 @@
min-height: 90%;
}
}
.spacer-twisty {
display: inline-block;
min-width: 8px;
@ -240,11 +252,13 @@
left: 10px;
right: initial;
}
.resizer {
right: -5px;
left: initial;
}
}
.twisty svg {
transform: rotate(90deg);
}