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

Update dash and slash icons (#1783)

Browse Source 
Fixes #1782 

- Dash icons are now used to convey status exclusively
- Slash icons are now used to convey no data states
- Updates status icons to filled in the docs (also required for QA
docs!)
This commit is contained in:
Henry Wilkinson 2024-05-03 12:52:07 -04:00 committed by GitHub
parent e7dbf914a3
commit 93c35ee2ee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 31 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/overrides/.icons/bootstrap/check-circle.svg
View File

@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
<path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 384 B

4
docs/overrides/.icons/bootstrap/dash-circle.svg
View File

@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
<path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 289 B

3
docs/overrides/.icons/bootstrap/dash-square-fill.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-square-fill" viewBox="0 0 16 16">
<path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm2.5 7.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 268 B

3
docs/overrides/.icons/bootstrap/exclamation-square-fill.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-square-fill" viewBox="0 0 16 16">
<path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm6 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 354 B

4
docs/overrides/.icons/bootstrap/x-octagon.svg
View File

@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-octagon" viewBox="0 0 16 16">
<path d="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353L4.54.146zM5.1 1 1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1z"/>
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 641 B

11
docs/stylesheets/extra.css
View File

@ -135,7 +135,7 @@ code {
}
}
.status-warning {
.status-neutral {
font-family: var(--md-code-font);
font-weight: 500;
white-space: nowrap;
@ -144,6 +144,15 @@ code {
}
}
.status-warning {
font-family: var(--md-code-font);
font-weight: 500;
white-space: nowrap;
& svg {
color: hsl(21, 90%, 48%);
}
}
.status-danger {
font-family: var(--md-code-font);
font-weight: 500;

11
docs/user-guide/archived-items.md
View File

@ -12,12 +12,13 @@ The status of an archived item depends on its type. Uploads will always have the
| Status | Description |
| ---- | ---- |
| <span class="status-success">:bootstrap-check-circle: Complete</span> | The crawl completed according to the workflow's settings. Workflows with [limits](workflow-setup.md#limits) set may stop running before they capture every queued page, but the resulting archived item will still be marked as "Complete". |
| <span class="status-warning">:bootstrap-dash-circle: Stopped</span> | The crawl workflow was _stopped_ gracefully by a user and data is saved. |
| <span class="status-danger">:bootstrap-x-octagon: Canceled</span> | The crawl workflow was _canceled_ by a user, no data is saved. |
| <span class="status-danger">:bootstrap-exclamation-triangle: Failed</span> | A serious error occurred while crawling, no data is saved.|
| <span class="status-success">:bootstrap-check-circle-fill: Complete</span> | The crawl completed according to the workflow's settings. Workflows with [limits](workflow-setup.md#limits) set may stop running before they capture every queued page, but the resulting archived item will still be marked as "Complete". |
| <span class="status-neutral">:bootstrap-dash-square-fill: Stopped</span> | The crawl workflow was _stopped_ gracefully by a user and data is saved. |
| <span class="status-neutral">:bootstrap-exclamation-square-fill: Stopped: Reason</span> | A workflow limit (listed as the reason) was reached and data is saved. |
| <span class="status-warning">:bootstrap-x-octagon-fill: Canceled</span> | The crawl workflow was _canceled_ by a user, no data is saved. |
| <span class="status-danger">:bootstrap-exclamation-triangle-fill: Failed</span> | A serious error occurred while crawling, no data is saved.|
Because <span class="status-danger">:bootstrap-x-octagon: Canceled</span> and <span class="status-danger">:bootstrap-exclamation-triangle: Failed</span> crawls do not contain data, they are omitted from the archived items list page and cannot be added to a collection.
Because <span class="status-warning">:bootstrap-x-octagon-fill: Canceled</span> and <span class="status-danger">:bootstrap-exclamation-triangle-fill: Failed</span> crawls do not contain data, they are omitted from the archived items list page and cannot be added to a collection.
## Archived Item Details

4
frontend/src/features/archived-items/crawl-status.ts
View File

@ -59,7 +59,7 @@ export class CrawlStatus extends TailwindElement {
} {
let color = "var(--sl-color-neutral-400)";
let icon = html`<sl-icon
name="circle"
name="slash-circle"
class="neutral"
slot="prefix"
style="color: ${color}"
@ -191,7 +191,7 @@ export class CrawlStatus extends TailwindElement {
case "stopped_by_user":
color = "var(--warning)";
icon = html`<sl-icon
name="slash-square-fill"
name="dash-square-fill"
slot="prefix"
style="color: ${color}"
></sl-icon>`;

4
frontend/src/features/qa/page-list/helpers/iconFor.ts
View File

@ -19,7 +19,7 @@ export const iconFor = cached(
></sl-icon>`;
case "moderate":
return html`<sl-icon
name="slash-square-fill"
name="dash-square-fill"
class=${clsx("text-yellow-600", baseClasses, classList)}
></sl-icon>`;
case "good":
@ -46,7 +46,7 @@ export const iconFor = cached(
// No data
default:
return html`<sl-icon
name="dash-circle"
name="slash-circle"
class=${clsx("text-gray-600", baseClasses, classList)}
></sl-icon>`;
}

4
frontend/src/pages/org/archived-item-detail/archived-item-detail.ts
View File

@ -549,7 +549,7 @@ export class ArchivedItemDetail extends TailwindElement {
? html`
<sl-button-group>
<sl-button size="small" @click=${this.stop}>
<sl-icon name="slash-square" slot="prefix"></sl-icon>
<sl-icon name="dash-square" slot="prefix"></sl-icon>
<span> ${msg("Stop")} </span>
</sl-button>
<sl-button size="small" @click=${this.cancel}>
@ -1044,7 +1044,7 @@ ${this.crawl?.description}
size="small"
@click=${() => void this.stopQARunDialog?.show()}
>
<sl-icon name="slash-square" slot="prefix"></sl-icon>
<sl-icon name="dash-square" slot="prefix"></sl-icon>
<span>${msg("Stop Analysis")}</span>
</sl-button>
<sl-button

4
frontend/src/pages/org/workflow-detail.ts
View File

@ -601,7 +601,7 @@ export class WorkflowDetail extends LiteElement {
this.isCancelingOrStoppingCrawl ||
this.workflow?.lastCrawlStopping}
>
<sl-icon name="slash-square" slot="prefix"></sl-icon>
<sl-icon name="dash-square" slot="prefix"></sl-icon>
<span>${msg("Stop")}</span>
</sl-button>
<sl-button
@ -656,7 +656,7 @@ export class WorkflowDetail extends LiteElement {
?disabled=${workflow.lastCrawlStopping ||
this.isCancelingOrStoppingCrawl}
>
<sl-icon name="slash-square" slot="prefix"></sl-icon>
<sl-icon name="dash-square" slot="prefix"></sl-icon>
${msg("Stop Crawl")}
</sl-menu-item>
<sl-menu-item

2
frontend/src/pages/org/workflows-list.ts
View File

@ -435,7 +435,7 @@ export class WorkflowsList extends LiteElement {
@click=${() => void this.stop(workflow.lastCrawlId)}
?disabled=${workflow.lastCrawlStopping}
>
<sl-icon name="slash-square" slot="prefix"></sl-icon>
<sl-icon name="dash-square" slot="prefix"></sl-icon>
${msg("Stop Crawl")}
</sl-menu-item>
<sl-menu-item