diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index de9b1b4d..4eb8c4a2 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -2106,6 +2106,21 @@ html { left: -2.2em; width: calc(100% + 2em); } +#reszbar { + position: absolute; + z-index: 25; + top: 0; + bottom: 0; + left: - 5px; + left: calc(var(--nav-sz) - 5px); + width: 10px; + opacity: 0; + background: #8888; + cursor: ew-resize; +} +#reszbar:hover{ + opacity: .6; +} .btn { color: var(--btn-fg); background: #eee; diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html index 502b9055..ec8b528b 100644 --- a/copyparty/web/browser.html +++ b/copyparty/web/browser.html @@ -40,6 +40,8 @@ +
+
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index 7f05a356..7f80eddf 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -8130,6 +8130,7 @@ var treectl = (function () { if (!entreed || r.hidden){ if(ebi('tree').style.width == '0px') ebi('tree').style.display = 'none'; + setcvar('--nav-sz', 0); return; } @@ -8917,6 +8918,11 @@ var treectl = (function () { function scaletree(e) { ev(e); treesz += parseInt(this.getAttribute("step")); + r.settreesize(treesz); + } + + r.settreesize = function(width){ + treesz = width; if (!isNum(treesz)) treesz = 16; @@ -11236,8 +11242,18 @@ function reload_browser() { b1.bottom < b2.top || b1.top > b2.bottom); } + var resizing = false; function sel_start(e) { try{ + if(e.target.id == "reszbar"){ + if(sread('entreed') != "tree"){ + treectl.entree(); + return; + } + resizing = true; + ev(e); + return; + } if (e.button !== 0 && e.type !== 'touchstart') return; if (!thegrid.en || !treectl.dsel) return; if (e.target.closest('#widget,#ops,.opview,.doc,#ggrid>a,.modal,.normalrcm,#tree')) return; @@ -11276,8 +11292,13 @@ function reload_browser() { } function sel_move(e) { - if (!is_selma) return; var pos = getpp(e); + if(resizing){ + var em2px = parseFloat(getComputedStyle(document.body).fontSize); + treectl.settreesize(e.clientX / em2px); + return; + } + if (!is_selma) return; var dist = Math.sqrt(Math.pow(pos.x - startx, 2) + Math.pow(pos.y - starty, 2)); if (e.type === 'touchmove' && ttimer) { @@ -11308,6 +11329,7 @@ function reload_browser() { } function sel_end(e) { + resizing = false; clearTimeout(ttimer); if (dragging && selbox) { var sbrect = selbox.getBoundingClientRect();