Add primary run action also to results table, but only show on hover
Also fix some layout issues:
- The results table gets a fixed layout, such that all result tables
have the same width.
- The text overflow and flex display of the name column are tweaked
such that long check names don't push other content out of the cell.
Change-Id: I018adb8c03bee1a4c7322e7728d85c8e12cbefa2
diff --git a/polygerrit-ui/app/elements/checks/gr-checks-action.ts b/polygerrit-ui/app/elements/checks/gr-checks-action.ts
index 6a7b24d..33e52a7 100644
--- a/polygerrit-ui/app/elements/checks/gr-checks-action.ts
+++ b/polygerrit-ui/app/elements/checks/gr-checks-action.ts
@@ -56,7 +56,7 @@
link
?disabled="${this.action.disabled}"
class="action"
- @click="${this.handleClick}"
+ @click="${(e: Event) => this.handleClick(e)}"
>
${this.action.name}
<paper-tooltip ?hidden="${!this.action.tooltip}" offset="5"
@@ -66,7 +66,8 @@
`;
}
- handleClick() {
+ handleClick(e: Event) {
+ e.stopPropagation();
fireActionTriggered(this.eventTarget ?? this, this.action);
}
}
diff --git a/polygerrit-ui/app/elements/checks/gr-checks-results.ts b/polygerrit-ui/app/elements/checks/gr-checks-results.ts
index f61568e..65b0b41 100644
--- a/polygerrit-ui/app/elements/checks/gr-checks-results.ts
+++ b/polygerrit-ui/app/elements/checks/gr-checks-results.ts
@@ -52,6 +52,7 @@
fireActionTriggered,
iconForCategory,
iconForLink,
+ primaryRunAction,
tooltipForLink,
} from '../../services/checks/checks-util';
import {assertIsDefined, check} from '../../utils/common-util';
@@ -101,23 +102,29 @@
}
td.iconCol {
padding-left: var(--spacing-l);
- padding-right: var(--spacing-m);
}
- .iconCol div {
- width: 20px;
+ td.nameCol div.flex {
+ display: flex;
}
- .nameCol div {
- width: 165px;
+ td.nameCol .name {
overflow: hidden;
text-overflow: ellipsis;
+ margin-right: var(--spacing-s);
}
- .summaryCol {
- /* Forces this column to get the remaining space that is left over by
- the other columns. */
- width: 99%;
+ td.nameCol .space {
+ flex-grow: 1;
}
- .expanderCol div {
- width: 20px;
+ td.nameCol gr-checks-action {
+ display: none;
+ }
+ tr:hover td.nameCol gr-checks-action {
+ display: inline-block;
+ /* The button should fit into the 20px line-height. The negative
+ margin provides the extra space needed for the vertical padding.
+ Alternatively we could have set the vertical padding to 0, but
+ that would not have been a nice click target. */
+ margin: calc(0px - var(--spacing-s)) 0px;
+ margin-left: var(--spacing-s);
}
td {
white-space: nowrap;
@@ -125,7 +132,6 @@
}
td .summary-cell {
display: flex;
- max-width: calc(100vw - 630px);
}
td .summary-cell .summary {
font-weight: var(--font-weight-bold);
@@ -249,10 +255,12 @@
<div>${this.renderIcon()}</div>
</td>
<td class="nameCol" @click="${this.toggleExpanded}">
- <div>
- <span>${this.result.checkName}</span>
- <gr-checks-attempt .run="${this.result}"></gr-checks-attempt>
+ <div class="flex">
<gr-hovercard-run .run="${this.result}"></gr-hovercard-run>
+ <div class="name">${this.result.checkName}</div>
+ <gr-checks-attempt .run="${this.result}"></gr-checks-attempt>
+ <div class="space"></div>
+ ${this.renderPrimaryRunAction()}
</div>
</td>
<td class="summaryCol">
@@ -299,6 +307,13 @@
return linkCount > 1 || actionCount > 0;
}
+ private renderPrimaryRunAction() {
+ if (!this.result) return;
+ const action = primaryRunAction(this.result);
+ if (!action) return;
+ return html`<gr-checks-action .action="${action}"></gr-checks-action>`;
+ }
+
private renderExpanded() {
if (!this.isExpanded) return;
return html`<gr-result-expanded
@@ -573,6 +588,7 @@
}
.headerTopRow,
.headerBottomRow {
+ max-width: 1600px;
display: flex;
justify-content: space-between;
align-items: flex-end;
@@ -661,7 +677,7 @@
}
.noResultsMessage {
width: 100%;
- max-width: 1280px;
+ max-width: 1600px;
margin-top: var(--spacing-m);
background-color: var(--background-color-primary);
box-shadow: var(--elevation-level-1);
@@ -670,7 +686,8 @@
}
table.resultsTable {
width: 100%;
- max-width: 1280px;
+ max-width: 1600px;
+ table-layout: fixed;
margin-top: var(--spacing-m);
background-color: var(--background-color-primary);
box-shadow: var(--elevation-level-1);
@@ -680,6 +697,19 @@
font-weight: var(--font-weight-bold);
padding: var(--spacing-s);
}
+ th.iconCol {
+ width: 40px;
+ }
+ th.nameCol {
+ width: 200px;
+ }
+ th.summaryCol {
+ width: 99%;
+ }
+ th.expanderCol {
+ width: 30px;
+ }
+
gr-button.showAll {
margin: var(--spacing-m);
}
diff --git a/polygerrit-ui/app/elements/checks/gr-checks-runs.ts b/polygerrit-ui/app/elements/checks/gr-checks-runs.ts
index 7346d5b..175a0b5 100644
--- a/polygerrit-ui/app/elements/checks/gr-checks-runs.ts
+++ b/polygerrit-ui/app/elements/checks/gr-checks-runs.ts
@@ -32,7 +32,6 @@
import {
AttemptDetail,
compareByWorstCategory,
- fireActionTriggered,
iconForCategory,
iconForRun,
primaryRunAction,
@@ -133,17 +132,16 @@
div.chip.selected iron-icon.filter {
color: var(--selected-foreground);
}
- .chip.selected gr-button.action,
- .chip.deselected gr-button.action {
+ .chip.selected gr-checks-action,
+ .chip.deselected gr-checks-action {
display: none;
}
- gr-button.action {
- --padding: var(--spacing-xs) var(--spacing-m);
+ gr-checks-action {
/* The button should fit into the 20px line-height. The negative
margin provides the extra space needed for the vertical padding.
Alternatively we could have set the vertical padding to 0, but
that would not have been a nice click target. */
- margin: calc(0px - var(--spacing-xs));
+ margin: calc(0px - var(--spacing-s));
}
.attemptDetails {
padding-bottom: var(--spacing-s);
@@ -232,12 +230,7 @@
</div>
<div class="right">
${action
- ? html`<gr-button
- class="action"
- link
- @click="${(e: MouseEvent) => this.handleAction(e, action)}"
- >${action.name}</gr-button
- >`
+ ? html`<gr-checks-action .action="${action}"></gr-checks-action>`
: ''}
</div>
</div>
@@ -306,12 +299,6 @@
e.preventDefault();
fireRunSelected(this, this.run.checkName);
}
-
- private handleAction(e: MouseEvent, action: Action) {
- e.stopPropagation();
- e.preventDefault();
- fireActionTriggered(this, action, this.run);
- }
}
@customElement('gr-checks-runs')
