diff --git a/copyparty/web/baguettebox.js b/copyparty/web/baguettebox.js index 570338d9..1f276d13 100644 --- a/copyparty/web/baguettebox.js +++ b/copyparty/web/baguettebox.js @@ -308,7 +308,7 @@ window.baguetteBox = (function () { '
' + '
' + '
' + - '' + + '×' + '' + '' + '' + diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 6373f898..15d31f9c 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -532,14 +532,23 @@ html .ayjump:focus-visible { #qs_btns a { background: color-mix(in oklab, var(--txt-bg), transparent); width: 1em; + height: 1.2em; display: inline-block; text-align: center; border-radius: 5px; border-radius: var(--radius); + vertical-align: center; } #qs_btns a:hover { background: var(--bg); } +#qs_btns a .x { + line-height: .75em; +} +#moresearch span { + font-size: .6em; + vertical-align: center; +} html.y #path { text-shadow: none; } @@ -613,12 +622,14 @@ a:hover { } .s0:after, .s1:after { - content: '▴'; + content: '▲'; + font-size: .7em; /* margin-left: -.15em; */ } .s0r:after, .s1r:after { - content: '▾'; + content: '▼'; + font-size: .7em; /* margin-left: -.15em; */ } .s0:after, @@ -978,6 +989,7 @@ tr.play td:nth-child(1) a { } #ggrid>a .thumb, #ggrid>a img { + color: #3584e4; z-index: 1; border-radius: 5px; border-radius: var(--radius); @@ -1756,6 +1768,9 @@ html.b #mu_outer { padding: .15em .4em; margin: 0; } +#ops a:first-child { + margin-left: auto; +} .unfun #ops a { font-size: 1.2em; } @@ -1877,6 +1892,7 @@ html.y #ops svg circle { .opview input[type=text], .opview input[type=color], .opview input[type=date] { + color: #fff; color: var(--fg); background: #222529; background: var(--txt-bg); @@ -3673,8 +3689,9 @@ summary { padding: .2em; margin-left: .3em; } - - +.x { + font-size: 1.5em; +} @@ -3945,7 +3962,6 @@ html.d #treepar { position: relative; height: 2.2em; margin: .5em 0 0 0; - z-index: -1; } #pathBar.thin #path a { padding-top: .45em; @@ -3954,9 +3970,15 @@ html.d #treepar { margin-left: 2.5em; } #pathBar.thin #actionsArea { - position: absolute; + position: fixed; top: .6em; right: .6em; + z-index: 11; + max-width: 80%; + overflow-x: auto; +} +#pathBar.thin .popup { + position: relative; } html.e #pathBar.thin #path { margin: 0; @@ -4009,7 +4031,6 @@ html.e #wrap.thin .ghead { position: relative; height: 2.2em; margin: .5em 0 0 0; - z-index: -1; } html.dy .ghead, html.a .ghead, @@ -4055,9 +4076,16 @@ html.e #wrap.thin .ghead { } #actionsArea, #pathBar.thin #actionsArea { - position: absolute; + position: fixed; top: 1em; right: 1em; + z-index: 11; + max-width: 80%; + overflow-x: auto; + } + .popup, + #pathBar.thin .popup { + position: relative; } html.fy #actionsArea, html.fy #pathBar.thin #actionsArea { diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html index ec8b528b..0e40b23e 100644 --- a/copyparty/web/browser.html +++ b/copyparty/web/browser.html @@ -91,8 +91,8 @@
- - + + ×
@@ -166,7 +166,7 @@
- + × @@ -180,7 +180,7 @@
- + × @@ -204,7 +204,7 @@
⚙️ - + × diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index 5ff81156..09d68519 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -879,6 +879,15 @@ if(!fun_tgl){ ebi('opa_cfg').innerHTML = 'settings' ebi('acc_pfp').innerHTML = 'account' } +else if(!EMOJI){ + ebi('opa_srch').innerHTML = 's?' + ebi('opa_del').innerHTML = 'un' + ebi('opa_up').innerHTML = 'u▲' + ebi('opa_bup').innerHTML = 'b▲' + ebi('opa_msg').innerHTML = 'msg' + ebi('opa_cfg').innerHTML = '★' + ebi('acc_pfp').innerHTML = 'acc' +} // mkdir + md function mktemp(is_dir) { @@ -939,7 +948,7 @@ function mktemp(is_dir) { if (e.key == "Enter" || e.key == "Escape") { input.onblur = null; if(row.remove) - row.remove(); + row.remove(); else row.style.display = 'none'; ev(e); @@ -996,7 +1005,7 @@ ebi('widget').innerHTML = ( '
+
' + '' + - '' + + '' + (EMOJI ? '♫' : '♪') + '' + '' + @@ -6616,13 +6625,24 @@ window.thegrid = (function () { accent = '#07c'; ihref += '&a=' + parseColor(accent).replace(/ /g, ''); } + + var svg = '' + if(ebi('folder-icon').innerHTML != undefined){ + svg = '' + svg = '' + svg + ''; + } + else{ + // 3DS / unsupported: use fallback + svg = '' + (isdir ? '📁[FOLDER]' : '📄[FILE:' + ext +']') + ''; + } + html.push('' + '
' + '' + - '' + + svg + (isdir || ext == 'unk' || ext.startsWith('/') ? '' : '' + ext + '') + @@ -7370,10 +7390,10 @@ var search_ui = (function () { var ms = ebi('moresearch'); if(e){ window.scrollTo(0, 0); - ms.innerHTML = '▴'; + ms.innerHTML = ''; } else{ - ms.innerHTML = '▾'; + ms.innerHTML = ''; } } ebi('moresearch').onclick = function () { @@ -8138,6 +8158,7 @@ var treectl = (function () { if (!entreed || r.hidden){ if(ebi('tree').style.width == '0px') ebi('tree').style.display = 'none'; + ebi('reszbar').style.left = '2px'; setcvar('--nav-sz', 0); return; } @@ -9090,7 +9111,7 @@ function apply_perms(res) { else{ ebi('blogout').style.display = 'none'; ebi('acc_name').innerHTML = L.login; - ebi('acc_pfp').innerHTML = fun_tgl ? '👤' : 'acc'; + ebi('acc_pfp').innerHTML = fun_tgl && EMOJI ? '👤' : 'acc'; } clmod(ebi('acc_pfp'), 'placeholder', acct == '*'); @@ -9177,7 +9198,8 @@ function apply_perms(res) { ebi('reloc_up').innerHTML = up2k_lgcy ? '' : ''; clmod(ebi('up2k'), 'unmodal', up2k_lgcy); } - clmod(ebi('opa_mkd'), 'vis', up_only); + if(EMOJI) + clmod(ebi('opa_mkd'), 'vis', up_only); } function wait_set_fsearch(){ @@ -11168,7 +11190,7 @@ function reload_browser() { o = mknod('a'); o.setAttribute('href', link2); - o.textContent = uricom_dec(parts[a]) || (fun_tgl ? '🏠' : 'home'); + o.textContent = uricom_dec(parts[a]) || (fun_tgl && EMOJI ? '🏠' : 'home'); ebi('path').appendChild(o); ebi('path').appendChild(mknod('i')); drag.mktarget(o); diff --git a/copyparty/web/util.js b/copyparty/web/util.js index 45cb7137..acc49cca 100644 --- a/copyparty/web/util.js +++ b/copyparty/web/util.js @@ -20,6 +20,13 @@ if (window.CGV) Object.assign(window, window.CGV); +function supportsEmoji() { + var ctx = document.createElement('canvas').getContext('2d'); + ctx.canvas.width = ctx.canvas.height = 1; + ctx.fillText('🎉', -4, 4); + return ctx.getImageData(0, 0, 1, 1).data[3] > 0; // Checks if pixels were drawn +} + var wah = '', STG = null, NOAC = 'autocorrect="off" autocapitalize="off"', @@ -35,6 +42,7 @@ var wah = '', VCHROME = CHROME ? 1 : 0, UA = '' + navigator.userAgent, IE = !!document.documentMode, + EMOJI = supportsEmoji(), FIREFOX = ('netscape' in window) && / rv:/.test(UA), IPHONE = TOUCH && /iPhone|iPad|iPod/i.test(UA), LINUX = /Linux/.test(UA), @@ -1823,7 +1831,7 @@ var toast = (function () { setcvar('--tmstep', Math.floor(sec * 20)); html += '
'; } - obj.innerHTML = html + '
' + lf2br(txt) + '
'; + obj.innerHTML = html + '×
' + lf2br(txt) + '
'; obj.className = cl; sec += obj.offsetWidth; obj.className += ' vis';