QA UI: Copy updates & beta tag (#1722)
Closes #1718 - Adds beta badge & icon components - Changes the capitalization of "analysis run" to lowercase in sentences - Changes instances of "in Replay" and "From Replay" to "During Analysis" | Screenshots | | --- | | <img width="400" alt="Screenshot 2024-04-22 at 6 09 28 PM" src="https://github.com/webrecorder/browsertrix/assets/5727389/4822e361-c82c-4349-957a-a7a9f15dbc7a"> | | <img width="254" alt="Screenshot 2024-04-22 at 6 09 44 PM" src="https://github.com/webrecorder/browsertrix/assets/5727389/01a1457f-e00c-46ba-8af5-66b702344b7a"> | | <img width="313" alt="Screenshot 2024-04-22 at 6 10 04 PM" src="https://github.com/webrecorder/browsertrix/assets/5727389/bd38e2f7-28ea-49e9-b856-cc7ade6ae618"> | | <img width="597" alt="image" src="https://github.com/webrecorder/browsertrix/assets/5727389/ac95c2a3-ba67-42b3-a33d-c0b61e2ba6f7"> |
This commit is contained in:
Emma Segal-Grossman
GitHub
parent
7710be0f6e
commit
7871d30ba1
20
frontend/src/components/beta-badges.stylesheet.css
Normal file
20
frontend/src/components/beta-badges.stylesheet.css
Normal file
@ -0,0 +1,20 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components {
|
||||
:host {
|
||||
@apply contents !leading-[0];
|
||||
}
|
||||
sl-tooltip {
|
||||
@apply [--max-width:theme(spacing.64)];
|
||||
}
|
||||
sl-tooltip::part(body),
|
||||
sl-tooltip::part(base__arrow) {
|
||||
@apply bg-theme-green;
|
||||
}
|
||||
|
||||
sl-tooltip::part(body) {
|
||||
@apply w-auto text-balance text-white;
|
||||
}
|
||||
}
|
||||
53
frontend/src/components/beta-badges.ts
Normal file
53
frontend/src/components/beta-badges.ts
Normal file
@ -0,0 +1,53 @@
|
||||
import { localized, msg } from "@lit/localize";
|
||||
import { type SlTooltip } from "@shoelace-style/shoelace";
|
||||
import { html, unsafeCSS } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
import stylesheet from "./beta-badges.stylesheet.css";
|
||||
|
||||
import { TailwindElement } from "@/classes/TailwindElement";
|
||||
|
||||
const styles = unsafeCSS(stylesheet);
|
||||
|
||||
@localized()
|
||||
@customElement("btrix-beta-icon")
|
||||
export class BetaIcon extends TailwindElement {
|
||||
static styles = styles;
|
||||
render() {
|
||||
return html`<sl-tooltip content=${msg("Beta feature")} hoist>
|
||||
<sl-icon
|
||||
name="stars"
|
||||
label="Beta"
|
||||
class="h-4 w-4 text-theme-green"
|
||||
></sl-icon>
|
||||
</sl-tooltip>`;
|
||||
}
|
||||
}
|
||||
|
||||
@localized()
|
||||
@customElement("btrix-beta-badge")
|
||||
export class BetaBadge extends TailwindElement {
|
||||
@property({ type: String })
|
||||
placement: SlTooltip["placement"] = "top";
|
||||
|
||||
static styles = styles;
|
||||
|
||||
render() {
|
||||
return html`<sl-tooltip hoist placement=${this.placement}>
|
||||
<div slot="content">
|
||||
<b>${msg("This part of Browsertrix is in beta!")}</b>
|
||||
${msg(
|
||||
"Parts might change or be broken. Please share your thoughts with us!",
|
||||
)}
|
||||
</div>
|
||||
<span class="inline-block align-middle text-xs text-theme-green">
|
||||
<sl-icon
|
||||
name="stars"
|
||||
label="Beta feature"
|
||||
class="h-4 w-4 align-middle"
|
||||
></sl-icon
|
||||
> ${msg("Beta")}
|
||||
</span>
|
||||
</sl-tooltip>`;
|
||||
}
|
||||
}
|
||||
@ -4,3 +4,4 @@ import "./utils";
|
||||
import("./orgs-list");
|
||||
import("./not-found");
|
||||
import("./screencast");
|
||||
import("./beta-badges");
|
||||
|
||||
@ -258,7 +258,10 @@ export class ArchivedItemDetail extends TailwindElement {
|
||||
switch (this.activeTab) {
|
||||
case "qa":
|
||||
sectionContent = this.renderPanel(
|
||||
html`${this.renderTitle(msg("Quality Assurance"))}
|
||||
html`${this.renderTitle(
|
||||
html`${msg("Quality Assurance")}
|
||||
<btrix-beta-badge></btrix-beta-badge>`,
|
||||
)}
|
||||
<div class="ml-auto flex flex-wrap justify-end gap-2">
|
||||
${when(this.qaRuns, this.renderQAHeader)}
|
||||
</div> `,
|
||||
@ -486,6 +489,7 @@ export class ArchivedItemDetail extends TailwindElement {
|
||||
iconLibrary: "default",
|
||||
icon: "clipboard2-data-fill",
|
||||
label: msg("Quality Assurance"),
|
||||
detail: html`<btrix-beta-icon></btrix-beta-icon>`,
|
||||
})}
|
||||
`,
|
||||
)}
|
||||
@ -635,7 +639,7 @@ export class ArchivedItemDetail extends TailwindElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private renderTitle(title: string) {
|
||||
private renderTitle(title: string | TemplateResult<1>) {
|
||||
return html`<h2 class="text-lg font-semibold leading-8">${title}</h2>`;
|
||||
}
|
||||
|
||||
|
||||
@ -446,13 +446,13 @@ export class ArchivedItemDetailQA extends TailwindElement {
|
||||
>
|
||||
<b class="font-semibold"
|
||||
>${msg(
|
||||
"All of the data included in this Analysis Run will be deleted.",
|
||||
"All of the data included in this analysis run will be deleted.",
|
||||
)}</b
|
||||
>
|
||||
${runToBeDeleted &&
|
||||
html`<div>
|
||||
${msg(
|
||||
str`This Analysis Run includes data for ${runToBeDeleted.stats.done} ${pluralize(runToBeDeleted.stats.done, { zero: msg("pages", { desc: 'plural form of "page" for zero pages', id: "pages.plural.zero" }), one: msg("page"), two: msg("pages", { desc: 'plural form of "page" for two pages', id: "pages.plural.two" }), few: msg("pages", { desc: 'plural form of "page" for few pages', id: "pages.plural.few" }), many: msg("pages", { desc: 'plural form of "page" for many pages', id: "pages.plural.many" }), other: msg("pages", { desc: 'plural form of "page" for multiple/other pages', id: "pages.plural.other" }) })} and was started on `,
|
||||
str`This analysis run includes data for ${runToBeDeleted.stats.done} ${pluralize(runToBeDeleted.stats.done, { zero: msg("pages", { desc: 'plural form of "page" for zero pages', id: "pages.plural.zero" }), one: msg("page"), two: msg("pages", { desc: 'plural form of "page" for two pages', id: "pages.plural.two" }), few: msg("pages", { desc: 'plural form of "page" for few pages', id: "pages.plural.few" }), many: msg("pages", { desc: 'plural form of "page" for many pages', id: "pages.plural.many" }), other: msg("pages", { desc: 'plural form of "page" for multiple/other pages', id: "pages.plural.other" }) })} and was started on `,
|
||||
)}
|
||||
<sl-format-date
|
||||
lang=${getLocale()}
|
||||
|
||||
@ -326,6 +326,8 @@ export class ArchivedItemQA extends TailwindElement {
|
||||
return html`
|
||||
${this.renderHidden()}
|
||||
|
||||
<btrix-beta-badge placement="right"></btrix-beta-badge>
|
||||
|
||||
<article class="qa-grid grid gap-x-6 gap-y-0">
|
||||
<header
|
||||
class="grid--header flex flex-wrap items-center justify-between gap-1 border-b py-2"
|
||||
|
||||
@ -18,8 +18,8 @@ function renderDiff(
|
||||
msg("Resource Type"),
|
||||
msg("Good During Crawl"),
|
||||
msg("Bad During Crawl"),
|
||||
msg("Good in Replay"),
|
||||
msg("Bad in Replay"),
|
||||
msg("Good During Analysis"),
|
||||
msg("Bad During Analysis"),
|
||||
];
|
||||
const rows = [
|
||||
[
|
||||
|
||||
@ -51,7 +51,7 @@ export function renderScreenshots(
|
||||
splitView ? "flex-1" : "flex-grow-0",
|
||||
)}
|
||||
>
|
||||
${msg("Screenshot from replay")}
|
||||
${msg("Screenshot during analysis")}
|
||||
</h3>
|
||||
</div>
|
||||
${splitView
|
||||
|
||||
@ -78,7 +78,7 @@ export function renderText(crawlData: ReplayData, qaData: ReplayData) {
|
||||
${msg("Text extracted during crawl")}
|
||||
</h3>
|
||||
<h3 id="qaTextHeading" class=${tw`flex-1`}>
|
||||
${msg("Text extracted from replay")}
|
||||
${msg("Text extracted during analysis")}
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -63,6 +63,7 @@ function makeTheme() {
|
||||
current: "currentColor",
|
||||
...colors.map(makeColorPalette),
|
||||
primary,
|
||||
theme: { blue: primary, green: "#4d7c0f" },
|
||||
success: { ...makeColorPalette("success"), DEFAULT: `var(--success)` },
|
||||
warning: { ...makeColorPalette("warning"), DEFAULT: `var(--warning)` },
|
||||
danger: { ...makeColorPalette("danger"), DEFAULT: `var(--danger)` },
|
||||
|
||||
Loading…
Reference in New Issue
Block a user