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

Fix RTL layout issues in item tree

Browse source
This commit is contained in:
Abe Jellinek 2024-01-11 01:46:10 -05:00 committed by Dan Stillman
parent 5ae6f88b15
commit 6836bde339
3 changed files with 28 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
chrome/content/zotero/itemTree.jsx
View file

@ -2691,15 +2691,25 @@ var ItemTree = class ItemTree extends LibraryTree {
}
let tagAriaLabel = '';
let tagSpans = '';
let tagSpans = [];
let coloredTags = item.getColoredTags();
if (coloredTags.length) {
let { emoji, colored } = coloredTags.reduce((acc, tag) => {
acc[Zotero.Utilities.Internal.isOnlyEmoji(tag.tag) ? 'emoji' : 'colored'].push(tag);
return acc;
}, { emoji: [], colored: [] });
tagSpans = [...emoji, ...colored].map(x => this._getTagSwatch(x.tag, x.color));
tagAriaLabel = tagSpans.length == 1 ? Zotero.getString('searchConditions.tag') : Zotero.getString('itemFields.tags');
tagSpans.push(...emoji.map(x => this._getTagSwatch(x.tag)));
if (colored.length) {
let coloredTagSpans = colored.map(x => this._getTagSwatch(x.tag, x.color));
let coloredTagSpanWrapper = document.createElement('span');
coloredTagSpanWrapper.className = 'colored-tag-swatches';
coloredTagSpanWrapper.append(...coloredTagSpans);
tagSpans.push(coloredTagSpanWrapper);
}
tagAriaLabel = coloredTags.length == 1 ? Zotero.getString('searchConditions.tag') : Zotero.getString('itemFields.tags');
tagAriaLabel += ' ' + coloredTags.map(x => x.tag).join(', ') + '.';
}

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

@ -8,8 +8,8 @@
.virtualized-table-header {
width: 100%;
padding-left: 8px;
padding-right: calc(8px + var(--scrollbar-width, 0px));
padding-inline-start: 8px;
padding-inline-end: calc(8px + var(--scrollbar-width, 0px));
box-sizing: border-box;
.first-column {
@ -77,12 +77,22 @@
}
}
.colored-tag-swatches {
direction: ltr;
transform: scaleX(-1);
}
.tag-swatch {
display: inline-block;
&.emoji + .emoji,
&.emoji + .colored {
&.emoji + .colored-tag-swatches {
margin-left: 4px;
:root:-moz-locale-dir(rtl) & {
margin-left: 0;
margin-right: 4px;
}
}
&.colored {

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

@ -75,12 +75,11 @@
margin-inline-end: 0;
}
// Put the margin on the other side if the directionality of the
// 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-start: 0;
margin-inline-end: 6px;
margin-inline-end: 5px;
}
&:dir(ltr) .cell-text {