From dd4b5e7600a14f29414669708bc8d648d8647a53 Mon Sep 17 00:00:00 2001 From: aandrew-me Date: Tue, 30 Jun 2026 20:35:15 +0300 Subject: [PATCH] Improve download item UI --- assets/css/index.css | 110 +++++++++++++++++++++++++------ assets/images/close.png | Bin 1046 -> 1582 bytes assets/images/download-speed.svg | 60 +++++++++++++++++ assets/images/external-link.png | Bin 0 -> 2175 bytes src/renderer.js | 25 ++++--- 5 files changed, 167 insertions(+), 28 deletions(-) create mode 100644 assets/images/download-speed.svg create mode 100644 assets/images/external-link.png diff --git a/assets/css/index.css b/assets/css/index.css index d637548..2b47e9d 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -61,6 +61,42 @@ img { height: 40px; cursor: pointer; transition: 0.3s; + z-index: 1; +} + +.openFileBtn { + color: white; + background-color: var(--blueBtn); + border: none; + position: relative; + border-radius: 6px; + text-decoration: none; + cursor: pointer; + padding: 10px; + display: flex; + margin: 8px 0; + font-weight: normal; + align-items: center; + font-size: 15px; + + display: none; +} + +.btnIcon { + width: 15px; + height: 15px; + margin-right: 10px; +} + +.speedContainer { + display: flex; +} + +.speedIcon { + width: 15px; + height: 15px; + + color: var(--text) } #menu { @@ -185,10 +221,12 @@ img { .itemIconBox { display: flex; flex-direction: column; + position: relative; } .itemIcon { - max-width: 160px; - max-height: 90px; + max-width: 180px; + height: 115px; + object-fit: cover; border-radius: 10px; margin: 0 10px 0 0; } @@ -208,7 +246,14 @@ img { } .itemTitle { - padding: 5px; + padding: 8px 0; + font-weight: bold; + font-size: 20px; + text-align: start; + max-width: 96%; +} +.itemChannel { + opacity: 0.6; } .itemBody { height: 90%; @@ -216,15 +261,17 @@ img { display: flex; flex-direction: column; justify-content: space-between; + align-items: flex-start; + margin-left: 30px; } .itemProgress { - font-weight: bold; - cursor: pointer; padding: 4px 0; + width: 90%; + text-align: start; } .custom-progress { - width: 90%; + width: 100%; height: 8px; background: #e0e0e0; border-radius: 6px; @@ -241,7 +288,7 @@ img { } .itemSpeed { - padding: 10px 5px 5px 5px; + padding: 10px 5px 5px 0; } .itemClose { position: absolute; @@ -249,13 +296,23 @@ img { right: 8px; cursor: pointer; cursor: pointer; - width: 20px; - height: 20px; + width: 15px; + height: 15px; + background: color-mix(in srgb, var(--item-bg) 85%, black); + padding: 5px; + border-radius: 50%; } .itemType { - font-style: italic; margin-top: 5px; + position: absolute; + padding: 5px; + background: #1310108a; + color: white; + left: 5px; + bottom: 5px; margin: top 8px; + border-radius: 5px; + font-size: 10px; } #closeHidden { @@ -264,8 +321,11 @@ img { right: 10px; cursor: pointer; cursor: pointer; - width: 20px; - height: 20px; + width: 15px; + height: 15px; + background: color-mix(in srgb, var(--item-bg) 85%, black); + padding: 5px; + border-radius: 50%; } #hidden { @@ -1293,7 +1353,9 @@ input[type="range"]::-webkit-slider-thumb:hover { transition: color 0.2s; } -.custom-slider-container, .target-size-container, .target-percent-container { +.custom-slider-container, +.target-size-container, +.target-percent-container { background-color: var(--box-toggle); border: 1px solid var(--box-separation); padding: 18px 24px; @@ -1380,7 +1442,9 @@ input[type="range"]::-webkit-slider-thumb:hover { background: var(--blueBtn); cursor: pointer; margin-top: -6px; - transition: transform 0.15s, background-color 0.15s; + transition: + transform 0.15s, + background-color 0.15s; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } @@ -1389,14 +1453,16 @@ input[type="range"]::-webkit-slider-thumb:hover { background: var(--blueBtn-bottom); } -.target-size-container, .target-percent-container { +.target-size-container, +.target-percent-container { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } -#target-size-input, #target-percent-input { +#target-size-input, +#target-percent-input { background-color: var(--select); color: var(--text); border: 1px solid var(--box-separation); @@ -1408,7 +1474,8 @@ input[type="range"]::-webkit-slider-thumb:hover { transition: border-color 0.2s; } -#target-size-input:focus, #target-percent-input:focus { +#target-size-input:focus, +#target-percent-input:focus { border-color: var(--blueBtn); } @@ -1426,7 +1493,9 @@ input[type="range"]::-webkit-slider-thumb:hover { justify-content: center; gap: 8px; margin: 25px auto 15px auto; - transition: background-color 0.2s, transform 0.1s; + transition: + background-color 0.2s, + transform 0.1s; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } @@ -1452,7 +1521,9 @@ input[type="range"]::-webkit-slider-thumb:hover { overflow: hidden; max-height: 1000px; opacity: 1; - transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; + transition: + max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), + opacity 0.3s ease; } .advanced-settings-collapse.collapsed { @@ -1464,4 +1535,3 @@ input[type="range"]::-webkit-slider-thumb:hover { .full-width-settings { width: 100% !important; } - diff --git a/assets/images/close.png b/assets/images/close.png index a0afcf20f5cf5db52d8a3b1e58f06e6d8ffdd044..e130920a2b16c6c70f22bde9d0086feb90231425 100644 GIT binary patch delta 1564 zcmV+%2IKjb2(An^iBL{Q4GJ0x0000DNk~Le0001h0001h2nGNE0K-0E%K!iX32;bR za{vGi!vFvd!vV){sAQAn11En4yGcYrRCt{2ojs3KRUC(ZcaVh8sF+wtq{Noh7z!-a zs5KzOE&Kvj+G(McvDXh^EPRPd2SmV#Bqm1G%0glwnm`m}HPNv0`dI8-au}H1nLFp) zbMC#rr`c-$_ndv6duAq^*{L)EuvOAQNiRs+DQT;ui;}*T^hs4!-%Ni##*_oFN76n? zyCpp=>58PEB^{RZVO3SD>pgfsaDnwX3~X;>GiG*x?ZD9u+?@yZP8;wBaBG7BH5Y)T zmiK6;0PLFK#;v&pygoT#dBz8aTm~M`v}ZF0SQ@*SmzU}R_XB@67y$4W@MPxS!C+zS z&Tr~&1$a=vYYhj~_#}VG0L}0GkXHqqTyO|Df>t4pe1NY6T#7IV{B+O?EOzWq@<#<+ zle9U~`c@=8Q&rUuk>;5I*4}v?m$WU?$ZI1>mm&?5))sccCqaCGU6PI|o_tBVIFfWa z;y_7yK++eEARc4+$0a=!dGzU#q|YM{mDVCSieDHm%=p+pq4lID&@Ib@{7x}@49KnpxH~GQF z9Ki|=Sjezv>ms731DCl4WSbkjS zPy|?h8t6a-Sbkb4I07uc9VjpYEWceSC;}`$4-^mqmY)|gMu6p)0U08|^2>r2Bf#>@ zgcc&e^2-J|K-&Lamh!)G9mxIr>jk7e2~yxYKQ?qH0?SVYbu+v znU~H5P@w#pPDaqF01B30)42#b6F>*#*K{g^P6U6@A^A0(iJY6Mt*H0W9cSblWqN(5Mb zGAKO)EI&Dv8UdEy8k80Rmft#*5&@Q<4RS|-Gr#`vT5I9_l+k0i-zz&I(wKIMDJFLi`9;1*}9G=3~DFi2HPKS-|%Z2Kml!5#pT$ zr$>^GEV!PVl9sEg`Y6KQ%nVdj^|7R7E&gB5j|kWS{I|fJ?_)m`EcSG;3hbx{z12{@ zkNwQh{ORD$aL5SwY>o$Cwfu4zM{rzq4u78lqsbwgfOpuqreA?Qnf7X?06Yc!wt>6r zz}vv|ugC!&1KtJB1`oUjoC00}wzRk}GY7zyv7=KHC&D@4Jz(eLWBv!Z4y+>$+w80W O0000KJT#$m+R){!6 zFNt1G5oi3lKFoL)3Ks|Nmb~=LE=m1|>m$!3-=W z_Po6IEDC4;z4Z0{r|=^<_zbhj&miOP-+6g_e)t6a2>c%MlE;`OSpJ2AJ+JW*o=1Cu zdKr_v-CYcC-j*!_aySb-B8wRqdB1}&;}WsE;y^+65>H=O_LnTY{3>iO7tM_X>Ur$x z;uw-~@9oX#>LvpowuH9Hyfb-@b`~#^wx0j{fBoH(raX?!&!#aqW0tSo$8W}2HIG|d zFGePD&X2vpHKq0+&cEpST(Dpfcgg?6C67K#`txUDl)KTPZ}RH1ufA;Y*x6;SnZ-4C z!ryo6A4yIWUXdHate*0@sL(;>u1l&=eCF%TeHo5RpL&02S#!%i@?z)qtDNP^C)6ch z2X+58D*eUqj3JXOMOg3xL9fTUj=rrxmgQ9aPUl;x+v6bJca z)f>kHP98e$aq`r0hm)7wSEsyP94PcbajHuVhpOWIFjd3(Vycew-BbhTv#BP|XI3qo zziZMSf8UkN^JfLI+nFxqt9j-1$?kuB{F-$_FXlhwJi6gOV^#h~k2=e|b6r8m--pR|QRy^VlJup0g3#)Ew|n{@f2D5|+FhTf#rT=^{a+!Y zc!MbiejbX*>^LXxy0yS--|qMJhyH%{)2ve3#MJ#WY55i9Nq-uT)&$yle>9%>S?Jao z@%6v#HTG;b343oD#q`zm0Xkxq!^40j7)S5EOiY{Lkumf3{9*IO|=aStPBhuRmnU;(U6;;l9^Ts z(qO7+oZUMR;Gb;nAp1^Q!X`miS vke=ZDw370~qEv?R@^Zb*yzJuS#DY}4{G#;P?`))iiWody{an^LB{Ts5dUUh2 diff --git a/assets/images/download-speed.svg b/assets/images/download-speed.svg new file mode 100644 index 0000000..e457c5d --- /dev/null +++ b/assets/images/download-speed.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/external-link.png b/assets/images/external-link.png new file mode 100644 index 0000000000000000000000000000000000000000..c06fca4354f183c400a99c2f6febee8957d07211 GIT binary patch literal 2175 zcmbW3`#;kS8^^!fm(AE5l5=i{oNqaedpgaWw}=QCR&yF!cjVAKxY=$>&WAh446Qk} z5m9u&WFFm&l%5bu!V}N3B%;K#oE1GJwbvpY_D6AzLlBwj)|S8Zg|ebD zo|J0jS-YT$=uidlj6Q!~4qr8^Ve+>195JUE9^h`gnbuuC zHL@hy{Tkd{L2Re=7;fL$?SA!*(kxR1w=qGk01u^*aX0){SC^Z0#h$rOYwUEF^G#@0nSsdXppVa@S3>U zE^!H+03^JxVJH^HA8D0K3}5kIc@juRTqo6Iz!REoB=KP~i4m+{D=kid_>&n_wQ$^N=U$6ukA<6IKf;}OkzJ;Tz_dAuvT0%r>FT)7QH>9}GO~Mh5OWt`$RF*jb zeH^Msl1@Q&b-i)BQ{^fUlA6-X;e=^=V5Ld)d|W^=;T!Uk?RJ)2%mX&9K{mv%Qd!GD z6*n+EdYo7G^pWSz%1emAL3%A15vm3=|X0?rjkMY@fbRLY#k@7(1YfkIjL?(O?+txk*%Hl8|Xh^X80 z&98lPk@B%z@q@boZLJR_@2*@>AH z?iIDp4sUirp5C9b%dgOc{34A{vb*^gLZ9TfafOXTdCqayj`+DHrRLk#ly-0@V5eO9 zS`VrVn*2GIdHuy^zZgjCQ^Cg2dAXwa5_Y=c{LHV*Po7KM45I=GK07+aqlNJ~Y^I6C zUJ3iV9*Gk|n^5^-d)*YJ9Yy87&Y7(KR>`{7^+|}-R@rmXHN*Z2J{{2Vbdn4U1s-g< zDS9D@syMUVFkKVY2COj0j(Ke;@*ZSi{+Wx@m5x_H>{^5&%R3-S++A1jvTR1vgLbyF z8ms)&aAv8h3Q8~4#p~n@S;Yat;>sl_AD>upP+%}k>>El^pD@J-AZDZuaf|HwYB zW5b$P$I#gcmA{Wpb343t{`2q0S4D%$swbquW6BDmkk>}LxECU@W%0$BRXb5dd-)!3 z+GMCD!8}F347ekMr-er{rc?pjny2qq-PETuEb0G3H4F~{<{a$;gEH!s7#H%xx%a8D zR=k>n;ID1KTX){>yD0 zaE``^dW#HF322Rjo&!7(?i#ms@ZZAt*rS>Hq<8GfCzA%Ev}oW&CGmsNYL4pBoyL&Rr9pZe$B5sQ%jCgFgps~#`5(K{ z?Y-VY{$jGIBNI;F@XeM}q)3$1Tov)(BD~vy3$PaJ_OS;VZdT*S{R9joaLton|Bro> zWXhuz6LLM|0QwP_sMrc7_Oy_z-X8$4GC`*rw&X3~%_;UXKoH2~9%Jq5&JFTNJmw;$ z{GOr>!s~_Pei4Go@ZCSitP0pY?6$6z%{=+l>r2nB)THml^l76#cq>Ey
${job.title}
+
${job.channel}

${i18n.__("preparing")}

`; @@ -1642,9 +1646,8 @@ class YtDownloaderApp { const audioExt = format.ext === "webm" ? "opus" : format.ext; - const formatNote = - (i18n.__(format.format_note) || i18n.__("unknownQuality")); + i18n.__(format.format_note) || i18n.__("unknownQuality"); // HTML for Audio Grid const htmlContent = ` @@ -1791,10 +1794,14 @@ class YtDownloaderApp {
${job.title}
- +
${job.channel}
+
+ +
${i18n.__( "preparing", )}
+
`; $(CONSTANTS.DOM_IDS.DOWNLOAD_LIST).insertAdjacentHTML( @@ -1852,6 +1859,8 @@ class YtDownloaderApp { */ _showDownloadSuccessUI(randomId, actualFilePath, thumbnail) { const progressEl = $(`${randomId}_prog`); + const openBtn = $(`${randomId}_openBtn`); + if (!progressEl) return; let fullPath; @@ -1918,13 +1927,13 @@ class YtDownloaderApp { const ext = fullFilename.split(".").pop(); progressEl.innerHTML = ""; // Clear progress bar - const link = document.createElement("b"); - link.textContent = i18n.__("fileSavedClickToOpen"); - link.style.cursor = "pointer"; - link.onclick = () => { + + openBtn.style.display = "flex"; + openBtn.onclick = () => { ipcRenderer.send("show-file", fullPath); }; - progressEl.appendChild(link); + + progressEl.style.display = "none"; $(`${randomId}_speed`).textContent = ""; // Send desktop notification