Skip to content

Commit ea714b1

Browse files
std-microblockstd-microblock
committed
feat: improve download list
1 parent 3ee61f6 commit ea714b1

File tree

3 files changed

+159
-78
lines changed

3 files changed

+159
-78
lines changed

‎resources/dist.rc‎

231 Bytes
Binary file not shown.

‎src/celemod-ui/src/components/DownloadList.scss‎

Lines changed: 155 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,200 @@
1-
@use "../index.scss"as theme;
1+
@use "../index.scss" as theme;
22

33
.downloadList {
4-
width: 200px;
5-
min-height: 200px;
4+
width: 280px;
5+
min-height: 80px;
6+
max-height: 400px;
67
background: theme.$bg1;
7-
border-radius: 10px;
8-
border: none;
9-
padding: 0 10px;
8+
border-radius: 12px;
9+
border: 1px solid rgba(255, 255, 255, 0.08);
10+
padding: 0;
1011
color: theme.$fg1;
12+
overflow: hidden;
13+
14+
h2 {
15+
font-size: 12px;
16+
font-weight: 600;
17+
letter-spacing: 1.5px;
18+
color: theme.$fg3;
19+
margin: 0;
20+
padding: 12px 14px 10px;
21+
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
22+
flow: horizontal;
23+
vertical-align: middle;
24+
25+
&::before {
26+
content: '';
27+
display: inline-block;
28+
width: 6px;
29+
height: 6px;
30+
border-radius: 50%;
31+
background: theme.$primary;
32+
margin-right: 7px;
33+
animation: pulse 2s infinite;
34+
}
35+
}
36+
37+
.taskList {
38+
overflow-y: auto;
39+
max-height: 340px;
40+
padding: 6px 0;
41+
}
42+
43+
.task {
44+
padding: 8px 14px;
45+
transition: background 0.15s;
46+
47+
&:hover {
48+
background: rgba(255, 255, 255, 0.03);
49+
}
50+
51+
label {
52+
display: block;
53+
cursor: default;
54+
}
55+
}
1156

1257
.infoLine {
13-
width: 200px;
58+
width: 100%;
1459
height: 20px;
15-
flow: horizontal-flow;
16-
vertical-align: middle;
1760
position: relative;
18-
19-
.name {
20-
white-space: nowrap;
21-
text-wrap: none;
22-
overflow: hidden;
23-
width: 200px;
24-
height: 20px;
25-
text-overflow: ellipsis;
26-
}
61+
margin-bottom: 6px;
2762

2863
button {
29-
opacity: 0.8;
64+
display: inline-block;
65+
opacity: 0.35;
3066
padding: 0;
31-
padding-top: 2px;
67+
width: 16px;
68+
height: 20px;
69+
flow: horizontal;
70+
vertical-align: middle;
71+
horizontal-align: center;
72+
background: none;
73+
border: none;
74+
box-shadow: none;
75+
transition: opacity 0.15s;
76+
cursor: pointer;
3277

3378
&:hover {
34-
opacity: 1;
79+
opacity: 0.7;
3580
background: none;
81+
box-shadow: none;
3682
}
3783
}
3884

39-
.b1 {
40-
opacity: 0.3;
41-
}
42-
4385
.name {
44-
width: 80%;
86+
display: inline-block;
87+
font-size: 12px;
88+
font-weight: 500;
89+
color: theme.$fg;
90+
white-space: nowrap;
91+
overflow: hidden;
92+
text-overflow: ellipsis;
93+
position: absolute;
94+
left: 20px;
95+
right: 40px;
96+
top: 2px;
4597
}
4698

99+
.progress-label {
100+
display: inline-block;
101+
font-size: 10px;
102+
color: theme.$fg3;
103+
opacity: 0.7;
104+
position: absolute;
105+
right: 0;
106+
top: 3px;
107+
}
47108
}
48109

49110
.progressLine {
50111
width: 100%;
51-
flow: horizontal-flow;
52-
vertical-align: middle;
112+
height: 6px;
53113
position: relative;
54-
height: 4px;
55-
// margin-top: -6px;
114+
margin-bottom: 2px;
56115

57116
.progress {
58-
width: calc(100% - 35px);
117+
position: absolute;
118+
left: 0;
119+
right: 38px;
120+
top: 1px;
59121
height: 4px;
60-
background: theme.$bg3;
61-
border-radius: 5px;
62-
margin: 5px 0;
122+
background: rgba(255, 255, 255, 0.08);
123+
border-radius: 4px;
63124
overflow: hidden;
64-
flow: horizontal-flow;
65-
position: relative;
66125

67126
.bar {
68127
height: 100%;
69-
background: theme.$fg1;
128+
background: theme.$primary;
129+
border-radius: 4px;
130+
transition: width 0.4s ease-in-out;
70131
width: 0;
71-
transition: .5s width;
72132
}
73-
74133
}
75134

76135
.text {
77-
min-width: max-content;
78-
white-space: nowrap;
79-
font-size: 8px;
80-
margin: 0;
81-
padding: 0;
136+
display: inline-block;
137+
font-size: 10px;
138+
color: theme.$fg3;
139+
opacity: 0.7;
82140
position: absolute;
83-
top: -5px;
84-
right: 5px;
85-
text-shadow: 0 0 5px rgba(0, 0, 0, 0.479);
86-
color: theme.$fg2;
141+
right: 0;
142+
top: -3px;
87143
}
88144
}
89145

90-
.taskList {
91-
overflow-y: scroll;
92-
height: max-content;
93-
max-height: 200px;
146+
.subTasks {
147+
margin-top: 6px;
148+
margin-left: 20px;
149+
padding-left: 10px;
150+
border-left: 2px solid rgba(167, 127, 219, 0.25);
151+
152+
.subTask {
153+
padding: 5px 0;
154+
155+
&:not(:last-child) {
156+
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
157+
}
158+
159+
.name {
160+
font-size: 11px;
161+
color: theme.$fg2;
162+
white-space: nowrap;
163+
overflow: hidden;
164+
text-overflow: ellipsis;
165+
margin-bottom: 4px;
166+
opacity: 0.8;
167+
width: 100%;
168+
}
94169

95-
.subTasks {
96-
padding-left: 5px;
97-
margin: 0;
98-
margin-left: 5px;
99-
list-style: none;
170+
.progressLine {
171+
height: 4px;
172+
margin-bottom: 0;
100173

101-
border-left: 3px solid #ffffff2f;
174+
.progress {
175+
right: 38px;
176+
height: 3px;
177+
top: 0;
178+
179+
.bar {
180+
background: lighten(theme.$primary, 5%);
181+
}
182+
}
183+
}
184+
185+
.error {
186+
flow: horizontal;
187+
vertical-align: middle;
188+
font-size: 10px;
189+
color: #ef596f;
190+
margin-top: 4px;
191+
opacity: 0.85;
192+
}
102193
}
103194
}
104-
}
195+
}
196+
197+
@keyframes pulse {
198+
0%, 100% { opacity: 1; }
199+
50% { opacity: 0.3; }
200+
}

‎src/celemod-ui/src/components/DownloadList.tsx‎

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useRef, useState } from 'preact/hooks';
77
import { Icon } from './Icon';
88
import { Download } from '../context/download';
99

10-
const Task = ({ task, width }: { task: Download.TaskInfo; width: number }) => {
10+
const Task = ({ task }: { task: Download.TaskInfo }) => {
1111
const all = task.subtasks.length;
1212
const finished = task.subtasks.filter((v) => v.state === 'Finished').length;
1313

@@ -26,20 +26,7 @@ const Task = ({ task, width }: { task: Download.TaskInfo; width: number }) => {
2626
{<Icon name={expanded ? 'i-down' : 'i-right'} />}
2727
</button>
2828
<span className="name">{task.name}</span>
29-
</div>
30-
31-
<div className="progressLine">
32-
<div class="progress">
33-
<div
34-
class="bar"
35-
style={{
36-
width: `${(finished / all) * width}px`,
37-
}}
38-
></div>
39-
</div>
40-
<div class="text">
41-
{finished} / {all}
42-
</div>
29+
<span className="progress-label">{finished}/{all}</span>
4330
</div>
4431
</label>
4532
{expanded && (
@@ -54,7 +41,7 @@ const Task = ({ task, width }: { task: Download.TaskInfo; width: number }) => {
5441
<div
5542
class="bar"
5643
style={{
57-
width: `${(subtask.progress * width) / 100}px`,
44+
width: `${subtask.progress}%`,
5845
}}
5946
></div>
6047
</div>
@@ -86,16 +73,14 @@ export const DownloadListMenu = () => {
8673
});
8774
}, []);
8875

89-
const width = 180;
90-
9176
return (
9277
<menu className="popup downloadList">
9378
<h2>{_i18n.t('下载任务')}</h2>
9479
<div className="taskList">
9580
{Object.values(downloadTasks)
9681
.filter((v) => v.state !== 'finished')
9782
.map((task) => (
98-
<Task task={task} width={width} />
83+
<Task task={task} />
9984
))}
10085
</div>
10186
</menu>

0 commit comments

Comments
 (0)