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 tagAriaLabel = '';
let tagSpans = ''; let tagSpans = [];
let coloredTags = item.getColoredTags(); let coloredTags = item.getColoredTags();
if (coloredTags.length) { if (coloredTags.length) {
let { emoji, colored } = coloredTags.reduce((acc, tag) => { let { emoji, colored } = coloredTags.reduce((acc, tag) => {
acc[Zotero.Utilities.Internal.isOnlyEmoji(tag.tag) ? 'emoji' : 'colored'].push(tag); acc[Zotero.Utilities.Internal.isOnlyEmoji(tag.tag) ? 'emoji' : 'colored'].push(tag);
return acc; return acc;
}, { emoji: [], colored: [] }); }, { 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(', ') + '.'; tagAriaLabel += ' ' + coloredTags.map(x => x.tag).join(', ') + '.';
} }

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

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

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

@ -75,12 +75,11 @@
margin-inline-end: 0; 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 // .cell-text is the opposite of that of the table
&:dir(ltr) .cell-text:dir(rtl), &:dir(ltr) .cell-text:dir(rtl),
&:dir(rtl) .cell-text:dir(ltr) { &:dir(rtl) .cell-text:dir(ltr) {
margin-inline-start: 0; margin-inline-end: 5px;
margin-inline-end: 6px;
} }
&:dir(ltr) .cell-text { &:dir(ltr) .cell-text {