Make draft comments more prominent
Do not show the author name when a comment is in draft state. Instead
show the blue "draft" icon.
Screenshots https://imgur.com/a/VpcB65o
Release-Notes: skip
Google-Bug-Id: b/227352232
Change-Id: Ice96cf572b3743168d70d3ecd2f216f36131a49d
diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
index 86ba96a..4b72b26 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
@@ -355,11 +355,13 @@
flex: 1;
overflow: hidden;
}
- .draftLabel,
.draftTooltip {
- color: var(--deemphasized-text-color);
+ font-weight: var(--font-weight-bold);
display: inline;
}
+ .draftTooltip gr-icon {
+ color: var(--info-foreground);
+ }
.date {
justify-content: flex-end;
text-align: right;
@@ -525,6 +527,7 @@
}
private renderAuthor() {
+ if (isDraftOrUnsaved(this.comment)) return;
if (isRobot(this.comment)) {
const id = this.comment.robot_id;
return html`<span class="robotName">${id}</span>`;
@@ -553,7 +556,7 @@
private renderDraftLabel() {
if (!isDraftOrUnsaved(this.comment)) return;
- let label = 'DRAFT';
+ let label = 'Draft';
let tooltip =
'This draft is only visible to you. ' +
"To publish drafts, click the 'Reply' or 'Start review' button " +
@@ -568,8 +571,8 @@
has-tooltip
title=${tooltip}
max-width="20em"
- show-icon
>
+ <gr-icon filled icon="rate_review"></gr-icon>
<span class="draftLabel">${label}</span>
</gr-tooltip-content>
`;
diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.ts b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.ts
index 8ab2099..8765d23 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.ts
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment_test.ts
@@ -247,18 +247,14 @@
<div class="container draft" id="container">
<div class="header" id="header">
<div class="headerLeft">
- <gr-account-label
- class="draft"
- deselected=""
- ></gr-account-label>
<gr-tooltip-content
class="draftTooltip"
has-tooltip=""
max-width="20em"
- show-icon=""
title="This draft is only visible to you. To publish drafts, click the 'Reply' or 'Start review' button at the top of the change or press the 'a' key."
>
- <span class="draftLabel">DRAFT</span>
+ <gr-icon filled icon="rate_review"></gr-icon>
+ <span class="draftLabel">Draft</span>
</gr-tooltip-content>
</div>
<div class="headerMiddle"></div>
@@ -321,18 +317,14 @@
<div class="container draft" id="container">
<div class="header" id="header">
<div class="headerLeft">
- <gr-account-label
- class="draft"
- deselected=""
- ></gr-account-label>
<gr-tooltip-content
class="draftTooltip"
has-tooltip=""
max-width="20em"
- show-icon=""
title="This draft is only visible to you. To publish drafts, click the 'Reply' or 'Start review' button at the top of the change or press the 'a' key."
>
- <span class="draftLabel">DRAFT</span>
+ <gr-icon filled icon="rate_review"></gr-icon>
+ <span class="draftLabel">Draft</span>
</gr-tooltip-content>
</div>
<div class="headerMiddle"></div>
