tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Quick fix: hoist tooltips in archived item list (#1738)

Browse Source 
Now that we're using a bunch of tooltips, I found when there are very
few items listed the tooltips sometimes get squished in weird ways —
this fixes that.
This commit is contained in:
Emma Segal-Grossman 2024-04-23 19:16:58 -04:00 committed by GitHub
parent dfdb7d839e
commit d446857cea
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/features/archived-items/archived-item-list.ts
View File

@ -87,14 +87,17 @@ export class ArchivedItemListItem extends TailwindElement {
typeIcon = "upload"; typeIcon = "upload";
} }
const notApplicable = html`<sl-tooltip content=${msg("Not applicable")}> const notApplicable = html`<sl-tooltip
hoist
content=${msg("Not applicable")}
>
<sl-icon <sl-icon
name="slash" name="slash"
class="text-base text-neutral-400" class="text-base text-neutral-400"
label=${msg("Not applicable")} label=${msg("Not applicable")}
></sl-icon> ></sl-icon>
</sl-tooltip>`; </sl-tooltip>`;
const none = html`<sl-tooltip content=${msg("None")}> const none = html`<sl-tooltip hoist content=${msg("None")}>
<sl-icon <sl-icon
name="slash" name="slash"
class="text-base text-neutral-400" class="text-base text-neutral-400"
@ -152,6 +155,7 @@ export class ArchivedItemListItem extends TailwindElement {
content=${msg(str`${typeLabel}: ${crawlStatus.label}`)} content=${msg(str`${typeLabel}: ${crawlStatus.label}`)}
@sl-hide=${(e: SlHideEvent) => e.stopPropagation()} @sl-hide=${(e: SlHideEvent) => e.stopPropagation()}
@sl-after-hide=${(e: SlHideEvent) => e.stopPropagation()} @sl-after-hide=${(e: SlHideEvent) => e.stopPropagation()}
hoist
> >
<sl-icon <sl-icon
class="text-base" class="text-base"
@ -162,6 +166,7 @@ export class ArchivedItemListItem extends TailwindElement {
</sl-tooltip> </sl-tooltip>
`} `}
<sl-tooltip <sl-tooltip
hoist
content=${activeQAStats content=${activeQAStats
? msg( ? msg(
str`QA Analysis: ${qaStatus.label} (${activeProgress}% finished)`, str`QA Analysis: ${qaStatus.label} (${activeProgress}% finished)`,
@ -217,6 +222,7 @@ export class ArchivedItemListItem extends TailwindElement {
<sl-tooltip <sl-tooltip
content=${msg(str`By ${this.item.userName}`)} content=${msg(str`By ${this.item.userName}`)}
@click=${this.onTooltipClick} @click=${this.onTooltipClick}
hoist
> >
<sl-format-date <sl-format-date
lang=${getLocale()} lang=${getLocale()}
@ -232,6 +238,7 @@ export class ArchivedItemListItem extends TailwindElement {
</btrix-table-cell> </btrix-table-cell>
<btrix-table-cell> <btrix-table-cell>
<sl-tooltip <sl-tooltip
hoist
content=${formatNumber(this.item.fileSize || 0, { content=${formatNumber(this.item.fileSize || 0, {
style: "unit", style: "unit",
unit: "byte", unit: "byte",
@ -250,6 +257,7 @@ export class ArchivedItemListItem extends TailwindElement {
${isUpload ${isUpload
? notApplicable ? notApplicable
: html`<sl-tooltip : html`<sl-tooltip
hoist
@click=${this.onTooltipClick} @click=${this.onTooltipClick}
content=${msg( content=${msg(
str`${formatNumber( str`${formatNumber(
@ -273,6 +281,7 @@ export class ArchivedItemListItem extends TailwindElement {
: lastQAStarted && qaRunCount : lastQAStarted && qaRunCount
? html` ? html`
<sl-tooltip <sl-tooltip
hoist
content=${msg( content=${msg(
str`Last run started on ${formatISODateString(lastQAStarted)}`, str`Last run started on ${formatISODateString(lastQAStarted)}`,
)} )}
@ -290,6 +299,7 @@ export class ArchivedItemListItem extends TailwindElement {
${isUpload ${isUpload
? notApplicable ? notApplicable
: html`<sl-tooltip : html`<sl-tooltip
hoist
@click=${this.onTooltipClick} @click=${this.onTooltipClick}
content=${this.item.reviewStatus content=${this.item.reviewStatus
? msg( ? msg(