diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 96f160d7..403db051 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -52,26 +52,52 @@ body { text-shadow: 1px 1px 0 #000; color: #fff; } +#toastc { + position: relative; + left: -2.35em; + margin: 0 -1.05em; + padding: .5em .8em; + border-radius: .3em 0 0 .3em; + color: #000; + text-shadow: none; + opacity: 0; + transition: all .3s cubic-bezier(.2, 1.2, .5, 1); +} #toast.vis { right: 1.3em; transform: unset; } +#toast.vis #toastc { + opacity: 1; +} #toast.inf { background: #07a; border-color: #0be; } +#toast.inf #toastc { + background: #0be; +} #toast.ok { background: #4a0; border-color: #8e4; } +#toast.ok #toastc { + background: #8e4; +} #toast.warn { background: #970; border-color: #fc0; } +#toast.warn #toastc { + background: #fc0; +} #toast.err { background: #900; border-color: #d06; } +#toast.err #toastc { + background: #d06; +} #tt.b { padding: 0 2em; border-radius: .5em; diff --git a/copyparty/web/md.css b/copyparty/web/md.css index ed373361..9a68979d 100644 --- a/copyparty/web/md.css +++ b/copyparty/web/md.css @@ -35,26 +35,53 @@ html, body { text-shadow: 1px 1px 0 #000; color: #fff; } +#toastc { + position: relative; + left: -2.35em; + margin: 0 -1.05em; + padding: .5em .8em; + border-radius: .3em 0 0 .3em; + color: #000; + text-shadow: none; + opacity: 0; + transition: all .3s cubic-bezier(.2, 1.2, .5, 1); +} #toast.vis { right: 1.3em; transform: unset; } +#toast.vis #toastc { + opacity: 1; +} #toast.inf { background: #07a; border-color: #0be; } +#toast.inf #toastc { + background: #0be; +} #toast.ok { background: #4a0; border-color: #8e4; } +#toast.ok #toastc { + background: #8e4; +} #toast.warn { background: #970; border-color: #fc0; } +#toast.warn #toastc { + background: #fc0; +} #toast.err { background: #900; border-color: #d06; } +#toast.err #toastc { + background: #d06; +}; +} #tt.b { padding: 0 2em; border-radius: .5em; diff --git a/copyparty/web/md2.js b/copyparty/web/md2.js index 29303414..1a1b17a1 100644 --- a/copyparty/web/md2.js +++ b/copyparty/web/md2.js @@ -291,7 +291,7 @@ function Modpoll() { "Press F5 or CTRL-R to refresh the page,
" + "replacing your document with the server copy.", - "You can click this message to ignore and contnue." + "You can close this message to ignore and contnue." ]; return toast.warn(0, "

" + msg.join('

\n

') + '

'); } diff --git a/copyparty/web/util.js b/copyparty/web/util.js index 6fe18d1a..f234928e 100644 --- a/copyparty/web/util.js +++ b/copyparty/web/util.js @@ -656,7 +656,8 @@ var toast = (function () { obj.setAttribute('id', 'toast'); document.body.appendChild(obj);; - r.hide = function () { + r.hide = function (e) { + ev(e); clearTimeout(te); clmod(obj, 'vis'); r.visible = false; @@ -667,8 +668,14 @@ var toast = (function () { if (ms) te = setTimeout(r.hide, ms * 1000); - obj.innerHTML = txt.replace(/\n/g, '
\n'); + var html = '', hp = txt.split(/(?=<.?pre>)/i); + for (var a = 0; a < hp.length; a++) + html += hp[a].startsWith('
') ? hp[a] :
+                hp[a].replace(/
\n/g, '\n').replace(/\n
/g, '\n').replace(/\n/g, '
\n'); + + obj.innerHTML = 'x' + html; obj.className = cl + ' vis'; + ebi('toastc').onclick = r.hide; r.visible = true; }; @@ -685,6 +692,5 @@ var toast = (function () { r.show('err', ms, txt); }; - obj.onclick = r.hide; return r; })();