From b6291b0458228b2fe366b8c4a711e21c32dc6643 Mon Sep 17 00:00:00 2001 From: Henry Wilkinson Date: Thu, 15 May 2025 02:58:56 -0400 Subject: [PATCH 1/7] Add check icon to status state --- src/sidepanel.ts | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/src/sidepanel.ts b/src/sidepanel.ts index a0d606d..45e21c4 100644 --- a/src/sidepanel.ts +++ b/src/sidepanel.ts @@ -94,6 +94,14 @@ class ArgoViewer extends LitElement { justify-content: space-between; } + .status-container { + display: flex; + gap: 8px; + align-items: center; + justify-content: start; + margin-bottom: 8px; + } + .status-title { font-size: 12px; font-weight: 500; @@ -105,14 +113,12 @@ class ArgoViewer extends LitElement { font-size: 11px; font-weight: 500; color: #6b6b6b; - margin-bottom: 4px; } .status-page-title { font-size: 14px; font-weight: 500; color: #000; - margin-bottom: 8px; } img.favicon { @@ -123,6 +129,10 @@ class ArgoViewer extends LitElement { border-radius: 4px; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6)); } + + md-icon[filled] { + font-variation-settings: "FILL" 1; + } `, ]; @@ -605,7 +615,7 @@ class ArgoViewer extends LitElement { // @ts-expect-error - TS2339 - Property 'pageUrl' does not exist on type 'ArgoViewer'. this.pageTitle ? html` -
+
All resources archived` + ? html`
+ check_circle + All resources archived +
` : "" }
`; From 856383a5196e4a5a5d64ad38b5c0f74d12b37815 Mon Sep 17 00:00:00 2001 From: Henry Wilkinson Date: Thu, 15 May 2025 18:36:23 -0400 Subject: [PATCH 2/7] Add md colour palette definition --- static/sidepanel.html | 49 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/static/sidepanel.html b/static/sidepanel.html index 394f34b..a45d653 100644 --- a/static/sidepanel.html +++ b/static/sidepanel.html @@ -19,6 +19,55 @@ --md-sys-color-background: white; --md-sys-color-surface-container: white; --md-elevated-card-container-color: white; + + --md-sys-color-primary: rgb(220, 101, 3); + --md-sys-color-surface-tint: rgb(154 70 0); + --md-sys-color-on-primary: rgb(255 255 255); + --md-sys-color-primary-container: rgb(188 87 0); + --md-sys-color-on-primary-container: rgb(255 251 255); + --md-sys-color-secondary: rgb(136 80 45); + --md-sys-color-on-secondary: rgb(255 255 255); + --md-sys-color-secondary-container: rgb(253 179 136); + --md-sys-color-on-secondary-container: rgb(120 67 33); + --md-sys-color-tertiary: rgb(98 98 0); + --md-sys-color-on-tertiary: rgb(255 255 255); + --md-sys-color-tertiary-container: rgb(177 176 49); + --md-sys-color-on-tertiary-container: rgb(66 66 0); + --md-sys-color-error: rgb(186 26 26); + --md-sys-color-on-error: rgb(255 255 255); + --md-sys-color-error-container: rgb(255 218 214); + --md-sys-color-on-error-container: rgb(147 0 10); + --md-sys-color-on-background: rgb(36 25 19); + /* --md-sys-color-surface: rgb(255 248 245); */ + --md-sys-color-on-surface: rgb(36 25 19); + --md-sys-color-surface-variant: rgb(252 220 204); + --md-sys-color-on-surface-variant: rgb(87 66 55); + --md-sys-color-outline: rgb(139 114 101); + --md-sys-color-outline-variant: rgb(222 192 177); + --md-sys-color-shadow: rgb(0 0 0); + --md-sys-color-scrim: rgb(0 0 0); + --md-sys-color-inverse-surface: rgb(59 46 39); + --md-sys-color-inverse-on-surface: rgb(255 237 229); + --md-sys-color-inverse-primary: rgb(255 182 140); + --md-sys-color-primary-fixed: rgb(255 219 201); + --md-sys-color-on-primary-fixed: rgb(50 18 0); + --md-sys-color-primary-fixed-dim: rgb(255 182 140); + --md-sys-color-on-primary-fixed-variant: rgb(117 52 0); + --md-sys-color-secondary-fixed: rgb(255 219 201); + --md-sys-color-on-secondary-fixed: rgb(50 18 0); + --md-sys-color-secondary-fixed-dim: rgb(255 182 140); + --md-sys-color-on-secondary-fixed-variant: rgb(108 57 24); + --md-sys-color-tertiary-fixed: rgb(234 232 100); + --md-sys-color-on-tertiary-fixed: rgb(29 29 0); + --md-sys-color-tertiary-fixed-dim: rgb(205 204 75); + --md-sys-color-on-tertiary-fixed-variant: rgb(74 73 0); + --md-sys-color-surface-dim: rgb(235 214 203); + --md-sys-color-surface-bright: rgb(255 248 245); + --md-sys-color-surface-container-lowest: rgb(255 255 255); + --md-sys-color-surface-container-low: rgb(255 241 235); + /* --md-sys-color-surface-container: rgb(255 234 223); */ + --md-sys-color-surface-container-high: rgb(250 228 217); + --md-sys-color-surface-container-highest: rgb(244 222 211); --md-linear-progress-track-height: 8px; } From c7227dbb9c8bbfa3d86e5d52fcbc05b8100b384c Mon Sep 17 00:00:00 2001 From: Henry Wilkinson Date: Thu, 15 May 2025 18:36:43 -0400 Subject: [PATCH 3/7] Styling & text fixes --- src/sidepanel.ts | 35 +++++++++++++++++------------------ 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/src/sidepanel.ts b/src/sidepanel.ts index 45e21c4..a17b046 100644 --- a/src/sidepanel.ts +++ b/src/sidepanel.ts @@ -53,8 +53,6 @@ class ArgoViewer extends LitElement { .search-field { width: 100%; - --md-filled-text-field-container-color: transparent; - --md-ref-shape-corner-radius: 9999px; overflow: hidden; } @@ -654,7 +652,7 @@ class ArgoViewer extends LitElement { // @ts-expect-error - TS2339 - Property 'status' does not exist on type 'ArgoViewer'. this.status?.numPending || 0, )} - style="--md-sys-color-primary: #7b1fa2; width: 100%; margin-bottom: 0.5rem;" + style="width: 100%; margin-bottom: 0.5rem;" > ` : "" @@ -710,25 +708,30 @@ class ArgoViewer extends LitElement { if (this.pageUrl?.startsWith(this.extRoot)) { return html` Status -

- This page is part of the extension. You can view existing archived - items from here. To start a new archiving session, click the - Start Archiving button and enter - a new URL. -

+

This page is part of the extension.

`; } return html` Status -
-

Can't archive this page.

`; +
+ folder_off + Can't archive this page. +
`; } // @ts-expect-error - TS2339 - Property 'waitingForStart' does not exist on type 'ArgoViewer'. if (this.waitingForStart) { return html` Status -
-

Archiving will start after the page reloads...

`; +
+ folder_off + Archiving will start after the page reloads... +
`; } return html` Status @@ -789,11 +792,7 @@ class ArgoViewer extends LitElement { !this.recording ? html` Date: Thu, 15 May 2025 21:35:49 -0400 Subject: [PATCH 4/7] Continued cleanup of status styling --- src/sidepanel.ts | 40 +++++++++++++++++++++------------------- static/sidepanel.html | 1 + 2 files changed, 22 insertions(+), 19 deletions(-) diff --git a/src/sidepanel.ts b/src/sidepanel.ts index a17b046..d8d5af6 100644 --- a/src/sidepanel.ts +++ b/src/sidepanel.ts @@ -44,7 +44,6 @@ class ArgoViewer extends LitElement { .search-container { margin: 16px 12px; height: 32px; - background: #ece7f8; border-radius: 9999px; display: flex; align-items: center; @@ -101,27 +100,22 @@ class ArgoViewer extends LitElement { } .status-title { + display: block; font-size: 12px; font-weight: 500; color: #6b6b6b; margin-bottom: 4px; } - .status-ready { - font-size: 11px; - font-weight: 500; - color: #6b6b6b; - } - - .status-page-title { + .status-content { font-size: 14px; font-weight: 500; color: #000; } img.favicon { - width: 20px !important; - height: 20px !important; + width: var(--md-icon-size) !important; + height: var(--md-icon-size) !important; flex: 0 0 auto; object-fit: cover; border-radius: 4px; @@ -578,7 +572,7 @@ class ArgoViewer extends LitElement { } get notRecordingMessage() { - return "Not Archiving this Tab"; + return "Archiving Disabled"; } renderStatusCard() { @@ -622,7 +616,7 @@ class ArgoViewer extends LitElement { alt="Favicon" class="favicon" /> - ${ //@ts-expect-error - TS2339 - Property 'pageTitle' does not exist on type 'ArgoViewer'. truncateString(this.pageTitle) @@ -664,7 +658,7 @@ class ArgoViewer extends LitElement { check_circle - All resources archived + All resources archived
` : "" } @@ -708,7 +702,9 @@ class ArgoViewer extends LitElement { if (this.pageUrl?.startsWith(this.extRoot)) { return html` Status -

This page is part of the extension.

+

+ This page is part of the extension. +

`; } @@ -717,7 +713,7 @@ class ArgoViewer extends LitElement { folder_off - Can't archive this page. + Can't archive this page. `; } @@ -728,15 +724,21 @@ class ArgoViewer extends LitElement { folder_off - Archiving will start after the page reloads... `; } - return html` Status -
-

${this.notRecordingMessage}

`; + return html` + Status +
+ folder_off + ${this.notRecordingMessage} +
+ `; } renderSearch() { diff --git a/static/sidepanel.html b/static/sidepanel.html index a45d653..26abcea 100644 --- a/static/sidepanel.html +++ b/static/sidepanel.html @@ -19,6 +19,7 @@ --md-sys-color-background: white; --md-sys-color-surface-container: white; --md-elevated-card-container-color: white; + --md-icon-size: 20px; --md-sys-color-primary: rgb(220, 101, 3); --md-sys-color-surface-tint: rgb(154 70 0); From 12c0125a6e7a39dfbd7c1a7ea3ddc8b5856c1f77 Mon Sep 17 00:00:00 2001 From: Henry Wilkinson Date: Thu, 15 May 2025 22:06:38 -0400 Subject: [PATCH 5/7] Update src/sidepanel.ts Co-authored-by: pr-agent-monadical[bot] <198624643+pr-agent-monadical[bot]@users.noreply.github.com> --- src/sidepanel.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sidepanel.ts b/src/sidepanel.ts index d8d5af6..351a51f 100644 --- a/src/sidepanel.ts +++ b/src/sidepanel.ts @@ -123,7 +123,7 @@ class ArgoViewer extends LitElement { } md-icon[filled] { - font-variation-settings: "FILL" 1; + font-variation-settings: 'FILL' 1; } `, ]; From 384f6017aa517c5dcffd3c0e101addd3711edc53 Mon Sep 17 00:00:00 2001 From: Henry Wilkinson Date: Thu, 15 May 2025 22:16:14 -0400 Subject: [PATCH 6/7] Changes pause state to error state --- src/sidepanel.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/sidepanel.ts b/src/sidepanel.ts index d8d5af6..e7d2730 100644 --- a/src/sidepanel.ts +++ b/src/sidepanel.ts @@ -725,7 +725,7 @@ class ArgoViewer extends LitElement { >folder_off Archiving will start after the page reloads...Archiving will start after page reloads… `; } @@ -816,11 +816,10 @@ class ArgoViewer extends LitElement { ` : html` - pause + pause Pause Archiving ` From 04039c4a485b58163371294b01dad329b2ef309e Mon Sep 17 00:00:00 2001 From: Henry Wilkinson Date: Thu, 15 May 2025 22:17:00 -0400 Subject: [PATCH 7/7] Format code Turns out the double quotes were the way to go after all! --- src/sidepanel.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sidepanel.ts b/src/sidepanel.ts index 0d2b024..e7d2730 100644 --- a/src/sidepanel.ts +++ b/src/sidepanel.ts @@ -123,7 +123,7 @@ class ArgoViewer extends LitElement { } md-icon[filled] { - font-variation-settings: 'FILL' 1; + font-variation-settings: "FILL" 1; } `, ];