mirror of
https://github.com/zotero/zotero.git
synced 2026-10-05 02:43:38 +00:00
5ca1fbb167
Split ItemTree megaclass into: - ItemTree - concerned with drawing the virtualized table container and column interaction - ItemTreeRowProvider - provides rows and issues notifications for render updates - ItemTreeRow and subclasses - contains row-specific data and rendering logic - CollectionViewItemTree and its accompanying classes - a version of ItemTree that renders items attached to a given Collection or CollectionView (CollectionTreeRow). Various improvements in logic and rendering, separation of concerns.
477 lines
8.8 KiB
SCSS
477 lines
8.8 KiB
SCSS
//
|
|
// Virtualized table
|
|
// --------------------------------------------------
|
|
|
|
/**
|
|
<hbox class="virtualized-table-container" flex="1">
|
|
<html:div id="virtualized-table-div"/>
|
|
</hbox>
|
|
*/
|
|
.virtualized-table-container {
|
|
display: flex;
|
|
height: 0;
|
|
flex-direction: column;
|
|
|
|
> div {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: var(--material-background);
|
|
}
|
|
}
|
|
|
|
.virtualized-table, .drag-image-container {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
|
|
// Used in virtualized-table.jsx when setting column widths
|
|
// to reserve extra space for the first column. See onResize()
|
|
--extra-width: 0px;
|
|
--first-column-extra-width: 0px;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&.resizing {
|
|
cursor: col-resize;
|
|
|
|
.cell {
|
|
cursor: col-resize;
|
|
}
|
|
}
|
|
|
|
.cell {
|
|
// NOTE: To avoid the complexities of dealing with padding in the
|
|
// flexbox model, `.cell` padding must be identical in the header and
|
|
// body. See #5198, #5162.
|
|
padding: 0 8px;
|
|
min-width: 30px;
|
|
cursor: default;
|
|
white-space: nowrap;
|
|
flex-grow: 1;
|
|
box-sizing: border-box;
|
|
|
|
&.label {
|
|
padding-inline-start: 0;
|
|
padding-inline-end: 4px;
|
|
}
|
|
|
|
&:first-child {
|
|
--extra-width: var(--first-column-extra-width, 0px);
|
|
// No padding on the first cell since it's done via twisty and indent
|
|
padding-inline-start: 0;
|
|
}
|
|
|
|
&:first-child,
|
|
&.primary {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
:not(.cell-text) {
|
|
flex-shrink: 0
|
|
}
|
|
|
|
.cell-text {
|
|
flex-grow: 1;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.twisty + .cell-text, .spacer-twisty + .cell-text {
|
|
margin-inline-start: 0;
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
// Add margin on the end side if the directionality of the
|
|
// .cell-text is the opposite of that of the table
|
|
&:dir(ltr) .cell-text:dir(rtl),
|
|
&:dir(rtl) .cell-text:dir(ltr) {
|
|
margin-inline-end: 5px;
|
|
}
|
|
|
|
&:dir(ltr) .cell-text {
|
|
text-align: left;
|
|
}
|
|
|
|
&:dir(rtl) .cell-text {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.cell-icon {
|
|
min-width: 16px;
|
|
}
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border-radius: 5px;
|
|
|
|
&.drop:not(.flashing) {
|
|
color: var(--material-background) !important;
|
|
background: var(--fill-secondary) !important;
|
|
|
|
* {
|
|
pointer-events: none !important;
|
|
}
|
|
}
|
|
|
|
span.drop-before, span.drop-after {
|
|
position: absolute;
|
|
width: 20%;
|
|
height: 1px;
|
|
background-color: var(--fill-secondary);
|
|
pointer-events: none;
|
|
}
|
|
|
|
span.drop-before {
|
|
top: 0;
|
|
}
|
|
|
|
span.drop-after {
|
|
bottom: -1px;
|
|
}
|
|
|
|
&.selected {
|
|
background-color: var(--color-accent);
|
|
color: var(--color-accent-text);
|
|
|
|
@include state(".virtualized-table:not(:focus-within)") {
|
|
color: var(--fill-primary);
|
|
background-color: var(--color-quarternary-on-sidepane);
|
|
}
|
|
}
|
|
|
|
&.highlighted:not(.selected) {
|
|
background: var(--highlight-color, var(--accent-highlight)) !important;
|
|
}
|
|
|
|
&.unread {
|
|
font-weight: 600;
|
|
}
|
|
|
|
&.context-row:not(.selected) {
|
|
color: var(--fill-secondary);
|
|
}
|
|
|
|
.spacer-twisty {
|
|
display: inline-block;
|
|
min-width: 16px;
|
|
}
|
|
|
|
.twisty {
|
|
margin-inline-end: 0 !important;
|
|
display: flex;
|
|
align-items: center;
|
|
transition: transform 0.125s ease;
|
|
transform: rotate(-90deg);
|
|
|
|
&.open {
|
|
transform: rotate(0deg) !important;
|
|
}
|
|
|
|
&.icon-css {
|
|
width: 16px;
|
|
height: 16px;
|
|
padding: 4px;
|
|
box-sizing: border-box;
|
|
background: url("chrome://zotero/skin/8/universal/chevron-8.svg") content-box no-repeat;
|
|
-moz-context-properties: fill, fill-opacity;
|
|
}
|
|
}
|
|
}
|
|
|
|
.column-drag-marker {
|
|
z-index: 99999;
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 2px;
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.twisty {
|
|
width: 19px;
|
|
|
|
svg {
|
|
fill: #888;
|
|
width: 16px;
|
|
}
|
|
}
|
|
|
|
.selected:not(.highlighted) .twisty svg {
|
|
fill: #fff;
|
|
}
|
|
|
|
.spacer-twisty {
|
|
min-width: 19px;
|
|
}
|
|
|
|
.spacer-header {
|
|
min-width: 0px;
|
|
}
|
|
}
|
|
|
|
.virtualized-table.multi-select:focus {
|
|
.row.focused {
|
|
border: 1px dotted highlight;
|
|
z-index: 10000;
|
|
|
|
> *:first-child {
|
|
margin-inline-start: -1px;
|
|
}
|
|
|
|
> *:last-child {
|
|
margin-inline-end: -1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.virtualized-table-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: 100%;
|
|
background: var(--material-background);
|
|
height: 1.83333333em; // 22px @ 12px font size
|
|
overflow: hidden;
|
|
border-bottom: 1px solid var(--material-border-quarternary);
|
|
padding-inline: 8px;
|
|
box-sizing: border-box;
|
|
padding-inline-end: calc(8px + var(--scrollbar-width, 0px));
|
|
|
|
@include comfortable {
|
|
height: 2.33333333em; // 28px @ 12px font size
|
|
padding: 0 8px;
|
|
}
|
|
|
|
&.static-columns {
|
|
pointer-events: none;
|
|
.cell {
|
|
&:hover {
|
|
background: inherit;
|
|
}
|
|
}
|
|
[title] {
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
&::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;
|
|
}
|
|
|
|
.cell:first-child > :first-child {
|
|
// offset header's column label/icon to align with the text in the first column, without introducing padding to the cell itself to avoid flexbox issues
|
|
padding-inline-start: var(--first-column-extra-width, 0px);
|
|
}
|
|
|
|
.cell {
|
|
display: flex;
|
|
position: relative;
|
|
height: 100%;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
background: var(--material-mix-quinary);
|
|
}
|
|
|
|
&.dragging {
|
|
background: var(--material-mix-quarternary);
|
|
}
|
|
|
|
.resizer {
|
|
background: linear-gradient(var(--fill-quarternary), var(--fill-quarternary)) no-repeat center/1px 66.666667%; // 14px @ 12px font size
|
|
cursor: col-resize;
|
|
height: 100%;
|
|
content: "\00a0";
|
|
display: block;
|
|
position: absolute;
|
|
left: -5px;
|
|
min-width: 10px;
|
|
|
|
@include comfortable {
|
|
background-size: 1px 74.074074%; // 20px @ 12px font size
|
|
}
|
|
}
|
|
|
|
.label {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex: 1;
|
|
}
|
|
|
|
&.cell-icon {
|
|
> .label {
|
|
margin-inline-start: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.icon-css {
|
|
fill: var(--fill-secondary);
|
|
}
|
|
|
|
padding: 0;
|
|
}
|
|
|
|
.sort-indicator {
|
|
-moz-appearance: toolbarbutton-dropdown;
|
|
display: block;
|
|
margin-right: 3px; // + 5px padding = 8px total
|
|
|
|
&.icon-css {
|
|
background: url("chrome://zotero/skin/8/universal/chevron-8.svg") content-box no-repeat;
|
|
-moz-context-properties: fill, fill-opacity;
|
|
fill: var(--fill-primary);
|
|
}
|
|
|
|
&.ascending {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.virtualized-table-body, .drag-image-container {
|
|
flex: 1 0;
|
|
max-width: 100%;
|
|
overflow: auto;
|
|
padding: 4px 8px 8px;
|
|
|
|
.cell {
|
|
// NOTE: Do not add padding here. See #5198
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
|
|
.virtualized-table.multi-select:focus {
|
|
.row.focused:not(.selected) {
|
|
outline: var(--default-focusring-width) dotted var(--color-accent);
|
|
z-index: 10000;
|
|
}
|
|
}
|
|
|
|
*[dir=rtl] {
|
|
.virtualized-table-header {
|
|
.cell .sort-indicator {
|
|
left: 3px; // + 5px padding = 8px total
|
|
right: initial;
|
|
}
|
|
|
|
.resizer {
|
|
right: -5px;
|
|
left: initial;
|
|
}
|
|
}
|
|
|
|
.row .twisty {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
.virtualized-table.focus-states-target {
|
|
.row .twisty.icon-css {
|
|
@include focus-states using ($color) {
|
|
@if $color =="white" {
|
|
fill: var(--accent-white);
|
|
}
|
|
|
|
@else {
|
|
fill: var(--fill-secondary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.drag-image-container {
|
|
box-sizing: border-box;
|
|
|
|
.row .twisty.icon-css {
|
|
@include focus-states('.row.selected', '.drag-image-container:focus-within') using ($color) {
|
|
fill: var(--fill-secondary);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Styling for clickable button-cells
|
|
.virtualized-table {
|
|
// the cell with the clickable button
|
|
.cell.clickable {
|
|
// make sure the button is centered
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0;
|
|
|
|
// the actual clickable button
|
|
.icon-action {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
align-items: center;
|
|
border-radius: 6px;
|
|
.icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
&:hover:not([disabled]) {
|
|
background-color: var(--fill-quinary);
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: var(--fill-quarternary);
|
|
}
|
|
&[disabled] {
|
|
color: var(--color-gray-50);
|
|
}
|
|
// show focus ring around the actual icon so that the outline won't overlap with other rows
|
|
&:focus-visible {
|
|
outline: none;
|
|
.icon {
|
|
border-radius: 5px;
|
|
outline: var(--default-focusring-width) solid var(--color-accent);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// lighter hover and active effects on clickable buttons in selected rows
|
|
.row.selected {
|
|
.icon-action {
|
|
&:hover:not([disabled]) {
|
|
background-color: #ffffff1a;
|
|
}
|
|
&:active:not([disabled]) {
|
|
background-color: #ffffff33;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|