Fix the hover behavior of checks chips
In change 317329 we have introduced a hover behavior for checks chips:
For long check names we would allow more max-width on hover. But that
meant that the layout would jump while the user moved their mouse
over the checks summary section.
In this change we take a different approach. We just render another
chip on top of the other when the user hovers. That hover chip has
absolute positioning and thus does not affect the overall layout
of the summary section.
https://imgur.com/a/ys5hFeS
Google-Bug-Id: b/199947528
Change-Id: Ia79056f39aecd18f0a1deea387cdcba50a40722d
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 90b9a2d..831a309 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
@@ -30,7 +30,7 @@
someProvidersAreLoadingFirstTime$,
topLevelActionsLatest$,
} from '../../../services/checks/checks-model';
-import {Action, Category, RunStatus} from '../../../api/checks';
+import {Action, Category, Link, RunStatus} from '../../../api/checks';
import {fireShowPrimaryTab} from '../../../utils/event-util';
import '../../shared/gr-avatar/gr-avatar';
import {
@@ -180,6 +180,9 @@
@property()
text = '';
+ @property()
+ links: Link[] = [];
+
static override get styles() {
return [
fontStyles,
@@ -187,6 +190,8 @@
css`
:host {
display: inline-block;
+ position: relative;
+ white-space: nowrap;
}
.checksChip {
color: var(--chip-color);
@@ -202,8 +207,16 @@
position: relative;
top: 2px;
}
- .checksChip:hover .text {
- max-width: 240px;
+ .checksChip.hoverFullLength {
+ position: absolute;
+ z-index: 1;
+ display: none;
+ }
+ .checksChip.hoverFullLength .text {
+ max-width: 400px;
+ }
+ :host(:hover) .checksChip.hoverFullLength {
+ display: inline-block;
}
.checksChip .text {
display: inline-block;
@@ -308,20 +321,51 @@
ariaLabel = `${this.text} ${label} ${type}${plural}`;
}
const chipClass = `checksChip font-small ${icon}`;
+ const chipClassFullLength = `${chipClass} hoverFullLength`;
const grIcon = `gr-icons:${icon}`;
+ // 15 is roughly the number of chars for the chip exceeding its 120px width.
return html`
- <div
- class="${chipClass}"
- role="link"
- tabindex="0"
- aria-label="${ariaLabel}"
- >
- <iron-icon icon="${grIcon}"></iron-icon>
+ ${this.text.length > 15
+ ? html` ${this.renderChip(chipClassFullLength, ariaLabel, grIcon)}`
+ : ''}
+ ${this.renderChip(chipClass, ariaLabel, grIcon)}
+ `;
+ }
+
+ private renderChip(clazz: string, ariaLabel: string, icon: string) {
+ return html`
+ <div class="${clazz}" role="link" tabindex="0" aria-label="${ariaLabel}">
+ <iron-icon icon="${icon}"></iron-icon>
<div class="text">${this.text}</div>
- <slot></slot>
+ ${this.renderLinks()}
</div>
`;
}
+
+ private renderLinks() {
+ return this.links.map(
+ link => html`
+ <a
+ href="${link.url}"
+ target="_blank"
+ @click="${this.onLinkClick}"
+ @keydown="${this.onLinkKeyDown}"
+ aria-label="Link to check details"
+ ><iron-icon class="launch" icon="gr-icons:launch"></iron-icon
+ ></a>
+ `
+ );
+ }
+
+ private onLinkKeyDown(e: KeyboardEvent) {
+ // Prevents onChipKeyDown() from reacting to <a> link keyboard events.
+ e.stopPropagation();
+ }
+
+ private onLinkClick(e: MouseEvent) {
+ // Prevents onChipClick() from reacting to <a> link clicks.
+ e.stopPropagation();
+ }
}
/** What is the maximum number of detailed checks chips? */
@@ -660,21 +704,10 @@
return html`<gr-checks-chip
.statusOrCategory="${statusOrCategory}"
.text="${text}"
+ .links="${links}"
@click="${handler}"
@keydown="${(e: KeyboardEvent) => handleSpaceOrEnter(e, handler)}"
- >${links.map(
- link => html`
- <a
- href="${link.url}"
- target="_blank"
- @click="${this.onLinkClick}"
- @keydown="${this.onLinkKeyDown}"
- aria-label="Link to check details"
- ><iron-icon class="launch" icon="gr-icons:launch"></iron-icon
- ></a>
- `
- )}
- </gr-checks-chip>`;
+ ></gr-checks-chip>`;
}
private onChipClick(state: ChecksTabState) {
@@ -683,16 +716,6 @@
});
}
- private onLinkKeyDown(e: KeyboardEvent) {
- // Prevents onConChipKeyDown() from reacting to <a> link keyboard events.
- e.stopPropagation();
- }
-
- private onLinkClick(e: MouseEvent) {
- // Prevents onChipClick() from reacting to <a> link clicks.
- e.stopPropagation();
- }
-
override render() {
const commentThreads =
this.commentThreads?.filter(t => !isRobotThread(t) || hasHumanReply(t)) ??
diff --git a/polygerrit-ui/app/services/checks/checks-model.ts b/polygerrit-ui/app/services/checks/checks-model.ts
index f5d6e35..0a5eeca 100644
--- a/polygerrit-ui/app/services/checks/checks-model.ts
+++ b/polygerrit-ui/app/services/checks/checks-model.ts
@@ -353,7 +353,7 @@
export const fakeRun0: CheckRun = {
pluginName: 'f0',
internalRunId: 'f0',
- checkName: 'FAKE Error Finder Finder Finder',
+ checkName: 'FAKE Error Finder Finder Finder Finder Finder Finder Finder',
labelName: 'Presubmit',
isSingleAttempt: true,
isLatestAttempt: true,
