Skip to content

Commit 0457401

Browse files
Shrinks99Shrinks99
authored
Merge pull request #26 from Monadical-SAS/henry-sidebar-details
Update archiving status styling
2 parents 85f17d0 + 04039c4 commit 0457401

2 files changed

Lines changed: 103 additions & 38 deletions

File tree

‎src/sidepanel.ts‎

Lines changed: 53 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ class ArgoViewer extends LitElement {
4444
.search-container {
4545
margin: 16px 12px;
4646
height: 32px;
47-
background: #ece7f8;
4847
border-radius: 9999px;
4948
display: flex;
5049
align-items: center;
@@ -53,8 +52,6 @@ class ArgoViewer extends LitElement {
5352
5453
.search-field {
5554
width: 100%;
56-
--md-filled-text-field-container-color: transparent;
57-
--md-ref-shape-corner-radius: 9999px;
5855
overflow: hidden;
5956
}
6057
@@ -94,35 +91,40 @@ class ArgoViewer extends LitElement {
9491
justify-content: space-between;
9592
}
9693
97-
.status-title {
98-
font-size: 12px;
99-
font-weight: 500;
100-
color: #6b6b6b;
101-
margin-bottom: 4px;
94+
.status-container {
95+
display: flex;
96+
gap: 8px;
97+
align-items: center;
98+
justify-content: start;
99+
margin-bottom: 8px;
102100
}
103101
104-
.status-ready {
105-
font-size: 11px;
102+
.status-title {
103+
display: block;
104+
font-size: 12px;
106105
font-weight: 500;
107106
color: #6b6b6b;
108107
margin-bottom: 4px;
109108
}
110109
111-
.status-page-title {
110+
.status-content {
112111
font-size: 14px;
113112
font-weight: 500;
114113
color: #000;
115-
margin-bottom: 8px;
116114
}
117115
118116
img.favicon {
119-
width: 20px !important;
120-
height: 20px !important;
117+
width: var(--md-icon-size) !important;
118+
height: var(--md-icon-size) !important;
121119
flex: 0 0 auto;
122120
object-fit: cover;
123121
border-radius: 4px;
124122
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
125123
}
124+
125+
md-icon[filled] {
126+
font-variation-settings: "FILL" 1;
127+
}
126128
`,
127129
];
128130

@@ -570,7 +572,7 @@ class ArgoViewer extends LitElement {
570572
}
571573

572574
get notRecordingMessage() {
573-
return "Not Archiving this Tab";
575+
return "Archiving Disabled";
574576
}
575577

576578
renderStatusCard() {
@@ -605,7 +607,7 @@ class ArgoViewer extends LitElement {
605607
// @ts-expect-error - TS2339 - Property 'pageUrl' does not exist on type 'ArgoViewer'.
606608
this.pageTitle
607609
? html`
608-
<div style="display: flex; align-items: start; gap: 0.5rem;">
610+
<div class="status-container">
609611
<img
610612
src="${
611613
// @ts-expect-error - TS2339 - Property 'favIconUrl' does not exist on type 'ArgoViewer'.
@@ -614,7 +616,7 @@ class ArgoViewer extends LitElement {
614616
alt="Favicon"
615617
class="favicon"
616618
/>
617-
<span class="status-page-title"
619+
<span class="status-content"
618620
>${
619621
//@ts-expect-error - TS2339 - Property 'pageTitle' does not exist on type 'ArgoViewer'.
620622
truncateString(this.pageTitle)
@@ -644,15 +646,20 @@ class ArgoViewer extends LitElement {
644646
// @ts-expect-error - TS2339 - Property 'status' does not exist on type 'ArgoViewer'.
645647
this.status?.numPending || 0,
646648
)}
647-
style="--md-sys-color-primary: #7b1fa2; width: 100%; margin-bottom: 0.5rem;"
649+
style="width: 100%; margin-bottom: 0.5rem;"
648650
></md-linear-progress>
649651
`
650652
: ""
651653
}
652654
${
653655
// @ts-expect-error - TS2339 - Property 'status' does not exist on type 'ArgoViewer'. | TS2339 - Property 'status' does not exist on type 'ArgoViewer'.
654656
!this.status?.numPending
655-
? html`<span class="status-ready">All resources archived</span>`
657+
? html`<div class="status-container">
658+
<md-icon filled style="color: var(--md-sys-color-primary);"
659+
>check_circle</md-icon
660+
>
661+
<span class="status-content">All resources archived</span>
662+
</div>`
656663
: ""
657664
}
658665
</div>`;
@@ -695,30 +702,43 @@ class ArgoViewer extends LitElement {
695702
if (this.pageUrl?.startsWith(this.extRoot)) {
696703
return html`
697704
<span class="status-title">Status</span>
698-
<p class="is-size-7">
699-
This page is part of the extension. You can view existing archived
700-
items from here. To start a new archiving session, click the
701-
<wr-icon .src="${wrRec}"></wr-icon> Start Archiving button and enter
702-
a new URL.
705+
<p class="is-size-7 status-content">
706+
This page is part of the extension.
703707
</p>
704708
`;
705709
}
706710

707711
return html` <span class="status-title">Status</span>
708-
<br />
709-
<p>Can't archive this page.</p>`;
712+
<div class="status-container">
713+
<md-icon filled style="color: var(--md-sys-color-secondary)"
714+
>folder_off</md-icon
715+
>
716+
<span class="status-content">Can't archive this page.</span>
717+
</div>`;
710718
}
711719

712720
// @ts-expect-error - TS2339 - Property 'waitingForStart' does not exist on type 'ArgoViewer'.
713721
if (this.waitingForStart) {
714722
return html` <span class="status-title">Status</span>
715-
<br />
716-
<p>Archiving will start after the page reloads...</p>`;
723+
<div class="status-container">
724+
<md-icon filled style="color: var(--md-sys-color-secondary)"
725+
>folder_off</md-icon
726+
>
727+
<span class="status-content"
728+
>Archiving will start after page reloads…</span
729+
>
730+
</div>`;
717731
}
718732

719-
return html` <span class="status-title">Status</span>
720-
<br />
721-
<p>${this.notRecordingMessage}</p>`;
733+
return html`
734+
<span class="status-title">Status</span>
735+
<div class="status-container">
736+
<md-icon filled style="color: var(--md-sys-color-secondary)"
737+
>folder_off</md-icon
738+
>
739+
<span class="status-content">${this.notRecordingMessage}</span>
740+
</div>
741+
`;
722742
}
723743

724744
renderSearch() {
@@ -774,11 +794,7 @@ class ArgoViewer extends LitElement {
774794
!this.recording
775795
? html`
776796
<md-filled-button
777-
style="
778-
--md-sys-color-primary-container: #7b1fa2;
779-
color: white;
780-
border-radius: 9999px;
781-
"
797+
style="color: white; border-radius: 9999px;"
782798
?disabled=${this.actionButtonDisabled ||
783799
// @ts-expect-error - TS2339 - Property 'canRecord' does not exist on type 'ArgoViewer'.
784800
!this.canRecord}
@@ -800,11 +816,10 @@ class ArgoViewer extends LitElement {
800816
`
801817
: html`
802818
<md-outlined-button
803-
style="--md-sys-color-primary: #b00020; --md-sys-color-outline: #b00020; border-radius: 9999px;"
804819
?disabled=${this.actionButtonDisabled}
805820
@click=${this.onStop}
806821
>
807-
<md-icon slot="icon" style="color:#b00020">pause</md-icon>
822+
<md-icon slot="icon">pause</md-icon>
808823
Pause Archiving
809824
</md-outlined-button>
810825
`

‎static/sidepanel.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,56 @@
1919
--md-sys-color-background: white;
2020
--md-sys-color-surface-container: white;
2121
--md-elevated-card-container-color: white;
22+
--md-icon-size: 20px;
23+
24+
--md-sys-color-primary: rgb(220, 101, 3);
25+
--md-sys-color-surface-tint: rgb(154 70 0);
26+
--md-sys-color-on-primary: rgb(255 255 255);
27+
--md-sys-color-primary-container: rgb(188 87 0);
28+
--md-sys-color-on-primary-container: rgb(255 251 255);
29+
--md-sys-color-secondary: rgb(136 80 45);
30+
--md-sys-color-on-secondary: rgb(255 255 255);
31+
--md-sys-color-secondary-container: rgb(253 179 136);
32+
--md-sys-color-on-secondary-container: rgb(120 67 33);
33+
--md-sys-color-tertiary: rgb(98 98 0);
34+
--md-sys-color-on-tertiary: rgb(255 255 255);
35+
--md-sys-color-tertiary-container: rgb(177 176 49);
36+
--md-sys-color-on-tertiary-container: rgb(66 66 0);
37+
--md-sys-color-error: rgb(186 26 26);
38+
--md-sys-color-on-error: rgb(255 255 255);
39+
--md-sys-color-error-container: rgb(255 218 214);
40+
--md-sys-color-on-error-container: rgb(147 0 10);
41+
--md-sys-color-on-background: rgb(36 25 19);
42+
/* --md-sys-color-surface: rgb(255 248 245); */
43+
--md-sys-color-on-surface: rgb(36 25 19);
44+
--md-sys-color-surface-variant: rgb(252 220 204);
45+
--md-sys-color-on-surface-variant: rgb(87 66 55);
46+
--md-sys-color-outline: rgb(139 114 101);
47+
--md-sys-color-outline-variant: rgb(222 192 177);
48+
--md-sys-color-shadow: rgb(0 0 0);
49+
--md-sys-color-scrim: rgb(0 0 0);
50+
--md-sys-color-inverse-surface: rgb(59 46 39);
51+
--md-sys-color-inverse-on-surface: rgb(255 237 229);
52+
--md-sys-color-inverse-primary: rgb(255 182 140);
53+
--md-sys-color-primary-fixed: rgb(255 219 201);
54+
--md-sys-color-on-primary-fixed: rgb(50 18 0);
55+
--md-sys-color-primary-fixed-dim: rgb(255 182 140);
56+
--md-sys-color-on-primary-fixed-variant: rgb(117 52 0);
57+
--md-sys-color-secondary-fixed: rgb(255 219 201);
58+
--md-sys-color-on-secondary-fixed: rgb(50 18 0);
59+
--md-sys-color-secondary-fixed-dim: rgb(255 182 140);
60+
--md-sys-color-on-secondary-fixed-variant: rgb(108 57 24);
61+
--md-sys-color-tertiary-fixed: rgb(234 232 100);
62+
--md-sys-color-on-tertiary-fixed: rgb(29 29 0);
63+
--md-sys-color-tertiary-fixed-dim: rgb(205 204 75);
64+
--md-sys-color-on-tertiary-fixed-variant: rgb(74 73 0);
65+
--md-sys-color-surface-dim: rgb(235 214 203);
66+
--md-sys-color-surface-bright: rgb(255 248 245);
67+
--md-sys-color-surface-container-lowest: rgb(255 255 255);
68+
--md-sys-color-surface-container-low: rgb(255 241 235);
69+
/* --md-sys-color-surface-container: rgb(255 234 223); */
70+
--md-sys-color-surface-container-high: rgb(250 228 217);
71+
--md-sys-color-surface-container-highest: rgb(244 222 211);
2272

2373
--md-linear-progress-track-height: 8px;
2474
}

0 commit comments

Comments
 (0)