diff --git a/chrome/content/zotero/itemTree.jsx b/chrome/content/zotero/itemTree.jsx index 243cdc6aa7..71fd3e5bf0 100644 --- a/chrome/content/zotero/itemTree.jsx +++ b/chrome/content/zotero/itemTree.jsx @@ -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(', ') + '.'; } diff --git a/scss/components/_item-tree.scss b/scss/components/_item-tree.scss index 8f640da3a5..b4a52fb329 100644 --- a/scss/components/_item-tree.scss +++ b/scss/components/_item-tree.scss @@ -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 { diff --git a/scss/components/_virtualized-table.scss b/scss/components/_virtualized-table.scss index e62fdfb53c..f10f0ccf8c 100644 --- a/scss/components/_virtualized-table.scss +++ b/scss/components/_virtualized-table.scss @@ -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 {