mirror of
https://github.com/9001/copyparty.git
synced 2026-06-18 20:22:27 -06:00
make hide columns function usable again
This commit is contained in:
Til Schmitter
parent
76132a3e79
commit
91f94b882f
|
|
@ -141,6 +141,7 @@ html.ay {
|
|||
html.b {
|
||||
--btn-bs: 0 .05em 0 var(--bg-d3) inset;
|
||||
--btn-1-bs: 0 .05em 0 var(--btn-1h-bg) inset;
|
||||
--btn-bg: color-mix(var(--bg-u5), transparent);
|
||||
|
||||
--tree-bg: var(--bg);
|
||||
|
||||
|
|
@ -648,9 +649,10 @@ html.y #files thead th {
|
|||
box-shadow: 0 1px 0 rgba(0,0,0,0.12);
|
||||
}
|
||||
html #files.hhpick thead th {
|
||||
color: #f7d;
|
||||
background: #000;
|
||||
box-shadow: .1em .2em 0 #f6c inset, -.1em -.1em 0 #f6c inset;
|
||||
color: rgb(0, 0, 0);
|
||||
background: #df5555;
|
||||
text-shadow: none;
|
||||
border: red solid 2px;
|
||||
}
|
||||
#files td {
|
||||
margin: 0;
|
||||
|
|
@ -1165,23 +1167,14 @@ html:not(.e) #ggrid>a.dir:before {
|
|||
#np_inf {
|
||||
height: 0;
|
||||
}
|
||||
#fshr,
|
||||
#wtgrid {
|
||||
#fshr {
|
||||
position: relative;
|
||||
font-size: .9em;
|
||||
top: -.04em;
|
||||
margin-right: .3em;
|
||||
}
|
||||
#wtc {
|
||||
margin-top: -.2em;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
#wtgrid {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
margin: .2em;
|
||||
}
|
||||
.btn.svgIcon {
|
||||
width: 1.5em;
|
||||
|
|
@ -2143,6 +2136,7 @@ html.a .btn {
|
|||
display: none;
|
||||
}
|
||||
.ghead {
|
||||
position: sticky;
|
||||
background: #fff;
|
||||
background: var(--bg-u2);
|
||||
border-radius: 5px;
|
||||
|
|
@ -2150,13 +2144,9 @@ html.a .btn {
|
|||
padding: 0 .2em;
|
||||
line-height: 2.3em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
#hdoc,
|
||||
#ghead {
|
||||
position: sticky;
|
||||
z-index: 3;
|
||||
margin-top: -.5em;
|
||||
top: 3.7em;
|
||||
z-index: 3;
|
||||
transition: opacity .15s;
|
||||
}
|
||||
.ghead .btn {
|
||||
|
|
@ -2173,6 +2163,27 @@ html.a .btn {
|
|||
white-space: pre;
|
||||
padding-left: .3em;
|
||||
}
|
||||
.ghead details {
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
box-shadow: var(--btn-bs);
|
||||
}
|
||||
.ghead summary {
|
||||
background: var(--btn-bg);
|
||||
}
|
||||
.ghead details .setting {
|
||||
position: absolute;
|
||||
background: var(--bg-u2);
|
||||
border: 1px solid var(--bg-u3);
|
||||
border-bottom: var(--btn-bb);
|
||||
border-radius: var(--radius);
|
||||
max-width: 11em;
|
||||
max-height: 30vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#hcol_content:has(#hcolsh.on) {
|
||||
margin-top: 3.5em;
|
||||
}
|
||||
#tailbtns {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -2771,6 +2782,11 @@ html.c .modalcontent {
|
|||
width: 1px;
|
||||
margin: 1em 0;
|
||||
}
|
||||
.divider_h {
|
||||
background: var(--bg);
|
||||
height: 1px;
|
||||
margin: .3em 0;
|
||||
}
|
||||
#s_nav .btn::after{
|
||||
position: absolute;
|
||||
content: ">";
|
||||
|
|
@ -2803,7 +2819,7 @@ html.c .modalcontent {
|
|||
margin: -1.5em 0 1.5em 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.setting:hover{
|
||||
.modal .setting:hover{
|
||||
background: var(--bg-u1);
|
||||
}
|
||||
.s_desc{
|
||||
|
|
@ -3150,7 +3166,7 @@ html.c .modalcontent {
|
|||
border-bottom: none;
|
||||
border-radius: var(--radius) var(--radius) 0 0;
|
||||
}
|
||||
#u2conf .setting {
|
||||
details .setting {
|
||||
margin: 0;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
|
|
@ -3355,7 +3371,7 @@ summary {
|
|||
border-radius: var(--radius);
|
||||
font-size: large;
|
||||
}
|
||||
summary:hover {
|
||||
.modal summary:hover {
|
||||
background: var(--bg-u3);
|
||||
}
|
||||
#actionsArea {
|
||||
|
|
@ -3439,31 +3455,15 @@ html.cz {
|
|||
background: var(--btn-bg);
|
||||
}
|
||||
}
|
||||
html.c .setting:hover {
|
||||
html.c .modal .setting:hover {
|
||||
background: color-mix(var(--bg-u5) 30%, transparent);
|
||||
}
|
||||
/* html.c #u2btn,
|
||||
html.a #u2btn {
|
||||
color: #eee;
|
||||
background: var(--bg-u5);
|
||||
background: -moz-linear-gradient(top, #367 0%, #489 50%, #38788a 51%, #367 100%);
|
||||
background: -webkit-linear-gradient(top, #367 0%, #489 50%, #38788a 51%, #367 100%);
|
||||
background: linear-gradient(to bottom, #367 0%, #489 50%, #38788a 51%, #367 100%);
|
||||
box-shadow: .4em .4em 0 var(--bg-d3);
|
||||
border: 1px solid #222;
|
||||
} */
|
||||
html.ay #u2btn {
|
||||
box-shadow: .4em .4em 0 #ccc;
|
||||
}
|
||||
html.dz #u2btn {
|
||||
letter-spacing: -.033em;
|
||||
}
|
||||
/* html.c #op_up2k.srch #u2btn,
|
||||
html.a #op_up2k.srch #u2btn {
|
||||
background: linear-gradient(to bottom, #ca3 0%, #fd8 50%, #fc6 51%, #b92 100%);
|
||||
text-shadow: 1px 1px 1px #fc6;
|
||||
color: #333;
|
||||
} */
|
||||
html.c #u2conf #u2btn,
|
||||
html.a #u2conf #u2btn {
|
||||
padding: .6em 0;
|
||||
|
|
@ -3555,9 +3555,7 @@ html.b * {
|
|||
box-shadow: none !important;
|
||||
}
|
||||
html.b #path,
|
||||
html.b #ops,
|
||||
html.b #pctl .btn:not(:hover),
|
||||
html.b .btn:not(:hover):not(.on) {
|
||||
html.b #ops {
|
||||
background: color-mix(var(--bg-u5), transparent);
|
||||
}
|
||||
html.b #treepar {
|
||||
|
|
@ -3691,7 +3689,7 @@ html.e #pathBar.thin #path {
|
|||
}
|
||||
html:not(.e) #wrap.thin {
|
||||
.ghead {
|
||||
top: 7.4em;
|
||||
top: 7em;
|
||||
padding: .3em;
|
||||
}
|
||||
#ghead {
|
||||
|
|
@ -3831,10 +3829,8 @@ html.e #wrap.thin {
|
|||
#pathBar.thin #wfp.shifted {
|
||||
margin-left: 2em;
|
||||
}
|
||||
#wrap.thin {
|
||||
.ghead {
|
||||
top: 7.5em;
|
||||
}
|
||||
html:not(.e) #wrap.thin .ghead {
|
||||
top: 7.3em;
|
||||
}
|
||||
.gselchk {
|
||||
font-size: 1.4em;
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@
|
|||
|
||||
<div id="pro" class="logue">{{ "" if sb_lg else logues[0] }}</div>
|
||||
|
||||
<div id="wtc"></div>
|
||||
<div id="wtc" class="ghead"></div>
|
||||
<table id="files">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -1327,9 +1327,7 @@ ebi('op_cfg').innerHTML = (
|
|||
' </div>\n' +
|
||||
'</div>\n' +
|
||||
musicSettings +
|
||||
'<div><h3 id="h_keytype">🎼 ' + L.cl_keytype + '</h3><div><select id="key_notation"></select></div></div>\n' +
|
||||
'<div><h3 id="h_hidden">👁️ ' + 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>'
|
||||
'<div><h3 id="h_keytype">🎼 ' + L.cl_keytype + '</h3><div><select id="key_notation"></select></div></div>\n'
|
||||
);
|
||||
|
||||
// modalize settings
|
||||
|
|
@ -5992,10 +5990,27 @@ var thegrid = (function () {
|
|||
ebi('gridicon_template').innerHTML = svg_grid;
|
||||
ebi('listicon_template').innerHTML = svg_list;
|
||||
|
||||
var g_tgl = mknod('a', 'wtgrid', ebi('gridicon_template').outerHTML + ebi('listicon_template').outerHTML);
|
||||
for(var i = 0; i < g_tgl.childNodes.length; i++)
|
||||
clmod(g_tgl.childNodes[i], 'on', 't');
|
||||
ebi('wtc').appendChild(g_tgl);
|
||||
var ico1 = ebi('gridicon_template').cloneNode(true);
|
||||
var ico2 = ebi('listicon_template').cloneNode(true);
|
||||
clmod(ico1, 'on', 't');
|
||||
clmod(ico2, 'on', 't');
|
||||
ebi('wtc').innerHTML = (
|
||||
ico1.outerHTML +
|
||||
ico2.outerHTML +
|
||||
'<details id="hcol_dd">' +
|
||||
'<summary id="h_hidden">' + L.cl_hiddenc + '</summary>' +
|
||||
'<div id="hcol_content" class="setting">' +
|
||||
'<a class="btn tgl" href="#" id="hcolsh">' + L.cl_hidec + '</a>' +
|
||||
'<a class="btn" id="hcolsr">' + L.cl_reset + '</a>' +
|
||||
'<div class="divider_h"></div>' +
|
||||
'<div id="hcols"></div>' +
|
||||
'</div>' +
|
||||
'</details>'
|
||||
);
|
||||
|
||||
ebi('h_hidden').onclick = function () {
|
||||
clmod(this.parentElement, 'open', 't');
|
||||
}
|
||||
|
||||
var r = {
|
||||
'sz': clamp(fcfg_get('gridsz', 10), 4, 80),
|
||||
|
|
@ -6062,9 +6077,6 @@ var thegrid = (function () {
|
|||
if (treectl)
|
||||
treectl.textmode(false);
|
||||
|
||||
if (filecols)
|
||||
filecols.uivis();
|
||||
|
||||
aligngriditems();
|
||||
restore_scroll();
|
||||
};
|
||||
|
|
@ -6514,10 +6526,9 @@ var thegrid = (function () {
|
|||
swrite('ga_thresh', r.gathr = (isNum(n) ? n : 0) || 70);
|
||||
};
|
||||
|
||||
ebi('wtgrid').onclick =
|
||||
ebi('gridicon_template').onclick =
|
||||
ebi('listicon_template').onclick =
|
||||
ebi('griden').onclick;
|
||||
var gtgls = QSA('.grdbtn');
|
||||
for(var a = 0; a < gtgls.length; a++)
|
||||
gtgls[a].onclick = ebi('griden').onclick;
|
||||
|
||||
return r;
|
||||
})();
|
||||
|
|
@ -8851,12 +8862,6 @@ var filecols = (function () {
|
|||
r.toggle(t.textContent);
|
||||
}
|
||||
|
||||
r.uivis = function () {
|
||||
var hcols = ebi('hcols');
|
||||
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) {
|
||||
hidden.sort();
|
||||
|
||||
|
|
@ -8874,7 +8879,6 @@ var filecols = (function () {
|
|||
}
|
||||
hcols.innerHTML = html.join('\n');
|
||||
hcols.onclick = hcols_click;
|
||||
r.uivis();
|
||||
r.add_btns();
|
||||
|
||||
var ohidden = [],
|
||||
|
|
@ -8933,26 +8937,26 @@ var filecols = (function () {
|
|||
r.reset(true);
|
||||
};
|
||||
|
||||
if (MOBILE)
|
||||
ebi('hcolsh').onclick = function (e) {
|
||||
ev(e);
|
||||
if (r.picking)
|
||||
return r.unpick();
|
||||
ebi('hcolsh').onclick = function (e) {
|
||||
ev(e);
|
||||
clmod(this, 'on', !r.picking)
|
||||
if (r.picking)
|
||||
return r.unpick();
|
||||
|
||||
var lbs = QSA('#files>thead th');
|
||||
for (var a = 0; a < lbs.length; a++) {
|
||||
lbs[a].onclick = function (e) {
|
||||
ev(e);
|
||||
if (toast.tag == 'pickhide')
|
||||
toast.hide();
|
||||
var lbs = QSA('#files>thead th');
|
||||
for (var a = 0; a < lbs.length; a++) {
|
||||
lbs[a].onclick = function (e) {
|
||||
ev(e);
|
||||
if (toast.tag == 'pickhide')
|
||||
toast.hide();
|
||||
|
||||
r.hide(e.target.textContent);
|
||||
};
|
||||
r.hide(e.target.textContent);
|
||||
};
|
||||
r.picking = true;
|
||||
clmod(ebi('files'), 'hhpick', 1);
|
||||
toast.inf(0, L.cl_hpick, 'pickhide');
|
||||
};
|
||||
r.picking = true;
|
||||
clmod(ebi('files'), 'hhpick', 1);
|
||||
toast.inf(0, L.cl_hpick, 'pickhide');
|
||||
};
|
||||
|
||||
r.unpick = function () {
|
||||
r.picking = false;
|
||||
|
|
|
|||
Loading…
Reference in a new issue