Skip to content

Commit 4258132

Browse files
bomberfishvelzie
bomberfish
authored and
velzie
committed
improve history and downloads pages
1 parent 5dcfa40 commit 4258132

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
@@ -9,31 +9,39 @@ import { defaultFaviconUrl } from "../assets/favicon";
99
export function DownloadsPage(s: { tab: Tab }) {
1010
return (
1111
<div>
12-
<div class="main">
12+
<nav>
1313
<h1>Downloads</h1>
14-
<div class="entries">
15-
{use(browser.globalDownloadHistory).mapEach((e) => (
16-
<div class="entry">
17-
<div class="iconcontainer">
18-
<img src={defaultFaviconUrl}></img>
19-
</div>
20-
<div class="content">
21-
<a href={e.url}>{e.filename}</a>
22-
<span>
23-
<span>{formatBytes(e.size)}</span>
24-
<span>{new URL(e.url).hostname}</span>
25-
<span>{new Date(e.timestamp).toDateString()}</span>
26-
</span>
27-
</div>
28-
<div class="icons">
29-
<Icon icon={iconFolder}></Icon>
30-
<Icon icon={iconLink}></Icon>
31-
<Icon icon={iconClose}></Icon>
32-
</div>
33-
</div>
34-
))}
35-
</div>
36-
</div>
14+
</nav>
15+
<ul class="entries">
16+
{use(browser.globalDownloadHistory).mapEach((entry) => {
17+
const url = new URL(entry.url);
18+
return (
19+
<li
20+
class="entry"
21+
on:click={() => {
22+
browser.newTab(url);
23+
}}
24+
>
25+
<span class="inner">
26+
<img src={defaultFaviconUrl} alt="favicon" />
27+
<div class="text">
28+
<span class="title">{entry.filename}</span>
29+
<span class="url">{url.hostname}</span>
30+
<div class="details">
31+
<span>{formatBytes(entry.size)}</span>
32+
<span>{new Date(entry.timestamp).toDateString()}</span>
33+
</div>
34+
</div>
35+
<div class="icons">
36+
<Icon icon={iconFolder}></Icon>
37+
<Icon icon={iconLink}></Icon>
38+
<Icon icon={iconClose}></Icon>
39+
</div>
40+
</span>
41+
</li>
42+
);
43+
})}
44+
</ul>
3745
</div>
3846
);
3947
}
@@ -43,80 +51,83 @@ DownloadsPage.style = css`
4351
height: 100%;
4452
display: flex;
4553
flex-direction: column;
46-
align-items: center;
47-
font-family: sans-serif;
48-
54+
align-items: flex-start;
4955
background: var(--bg01);
5056
color: var(--fg);
51-
overflow-y: scroll;
5257
}
53-
54-
a {
55-
color: color-mix(in oklab, var(--fg) 50%, var(--accent));
58+
nav {
59+
width: 100%;
60+
padding: 1.5em;
61+
background: var(--bg02);
5662
}
57-
58-
.main {
59-
display: flex;
60-
flex-direction: column;
61-
gap: 1em;
62-
justify-content: center;
63+
h1 {
64+
font-size: 1.5rem;
65+
font-weight: 600;
66+
margin-left: 0;
6367
}
6468
.entries {
65-
display: flex;
66-
flex-direction: column;
67-
gap: 1em;
69+
list-style: none;
70+
padding: 0;
71+
margin: 0;
6872
width: 100%;
73+
padding-right: 1.75em;
6974
}
7075
.entry {
76+
width: 100%;
77+
transition: background 0.1s;
78+
}
79+
.inner {
7180
display: flex;
72-
/*border-bottom: 1px solid #ccc;*/
81+
align-items: center;
82+
gap: 0.5em;
7383
cursor: pointer;
74-
gap: 3em;
75-
76-
width: 100%;
77-
background: var(--bg04);
78-
/*height: 10em;*/
79-
80-
border-radius: var(--radius);
81-
padding: 2em;
82-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
84+
padding-block: 0.75em;
85+
padding-left: 0.5em;
86+
margin-left: 1.75em;
87+
border-bottom: 1px solid var(--bg08);
88+
}
89+
.entry:hover {
90+
background: var(--bg08);
8391
}
8492
.entry img {
8593
width: 16px;
8694
height: 16px;
8795
}
8896
.entry .title {
8997
font-weight: bold;
98+
color: inherit;
99+
text-decoration: none;
90100
}
91-
92-
.iconcontainer {
93-
width: 2em;
94-
height: 100%;
95-
justify-content: center;
101+
.entry .title:hover {
102+
color: var(--accent);
103+
text-decoration: underline;
96104
}
97-
.iconcontainer img {
98-
width: 100%;
99-
height: auto;
105+
.inner span {
106+
white-space: nowrap;
107+
overflow: hidden;
108+
padding: 0.085em;
109+
text-overflow: ellipsis;
100110
}
101-
102-
.icons {
111+
.text {
112+
display: flex;
113+
flex-direction: column;
114+
gap: 0.25em;
103115
flex: 1;
116+
min-width: 0;
117+
}
118+
.details {
104119
display: flex;
105-
justify-content: right;
106-
gap: 0.5em;
107-
108-
font-size: 1.5em;
120+
gap: 1em;
121+
color: var(--fg2);
109122
}
110-
111-
.content {
123+
.icons {
112124
display: flex;
113-
flex-direction: column;
114125
gap: 0.5em;
126+
margin-left: 0.75em;
115127
}
116-
117-
.content > span {
118-
display: flex;
119-
gap: 1em;
128+
.icons :global(svg) {
129+
width: 1em;
130+
height: 1em;
120131
color: var(--fg2);
121132
}
122133
`;

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

Lines changed: 45 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,27 @@ import { defaultFaviconUrl } from "../assets/favicon";
66
export function HistoryPage(s: { tab: Tab }) {
77
return (
88
<div>
9-
<h1>History</h1>
10-
<div class="entries">
9+
<nav>
10+
<h1>History</h1>
11+
</nav>
12+
<ul class="entries">
1113
{browser.globalhistory
1214
.sort((a, b) => b.timestamp - a.timestamp)
1315
.map((entry) => (
14-
<div
16+
<li
1517
class="entry"
1618
on:click={() => {
1719
browser.newTab(entry.url);
1820
}}
1921
>
20-
<img src={entry.favicon || defaultFaviconUrl} alt="favicon" />
21-
<span class="title">{entry.title || entry.url.href}</span>
22-
<span class="url">{entry.url.hostname}</span>
23-
</div>
22+
<span class="inner">
23+
<img src={entry.favicon || defaultFaviconUrl} alt="favicon" />
24+
<span class="title">{entry.title || entry.url.href}</span>
25+
<span class="url">{entry.url.hostname}</span>
26+
</span>
27+
</li>
2428
))}
25-
</div>
29+
</ul>
2630
</div>
2731
);
2832
}
@@ -32,24 +36,43 @@ HistoryPage.style = css`
3236
height: 100%;
3337
display: flex;
3438
flex-direction: column;
35-
align-items: center;
36-
font-family: sans-serif;
37-
39+
align-items: flex-start;
3840
background: var(--bg01);
3941
color: var(--fg);
4042
}
43+
nav {
44+
width: 100%;
45+
padding: 1.5em;
46+
background: var(--bg02);
47+
}
48+
h1 {
49+
font-size: 1.5rem;
50+
font-weight: 600;
51+
margin-left: 0;
52+
}
4153
.entries {
42-
display: flex;
43-
flex-direction: column;
44-
gap: 1em;
45-
width: 70%;
54+
list-style: none;
55+
padding: 0;
56+
margin: 0;
57+
width: 100%;
58+
padding-right: 1.75em;
4659
}
4760
.entry {
61+
width: 100%;
62+
transition: background 0.1s;
63+
}
64+
.inner {
4865
display: flex;
4966
align-items: center;
50-
/*border-bottom: 1px solid #ccc;*/
5167
cursor: pointer;
5268
gap: 0.5em;
69+
padding-block: 0.75em;
70+
padding-left: 0.5em;
71+
margin-left: 1.75em;
72+
border-bottom: 1px solid var(--bg08);
73+
}
74+
.entry:hover {
75+
background: var(--bg08);
5376
}
5477
.entry img {
5578
width: 16px;
@@ -58,4 +81,10 @@ HistoryPage.style = css`
5881
.entry .title {
5982
font-weight: bold;
6083
}
84+
.inner span {
85+
white-space: nowrap;
86+
overflow: hidden;
87+
padding: 0.085em;
88+
text-overflow: ellipsis;
89+
}
6190
`;

0 commit comments

Comments
 (0)