diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 8421c5ab..f3e477ad 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -65,7 +65,7 @@ body { border-color: #8e4; } #toast.warn { - background: #a70; + background: #970; border-color: #fc0; } #toast.err { @@ -1033,7 +1033,7 @@ html.light #tt { } html.light #tt, html.light #toast { - box-shadow: 0 .3em 1em rgba(0,0,0,0.4); + box-shadow: 0 .3em 1em rgba(0,0,0,0.4); } html.light #tt code { background: #060; diff --git a/copyparty/web/md.css b/copyparty/web/md.css index 2dcf0e00..6d13194c 100644 --- a/copyparty/web/md.css +++ b/copyparty/web/md.css @@ -8,20 +8,52 @@ html, body { font-family: sans-serif; line-height: 1.5em; } -#tt { +#tt, #toast { position: fixed; max-width: 34em; background: #222; border: 0 solid #777; + box-shadow: 0 .2em .5em #222; + border-radius: .4em; + z-index: 9001; +} +#tt { overflow: hidden; margin-top: 1em; padding: 0 1.3em; height: 0; opacity: .1; transition: opacity 0.14s, height 0.14s, padding 0.14s; - box-shadow: 0 .2em .5em #222; - border-radius: .4em; - z-index: 9001; +} +#toast { + 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); + text-shadow: 1px 1px 0 #000; + color: #fff; +} +#toast.vis { + right: 1.3em; + transform: unset; +} +#toast.inf { + background: #07a; + border-color: #0be; +} +#toast.ok { + background: #4a0; + border-color: #8e4; +} +#toast.warn { + background: #970; + border-color: #fc0; +} +#toast.err { + background: #b00; + border-color: #f00; } #tt.b { padding: 0 2em; @@ -49,6 +81,24 @@ html, body { #tt em { color: #f6a; } +html.light #tt { + background: #fff; + border-color: #888 #000 #777 #000; +} +html.light #tt, +html.light #toast { + box-shadow: 0 .3em 1em rgba(0,0,0,0.4); +} +html.light #tt code { + background: #060; + color: #fff; +} +html.light #tt em { + color: #d38; +} + + + #mtw { display: none; } diff --git a/copyparty/web/md.html b/copyparty/web/md.html index ae085441..9a41aa58 100644 --- a/copyparty/web/md.html +++ b/copyparty/web/md.html @@ -131,18 +131,18 @@ var md_opt = { }; (function () { - var btn = document.getElementById("lightswitch"); - var toggle = function (e) { - if (e) e.preventDefault(); - var dark = !document.documentElement.getAttribute("class"); - document.documentElement.setAttribute("class", dark ? "dark" : ""); - btn.innerHTML = "go " + (dark ? "light" : "dark"); - if (window.localStorage) - localStorage.setItem('lightmode', dark ? 0 : 1); - }; - btn.onclick = toggle; - if (window.localStorage && localStorage.getItem('lightmode') != 1) - toggle(); + var l = localStorage, + drk = l.getItem('lightmode') != 1, + btn = document.getElementById("lightswitch"), + f = function (e) { +if (e) { e.preventDefault(); drk = !drk; } +document.documentElement.setAttribute("class", drk? "dark":"light"); +btn.innerHTML = "go " + (drk ? "light":"dark"); +l.setItem('lightmode', drk? 0:1); + }; + + btn.onclick = f; + f(); })(); diff --git a/copyparty/web/md2.css b/copyparty/web/md2.css index 91519cc9..25ad7942 100644 --- a/copyparty/web/md2.css +++ b/copyparty/web/md2.css @@ -84,13 +84,10 @@ html.dark #save.force-save { #save.disabled { opacity: .4; } -#helpbox, -#toast { +#helpbox { background: #f7f7f7; border-radius: .4em; z-index: 9001; -} -#helpbox { display: none; position: fixed; padding: 2em; @@ -107,19 +104,7 @@ html.dark #save.force-save { } html.dark #helpbox { box-shadow: 0 .5em 2em #444; -} -html.dark #helpbox, -html.dark #toast { background: #222; border: 1px solid #079; border-width: 1px 0; } -#toast { - font-weight: bold; - text-align: center; - padding: .6em 0; - position: fixed; - top: 30%; - transition: opacity 0.2s ease-in-out; - opacity: 1; -} diff --git a/copyparty/web/md2.js b/copyparty/web/md2.js index a4cb7d34..68f63375 100644 --- a/copyparty/web/md2.js +++ b/copyparty/web/md2.js @@ -236,7 +236,7 @@ function Modpoll() { var skip = null; - if (ebi('toast')) + if (toast.visible) skip = 'toast'; else if (this.skip_one) @@ -293,8 +293,7 @@ function Modpoll() { "You can click this message to ignore and contnue." ]; - return toast(false, "box-shadow:0 1em 2em rgba(64,64,64,0.8);font-weight:normal", - 36, "

" + msg.join('

\n

') + '

'); + return toast.warn(0, "

" + msg.join('

\n

') + '

'); } console.log('modpoll eq'); @@ -323,16 +322,12 @@ function save(e) { var save_btn = ebi("save"), save_cls = save_btn.getAttribute('class') + ''; - if (save_cls.indexOf('disabled') >= 0) { - toast(true, ";font-size:2em;color:#c90", 9, "no changes"); - return; - } + if (save_cls.indexOf('disabled') >= 0) + return toast.inf(2000, "no changes"); var force = (save_cls.indexOf('force-save') >= 0); - if (force && !confirm('confirm that you wish to lose the changes made on the server since you opened this document')) { - alert('ok, aborted'); - return; - } + if (force && !confirm('confirm that you wish to lose the changes made on the server since you opened this document')) + return alert('ok, aborted'); var txt = dom_src.value; @@ -443,46 +438,10 @@ function savechk_cb() { last_modified = this.lastmod; server_md = this.txt; draw_md(); - toast(true, ";font-size:6em;font-family:serif;color:#9b4", 4, - 'OK✔️' + this.ntry + ''); - + toast.ok(2000, 'save OK' + (this.ntry ? '
attempt ' + this.ntry : '')); modpoll.disabled = false; } -function toast(autoclose, style, width, msg) { - var ok = ebi("toast"); - if (ok) - ok.parentNode.removeChild(ok); - - style = "width:" + width + "em;left:calc(50% - " + (width / 2) + "em);" + style; - ok = mknod('div'); - ok.setAttribute('id', 'toast'); - ok.setAttribute('style', style); - ok.innerHTML = msg; - var parent = ebi('m'); - document.documentElement.appendChild(ok); - - var hide = function (delay) { - delay = delay || 0; - - setTimeout(function () { - ok.style.opacity = 0; - }, delay); - - setTimeout(function () { - if (ok.parentNode) - ok.parentNode.removeChild(ok); - }, delay + 250); - } - - ok.onclick = function () { - hide(0); - }; - - if (autoclose) - hide(500); -} - // firefox bug: initial selection offset isn't cleared properly through js var ff_clearsel = (function () { diff --git a/copyparty/web/mde.html b/copyparty/web/mde.html index 05077288..9b5dacd8 100644 --- a/copyparty/web/mde.html +++ b/copyparty/web/mde.html @@ -30,16 +30,15 @@ var md_opt = { }; var lightswitch = (function () { - var fun = function () { - var dark = !document.documentElement.getAttribute("class"); - document.documentElement.setAttribute("class", dark ? "dark" : ""); - if (window.localStorage) - localStorage.setItem('lightmode', dark ? 0 : 1); - }; - if (window.localStorage && localStorage.getItem('lightmode') != 1) - fun(); - - return fun; + var l = localStorage, + drk = l.getItem('lightmode') != 1, + f = function (e) { +if (e) drk = !drk; +document.documentElement.setAttribute("class", drk? "dark":"light"); +l.setItem('lightmode', drk? 0:1); + }; + f(); + return f; })(); diff --git a/copyparty/web/splash.html b/copyparty/web/splash.html index d33c4897..4607e7a7 100644 --- a/copyparty/web/splash.html +++ b/copyparty/web/splash.html @@ -68,7 +68,7 @@ diff --git a/copyparty/web/util.js b/copyparty/web/util.js index 84cef05c..364945c1 100644 --- a/copyparty/web/util.js +++ b/copyparty/web/util.js @@ -447,19 +447,14 @@ function jcp(obj) { function sread(key) { - if (window.localStorage) - return localStorage.getItem(key); - - return null; + return localStorage.getItem(key); } function swrite(key, val) { - if (window.localStorage) { - if (val === undefined || val === null) - localStorage.removeItem(key); - else - localStorage.setItem(key, val); - } + if (val === undefined || val === null) + localStorage.removeItem(key); + else + localStorage.setItem(key, val); } function jread(key, fb) { @@ -643,6 +638,7 @@ var tt = (function () { var toast = (function () { var r = {}, te = null, + visible = false, obj = mknod('div'); obj.setAttribute('id', 'toast'); @@ -652,13 +648,17 @@ var toast = (function () { r.hide = function () { clearTimeout(te); clmod(obj, 'vis'); + r.visible = false; }; r.show = function (cl, ms, txt) { clearTimeout(te); - te = setTimeout(r.hide, ms); + if (ms) + te = setTimeout(r.hide, ms); + obj.innerHTML = txt; obj.className = cl + ' vis'; + r.visible = true; }; r.ok = function (ms, txt) {