Improve change summary chips.
Following UX mocks following changes are made:
- Drafts are grey
- Drafts are positioned last
- Drafts changed icon to rate_review
- Icon for resolved threads is filled
Screenshot: https://imgur.com/a/JOxPbFB
Release-Notes: skip
Google-Bug-Id: b/187487742
Change-Id: I976b739b04e6284a52f31733d96c63c68e025df9
diff --git a/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts b/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts
index bdaf918..f8c8e50 100644
--- a/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts
@@ -548,12 +548,13 @@
countResolvedComments,
countUnresolvedComments
)}
- ${this.renderMentionChip()} ${this.renderDraftChip()}
+ ${this.renderMentionChip()}
${this.renderUnresolvedCommentsChip(
countUnresolvedComments,
unresolvedAuthors
)}
${this.renderResolvedCommentsChip(countResolvedComments)}
+ ${this.renderDraftChip()}
</td>
</tr>
${this.renderChecksSummary()}
@@ -592,9 +593,10 @@
private renderDraftChip() {
if (!this.draftCount) return nothing;
return html` <gr-summary-chip
- styleType=${SummaryChipStyles.WARNING}
+ styleType=${SummaryChipStyles.CHECK}
category=${CommentTabState.DRAFTS}
- icon="edit"
+ icon="rate_review"
+ iconFilled
>
${pluralize(this.draftCount, 'draft')}</gr-summary-chip
>`;
@@ -624,6 +626,7 @@
styleType=${SummaryChipStyles.CHECK}
category=${CommentTabState.SHOW_ALL}
icon="mark_chat_read"
+ iconFilled
>${countResolvedComments} resolved</gr-summary-chip
>`;
}
diff --git a/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary_test.ts b/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary_test.ts
index 016b727..7ca44e5 100644
--- a/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary_test.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary_test.ts
@@ -48,23 +48,25 @@
<tr>
<td class="key">Comments</td>
<td class="value">
- <gr-summary-chip
- category="drafts"
- icon="edit"
- styletype="warning"
- >
- 3 drafts
- </gr-summary-chip>
<gr-summary-chip category="unresolved" styletype="warning">
1 unresolved
</gr-summary-chip>
<gr-summary-chip
category="show all"
icon="mark_chat_read"
+ iconFilled
styletype="check"
>
1 resolved
</gr-summary-chip>
+ <gr-summary-chip
+ category="drafts"
+ icon="rate_review"
+ iconFilled
+ styletype="check"
+ >
+ 3 drafts
+ </gr-summary-chip>
</td>
</tr>
</tbody>
diff --git a/polygerrit-ui/app/elements/change/gr-change-summary/gr-summary-chip.ts b/polygerrit-ui/app/elements/change/gr-change-summary/gr-summary-chip.ts
index 4ac8790..fee77c7 100644
--- a/polygerrit-ui/app/elements/change/gr-change-summary/gr-summary-chip.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-summary/gr-summary-chip.ts
@@ -25,6 +25,9 @@
@property()
icon = '';
+ @property({type: Boolean})
+ iconFilled = false;
+
@property()
styleType = SummaryChipStyles.UNDEFINED;
@@ -91,7 +94,8 @@
override render() {
const chipClass = `summaryChip font-small ${this.styleType}`;
return html`<button class=${chipClass} @click=${this.handleClick}>
- ${this.icon && html`<gr-icon icon=${this.icon}></gr-icon>`}
+ ${this.icon &&
+ html`<gr-icon .filled=${this.iconFilled} icon=${this.icon}></gr-icon>`}
<slot></slot>
</button>`;
}
