add toasts

This commit is contained in:
ed 2021-07-25 10:50:11 +02:00
parent 27cce086c6
commit 19bc962ad5
3 changed files with 48 additions and 5 deletions

View file

@ -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);

View file

@ -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();
}; };

View file

@ -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;
})();