Improve comments chips in patchset select
- add icon for resolved comments with avatars
- add padding
- comments inside div with text to be more consistent with spacing
Screenshot: https://imgur.com/a/lrDksVE
Release-Notes: skip
Google-Bug-Id: b/187487742
Change-Id: I48e2e5d0c53ef45eca2e34eb13f2342639be5611
diff --git a/polygerrit-ui/app/elements/change/gr-comments-summary/gr-comments-summary.ts b/polygerrit-ui/app/elements/change/gr-comments-summary/gr-comments-summary.ts
index 3d5533c..6f83190 100644
--- a/polygerrit-ui/app/elements/change/gr-comments-summary/gr-comments-summary.ts
+++ b/polygerrit-ui/app/elements/change/gr-comments-summary/gr-comments-summary.ts
@@ -179,6 +179,7 @@
styleType=${SummaryChipStyles.CHECK}
category=${CommentTabState.SHOW_ALL}
.clickable=${this.clickableChips}
+ icon="mark_chat_read"
><gr-avatar-stack .accounts=${resolvedAuthors} imageSize="32">
<gr-icon
slot="fallback"
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.ts b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.ts
index a083526..9b74e24 100644
--- a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.ts
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.ts
@@ -166,6 +166,9 @@
--selection-background-color
);
}
+ gr-comments-summary {
+ padding-left: var(--spacing-s);
+ }
@media only screen and (max-width: 50em) {
gr-select {
display: var(--gr-select-style-display, inline);
@@ -252,15 +255,17 @@
return html`
<paper-item ?disabled=${item.disabled} data-value=${item.value}>
<div class="topContent">
- <div>${item.text}</div>
- ${when(
- item.commentThreads,
- () => html`<gr-comments-summary
- .commentThreads=${item.commentThreads}
- emptyWhenNoComments
- showAvatarForResolved
- ></gr-comments-summary>`
- )}
+ <div>
+ <span>${item.text}</span>
+ ${when(
+ item.commentThreads,
+ () => html`<gr-comments-summary
+ .commentThreads=${item.commentThreads}
+ emptyWhenNoComments
+ showAvatarForResolved
+ ></gr-comments-summary>`
+ )}
+ </div>
${when(
item.date,
() => html`
diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list_test.ts b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list_test.ts
index b9380cb..c148a1b 100644
--- a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list_test.ts
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list_test.ts
@@ -91,7 +91,7 @@
tabindex="-1"
>
<div class="topContent">
- <div>Top Text 1</div>
+ <div><span>Top Text 1</span></div>
</div>
</paper-item>
<paper-item
@@ -103,7 +103,7 @@
tabindex="0"
>
<div class="topContent">
- <div>Top Text 2</div>
+ <div><span>Top Text 2</span></div>
</div>
<div class="bottomContent">
<div>Bottom Text 2</div>
@@ -119,7 +119,7 @@
tabindex="-1"
>
<div class="topContent">
- <div>Top Text 3</div>
+ <div><span>Top Text 3</span></div>
<gr-date-formatter> </gr-date-formatter>
</div>
<div class="bottomContent">
@@ -231,7 +231,8 @@
assert.equal(items[0].dataset.value, element.items[0].value as any);
assert.equal(mobileItems[0].value, element.items[0].value);
assert.equal(
- queryAndAssert<HTMLDivElement>(items[0], '.topContent div').innerText,
+ queryAndAssert<HTMLDivElement>(items[0], '.topContent div span')
+ .innerText,
element.items[0].text
);
@@ -250,7 +251,8 @@
assert.equal(items[1].dataset.value, element.items[1].value as any);
assert.equal(mobileItems[1].value, element.items[1].value);
assert.equal(
- queryAndAssert<HTMLDivElement>(items[1], '.topContent div').innerText,
+ queryAndAssert<HTMLDivElement>(items[1], '.topContent div span')
+ .textContent,
element.items[1].text
);
@@ -273,7 +275,8 @@
assert.equal(items[2].dataset.value, element.items[2].value as any);
assert.equal(mobileItems[2].value, element.items[2].value);
assert.equal(
- queryAndAssert<HTMLDivElement>(items[2], '.topContent div').innerText,
+ queryAndAssert<HTMLDivElement>(items[2], '.topContent div span')
+ .innerText,
element.items[2].text
);
