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

Extend hover/drag color to the edges of the items header

Browse source
This commit is contained in:
Tom Najdek 2024-01-05 02:04:37 +01:00 committed by Dan Stillman
parent d8a00610da
commit a9eb79a45b
3 changed files with 46 additions and 21 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

@ -1329,9 +1329,8 @@ class VirtualizedTable extends React.Component {
if (Zotero.isLinux) {
paddingWidth = 2; // from the border
}
// Should be kept up to date with the _virtualized-table.scss value
// for .virtualized-table-header
header.style.width = `calc(100% - ${scrollbarWidth - paddingWidth}px)`;
header.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
}
/**

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

@ -7,8 +7,50 @@
}
.virtualized-table-header {
padding: 0 8px;
width: 100%;
padding-left: 8px;
padding-right: calc(8px + var(--scrollbar-width, 0px));
box-sizing: border-box;
.first-column {
&::before {
content: "";
display: inline-block;
width: 8px;
height: 100%;
background: transparent;
position: absolute;
left: -8px;
@include state(".first-column:hover") {
background: var(--material-mix-quinary);
}
@include state(".first-column.dragging") {
background: var(--material-mix-quarternary);
}
}
}
.cell:last-child {
&::after {
content: "";
display: inline-block;
width: calc(var(--scrollbar-width, 0px) + 8px);
height: 100%;
background: transparent;
position: absolute;
right: calc(-1 * var(--scrollbar-width, 0px) - 8px);
@include state(".cell:hover") {
background: var(--material-mix-quinary);
}
@include state(".cell.dragging") {
background: var(--material-mix-quarternary);
}
}
}
}
.virtualized-table {

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

@ -226,6 +226,7 @@
background: var(--material-background);
height: 1.83333333em; // 22px @ 12px font size
overflow: hidden;
border-bottom: var(--material-border-quarternary);
@include comfortable {
height: 2.33333333em; // 28px @ 12px font size
@ -236,23 +237,6 @@
pointer-events: none;
}
&::after {
content: "";
display: block;
border-bottom: var(--material-border-quarternary);
height: 1px;
width: 100%;
position: absolute;
top: calc(1.83333333em - 1px);
left: 0;
right: 0;
z-index: 1;
@include comfortable {
top: calc(2.33333333em - 1px);
}
}
.column-picker {
text-align: center;
}