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();