commit 2643169f6831552e7fef27e13c28588906a28613
author Ben Rohlfs <brohlfs@google.com> Mon May 17 13:03:06 2021 +0200
committer Ben Rohlfs <brohlfs@google.com> Mon May 17 14:28:48 2021 +0200
tree 918f93c888e2f04f767a24a161bf8ee6abac0624
parent d5a827a59e24d0b7935c6db0de3f75b77381d813

Only hide tags and labels on hover when there is an action or link

Screenshot https://imgur.com/a/0gj0trP

Change-Id: I40e42cf9b77867b0616e455c102c0e451e3e40f8

polygerrit-ui/app/elements/checks/gr-checks-results.ts

diff --git a/polygerrit-ui/app/elements/checks/gr-checks-results.ts b/polygerrit-ui/app/elements/checks/gr-checks-results.ts
index 6f35c49..71b8f33 100644
--- a/polygerrit-ui/app/elements/checks/gr-checks-results.ts
+++ b/polygerrit-ui/app/elements/checks/gr-checks-results.ts
@@ -165,8 +165,8 @@
         tr.collapsed td .summary-cell .actions {
           display: none;
         }
-        tr.collapsed:hover .summary-cell .tags,
-        tr.collapsed:hover .summary-cell .label {
+        tr.collapsed:hover .summary-cell .hoverHide.tags,
+        tr.collapsed:hover .summary-cell .hoverHide.label {
           display: none;
         }
         td .summary-cell .tags .tag {
@@ -264,7 +264,7 @@
             <div class="message" @click="${this.toggleExpanded}">
               ${this.isExpanded ? '' : this.result.message}
             </div>
-            <div class="tags">
+            <div class="tags ${this.hasLinksOrActions() ? 'hoverHide' : ''}">
               ${(this.result.tags ?? []).map(t => this.renderTag(t))}
             </div>
             ${this.renderLabel()} ${this.renderLinks()} ${this.renderActions()}
@@ -294,6 +294,13 @@
     `;
   }
 
+  private hasLinksOrActions() {
+    const linkCount = this.result?.links?.length ?? 0;
+    const actionCount = this.result?.actions?.length ?? 0;
+    // The primary link is rendered somewhere else, so it does not count here.
+    return linkCount > 1 || actionCount > 0;
+  }
+
   private renderExpanded() {
     if (!this.isExpanded) return;
     return html`<gr-result-expanded
@@ -323,7 +330,11 @@
   renderLabel() {
     const label = this.result?.labelName;
     if (!label) return;
-    return html`<div class="label">${label}</div>`;
+    return html`
+      <div class="label ${this.hasLinksOrActions() ? 'hoverHide' : ''}">
+        ${label}
+      </div>
+    `;
   }
 
   renderLinks() {