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

Tweak padding in the tag selector list

Browse source
This commit is contained in:
Tom Najdek 2024-01-21 00:01:46 +01:00 committed by Dan Stillman
parent 61cca0fc69
commit ccfc3127ba
2 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
chrome/content/zotero/components/tagSelector/tagSelectorList.jsx
View file

@ -28,15 +28,15 @@ const PropTypes = require('prop-types');
var { Collection } = require('react-virtualized'); var { Collection } = require('react-virtualized');
// See also .tag-selector-item in _tag-selector.scss // See also .tag-selector-item in _tag-selector.scss
var filterBarHeight = 36; var filterBarHeight = 37;
var tagPaddingLeft = 4; var tagPaddingLeft = 4;
var tagPaddingRight = 4; var tagPaddingRight = 4;
var tagSpaceBetweenX = 2; var tagSpaceBetweenX = 2;
var tagSpaceBetweenY = 2; var tagSpaceBetweenY = 2;
var panePaddingTop = 4; // + splitter 9px tall var panePaddingTop = 8 + 1; // extra 1px offset for margin-bottom: -1px in #zotero-tags-splitter
var panePaddingLeft = 8; var panePaddingLeft = 8;
var panePaddingRight = 2; // + scrollbar width var panePaddingRight = 2; // + scrollbar width (but no less than 8px total)
//var panePaddingBottom = 2; // var panePaddingBottom = 8; // configurable in _tag-selector.scss
var minHorizontalPadding = panePaddingLeft + tagPaddingLeft + tagPaddingRight + panePaddingRight; var minHorizontalPadding = panePaddingLeft + tagPaddingLeft + tagPaddingRight + panePaddingRight;
@ -142,14 +142,17 @@ class TagList extends React.PureComponent {
} }
cellSizeAndPositionGetter = ({ index }) => { cellSizeAndPositionGetter = ({ index }) => {
var tagMaxWidth = this.props.width - minHorizontalPadding - this.scrollbarWidth; const tagPaddingTopBottom = this.props.uiDensity === 'comfortable' ? 2 : 1;
const tagMaxWidth = this.props.width - minHorizontalPadding - this.scrollbarWidth;
// NOTE: box-sizing is set to border-box on tags for i.e. padding needs to be included
return { return {
width: Math.min(this.props.tags[index].width, tagMaxWidth), width: Math.min(this.props.tags[index].width + tagPaddingLeft + tagPaddingRight, tagMaxWidth),
height: this.props.lineHeight, height: this.props.lineHeight + (2 * tagPaddingTopBottom),
x: this.positions[index][0], x: this.positions[index][0],
y: this.positions[index][1] y: this.positions[index][1]
}; };
} };
renderTag = ({ index, _key, style }) => { renderTag = ({ index, _key, style }) => {
var tag = this.props.tags[index]; var tag = this.props.tags[index];
@ -208,7 +211,7 @@ class TagList extends React.PureComponent {
<span>{tag.name}</span> <span>{tag.name}</span>
</div> </div>
); );
} };
render() { render() {
Zotero.debug("Rendering tag list"); Zotero.debug("Rendering tag list");

1
scss/components/_tagSelector.scss
View file

@ -111,6 +111,7 @@
padding: 1px 4px; padding: 1px 4px;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: pre; white-space: pre;
box-sizing: border-box;
@include comfortable { @include comfortable {
padding: 2px 4px; padding: 2px 4px;