Misc new tree cleanup

This commit is contained in:
Adomas Venčkauskas 2021-04-09 12:00:34 +03:00 committed by Dan Stillman
parent d26eba2d2c
commit 47094fc4c3
21 changed files with 403 additions and 411 deletions

View file

@ -1,8 +1,8 @@
/* /*
***** BEGIN LICENSE BLOCK ***** ***** BEGIN LICENSE BLOCK *****
Copyright © 2019 Center for History and New Media Copyright © 2019 Corporation for Digital Scholarship
George Mason University, Fairfax, Virginia, USA Vienna, Virginia, USA
http://zotero.org http://zotero.org
This file is part of Zotero. This file is part of Zotero.

View file

@ -1,8 +1,8 @@
/* /*
***** BEGIN LICENSE BLOCK ***** ***** BEGIN LICENSE BLOCK *****
Copyright © 2019 Center for History and New Media Copyright © 2019 Corporation for Digital Scholarship
George Mason University, Fairfax, Virginia, USA Vienna, Virginia, USA
http://zotero.org http://zotero.org
This file is part of Zotero. This file is part of Zotero.

View file

@ -1,8 +1,8 @@
/* /*
***** BEGIN LICENSE BLOCK ***** ***** BEGIN LICENSE BLOCK *****
Copyright © 2019 Center for History and New Media Copyright © 2019 Corporation for Digital Scholarship
George Mason University, Fairfax, Virginia, USA Vienna, Virginia, USA
http://zotero.org http://zotero.org
This file is part of Zotero. This file is part of Zotero.

View file

@ -1,8 +1,8 @@
/* /*
***** BEGIN LICENSE BLOCK ***** ***** BEGIN LICENSE BLOCK *****
Copyright © 2019 Center for History and New Media Copyright © 2019 Corporation for Digital Scholarship
George Mason University, Fairfax, Virginia, USA Vienna, Virginia, USA
http://zotero.org http://zotero.org
This file is part of Zotero. This file is part of Zotero.

View file

@ -1,8 +1,8 @@
/* /*
***** BEGIN LICENSE BLOCK ***** ***** BEGIN LICENSE BLOCK *****
Copyright © 2019 Center for History and New Media Copyright © 2019 Corporation for Digital Scholarship
George Mason University, Fairfax, Virginia, USA Vienna, Virginia, USA
http://zotero.org http://zotero.org
This file is part of Zotero. This file is part of Zotero.

View file

@ -1,8 +1,8 @@
/* /*
***** BEGIN LICENSE BLOCK ***** ***** BEGIN LICENSE BLOCK *****
Copyright © 2020 Center for History and New Media Copyright © 2020 Corporation for Digital Scholarship
George Mason University, Fairfax, Virginia, USA Vienna, Virginia, USA
http://zotero.org http://zotero.org
This file is part of Zotero. This file is part of Zotero.

View file

@ -1,8 +1,8 @@
/* /*
***** BEGIN LICENSE BLOCK ***** ***** BEGIN LICENSE BLOCK *****
Copyright © 2020 Center for History and New Media Copyright © 2020 Corporation for Digital Scholarship
George Mason University, Fairfax, Virginia, USA Vienna, Virginia, USA
http://zotero.org http://zotero.org
This file is part of Zotero. This file is part of Zotero.

View file

@ -1,8 +1,8 @@
/* /*
***** BEGIN LICENSE BLOCK ***** ***** BEGIN LICENSE BLOCK *****
Copyright © 2020 Center for History and New Media Copyright © 2020 Corporation for Digital Scholarship
George Mason University, Fairfax, Virginia, USA Vienna, Virginia, USA
http://zotero.org http://zotero.org
This file is part of Zotero. This file is part of Zotero.

View file

@ -1,8 +1,8 @@
/* /*
***** BEGIN LICENSE BLOCK ***** ***** BEGIN LICENSE BLOCK *****
Copyright © 2020 Center for History and New Media Copyright © 2020 Corporation for Digital Scholarship
George Mason University, Fairfax, Virginia, USA Vienna, Virginia, USA
http://zotero.org http://zotero.org
This file is part of Zotero. This file is part of Zotero.

View file

@ -706,7 +706,7 @@ var ZoteroPane = new function()
} }
} }
else if ((event.keyCode == event.DOM_VK_BACK_SPACE && Zotero.isMac) || else if ((event.keyCode == event.DOM_VK_BACK_SPACE && Zotero.isMac) ||
event.keyCode == event.DOM_VK_DELETE) { event.keyCode == event.DOM_VK_DELETE) {
// If Cmd/Shift delete, use forced mode, which does different // If Cmd/Shift delete, use forced mode, which does different
// things depending on the context // things depending on the context
var force = event.metaKey || (!Zotero.isMac && event.shiftKey); var force = event.metaKey || (!Zotero.isMac && event.shiftKey);
@ -1292,14 +1292,6 @@ var ZoteroPane = new function()
*/ */
this.itemSelected = function () { this.itemSelected = function () {
return Zotero.Promise.coroutine(function* () { return Zotero.Promise.coroutine(function* () {
// Don't select item until items list has loaded
//
// This avoids an error if New Item is used while the pane is first loading.
// var promise = this.itemsView.waitForLoad();
// if (promise.isPending()) {
// yield promise;
// }
if (!this.itemsView || !this.itemsView.selection) { if (!this.itemsView || !this.itemsView.selection) {
Zotero.debug("Items view not available in itemSelected", 2); Zotero.debug("Items view not available in itemSelected", 2);
return false; return false;

View file

@ -1,45 +1,45 @@
#zotero-collections-tree-container { #zotero-collections-tree-container {
height: 5.2em; height: 5.2em;
} }
#zotero-collections-tree { #zotero-collections-tree {
width: 100%; width: 100%;
.virtualized-table {
overflow-y: auto;
flex: 1 0;
text-overflow: ellipsis;
}
.cell.primary { .virtualized-table {
display: flex; overflow-y: auto;
align-items: center; flex: 1 0;
text-overflow: ellipsis;
}
:not(.cell-text) { .cell.primary {
flex-shrink: 0 display: flex;
} align-items: center;
.cell-text {
flex-shrink: 1;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 6px;
}
input.cell-text {
border: 1px highlight solid;
padding: 1px 2px;
margin-right: 5px;
width: 100%;
font-size: inherit;
}
.cell-icon { :not(.cell-text) {
min-width: 16px; flex-shrink: 0
} }
}
.cell-text {
.row.editing .cell { flex-shrink: 1;
pointer-events: auto; text-overflow: ellipsis;
} overflow: hidden;
margin-left: 6px;
}
input.cell-text {
border: 1px highlight solid;
padding: 1px 2px;
margin-right: 5px;
width: 100%;
font-size: inherit;
}
.cell-icon {
min-width: 16px;
}
}
.row.editing .cell {
pointer-events: auto;
}
} }

View file

@ -3,45 +3,45 @@
min-height: 150px; min-height: 150px;
height: 150px; height: 150px;
width: 290px; width: 290px;
.items-tree-message { .items-tree-message {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
} }
} }
#zotero-items-tree { #zotero-items-tree {
.virtualized-table-header .icon { .virtualized-table-header .icon {
width: 13px; width: 13px;
height: 13px; height: 13px;
} }
.cell.primary { .cell.primary {
.retracted { .retracted {
width: 12px; width: 12px;
margin-inline-start: 3px; margin-inline-start: 3px;
} }
.tag-swatch { .tag-swatch {
display: inline-block; display: inline-block;
min-width: 8px; min-width: 8px;
min-height: 8px; min-height: 8px;
margin-inline-start: 3px; margin-inline-start: 3px;
border-radius: 1px; border-radius: 1px;
} }
} }
.cell.hasAttachment { .cell.hasAttachment {
box-sizing: content-box; box-sizing: content-box;
padding: 0 4px; padding: 0 4px;
} }
.cell.numNotes { .cell.numNotes {
text-align: center; text-align: center;
} }
} }

View file

@ -12,11 +12,11 @@
height: 0; height: 0;
flex-direction: column; flex-direction: column;
> div { > div {
display: flex; display: flex;
flex: 1; flex: 1;
background-color: -moz-field; background-color: -moz-field;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
} }
@ -27,103 +27,103 @@
position: relative; position: relative;
&:focus { &:focus {
outline: none; outline: none;
} }
&.resizing { &.resizing {
cursor: col-resize; cursor: col-resize;
.cell { .cell {
cursor: col-resize; cursor: col-resize;
} }
} }
.cell { .cell {
min-width: 30px; min-width: 30px;
cursor: default; cursor: default;
white-space: nowrap; white-space: nowrap;
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
box-sizing: border-box; box-sizing: border-box;
&.primary {
display: flex;
align-items: center;
:not(.cell-text) { &.primary {
flex-shrink: 0 display: flex;
} align-items: center;
.cell-text { :not(.cell-text) {
flex-shrink: 1; flex-shrink: 0
text-overflow: ellipsis; }
overflow: hidden;
margin-inline-start: 6px;
}
.twisty + .cell-text, .spacer-twisty + .cell-text {
margin-inline-start: 0;
}
}
.cell-icon { .cell-text {
min-width: 16px; flex-shrink: 1;
} text-overflow: ellipsis;
overflow: hidden;
margin-inline-start: 6px;
}
.twisty + .cell-text, .spacer-twisty + .cell-text {
margin-inline-start: 0;
}
}
.cell-icon {
min-width: 16px;
}
} }
.row { .row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
&.drop {
color: $shade-0 !important;
background: $shade-5 !important;
* {
pointer-events: none !important;
}
}
span.drop-before, span.drop-after { &.drop {
position: absolute; color: $shade-0 !important;
width: 20%; background: $shade-5 !important;
height: 1px; * {
background-color: $shade-5; pointer-events: none !important;
pointer-events: none; }
} }
span.drop-before {
top: 0;
}
span.drop-after {
bottom: -1px;
}
&.selected:not(.highlighted) {
background-color: highlight;
color: highlighttext;
}
&.highlighted { span.drop-before, span.drop-after {
background: #FFFF99; position: absolute;
} width: 20%;
height: 1px;
background-color: $shade-5;
pointer-events: none;
}
span.drop-before {
top: 0;
}
span.drop-after {
bottom: -1px;
}
&.unread { &.selected:not(.highlighted) {
font-weight: bold; background-color: highlight;
} color: highlighttext;
}
&.context-row { &.highlighted {
color: gray; background: #FFFF99;
} }
&.unread {
font-weight: bold;
}
&.context-row {
color: gray;
}
} }
.column-drag-marker { .column-drag-marker {
z-index: 99999; z-index: 99999;
position: absolute; position: absolute;
top: 0; top: 0;
height: 100%; height: 100%;
width: 2px; width: 2px;
background-color: #ccc; background-color: #ccc;
} }
} }
@ -137,62 +137,62 @@
height: 14px; height: 14px;
overflow: hidden; overflow: hidden;
border-inline-end: 1px solid #ddd; border-inline-end: 1px solid #ddd;
&.static-columns {
pointer-events: none;
}
.column-picker {
text-align: center;
}
.cell {
display: flex;
position: relative;
height: 100%;
align-items: center;
&:hover { &.static-columns {
background: #fff; pointer-events: none;
} }
&.dragging { .column-picker {
background: #e9e9e9; text-align: center;
} }
.resizer { .cell {
background: linear-gradient(#ddd, #ddd) no-repeat center/1px 80%; display: flex;
cursor: col-resize; position: relative;
height: 100%; height: 100%;
content: "\00a0"; align-items: center;
display: block;
position: absolute; &:hover {
left: -5px; background: #fff;
min-width: 10px; }
}
&.dragging {
.label { background: #e9e9e9;
margin-inline-start: 10px; }
overflow: hidden;
text-overflow: ellipsis; .resizer {
} background: linear-gradient(#ddd, #ddd) no-repeat center/1px 80%;
&.cell-icon { cursor: col-resize;
> .label { height: 100%;
margin-inline-start: 0; content: "\00a0";
} display: block;
justify-content: center; position: absolute;
} left: -5px;
min-width: 10px;
.sort-indicator { }
-moz-appearance: toolbarbutton-dropdown;
display: block; .label {
position: absolute; margin-inline-start: 10px;
right: 10px; overflow: hidden;
text-overflow: ellipsis;
&.ascending { }
transform: rotate(180deg); &.cell-icon {
} > .label {
} margin-inline-start: 0;
}
justify-content: center;
}
.sort-indicator {
-moz-appearance: toolbarbutton-dropdown;
display: block;
position: absolute;
right: 10px;
&.ascending {
transform: rotate(180deg);
}
}
} }
} }
@ -200,17 +200,17 @@
flex: 1 0; flex: 1 0;
max-width: 100%; max-width: 100%;
overflow: auto; overflow: auto;
.row { .row {
padding-inline-start: 6px; padding-inline-start: 6px;
} }
.cell { .cell {
padding: 2px 5px; padding: 2px 5px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
min-height: 90%; min-height: 90%;
} }
} }
.spacer-twisty { .spacer-twisty {
@ -224,28 +224,28 @@
align-items: center; align-items: center;
svg { svg {
fill: #444; fill: #444;
transition: transform 0.125s ease; transition: transform 0.125s ease;
transform: rotate(-90deg); transform: rotate(-90deg);
} }
&.open svg { &.open svg {
transform: rotate(0deg) !important; transform: rotate(0deg) !important;
} }
} }
*[dir=rtl] { *[dir=rtl] {
.virtualized-table-header { .virtualized-table-header {
.cell .sort-indicator { .cell .sort-indicator {
left: 10px; left: 10px;
right: initial; right: initial;
} }
.resizer { .resizer {
right: -5px; right: -5px;
left: initial; left: initial;
} }
} }
.twisty svg { .twisty svg {
transform: rotate(90deg); transform: rotate(90deg);
} }
} }

View file

@ -1,8 +1,8 @@
#zotero-collections-tree-container { #zotero-collections-tree-container {
margin-bottom: -1px; margin-bottom: -1px;
} }
#zotero-collections-tree .virtualized-table .row { #zotero-collections-tree .virtualized-table .row {
height: 1.333em; height: 1.333em;
} }

View file

@ -1,5 +1,5 @@
#zotero-items-tree { #zotero-items-tree {
.cell.hasAttachment, .cell.numNotes { .cell.hasAttachment, .cell.numNotes {
padding: 0 8px; padding: 0 8px;
} }
} }

View file

@ -1,28 +1,28 @@
.virtualized-table { .virtualized-table {
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.virtualized-table, .drag-image-container { .virtualized-table, .drag-image-container {
.twisty { .twisty {
padding-inline-end: 3px; padding-inline-end: 3px;
svg { svg {
width: 5px; width: 5px;
} }
} }
} }
.virtualized-table-header { .virtualized-table-header {
height: 28px; height: 28px;
background-image: linear-gradient(#fff, #fafafa); background-image: linear-gradient(#fff, #fafafa);
&.dragging { &.dragging {
color: #666; color: #666;
background: #f8f8f8; background: #f8f8f8;
} }
.cell .sort-indicator { .cell .sort-indicator {
transform: scale(1.25); transform: scale(1.25);
&.ascending { &.ascending {
transform: scale(1.25) rotate(180deg); transform: scale(1.25) rotate(180deg);
} }
} }
} }

View file

@ -1,54 +1,54 @@
#zotero-collections-tree { #zotero-collections-tree {
.virtualized-table { .virtualized-table {
background-color: #d2d8e2; background-color: #d2d8e2;
.row {
height: 1.818em;
&.selected:not(.highlighted) {
background: -moz-linear-gradient(top, #6494D4, #2559AC) repeat-x;
border-top: 1px solid #5382C5;
font-weight: bold !important;
color: #ffffff !important;
height: calc(1.818em - 1px);
padding-bottom: 1px;
}
}
&:not(:focus) .row.selected:not(.highlighted) {
background: -moz-linear-gradient(top, #A0B0CF, #7386AB) repeat-x;
border-top: 1px solid #94A1C0;
}
&:-moz-window-inactive {
background-color: rgb(232, 232, 232);
.row.selected:not(.highlighted) { .row {
background: -moz-linear-gradient(top, #B4B4B4, #8A8A8A) repeat-x; height: 1.818em;
border-top: 1px solid #979797;
} &.selected:not(.highlighted) {
} background: -moz-linear-gradient(top, #6494D4, #2559AC) repeat-x;
} border-top: 1px solid #5382C5;
font-weight: bold !important;
color: #ffffff !important;
height: calc(1.818em - 1px);
padding-bottom: 1px;
}
}
&:not(:focus) .row.selected:not(.highlighted) {
background: -moz-linear-gradient(top, #A0B0CF, #7386AB) repeat-x;
border-top: 1px solid #94A1C0;
}
&:-moz-window-inactive {
background-color: rgb(232, 232, 232);
.row.selected:not(.highlighted) {
background: -moz-linear-gradient(top, #B4B4B4, #8A8A8A) repeat-x;
border-top: 1px solid #979797;
}
}
}
} }
// IDK why, but these heights are all over the place on macOS (not a f(x)=x) // IDK why, but these heights are all over the place on macOS (not a f(x)=x)
*[zoteroFontSize=medium] #zotero-collections-tree .virtualized-table .row { *[zoteroFontSize=medium] #zotero-collections-tree .virtualized-table .row {
height: 1.739em; height: 1.739em;
&.focused:not(.highlighted) { &.focused:not(.highlighted) {
height: calc(1.738em - 1px); height: calc(1.738em - 1px);
} }
} }
*[zoteroFontSize=large] #zotero-collections-tree .virtualized-table .row { *[zoteroFontSize=large] #zotero-collections-tree .virtualized-table .row {
height: 1.68em; height: 1.68em;
&.focused:not(.highlighted) { &.focused:not(.highlighted) {
height: calc(1.68em - 1px); height: calc(1.68em - 1px);
} }
} }
*[zoteroFontSize=x-large] #zotero-collections-tree .virtualized-table .row { *[zoteroFontSize=x-large] #zotero-collections-tree .virtualized-table .row {
height: 1.697em; height: 1.697em;
&.focused:not(.highlighted) { &.focused:not(.highlighted) {
height: calc(1.697em - 1px); height: calc(1.697em - 1px);
} }
} }

View file

@ -1,9 +1,9 @@
#zotero-items-tree { #zotero-items-tree {
// Selected rows when the tree is not the focused element // Selected rows when the tree is not the focused element
.virtualized-table:not(:focus) { .virtualized-table:not(:focus) {
.row.selected { .row.selected {
background: #dcdcdc; background: #dcdcdc;
color: initial; color: initial;
} }
} }
} }

View file

@ -1,24 +1,24 @@
.virtualized-table, .drag-image-container { .virtualized-table, .drag-image-container {
.twisty { .twisty {
width: 19px; width: 19px;
svg {
fill: #888;
width: 16px;
}
}
.focused:not(.highlighted) .twisty svg { svg {
fill: #fff; fill: #888;
} width: 16px;
}
}
.spacer-twisty { .focused:not(.highlighted) .twisty svg {
min-width: 19px; fill: #fff;
} }
.spacer-twisty {
min-width: 19px;
}
} }
.virtualized-table-body, .drag-image-container{ .virtualized-table-body, .drag-image-container{
.cell:not(:first-child) { .cell:not(:first-child) {
border-inline-start: 1px solid #ddd; border-inline-start: 1px solid #ddd;
} }
} }

View file

@ -1,33 +1,33 @@
#zotero-items-tree .virtualized-table { #zotero-items-tree .virtualized-table {
.row { .row {
padding-inline-end: 1px; padding-inline-end: 1px;
&.selected { &.selected {
background-color: #e5f3ff; background-color: #e5f3ff;
border: 1px solid #7bc3ff; border: 1px solid #7bc3ff;
color: inherit; color: inherit;
padding-inline-start: 1px; padding-inline-start: 1px;
padding-inline-end: 0; padding-inline-end: 0;
} }
&:hover { &:hover {
background-color: #e5f3ff; background-color: #e5f3ff;
} }
} }
} }
#zotero-items-tree .virtualized-table:not(:focus) { #zotero-items-tree .virtualized-table:not(:focus) {
.row { .row {
&.selected { &.selected {
color: inherit; color: inherit;
background: #f0f0f0; background: #f0f0f0;
border: none; border: none;
padding-inline-start: 2px; padding-inline-start: 2px;
padding-inline-end: 1px; padding-inline-end: 1px;
} }
&.selected:hover { &.selected:hover {
background-color: #e5f3ff; background-color: #e5f3ff;
border: 1px solid #7bc3ff; border: 1px solid #7bc3ff;
padding-inline-start: 1px; padding-inline-start: 1px;
padding-inline-end: 0; padding-inline-end: 0;
} }
} }
} }

View file

@ -1,50 +1,50 @@
.spacer-twisty { .spacer-twisty {
min-width: 16px; min-width: 16px;
} }
.virtualized-table { .virtualized-table {
&:not(:focus) .row.selected:not(.highlighted) { &:not(:focus) .row.selected:not(.highlighted) {
color: inherit; color: inherit;
background: #f0f0f0; background: #f0f0f0;
} }
.row { .row {
padding-inline-start: 2px; padding-inline-start: 2px;
.twisty svg {
fill: #b6b6b6;
width: 16px;
}
.twisty.open svg { .twisty svg {
fill: #636363; fill: #b6b6b6;
} width: 16px;
}
&:hover .twisty svg { .twisty.open svg {
fill: #4ed0f9; fill: #636363;
} }
&.drop { &:hover .twisty svg {
background-color: highlight; fill: #4ed0f9;
color: highlighttext; }
}
} &.drop {
background-color: highlight;
color: highlighttext;
}
}
} }
.virtualized-table-header { .virtualized-table-header {
height: 24px; height: 24px;
background: #fff; background: #fff;
.cell { .cell {
&:hover { &:hover {
background: #d9ebf9; background: #d9ebf9;
} }
&:active { &:active {
background: #bcdcf4; background: #bcdcf4;
} }
&.dragging { &.dragging {
background: #d9ebf9 !important; background: #d9ebf9 !important;
color: #6d6d6d; color: #6d6d6d;
} }
} }
} }