Skip to content

Commit c602480

Browse files
bomberfishbomberfish
committed
improve history and downloads pages
1 parent 06c49bb commit c602480

File tree

2 files changed

+127
-87
lines changed

2 files changed

+127
-87
lines changed

‎packages/chrome/src/pages/DownloadsPage.tsx‎

Lines changed: 82 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -14,31 +14,39 @@ export const DownloadsPage: Component<
1414
> = function () {
1515
return (
1616
<div>
17-
<div class="main">
17+
<nav>
1818
<h1>Downloads</h1>
19-
<div class="entries">
20-
{use(browser.globalDownloadHistory).mapEach((e) => (
21-
<div class="entry">
22-
<div class="iconcontainer">
23-
<img src={defaultFaviconUrl}></img>
24-
</div>
25-
<div class="content">
26-
<a href={e.url}>{e.filename}</a>
27-
<span>
28-
<span>{formatBytes(e.size)}</span>
29-
<span>{new URL(e.url).hostname}</span>
30-
<span>{new Date(e.timestamp).toDateString()}</span>
31-
</span>
32-
</div>
33-
<div class="icons">
34-
<Icon icon={iconFolder}></Icon>
35-
<Icon icon={iconLink}></Icon>
36-
<Icon icon={iconClose}></Icon>
37-
</div>
38-
</div>
39-
))}
40-
</div>
41-
</div>
19+
</nav>
20+
<ul class="entries">
21+
{use(browser.globalDownloadHistory).mapEach((entry) => {
22+
const url = new URL(entry.url);
23+
return (
24+
<li
25+
class="entry"
26+
on:click={() => {
27+
browser.newTab(url);
28+
}}
29+
>
30+
<span class="inner">
31+
<img src={defaultFaviconUrl} alt="favicon" />
32+
<div class="text">
33+
<span class="title">{entry.filename}</span>
34+
<span class="url">{url.hostname}</span>
35+
<div class="details">
36+
<span>{formatBytes(entry.size)}</span>
37+
<span>{new Date(entry.timestamp).toDateString()}</span>
38+
</div>
39+
</div>
40+
<div class="icons">
41+
<Icon icon={iconFolder}></Icon>
42+
<Icon icon={iconLink}></Icon>
43+
<Icon icon={iconClose}></Icon>
44+
</div>
45+
</span>
46+
</li>
47+
);
48+
})}
49+
</ul>
4250
</div>
4351
);
4452
};
@@ -48,80 +56,83 @@ DownloadsPage.style = css`
4856
height: 100%;
4957
display: flex;
5058
flex-direction: column;
51-
align-items: center;
52-
font-family: sans-serif;
53-
59+
align-items: flex-start;
5460
background: var(--bg01);
5561
color: var(--fg);
56-
overflow-y: scroll;
5762
}
58-
59-
a {
60-
color: color-mix(in oklab, var(--fg) 50%, var(--accent));
63+
nav {
64+
width: 100%;
65+
padding: 1.5em;
66+
background: var(--bg02);
6167
}
62-
63-
.main {
64-
display: flex;
65-
flex-direction: column;
66-
gap: 1em;
67-
justify-content: center;
68+
h1 {
69+
font-size: 1.5rem;
70+
font-weight: 600;
71+
margin-left: 0;
6872
}
6973
.entries {
70-
display: flex;
71-
flex-direction: column;
72-
gap: 1em;
74+
list-style: none;
75+
padding: 0;
76+
margin: 0;
7377
width: 100%;
78+
padding-right: 1.75em;
7479
}
7580
.entry {
81+
width: 100%;
82+
transition: background 0.1s;
83+
}
84+
.inner {
7685
display: flex;
77-
/*border-bottom: 1px solid #ccc;*/
86+
align-items: center;
87+
gap: 0.5em;
7888
cursor: pointer;
79-
gap: 3em;
80-
81-
width: 100%;
82-
background: var(--bg04);
83-
/*height: 10em;*/
84-
85-
border-radius: var(--radius);
86-
padding: 2em;
87-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
89+
padding-block: 0.75em;
90+
padding-left: 0.5em;
91+
margin-left: 1.75em;
92+
border-bottom: 1px solid var(--bg08);
93+
}
94+
.entry:hover {
95+
background: var(--bg08);
8896
}
8997
.entry img {
9098
width: 16px;
9199
height: 16px;
92100
}
93101
.entry .title {
94102
font-weight: bold;
103+
color: inherit;
104+
text-decoration: none;
95105
}
96-
97-
.iconcontainer {
98-
width: 2em;
99-
height: 100%;
100-
justify-content: center;
106+
.entry .title:hover {
107+
color: var(--accent);
108+
text-decoration: underline;
101109
}
102-
.iconcontainer img {
103-
width: 100%;
104-
height: auto;
110+
.inner span {
111+
white-space: nowrap;
112+
overflow: hidden;
113+
padding: 0.085em;
114+
text-overflow: ellipsis;
105115
}
106-
107-
.icons {
116+
.text {
117+
display: flex;
118+
flex-direction: column;
119+
gap: 0.25em;
108120
flex: 1;
121+
min-width: 0;
122+
}
123+
.details {
109124
display: flex;
110-
justify-content: right;
111-
gap: 0.5em;
112-
113-
font-size: 1.5em;
125+
gap: 1em;
126+
color: var(--fg2);
114127
}
115-
116-
.content {
128+
.icons {
117129
display: flex;
118-
flex-direction: column;
119130
gap: 0.5em;
131+
margin-left: 0.75em;
120132
}
121-
122-
.content > span {
123-
display: flex;
124-
gap: 1em;
133+
.icons :global(svg) {
134+
width: 1em;
135+
height: 1em;
125136
color: var(--fg2);
126137
}
127138
`;

‎packages/chrome/src/pages/HistoryPage.tsx‎

Lines changed: 45 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,27 @@ export const HistoryPage: Component<
1111
> = function () {
1212
return (
1313
<div>
14-
<h1>History</h1>
15-
<div class="entries">
14+
<nav>
15+
<h1>History</h1>
16+
</nav>
17+
<ul class="entries">
1618
{browser.globalhistory
1719
.sort((a, b) => b.timestamp - a.timestamp)
1820
.map((entry) => (
19-
<div
21+
<li
2022
class="entry"
2123
on:click={() => {
2224
browser.newTab(entry.url);
2325
}}
2426
>
25-
<img src={entry.favicon || defaultFaviconUrl} alt="favicon" />
26-
<span class="title">{entry.title || entry.url.href}</span>
27-
<span class="url">{entry.url.hostname}</span>
28-
</div>
27+
<span class="inner">
28+
<img src={entry.favicon || defaultFaviconUrl} alt="favicon" />
29+
<span class="title">{entry.title || entry.url.href}</span>
30+
<span class="url">{entry.url.hostname}</span>
31+
</span>
32+
</li>
2933
))}
30-
</div>
34+
</ul>
3135
</div>
3236
);
3337
};
@@ -37,24 +41,43 @@ HistoryPage.style = css`
3741
height: 100%;
3842
display: flex;
3943
flex-direction: column;
40-
align-items: center;
41-
font-family: sans-serif;
42-
44+
align-items: flex-start;
4345
background: var(--bg01);
4446
color: var(--fg);
4547
}
48+
nav {
49+
width: 100%;
50+
padding: 1.5em;
51+
background: var(--bg02);
52+
}
53+
h1 {
54+
font-size: 1.5rem;
55+
font-weight: 600;
56+
margin-left: 0;
57+
}
4658
.entries {
47-
display: flex;
48-
flex-direction: column;
49-
gap: 1em;
50-
width: 70%;
59+
list-style: none;
60+
padding: 0;
61+
margin: 0;
62+
width: 100%;
63+
padding-right: 1.75em;
5164
}
5265
.entry {
66+
width: 100%;
67+
transition: background 0.1s;
68+
}
69+
.inner {
5370
display: flex;
5471
align-items: center;
55-
/*border-bottom: 1px solid #ccc;*/
5672
cursor: pointer;
5773
gap: 0.5em;
74+
padding-block: 0.75em;
75+
padding-left: 0.5em;
76+
margin-left: 1.75em;
77+
border-bottom: 1px solid var(--bg08);
78+
}
79+
.entry:hover {
80+
background: var(--bg08);
5881
}
5982
.entry img {
6083
width: 16px;
@@ -63,4 +86,10 @@ HistoryPage.style = css`
6386
.entry .title {
6487
font-weight: bold;
6588
}
89+
.inner span {
90+
white-space: nowrap;
91+
overflow: hidden;
92+
padding: 0.085em;
93+
text-overflow: ellipsis;
94+
}
6695
`;

0 commit comments

Comments
 (0)