From 8b0814689423857efd05f1b2c2f16973202cfe1b Mon Sep 17 00:00:00 2001 From: Hugo Locurcio Date: Tue, 16 Mar 2021 18:35:20 +0100 Subject: Add a welcome dialog to the HTML5 editor This modal dialog displayed when the page is loaded. It can be dismissed permanently by clicking the "OK, don't show again" button. Clicking outside the modal will only dismiss it once. This dialog is used to remind people that the HTML5 editor is still in release candidate stage and isn't considered production-ready yet. --- misc/dist/html/editor.html | 65 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) (limited to 'misc/dist') diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html index 99ac2379ce..080c084d28 100644 --- a/misc/dist/html/editor.html +++ b/misc/dist/html/editor.html @@ -49,6 +49,29 @@ filter: brightness(82.5%); } + .welcome-modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: hsla(0, 0%, 0%, 0.5); + } + + .welcome-modal-content { + background-color: #333b4f; + box-shadow: 0 0.25rem 0.25rem hsla(0, 0%, 0%, 0.5); + line-height: 1.5; + max-width: 38rem; + margin: 4rem auto 0 auto; + color: white; + border-radius: 0.5rem; + padding: 1rem 1rem 2rem 1rem; + } + #tabs-buttons { /* Match the default background color of the editor window for a seamless appearance. */ background-color: #202531; @@ -197,6 +220,36 @@ +

@@ -265,7 +318,19 @@ if ("serviceWorker" in navigator) { navigator.serviceWorker.register("service.worker.js"); } + + if (localStorage.getItem("welcomeModalDismissed") !== 'true') { + document.getElementById("welcome-modal").style.display = "block"; + document.getElementById("welcome-modal-dismiss").focus(); + } }); + + function closeWelcomeModal(dontShowAgain) { + document.getElementById("welcome-modal").style.display = "none"; + if (dontShowAgain) { + localStorage.setItem("welcomeModalDismissed", 'true'); + } + }