diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 94a2ba18..4930ccee 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -73,11 +73,12 @@ a, color: #999; font-weight: normal; } -#files tr:hover { +#files tr+tr:hover { background: #1c1c1c; } #files thead th { padding: .5em 1.3em .3em 1.3em; + cursor: pointer; } #files thead th:last-child { background: #444; @@ -310,7 +311,7 @@ a, #barpos, #barbuf { width: calc(100% - 24em); - left: 10em; + left: 9.8em; top: .7em; height: 1.6em; bottom: auto; @@ -449,12 +450,27 @@ input[type="checkbox"]:checked+label { #tree { padding-top: 2em; } +#tree>a+a { + padding: .2em .4em; + font-size: 1.2em; + background: #2a2a2a; + box-shadow: 0 .1em .2em #222 inset; + border-radius: .3em; + margin: .2em; + position: relative; + top: -.2em; +} +#tree>a+a:hover { + background: #805; +} +#tree>a+a.on { + background: #fc4; + color: #400; + text-shadow: none; +} #detree { padding: .3em .5em; font-size: 1.5em; - display: inline-block; - min-width: 12em; - width: 100%; } #treefiles #files tbody { border-radius: 0 .7em 0 .7em; @@ -475,20 +491,20 @@ input[type="checkbox"]:checked+label { list-style: none; white-space: nowrap; } -#tree a.hl { +#treeul a.hl { color: #400; background: #fc4; border-radius: .3em; text-shadow: none; } -#tree a { +#treeul a { display: inline-block; } -#tree a+a { +#treeul a+a { width: calc(100% - 2em); background: #333; } -#tree a+a:hover { +#treeul a+a:hover { background: #222; color: #fff; } diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html index 30b4f114..121869cf 100644 --- a/copyparty/web/browser.html +++ b/copyparty/web/browser.html @@ -48,6 +48,9 @@ 🍞... + + + + a diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index f07b0c98..85eae304 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -721,6 +721,10 @@ function autoplay_blocked() { // tree (function () { var treedata = null; + var dyn = bcfg_get('dyntree', true); + var treesz = icfg_get('treesz', 16); + treesz = isNaN(treesz) ? 16 : Math.min(Math.max(treesz, 4), 50); + console.log('treesz [' + treesz + ']'); function entree(e) { ev(e); @@ -779,7 +783,7 @@ function autoplay_blocked() { esc(top) + '">' + esc(name) + "\n"; - var links = document.querySelectorAll('#tree a+a'); + var links = document.querySelectorAll('#treeul a+a'); for (var a = 0, aa = links.length; a < aa; a++) { if (links[a].getAttribute('href') == top) { var o = links[a].parentNode; @@ -793,7 +797,10 @@ function autoplay_blocked() { document.querySelector('#treeul>li>a+a').textContent = '[root]'; despin('#tree'); reload_tree(); + rescale_tree(); + } + function rescale_tree() { var q = '#tree'; var nq = 0; while (true) { @@ -802,18 +809,19 @@ function autoplay_blocked() { if (!document.querySelector(q)) break; } - ebi('treeul').style.width = (24 + nq) + 'em'; + var w = treesz + (dyn ? nq : 0); + ebi('treeul').style.width = w + 'em'; } function reload_tree() { var cdir = get_vpath(); - var links = document.querySelectorAll('#tree a+a'); + var links = document.querySelectorAll('#treeul a+a'); for (var a = 0, aa = links.length; a < aa; a++) { var href = links[a].getAttribute('href'); links[a].setAttribute('class', href == cdir ? 'hl' : ''); links[a].onclick = treego; } - links = document.querySelectorAll('#tree li>a:first-child'); + links = document.querySelectorAll('#treeul li>a:first-child'); for (var a = 0, aa = links.length; a < aa; a++) { links[a].setAttribute('dst', links[a].nextSibling.getAttribute('href')); links[a].onclick = treegrow; @@ -844,6 +852,7 @@ function autoplay_blocked() { rm.parentNode.removeChild(rm); } this.textContent = '+'; + rescale_tree(); return; } var dst = this.getAttribute('dst'); @@ -953,8 +962,28 @@ function autoplay_blocked() { swrite('entreed', 'na'); } + function dyntree(e) { + ev(e); + dyn = !dyn; + bcfg_set('dyntree', dyn); + rescale_tree(); + } + + function scaletree(e) { + ev(e); + treesz += parseInt(this.getAttribute("step")); + if (isNaN(treesz)) + treesz = 16; + + swrite('treesz', treesz); + rescale_tree(); + } + ebi('entree').onclick = entree; ebi('detree').onclick = detree; + ebi('dyntree').onclick = dyntree; + ebi('twig').onclick = scaletree; + ebi('twobytwo').onclick = scaletree; if (sread('entreed') == 'tree') entree(); diff --git a/copyparty/web/up2k.js b/copyparty/web/up2k.js index 128006f8..18df85d6 100644 --- a/copyparty/web/up2k.js +++ b/copyparty/web/up2k.js @@ -209,41 +209,7 @@ function up2k_init(have_crypto) { }; } - function cfg_get(name) { - var val = sread(name); - if (val === null) - return parseInt(ebi(name).value); - - ebi(name).value = val; - return val; - } - - function bcfg_get(name, defval) { - var o = ebi(name); - if (!o) - return defval; - - var val = sread(name); - if (val === null) - val = defval; - else - val = (val == '1'); - - o.checked = val; - return val; - } - - function bcfg_set(name, val) { - swrite(name, val ? '1' : '0'); - - var o = ebi(name); - if (o) - o.checked = val; - - return val; - } - - var parallel_uploads = cfg_get('nthread'); + var parallel_uploads = icfg_get('nthread'); var multitask = bcfg_get('multitask', true); var ask_up = bcfg_get('ask_up', true); var flag_en = bcfg_get('flag_en', false); diff --git a/copyparty/web/util.js b/copyparty/web/util.js index 1f79c4e6..37d59e1e 100644 --- a/copyparty/web/util.js +++ b/copyparty/web/util.js @@ -293,6 +293,51 @@ function jwrite(key, val) { swrite(key, JSON.stringify(val)); } +function icfg_get(name, defval) { + var o = ebi(name); + + var val = parseInt(sread(name)); + if (val === null) + return parseInt(o ? o.value : defval); + + if (o) + o.value = val; + + return val; +} + +function bcfg_get(name, defval) { + var o = ebi(name); + if (!o) + return defval; + + var val = sread(name); + if (val === null) + val = defval; + else + val = (val == '1'); + + bcfg_upd_ui(name, val); + return val; +} + +function bcfg_set(name, val) { + swrite(name, val ? '1' : '0'); + bcfg_upd_ui(name, val); + return val; +} + +function bcfg_upd_ui(name, val) { + var o = ebi(name); + if (!o) + return; + + if (o.getAttribute('type') == 'checkbox') + o.checked = val; + else if (o) + o.setAttribute('class', val ? 'on' : ''); +} + function hist_push(html, url) { var key = new Date().getTime();