mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2026-06-21 13:42:29 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

settings modal

Browse source
This commit is contained in:
Til Schmitter 2026-04-07 20:51:00 +02:00
parent 9c7ef76de6
commit 6fd72e2ccf
3 changed files with 173 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
copyparty/web/browser.css
View file

@ -2444,6 +2444,73 @@ html.y #bbox-overlay figcaption a {
/* settings css */
#s_content{
display: grid;
grid-template-rows: auto auto;
margin: 5%;
border-radius: .5em;
border: var(--a) solid 1px;
background: var(--bg-u1);
max-width: 60em;
position: relative;
}
#s_header{
margin: .5em;
}
#s_hor{
display: grid;
grid-template-columns: auto auto auto;
min-height: 0;
}
#s_nav, #s_list{
display: flex;
flex-direction: column;
overflow-y: scroll;
padding: .5em;
padding-top: 0;
}
#s_divider{
background: var(--a);
width: 1px;
margin: 1em .5em;
}
#s_nav .btn::after{
position: absolute;
content: ">";
right: .5em;
}
#s_nav .btn,
#s_list{
padding-right: 2em;
}
.setting{
padding: .5em;
border: var(--bg-u5) solid 1px;
border-top: 0;
margin: -1.5em 0 1.5em 0;
}
.setting:hover{
background: var(--bg-u3);
}
.s_desc{
margin: .5em 0 0 0;
font-size: medium;
color: var(--fg-weak);
}
#s_list h3{
background-color: var(--bg-u5);
border-radius: .3em .3em 0 0;
padding: .5em;
margin: 0 0 1.3em 0;
}
#cs_btn{
position: absolute;
right: 0;
margin: .5em;
color: var(--fg);
}
@ -2453,14 +2520,15 @@ html.y #bbox-overlay figcaption a {
#op_up2k { #op_up2k {
padding: 0 1em 1em 1em; padding: 0 1em 1em 1em;
} }
#drops { .overlaybg {
display: none; display: none;
z-index: 3; z-index: 3;
background: rgba(48, 48, 48, 0.7); background: rgba(48, 48, 48, 0.7);
} }
#drops.vis, .overlaybg.vis,
.dropzone { .dropzone {
display: block; display: flex;
justify-content: center;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;

13
copyparty/web/browser.html
View file

@ -168,6 +168,19 @@
<div id="rcm" tabindex="0"></div> <div id="rcm" tabindex="0"></div>
<div id="cfg" class="overlaybg" tt="">
<div id="s_content">
<h3 id="s_header">⚙️ </h3>
<div id="s_hor">
<div id="s_nav"></div>
<div id="s_divider"></div>
<div id="s_list" class="opview"></div>
</div>
<a id="cs_btn" href="#" class="btn">✕</a>
</div>
</div>
<script> <script>
var SR = "{{ r }}", var SR = "{{ r }}",
CGV1 = {{ cgv1 }}, CGV1 = {{ cgv1 }},

123
copyparty/web/browser.js
View file

@ -901,7 +901,7 @@ x.parentNode.insertBefore(mknod('div', null,
(function () { (function () {
var o = mknod('div'); var o = mknod('div');
o.innerHTML = ( o.innerHTML = (
'<div id="drops">\n' + '<div id="drops" class="overlaybg">\n' +
' <div class="dropdesc" id="up_zd"><div>🚀 ' + L.udt_up + '<br /><span></span><div>🚀<b>' + L.udt_up + '</b></div><div><b>' + L.udt_up + '</b>🚀</div></div></div>\n' + ' <div class="dropdesc" id="up_zd"><div>🚀 ' + L.udt_up + '<br /><span></span><div>🚀<b>' + L.udt_up + '</b></div><div><b>' + L.udt_up + '</b>🚀</div></div></div>\n' +
' <div class="dropdesc" id="srch_zd"><div>🔎 ' + L.udt_srch + '<br /><span></span><div>🔎<b>' + L.udt_srch + '</b></div><div><b>' + L.udt_srch + '</b>🔎</div></div></div>\n' + ' <div class="dropdesc" id="srch_zd"><div>🔎 ' + L.udt_srch + '<br /><span></span><div>🔎<b>' + L.udt_srch + '</b></div><div><b>' + L.udt_srch + '</b>🔎</div></div></div>\n' +
' <div class="dropzone" id="up_dz" v="up_zd"></div>\n' + ' <div class="dropzone" id="up_dz" v="up_zd"></div>\n' +
@ -911,27 +911,26 @@ x.parentNode.insertBefore(mknod('div', null,
document.body.appendChild(o); document.body.appendChild(o);
})(); })();
// config panel // config panel
ebi('op_cfg').innerHTML = ( ebi('op_cfg').innerHTML = (
'<div>\n' + '<div>\n' +
' <h3>' + L.cl_opts + '</h3>\n' + ' <h3>' + L.cl_opts + '</h3>\n' +
' <div>\n' + ' <div>\n' +
' <a id="tooltips" class="tgl btn" href="#" tt="' + L.ct_ttips + '</a>\n' + ' <a id="tooltips" class="tgl btn" tt="' + L.ct_ttips + '</a>\n' +
' <a id="griden" class="tgl btn" href="#" tt="' + L.wt_grid + '">' + L.ct_grid + '</a>\n' + ' <a id="griden" class="tgl btn" tt="' + L.wt_grid + '">' + L.ct_grid + '</a>\n' +
' <a id="thumbs" class="tgl btn" href="#" tt="' + L.ct_thumb + '</a>\n' + ' <a id="thumbs" class="tgl btn" tt="' + L.ct_thumb + '</a>\n' +
' <a id="csel" class="tgl btn" href="#" tt="' + L.ct_csel + '</a>\n' + ' <a id="csel" class="tgl btn" tt="' + L.ct_csel + '</a>\n' +
' <a id="dsel" class="tgl btn" href="#" tt="' + L.ct_dsel + '</a>\n' + ' <a id="dsel" class="tgl btn" tt="' + L.ct_dsel + '</a>\n' +
' <a id="dlni" class="tgl btn" href="#" tt="' + L.ct_dl + '</a>\n' + ' <a id="dlni" class="tgl btn" tt="' + L.ct_dl + '</a>\n' +
' <a id="ihop" class="tgl btn" href="#" tt="' + L.ct_ihop + '</a>\n' + ' <a id="ihop" class="tgl btn" tt="' + L.ct_ihop + '</a>\n' +
' <a id="dotfiles" class="tgl btn" href="#" tt="' + L.ct_dots + '</a>\n' + ' <a id="dotfiles" class="tgl btn" tt="' + L.ct_dots + '</a>\n' +
' <a id="qdel" class="tgl btn" href="#" tt="' + L.ct_qdel + '</a>\n' + ' <a id="qdel" class="tgl btn" tt="' + L.ct_qdel + '</a>\n' +
' <a id="dir1st" class="tgl btn" href="#" tt="' + L.ct_dir1st + '</a>\n' + ' <a id="dir1st" class="tgl btn" tt="' + L.ct_dir1st + '</a>\n' +
' <a id="nsort" class="tgl btn" href="#" tt="' + L.ct_nsort + '</a>\n' + ' <a id="nsort" class="tgl btn" tt="' + L.ct_nsort + '</a>\n' +
' <a id="utctid" class="tgl btn" href="#" tt="' + L.ct_utc + '</a>\n' + ' <a id="utctid" class="tgl btn" tt="' + L.ct_utc + '</a>\n' +
' <a id="ireadme" class="tgl btn" href="#" tt="' + L.ct_readme + '</a>\n' + ' <a id="ireadme" class="tgl btn" tt="' + L.ct_readme + '</a>\n' +
' <a id="idxh" class="tgl btn" href="#" tt="' + L.ct_idxh + '</a>\n' + ' <a id="idxh" class="tgl btn" tt="' + L.ct_idxh + '</a>\n' +
' <a id="sbars" class="tgl btn" href="#" tt="' + L.ct_sbars + '</a>\n' + ' <a id="sbars" class="tgl btn" tt="' + L.ct_sbars + '</a>\n' +
' </div>\n' + ' </div>\n' +
'</div>\n' + '</div>\n' +
'<div>\n' + '<div>\n' +
@ -960,23 +959,23 @@ ebi('op_cfg').innerHTML = (
' <div><select id="langs"></select></div>\n' + ' <div><select id="langs"></select></div>\n' +
'</div>\n' + '</div>\n' +
(have_zip ? ( (have_zip ? (
'<div><h3>' + L.cl_ziptype + '</h3><div id="arc_fmt"></div></div>\n' '<div><h3>' + L.cl_ziptype + '</h3><div><div id="arc_fmt"></div></div></div>\n'
) : '') + ) : '') +
'<div>\n' + '<div>\n' +
' <h3>' + L.cl_uopts + '</h3>\n' + ' <h3>' + L.cl_uopts + '</h3>\n' +
' <div>\n' + ' <div>\n' +
' <a id="ask_up" class="tgl btn" href="#" tt="' + L.ut_ask + '</a>\n' + ' <a id="ask_up" class="tgl btn" tt="' + L.ut_ask + '</a>\n' +
' <a id="u2ts" class="tgl btn" href="#" tt="' + L.ut_u2ts + '</a>\n' + ' <a id="u2ts" class="tgl btn" tt="' + L.ut_u2ts + '</a>\n' +
' <a id="umod" class="tgl btn" href="#" tt="' + L.cut_umod + '</a>\n' + ' <a id="umod" class="tgl btn" tt="' + L.cut_umod + '</a>\n' +
' <a id="hashw" class="tgl btn" href="#" tt="' + L.cut_mt + '</a>\n' + ' <a id="hashw" class="tgl btn" tt="' + L.cut_mt + '</a>\n' +
' <a id="nosubtle" class="tgl btn" href="#" tt="' + L.cut_wasm + '</a>\n' + ' <a id="nosubtle" class="tgl btn" tt="' + L.cut_wasm + '</a>\n' +
' <a id="u2turbo" class="tgl btn ttb" href="#" tt="' + L.cut_turbo + '</a>\n' + ' <a id="u2turbo" class="tgl btn ttb" tt="' + L.cut_turbo + '</a>\n' +
' <a id="u2tdate" class="tgl btn ttb" href="#" tt="' + L.cut_datechk + '</a>\n' + ' <a id="u2tdate" class="tgl btn ttb" tt="' + L.cut_datechk + '</a>\n' +
' <input type="text" id="u2szg" value="" ' + NOAC + ' style="width:3em" tt="' + L.cut_u2sz + '" />' + ' <input type="text" id="u2szg" value="" ' + NOAC + ' style="width:3em" tt="' + L.cut_u2sz + '" />' +
' <a id="flag_en" class="tgl btn" href="#" tt="' + L.cut_flag + '">💤</a>\n' + ' <a id="flag_en" class="tgl btn" tt="' + L.cut_flag + '">💤</a>\n' +
' <a id="u2sort" class="tgl btn" href="#" tt="' + L.cut_az + '">az</a>\n' + ' <a id="u2sort" class="tgl btn" tt="' + L.cut_az + '">az</a>\n' +
' <a id="upnag" class="tgl btn" href="#" tt="' + L.cut_nag + '">🔔</a>\n' + ' <a id="upnag" class="tgl btn" tt="' + L.cut_nag + '">🔔</a>\n' +
' <a id="upsfx" class="tgl btn" href="#" tt="' + L.cut_sfx + '">🔊</a>\n' + ' <a id="upsfx" class="tgl btn" tt="' + L.cut_sfx + '">🔊</a>\n' +
' </td>\n' + ' </td>\n' +
' </div>\n' + ' </div>\n' +
'</div>\n' + '</div>\n' +
@ -993,7 +992,7 @@ ebi('op_cfg').innerHTML = (
' <h3>' + L.cl_bigdir + '</h3>\n' + ' <h3>' + L.cl_bigdir + '</h3>\n' +
' <div>\n' + ' <div>\n' +
' <input type="text" id="bd_lim" value="250" ' + NOAC + ' style="width:4em" tt="' + L.cdt_lim + '" />' + ' <input type="text" id="bd_lim" value="250" ' + NOAC + ' style="width:4em" tt="' + L.cdt_lim + '" />' +
' <a id="bd_ask" class="tgl btn" href="#" tt="' + L.cdt_ask + '">ask</a>\n' + ' <a id="bd_ask" class="tgl btn" tt="' + L.cdt_ask + '">ask</a>\n' +
' </td>\n' + ' </td>\n' +
' </div>\n' + ' </div>\n' +
'</div>\n' + '</div>\n' +
@ -1005,10 +1004,41 @@ ebi('op_cfg').innerHTML = (
' </div>\n' + ' </div>\n' +
'</div>\n' + '</div>\n' +
'<div><h3>' + L.cl_keytype + '</h3><div><select id="key_notation"></select></div></div>\n' + '<div><h3>' + L.cl_keytype + '</h3><div><select id="key_notation"></select></div></div>\n' +
(!MOBILE ? '<div><h3>' + L.cl_rcm + '</h3><div><a id="rcm_en" class="tgl btn" href="#" tt="' + L.cdt_ren + '</a><a id="rcm_db" class="tgl btn" href="#" tt="' + L.cdt_rdb + '</a></div></div>' : '') + (!MOBILE ? '<div><h3>' + L.cl_rcm + '</h3><div><a id="rcm_en" class="tgl btn" tt="' + L.cdt_ren + '</a><a id="rcm_db" class="tgl btn" tt="' + L.cdt_rdb + '</a></div></div>' : '') +
'<div><h3>' + L.cl_hiddenc + ' &nbsp;' + (MOBILE ? '<a href="#" id="hcolsh">' + L.cl_hidec + '</a> / ' : '') + '<a href="#" id="hcolsr">' + L.cl_reset + '</a></h3><div id="hcols"></div></div>' '<div><h3>' + L.cl_hiddenc + ' &nbsp;</h3><div>' +
(MOBILE ? '<a id="hcolsh">' + L.cl_hidec + '</a> / ' : '') + '<a id="hcolsr">' + L.cl_reset + '</a><div id="hcols"></div></div></div>'
); );
// modalize settings
(function () {
ebi('s_header').innerHTML += L.ot_cfg;
var sections = ebi('op_cfg').children;
for (var i = 0; i < sections.length; i++){
var sName = sections[i].children[0].innerHTML;
var sId = 's_section_' + i;
var subSettings = sections[i].children[1];
var section = `<div id="${sId}" class="s_section"><h3>${sName}</h3>`;
for (var ii = 0; ii < subSettings.children.length; ii++){
var s = subSettings.children[ii];
var tt = s.getAttribute('tt')?.replace(/\$N/g, "<br />");
s.removeAttribute('tt');
s.href = '#' + sId;
section += `<div id="${subSettings.id}" class="setting">` +
s.outerHTML +
(tt?.length > 0 ? `<p class="s_desc">${tt}</p>` : '') +
'</div>';
}
section += '</div>'
ebi('s_list').innerHTML += section;
subSettings.innerHTML = '';
ebi('s_nav').innerHTML += `<a href="#${sId}" class="btn">${sName}</a>\n`;
}
ebi('cs_btn').onclick = function(){
modalopen('cfg');
}
})();
// navpane // navpane
ebi('tree').innerHTML = ( ebi('tree').innerHTML = (
@ -1072,10 +1102,26 @@ ebi('rcm').innerHTML = (
if (v) if (v)
ops[a].href = '#v=' + v; ops[a].href = '#v=' + v;
} }
ebi('acc_settings').onclick = opclick; ebi('acc_settings').onclick = function(e){
modalopen('cfg')
e.stopPropagation();
};
})(); })();
function modalopen(dest){
if (QS('#' + dest + '.vis'))
dest = '';
swrite('opmode', dest || null);
goto(dest);
var input = QS('.opview.act input:not([type="hidden"])')
if (input && !TOUCH) {
tt.skip = true;
input.focus();
}
}
function opclick(e) { function opclick(e) {
var dest = this.getAttribute('data-dest'); var dest = this.getAttribute('data-dest');
if (QS('#op_' + dest + '.act')) if (QS('#op_' + dest + '.act'))
@ -1105,6 +1151,10 @@ function goto(dest) {
for (var a = obj.length - 1; a >= 0; a--) for (var a = obj.length - 1; a >= 0; a--)
clmod(obj[a], 'act'); clmod(obj[a], 'act');
obj = QSA('.overlaybg');
for (var a = obj.length - 1; a >= 0; a--)
clmod(obj[a], 'vis');
if (dest) { if (dest) {
var lnk = QS('#ops>a[data-dest=' + dest + ']'), var lnk = QS('#ops>a[data-dest=' + dest + ']'),
nps = lnk.getAttribute('data-perm'); nps = lnk.getAttribute('data-perm');
@ -1119,6 +1169,10 @@ function goto(dest) {
if (!has(perms, 'read') && !has(perms, 'write') && (dest == 'up2k')) if (!has(perms, 'read') && !has(perms, 'write') && (dest == 'up2k'))
return; return;
if(dest == 'cfg'){
clmod(ebi(dest), 'vis', 1);
return;
}
clmod(ebi('op_' + dest), 'act', 1); clmod(ebi('op_' + dest), 'act', 1);
clmod(lnk, 'act', 1); clmod(lnk, 'act', 1);
@ -8163,7 +8217,8 @@ var filecols = (function () {
r.uivis = function () { r.uivis = function () {
var hcols = ebi('hcols'); var hcols = ebi('hcols');
hcols.previousSibling.style.display = hcols.style.display = ((!thegrid || !thegrid.en) && (hidden.length || MOBILE)) ? 'block' : 'none'; var hcolDiv = hcols.parentElement.parentElement;
QS(`a[href='#${hcolDiv.id}']`).style.display = hcolDiv.style.display = ((!thegrid || !thegrid.en) && (hidden.length || MOBILE)) ? 'block' : 'none';
}; };
r.set_style = function (unhide) { r.set_style = function (unhide) {