mirror of
https://github.com/9001/copyparty.git
synced 2025-08-17 09:02:15 -06:00
add toasts
This commit is contained in:
parent
27cce086c6
commit
19bc962ad5
|
@ -25,20 +25,34 @@ html, body {
|
||||||
body {
|
body {
|
||||||
padding-bottom: 5em;
|
padding-bottom: 5em;
|
||||||
}
|
}
|
||||||
#tt {
|
#tt, #toast {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
max-width: 34em;
|
max-width: 34em;
|
||||||
background: #222;
|
background: #222;
|
||||||
border: 0 solid #777;
|
border: 0 solid #777;
|
||||||
|
box-shadow: 0 .2em .5em #222;
|
||||||
|
border-radius: .4em;
|
||||||
|
z-index: 9001;
|
||||||
|
}
|
||||||
|
#tt {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
padding: 0 1.3em;
|
padding: 0 1.3em;
|
||||||
height: 0;
|
height: 0;
|
||||||
opacity: .1;
|
opacity: .1;
|
||||||
transition: opacity 0.14s, height 0.14s, padding 0.14s;
|
transition: opacity 0.14s, height 0.14s, padding 0.14s;
|
||||||
box-shadow: 0 .2em .5em #222;
|
}
|
||||||
border-radius: .4em;
|
#toast {
|
||||||
z-index: 9001;
|
top: 1.4em;
|
||||||
|
right: -1em;
|
||||||
|
padding: 1em 1.3em;
|
||||||
|
border-width: .4em 0;
|
||||||
|
transform: translateX(100%);
|
||||||
|
transition: all .3s cubic-bezier(.2, 1.2, .5, 1);;
|
||||||
|
}
|
||||||
|
#toast.vis {
|
||||||
|
right: 1.3em;
|
||||||
|
transform: unset;
|
||||||
}
|
}
|
||||||
#tt.b {
|
#tt.b {
|
||||||
padding: 0 2em;
|
padding: 0 2em;
|
||||||
|
@ -995,7 +1009,8 @@ html.light {
|
||||||
background: #eee;
|
background: #eee;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
html.light #tt {
|
html.light #tt,
|
||||||
|
html.light #toast {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-color: #888 #000 #777 #000;
|
border-color: #888 #000 #777 #000;
|
||||||
box-shadow: 0 .3em 1em rgba(0,0,0,0.4);
|
box-shadow: 0 .3em 1em rgba(0,0,0,0.4);
|
||||||
|
|
|
@ -1514,6 +1514,8 @@ var fileman = (function () {
|
||||||
|
|
||||||
if (!confirm('Last chance! Delete?'))
|
if (!confirm('Last chance! Delete?'))
|
||||||
return;
|
return;
|
||||||
|
|
||||||
|
toast.show(req.length + ' deletes left', 2000);
|
||||||
};
|
};
|
||||||
|
|
||||||
r.cut = function (e) {
|
r.cut = function (e) {
|
||||||
|
@ -1531,6 +1533,7 @@ var fileman = (function () {
|
||||||
cl.add(inv ? 'c2' : 'c1');
|
cl.add(inv ? 'c2' : 'c1');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
toast.show('cut ' + sel.length + ' items', 1000);
|
||||||
jwrite('fman_clip', vsel);
|
jwrite('fman_clip', vsel);
|
||||||
r.tx();
|
r.tx();
|
||||||
};
|
};
|
||||||
|
|
|
@ -629,3 +629,28 @@ var tt = (function () {
|
||||||
|
|
||||||
return r;
|
return r;
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
|
||||||
|
var toast = (function () {
|
||||||
|
var r = {},
|
||||||
|
te = null,
|
||||||
|
obj = mknod('div');
|
||||||
|
|
||||||
|
obj.setAttribute('id', 'toast');
|
||||||
|
obj.onclick = r.hide;
|
||||||
|
document.body.appendChild(obj);;
|
||||||
|
|
||||||
|
r.hide = function () {
|
||||||
|
clearTimeout(te);
|
||||||
|
clmod(obj, 'vis');
|
||||||
|
};
|
||||||
|
|
||||||
|
r.show = function (txt, ms) {
|
||||||
|
clearTimeout(te);
|
||||||
|
te = setTimeout(r.hide, ms);
|
||||||
|
obj.innerHTML = txt;
|
||||||
|
clmod(obj, 'vis', 1000);
|
||||||
|
};
|
||||||
|
|
||||||
|
return r;
|
||||||
|
})();
|
||||||
|
|
Loading…
Reference in a new issue