diff --git a/chrome/content/zotero/collectionTree.jsx b/chrome/content/zotero/collectionTree.jsx index 21de5676ad..58067f2449 100644 --- a/chrome/content/zotero/collectionTree.jsx +++ b/chrome/content/zotero/collectionTree.jsx @@ -487,7 +487,6 @@ var CollectionTree = class CollectionTree extends LibraryTree { ref: ref => this.tree = ref, treeboxRef: ref => this._treebox = ref, renderItem: this.renderItem, - alternatingRowColors: null, onSelectionChange: this._handleSelectionChange, isSelectable: this.isSelectable, diff --git a/chrome/content/zotero/itemTree.jsx b/chrome/content/zotero/itemTree.jsx index 748372ace1..c212adf248 100644 --- a/chrome/content/zotero/itemTree.jsx +++ b/chrome/content/zotero/itemTree.jsx @@ -27,6 +27,7 @@ const { noop, getDragTargetOrient } = require("components/utils"); const PropTypes = require("prop-types"); const React = require('react'); const ReactDOM = require('react-dom'); +const cx = require('classnames'); const LibraryTree = require('./libraryTree'); const VirtualizedTable = require('components/virtualized-table'); const { VirtualizedTree, formatColumnName } = VirtualizedTable; @@ -1446,8 +1447,10 @@ var ItemTree = class ItemTree extends LibraryTree { renderItem: this._renderItem.bind(this), hide: showMessage, key: "virtualized-table", + className: cx([{ "regular-only": this.props.regularOnly }]), showHeader: true, + alternateRowColors: true, columns: this._getColumns(), onColumnPickerMenu: this._displayColumnPickerMenu.bind(this), onColumnSort: this.isSortable ? this._handleColumnSort : null, diff --git a/scss/components/_citationExplorer.scss b/scss/components/_citationExplorer.scss index 5427e6d450..6912665eb2 100644 --- a/scss/components/_citationExplorer.scss +++ b/scss/components/_citationExplorer.scss @@ -3,7 +3,6 @@ dialog { max-height: 100vh; - padding: 0 0 .3em; background: var(--material-sidepane); } @@ -16,6 +15,7 @@ grid-template-columns: 4fr 6fr; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; + margin: -16px; .citation-explorer-grid-left { border-right: solid 1px ThreeDShadow; @@ -34,12 +34,19 @@ display: flex; } - .searchbox-container { - border-bottom: 1px solid ThreeDShadow; - } - .virtualized-table-container { height: 100%; + border-block: 1px solid ThreeDShadow; + } + + .virtualized-table .row { + &.odd:not(.selected) { + background-color: var(--material-stripe); + } + + &.even:not(.selected) { + background-color: var(--material-background); + } } .virtualized-table:focus-within .row.highlighted:not(.selected) { @@ -47,16 +54,44 @@ } .button-container { - border-block: 1px solid ThreeDShadow; + border-bottom: 1px solid ThreeDShadow; display: flex; } @media (-moz-platform: macos) { - tab[visuallyselected="true"]:not(:-moz-window-inactive) { - color: initial !important; + .tabbox-container, #citations-label { + padding-top: 16px !important; } - #citations-label { - font-size: 1.2em; + + .button-container { + padding-bottom: 0px; + margin-bottom: -16px; + } + + tabbox { + flex: 1; + flex-direction: row; + + tabs { + flex: 1; + margin-bottom: 0; + + tab { + flex: 1; + + &[visuallyselected="true"]:not(:-moz-window-inactive) { + color: initial !important; + } + label.tab-text { + flex-direction: column; + align-items: center; + } + } + + spacer.tabs-right { + flex: 0; + } + } } }