[status] Keep comment icons on commit toggle.
--Wrap commit-text so innerHTML doesn't clobber icons
--Also update commit styles to better handle longer/wrapped subjects
interacting with icons
--Inverted order of icon addition to keep it the way it is now
(reverts and relands to the left) since we no longer float the icons.)
Change-Id: I3230823babab8bb32da3cb98a51628d258e2e46b
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/329225
Reviewed-by: Eric Boren <borenet@google.com>
Commit-Queue: Eric Boren <borenet@google.com>
Auto-Submit: Weston Tracey <westont@google.com>
diff --git a/status/modules/commits-table-sk/commits-table-sk.scss b/status/modules/commits-table-sk/commits-table-sk.scss
index ce26550..be52797 100644
--- a/status/modules/commits-table-sk/commits-table-sk.scss
+++ b/status/modules/commits-table-sk/commits-table-sk.scss
@@ -49,6 +49,8 @@
padding: 2px;
position: relative;
cursor: pointer;
+ display: flex;
+ justify-content: space-between;
}
.commit.highlight-revert {
@@ -130,10 +132,6 @@
height: 8px;
}
- .icon-right {
- float: right;
- }
-
// With the exception of revert/reland icons, we don't want icons interferring with our
// dialog-opening clicks on tasks, commits, and task specs.
comment-icon-sk,
diff --git a/status/modules/commits-table-sk/commits-table-sk.ts b/status/modules/commits-table-sk/commits-table-sk.ts
index 729a754..ad8ddd7 100644
--- a/status/modules/commits-table-sk/commits-table-sk.ts
+++ b/status/modules/commits-table-sk/commits-table-sk.ts
@@ -634,7 +634,7 @@
set displayCommitSubject(v: boolean) {
this._displayCommitSubject = v;
this.stateHasChanged();
- $('.commit').forEach((el, i) => {
+ $('.commit-text').forEach((el, i) => {
if (v) {
el.innerHTML = this.data.commits[i].shortSubject;
el.setAttribute('title', this.data.commits[i].shortAuthor);
@@ -778,29 +778,30 @@
*/
private commitIcons(commit: Commit): Array<TemplateResult> {
const res: Array<TemplateResult> = [];
- if (this.data.comments.get(commit.hash)?.get('')?.length || 0 > 0) {
- res.push(html`<comment-icon-sk class="tiny icon-right"></comment-icon-sk>`);
- }
- if (commit.ignoreFailure) {
- res.push(html`<block-icon-sk class="tiny icon-right"></block-icon-sk>`);
+
+ const relanded = this.data.relandedMap.get(commit.hash);
+ if (relanded && relanded.timestamp! > commit.timestamp!) {
+ res.push(html`<redo-icon-sk
+ class="tiny fill-green"
+ @mouseenter=${() => this.highlightAssociatedCommit(relanded.hash, false)}
+ @mouseleave=${() => this.highlightAssociatedCommit(relanded.hash, false)}
+ >
+ </redo-icon-sk>`);
}
const reverted = this.data.revertedMap.get(commit.hash);
if (reverted && reverted.timestamp! > commit.timestamp!) {
res.push(html`<undo-icon-sk
- class="tiny icon-right fill-red"
+ class="tiny fill-red"
@mouseenter=${() => this.highlightAssociatedCommit(reverted.hash, true)}
@mouseleave=${() => this.highlightAssociatedCommit(reverted.hash, true)}
>
</undo-icon-sk>`);
}
- const relanded = this.data.relandedMap.get(commit.hash);
- if (relanded && relanded.timestamp! > commit.timestamp!) {
- res.push(html`<redo-icon-sk
- class="tiny icon-right fill-green"
- @mouseenter=${() => this.highlightAssociatedCommit(relanded.hash, false)}
- @mouseleave=${() => this.highlightAssociatedCommit(relanded.hash, false)}
- >
- </redo-icon-sk>`);
+ if (commit.ignoreFailure) {
+ res.push(html`<block-icon-sk class="tiny"></block-icon-sk>`);
+ }
+ if (this.data.comments.get(commit.hash)?.get('')?.length || 0 > 0) {
+ res.push(html`<comment-icon-sk class="tiny"></comment-icon-sk>`);
}
return res;
}
@@ -1008,7 +1009,8 @@
title=${title}
data-commit-index=${i}
>
- ${text}${this.commitIcons(commit)}
+ <span class="nowrap commit-text">${text}</span>
+ <span class="nowrap">${this.commitIcons(commit)}</span>
</div>`
);
const tasksBySpec = this.data.tasksByCommit.get(commit.hash);
diff --git a/status/modules/styles.scss b/status/modules/styles.scss
index e5002cf..e312174 100644
--- a/status/modules/styles.scss
+++ b/status/modules/styles.scss
@@ -73,6 +73,10 @@
text-align: right;
}
+.nowrap {
+ white-space: nowrap;
+}
+
:root {
--primary: var(--light-green-700);
// TODO(westont): Move to named colors, unify theme.
