Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Frontend: Icon updates! #1569

Merged
merged 6 commits into from
Mar 12, 2024
Merged

Frontend: Icon updates! #1569

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4585f96
Fixes navigation button min-height
Shrinks99 Mar 2, 2024
bd42c41
Update status icons
Shrinks99 Mar 2, 2024
de21cce
Switch to `copy` icon for for copying to clipboard
Shrinks99 Mar 2, 2024
1efd571
Revert "Fixes navigation button min-height"
Shrinks99 Mar 4, 2024
e67faf1
Merge branch 'main' into frontend-icon-updates
Shrinks99 Mar 11, 2024
5844b30
Switch to tailwind classes for colors
Shrinks99 Mar 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions frontend/src/assets/icons/copy-code.svg
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion frontend/src/components/ui/copy-button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export class CopyButton extends LitElement {
@sl-after-hide=${this.stopProp}
>
<sl-icon-button
name=${this.isCopied ? "check-lg" : this.name ? this.name : "files"}
name=${this.isCopied ? "check-lg" : this.name ? this.name : "copy"}
label=${msg("Copy to clipboard")}
@click=${this.onClick}
?disabled=${!this.value && !this.getValue}
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/features/archived-items/crawl-status.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export class CrawlStatus extends LitElement {

case "complete":
icon = html`<sl-icon
name=${isUpload ? "upload" : "check-circle"}
name=${isUpload ? "upload" : "check-circle-fill"}
slot="prefix"
style="color: var(--success)"
></sl-icon>`;
Expand All @@ -165,7 +165,7 @@ export class CrawlStatus extends LitElement {

case "failed":
icon = html`<sl-icon
name=${isUpload ? "upload" : "exclamation-triangle"}
name=${isUpload ? "upload" : "exclamation-triangle-fill"}
slot="prefix"
style="color: var(--danger)"
></sl-icon>`;
Expand All @@ -174,7 +174,7 @@ export class CrawlStatus extends LitElement {

case "skipped_quota_reached":
icon = html`<sl-icon
name="exclamation-triangle"
name="exclamation-triangle-fill"
slot="prefix"
style="color: var(--danger)"
></sl-icon>`;
Expand All @@ -183,7 +183,7 @@ export class CrawlStatus extends LitElement {

case "stopped_by_user":
icon = html`<sl-icon
name="dash-circle"
name="dash-square-fill"
slot="prefix"
style="color: var(--warning)"
></sl-icon>`;
Expand All @@ -192,7 +192,7 @@ export class CrawlStatus extends LitElement {

case "stopped_quota_reached":
icon = html`<sl-icon
name="dash-circle"
name="exclamation-square-fill"
slot="prefix"
style="color: var(--warning)"
></sl-icon>`;
Expand All @@ -201,9 +201,9 @@ export class CrawlStatus extends LitElement {

case "canceled":
icon = html`<sl-icon
name="x-octagon"
name="x-octagon-fill"
slot="prefix"
style="color: var(--danger)"
style="color: var(--sl-color-orange-600)"
></sl-icon>`;
label = msg("Canceled");
break;
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/pages/org/archived-item-detail.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,7 +401,7 @@ export class CrawlDetail extends LiteElement {
? html`
<sl-button-group>
<sl-button size="small" @click=${this.stop}>
<sl-icon name="slash-circle" 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}>
Expand Down Expand Up @@ -468,7 +468,7 @@ export class CrawlDetail extends LiteElement {
@click=${() =>
CopyButton.copyToClipboard((this.crawl as Crawl).cid)}
>
<sl-icon name="copy-code" library="app" slot="prefix"></sl-icon>
<sl-icon name="copy" slot="prefix"></sl-icon>
${msg("Copy Workflow ID")}
</sl-menu-item>
`,
Expand Down Expand Up @@ -809,7 +809,7 @@ ${this.crawl?.description}
() =>
html` <sl-tooltip content=${msg("Backed up")}>
<sl-icon
name="clouds"
name="clouds-fill"
class="mr-2 h-4 w-4 shrink-0 align-text-bottom text-success"
></sl-icon>
</sl-tooltip>`,
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/org/archived-items.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -549,11 +549,11 @@ export class CrawlsList extends LiteElement {
${msg("Go to Workflow")}
</sl-menu-item>
<sl-menu-item @click=${() => CopyButton.copyToClipboard(item.cid)}>
<sl-icon name="copy-code" library="app" slot="prefix"></sl-icon>
<sl-icon name="copy" slot="prefix"></sl-icon>
${msg("Copy Workflow ID")}
</sl-menu-item>
<sl-menu-item @click=${() => CopyButton.copyToClipboard(item.id)}>
<sl-icon name="copy-code" library="app" slot="prefix"></sl-icon>
<sl-icon name="copy" slot="prefix"></sl-icon>
${msg("Copy Crawl ID")}
</sl-menu-item>
`
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/org/browser-profiles-detail.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,7 +297,7 @@ export class BrowserProfilesDetail extends LiteElement {
name="pencil"
></sl-icon>
<span class="inline-block pr-2 align-middle"
>${msg("Edit name & description")}</span
>${msg("Edit Name & Description")}</span
>
</li>
<li
Expand All @@ -310,7 +310,7 @@ export class BrowserProfilesDetail extends LiteElement {
name="files"
></sl-icon>
<span class="inline-block pr-2 align-middle"
>${msg("Duplicate profile")}</span
>${msg("Duplicate Profile")}</span
>
</li>
<hr />
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/org/browser-profiles-list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ export class BrowserProfilesList extends LiteElement {
content=${isBackedUp ? msg("Backed up") : msg("Not backed up")}
>
<sl-icon
name=${isBackedUp ? "clouds" : "cloud-slash"}
name=${isBackedUp ? "clouds-fill" : "cloud-slash-fill"}
class="${isBackedUp ? "text-success" : "text-neutral-500"}"
></sl-icon>
</sl-tooltip>
Expand Down Expand Up @@ -164,7 +164,7 @@ export class BrowserProfilesList extends LiteElement {
}}
>
<sl-icon slot="prefix" name="files"></sl-icon>
${msg("Duplicate profile")}
${msg("Duplicate Profile")}
</sl-menu-item>
<sl-menu-item
style="--sl-color-neutral-700: var(--danger)"
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/pages/org/collection-detail.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,10 @@ export class CollectionDetail extends LiteElement {
${this.collection?.isPublic
? html`
<sl-tooltip content=${msg("Shareable")}>
<sl-icon class="text-lg" name="people-fill"></sl-icon>
<sl-icon
class="text-lg text-success-600"
name="people-fill"
></sl-icon>
</sl-tooltip>
`
: html`
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/org/collections-list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -501,7 +501,7 @@ export class CollectionsList extends LiteElement {
? html`
<sl-tooltip content=${msg("Shareable")}>
<sl-icon
class="inline-block align-middle"
class="inline-block align-middle text-success-600"
name="people-fill"
label=${msg("Shareable Collection")}
></sl-icon>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/org/workflow-detail.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -593,7 +593,7 @@ export class WorkflowDetail extends LiteElement {
this.isCancelingOrStoppingCrawl ||
this.workflow?.lastCrawlStopping}
>
<sl-icon name="dash-circle" slot="prefix"></sl-icon>
<sl-icon name="dash-square" slot="prefix"></sl-icon>
<span>${msg("Stop")}</span>
</sl-button>
<sl-button
Expand Down Expand Up @@ -648,7 +648,7 @@ export class WorkflowDetail extends LiteElement {
?disabled=${workflow.lastCrawlStopping ||
this.isCancelingOrStoppingCrawl}
>
<sl-icon name="dash-circle" slot="prefix"></sl-icon>
<sl-icon name="dash-square" slot="prefix"></sl-icon>
${msg("Stop Crawl")}
</sl-menu-item>
<sl-menu-item
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/org/workflows-list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -433,7 +433,7 @@ export class WorkflowsList extends LiteElement {
@click=${() => void this.stop(workflow.lastCrawlId)}
?disabled=${workflow.lastCrawlStopping}
>
<sl-icon name="dash-circle" slot="prefix"></sl-icon>
<sl-icon name="dash-square" slot="prefix"></sl-icon>
${msg("Stop Crawl")}
</sl-menu-item>
<sl-menu-item
Expand Down
1 change: 1 addition & 0 deletions frontend/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ function makeTheme() {
"indigo",
"purple",
"pink",
"orange",
];
// Map color grading:
const colorGrades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
Expand Down
Loading