Skip to content

Commit 55383d1

Browse files
moonrailgunmoonrailgun
committed
feat: refactor download button UI to improve layout and styling, add new popup stack for file list display, and enhance cancel button functionality
1 parent 67abb2d commit 55383d1

2 files changed

Lines changed: 65 additions & 52 deletions

File tree

‎docs/preview.png‎

57.1 KB
Loading

‎src/dao/browser/ui/webui/resources/sidebar/dao_download_button.ts‎

Lines changed: 65 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -27,16 +27,21 @@ export class DaoDownloadButton extends CrLitElement {
2727
gap: 4px;
2828
}
2929
30-
.file-list {
30+
.popup-stack {
3131
position: absolute;
3232
bottom: 100%;
3333
left: -6px;
3434
width: calc(100vw - 12px);
35+
padding: 0 6px;
36+
box-sizing: content-box;
37+
display: flex;
38+
flex-direction: column;
39+
}
40+
41+
.file-list {
3542
max-height: 0;
3643
overflow: hidden;
3744
transition: max-height 0.15s ease-out;
38-
padding: 0 6px;
39-
box-sizing: content-box;
4045
}
4146
4247
:host(.expanded) .file-list {
@@ -142,11 +147,14 @@ export class DaoDownloadButton extends CrLitElement {
142147
color: var(--text-muted);
143148
white-space: nowrap;
144149
flex-shrink: 0;
150+
max-width: 70px;
151+
overflow: hidden;
152+
text-overflow: ellipsis;
145153
}
146154
147155
.cancel-btn {
148-
width: 16px;
149-
height: 16px;
156+
width: 20px;
157+
height: 20px;
150158
border: none;
151159
background: transparent;
152160
color: var(--text-muted);
@@ -156,9 +164,12 @@ export class DaoDownloadButton extends CrLitElement {
156164
align-items: center;
157165
justify-content: center;
158166
flex-shrink: 0;
167+
border-radius: 6px;
168+
transition: background 0.12s ease, color 0.12s ease;
159169
}
160170
161171
.cancel-btn:hover {
172+
background: var(--ink-drop);
162173
color: var(--text-primary);
163174
}
164175
@@ -224,59 +235,61 @@ export class DaoDownloadButton extends CrLitElement {
224235
override render() {
225236
return html`
226237
<div class="container">
227-
<div class="file-list">
228-
${this.recentFiles_.map(file => html`
229-
<div class="file-item"
230-
@mousedown=${(e: MouseEvent) =>
231-
this.onFileMouseDown_(e, file.index)}>
232-
${file.iconUrl
233-
? html`<img class="file-icon" src=${file.iconUrl} alt="">`
234-
: html`<div class="file-icon placeholder">
235-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
238+
<div class="popup-stack">
239+
<div class="file-list">
240+
${this.recentFiles_.map(file => html`
241+
<div class="file-item"
242+
@mousedown=${(e: MouseEvent) =>
243+
this.onFileMouseDown_(e, file.index)}>
244+
${file.iconUrl
245+
? html`<img class="file-icon" src=${file.iconUrl} alt="">`
246+
: html`<div class="file-icon placeholder">
247+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none"
248+
stroke="currentColor" stroke-width="2"
249+
stroke-linecap="round" stroke-linejoin="round">
250+
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
251+
<polyline points="14 2 14 8 20 8"></polyline>
252+
</svg>
253+
</div>`}
254+
<span class="file-name">${file.name}</span>
255+
</div>
256+
`)}
257+
</div>
258+
259+
${this.activeDownloads_.length > 0 ? html`
260+
<div class="active-downloads">
261+
${this.activeDownloads_.map(dl => html`
262+
<div class="active-item">
263+
<svg class="active-icon" viewBox="0 0 24 24" fill="none"
264+
stroke="currentColor" stroke-width="2"
265+
stroke-linecap="round" stroke-linejoin="round">
266+
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
267+
<polyline points="7 10 12 15 17 10"></polyline>
268+
<line x1="12" y1="15" x2="12" y2="3"></line>
269+
</svg>
270+
<div class="active-mid">
271+
<span class="active-name">${dl.name}</span>
272+
<div class="progress-bar">
273+
<div class="progress-fill"
274+
style="width: ${Math.max(0, dl.percent)}%"></div>
275+
</div>
276+
</div>
277+
<span class="active-speed">${dl.speed}</span>
278+
<button class="cancel-btn" title="Cancel"
279+
@click=${() => this.onCancelDownload_(dl.id)}>
280+
<svg width="12" height="12" viewBox="0 0 24 24" fill="none"
236281
stroke="currentColor" stroke-width="2"
237282
stroke-linecap="round" stroke-linejoin="round">
238-
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
239-
<polyline points="14 2 14 8 20 8"></polyline>
283+
<line x1="18" y1="6" x2="6" y2="18"></line>
284+
<line x1="6" y1="6" x2="18" y2="18"></line>
240285
</svg>
241-
</div>`}
242-
<span class="file-name">${file.name}</span>
286+
</button>
287+
</div>
288+
`)}
243289
</div>
244-
`)}
290+
` : ''}
245291
</div>
246292
247-
${this.activeDownloads_.length > 0 ? html`
248-
<div class="active-downloads">
249-
${this.activeDownloads_.map(dl => html`
250-
<div class="active-item">
251-
<svg class="active-icon" viewBox="0 0 24 24" fill="none"
252-
stroke="currentColor" stroke-width="2"
253-
stroke-linecap="round" stroke-linejoin="round">
254-
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
255-
<polyline points="7 10 12 15 17 10"></polyline>
256-
<line x1="12" y1="15" x2="12" y2="3"></line>
257-
</svg>
258-
<div class="active-mid">
259-
<span class="active-name">${dl.name}</span>
260-
<div class="progress-bar">
261-
<div class="progress-fill"
262-
style="width: ${Math.max(0, dl.percent)}%"></div>
263-
</div>
264-
</div>
265-
<span class="active-speed">${dl.speed}</span>
266-
<button class="cancel-btn" title="Cancel"
267-
@click=${() => this.onCancelDownload_(dl.id)}>
268-
<svg width="12" height="12" viewBox="0 0 24 24" fill="none"
269-
stroke="currentColor" stroke-width="2"
270-
stroke-linecap="round" stroke-linejoin="round">
271-
<line x1="18" y1="6" x2="6" y2="18"></line>
272-
<line x1="6" y1="6" x2="18" y2="18"></line>
273-
</svg>
274-
</button>
275-
</div>
276-
`)}
277-
</div>
278-
` : ''}
279-
280293
<button class="download-btn" title="Downloads"
281294
@click=${this.onButtonClick_}>
282295
<svg width="14" height="14" viewBox="0 0 24 24" fill="none"

0 commit comments

Comments
 (0)