mirror of
https://github.com/9001/copyparty.git
synced 2026-06-19 04:32:26 -06:00
settings modal
This commit is contained in:
Til Schmitter
parent
9c7ef76de6
commit
6fd72e2ccf
|
|
@ -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 {
|
||||
padding: 0 1em 1em 1em;
|
||||
}
|
||||
#drops {
|
||||
.overlaybg {
|
||||
display: none;
|
||||
z-index: 3;
|
||||
background: rgba(48, 48, 48, 0.7);
|
||||
}
|
||||
#drops.vis,
|
||||
.overlaybg.vis,
|
||||
.dropzone {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -168,6 +168,19 @@
|
|||
|
||||
<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>
|
||||
var SR = "{{ r }}",
|
||||
CGV1 = {{ cgv1 }},
|
||||
|
|
|
|||
|
|
@ -901,7 +901,7 @@ x.parentNode.insertBefore(mknod('div', null,
|
|||
(function () {
|
||||
var o = mknod('div');
|
||||
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="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' +
|
||||
|
|
@ -911,27 +911,26 @@ x.parentNode.insertBefore(mknod('div', null,
|
|||
document.body.appendChild(o);
|
||||
})();
|
||||
|
||||
|
||||
// config panel
|
||||
ebi('op_cfg').innerHTML = (
|
||||
'<div>\n' +
|
||||
' <h3>' + L.cl_opts + '</h3>\n' +
|
||||
' <div>\n' +
|
||||
' <a id="tooltips" class="tgl btn" href="#" tt="' + L.ct_ttips + '</a>\n' +
|
||||
' <a id="griden" class="tgl btn" href="#" tt="' + L.wt_grid + '">' + L.ct_grid + '</a>\n' +
|
||||
' <a id="thumbs" class="tgl btn" href="#" tt="' + L.ct_thumb + '</a>\n' +
|
||||
' <a id="csel" class="tgl btn" href="#" tt="' + L.ct_csel + '</a>\n' +
|
||||
' <a id="dsel" class="tgl btn" href="#" tt="' + L.ct_dsel + '</a>\n' +
|
||||
' <a id="dlni" class="tgl btn" href="#" tt="' + L.ct_dl + '</a>\n' +
|
||||
' <a id="ihop" class="tgl btn" href="#" tt="' + L.ct_ihop + '</a>\n' +
|
||||
' <a id="dotfiles" class="tgl btn" href="#" tt="' + L.ct_dots + '</a>\n' +
|
||||
' <a id="qdel" class="tgl btn" href="#" tt="' + L.ct_qdel + '</a>\n' +
|
||||
' <a id="dir1st" class="tgl btn" href="#" tt="' + L.ct_dir1st + '</a>\n' +
|
||||
' <a id="nsort" class="tgl btn" href="#" tt="' + L.ct_nsort + '</a>\n' +
|
||||
' <a id="utctid" class="tgl btn" href="#" tt="' + L.ct_utc + '</a>\n' +
|
||||
' <a id="ireadme" class="tgl btn" href="#" tt="' + L.ct_readme + '</a>\n' +
|
||||
' <a id="idxh" class="tgl btn" href="#" tt="' + L.ct_idxh + '</a>\n' +
|
||||
' <a id="sbars" class="tgl btn" href="#" tt="' + L.ct_sbars + '</a>\n' +
|
||||
' <a id="tooltips" class="tgl btn" tt="' + L.ct_ttips + '</a>\n' +
|
||||
' <a id="griden" class="tgl btn" tt="' + L.wt_grid + '">' + L.ct_grid + '</a>\n' +
|
||||
' <a id="thumbs" class="tgl btn" tt="' + L.ct_thumb + '</a>\n' +
|
||||
' <a id="csel" class="tgl btn" tt="' + L.ct_csel + '</a>\n' +
|
||||
' <a id="dsel" class="tgl btn" tt="' + L.ct_dsel + '</a>\n' +
|
||||
' <a id="dlni" class="tgl btn" tt="' + L.ct_dl + '</a>\n' +
|
||||
' <a id="ihop" class="tgl btn" tt="' + L.ct_ihop + '</a>\n' +
|
||||
' <a id="dotfiles" class="tgl btn" tt="' + L.ct_dots + '</a>\n' +
|
||||
' <a id="qdel" class="tgl btn" tt="' + L.ct_qdel + '</a>\n' +
|
||||
' <a id="dir1st" class="tgl btn" tt="' + L.ct_dir1st + '</a>\n' +
|
||||
' <a id="nsort" class="tgl btn" tt="' + L.ct_nsort + '</a>\n' +
|
||||
' <a id="utctid" class="tgl btn" tt="' + L.ct_utc + '</a>\n' +
|
||||
' <a id="ireadme" class="tgl btn" tt="' + L.ct_readme + '</a>\n' +
|
||||
' <a id="idxh" class="tgl btn" tt="' + L.ct_idxh + '</a>\n' +
|
||||
' <a id="sbars" class="tgl btn" tt="' + L.ct_sbars + '</a>\n' +
|
||||
' </div>\n' +
|
||||
'</div>\n' +
|
||||
'<div>\n' +
|
||||
|
|
@ -960,23 +959,23 @@ ebi('op_cfg').innerHTML = (
|
|||
' <div><select id="langs"></select></div>\n' +
|
||||
'</div>\n' +
|
||||
(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' +
|
||||
' <h3>' + L.cl_uopts + '</h3>\n' +
|
||||
' <div>\n' +
|
||||
' <a id="ask_up" class="tgl btn" href="#" tt="' + L.ut_ask + '</a>\n' +
|
||||
' <a id="u2ts" class="tgl btn" href="#" tt="' + L.ut_u2ts + '</a>\n' +
|
||||
' <a id="umod" class="tgl btn" href="#" tt="' + L.cut_umod + '</a>\n' +
|
||||
' <a id="hashw" class="tgl btn" href="#" tt="' + L.cut_mt + '</a>\n' +
|
||||
' <a id="nosubtle" class="tgl btn" href="#" tt="' + L.cut_wasm + '</a>\n' +
|
||||
' <a id="u2turbo" class="tgl btn ttb" href="#" tt="' + L.cut_turbo + '</a>\n' +
|
||||
' <a id="u2tdate" class="tgl btn ttb" href="#" tt="' + L.cut_datechk + '</a>\n' +
|
||||
' <a id="ask_up" class="tgl btn" tt="' + L.ut_ask + '</a>\n' +
|
||||
' <a id="u2ts" class="tgl btn" tt="' + L.ut_u2ts + '</a>\n' +
|
||||
' <a id="umod" class="tgl btn" tt="' + L.cut_umod + '</a>\n' +
|
||||
' <a id="hashw" class="tgl btn" tt="' + L.cut_mt + '</a>\n' +
|
||||
' <a id="nosubtle" class="tgl btn" tt="' + L.cut_wasm + '</a>\n' +
|
||||
' <a id="u2turbo" class="tgl btn ttb" tt="' + L.cut_turbo + '</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 + '" />' +
|
||||
' <a id="flag_en" class="tgl btn" href="#" tt="' + L.cut_flag + '">💤</a>\n' +
|
||||
' <a id="u2sort" class="tgl btn" href="#" tt="' + L.cut_az + '">az</a>\n' +
|
||||
' <a id="upnag" class="tgl btn" href="#" tt="' + L.cut_nag + '">🔔</a>\n' +
|
||||
' <a id="upsfx" class="tgl btn" href="#" tt="' + L.cut_sfx + '">🔊</a>\n' +
|
||||
' <a id="flag_en" class="tgl btn" tt="' + L.cut_flag + '">💤</a>\n' +
|
||||
' <a id="u2sort" class="tgl btn" tt="' + L.cut_az + '">az</a>\n' +
|
||||
' <a id="upnag" class="tgl btn" tt="' + L.cut_nag + '">🔔</a>\n' +
|
||||
' <a id="upsfx" class="tgl btn" tt="' + L.cut_sfx + '">🔊</a>\n' +
|
||||
' </td>\n' +
|
||||
' </div>\n' +
|
||||
'</div>\n' +
|
||||
|
|
@ -993,7 +992,7 @@ ebi('op_cfg').innerHTML = (
|
|||
' <h3>' + L.cl_bigdir + '</h3>\n' +
|
||||
' <div>\n' +
|
||||
' <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' +
|
||||
' </div>\n' +
|
||||
'</div>\n' +
|
||||
|
|
@ -1005,10 +1004,41 @@ ebi('op_cfg').innerHTML = (
|
|||
' </div>\n' +
|
||||
'</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>' : '') +
|
||||
'<div><h3>' + L.cl_hiddenc + ' ' + (MOBILE ? '<a href="#" id="hcolsh">' + L.cl_hidec + '</a> / ' : '') + '<a href="#" id="hcolsr">' + L.cl_reset + '</a></h3><div id="hcols"></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 + ' </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
|
||||
ebi('tree').innerHTML = (
|
||||
|
|
@ -1072,10 +1102,26 @@ ebi('rcm').innerHTML = (
|
|||
if (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) {
|
||||
var dest = this.getAttribute('data-dest');
|
||||
if (QS('#op_' + dest + '.act'))
|
||||
|
|
@ -1105,6 +1151,10 @@ function goto(dest) {
|
|||
for (var a = obj.length - 1; a >= 0; a--)
|
||||
clmod(obj[a], 'act');
|
||||
|
||||
obj = QSA('.overlaybg');
|
||||
for (var a = obj.length - 1; a >= 0; a--)
|
||||
clmod(obj[a], 'vis');
|
||||
|
||||
if (dest) {
|
||||
var lnk = QS('#ops>a[data-dest=' + dest + ']'),
|
||||
nps = lnk.getAttribute('data-perm');
|
||||
|
|
@ -1119,6 +1169,10 @@ function goto(dest) {
|
|||
if (!has(perms, 'read') && !has(perms, 'write') && (dest == 'up2k'))
|
||||
return;
|
||||
|
||||
if(dest == 'cfg'){
|
||||
clmod(ebi(dest), 'vis', 1);
|
||||
return;
|
||||
}
|
||||
clmod(ebi('op_' + dest), 'act', 1);
|
||||
clmod(lnk, 'act', 1);
|
||||
|
||||
|
|
@ -8163,7 +8217,8 @@ var filecols = (function () {
|
|||
|
||||
r.uivis = function () {
|
||||
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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue