From 1304b85c63d68f11f6554701bd2f49c554e362e9 Mon Sep 17 00:00:00 2001 From: Hugo Locurcio Date: Tue, 16 Mar 2021 18:35:20 +0100 Subject: [PATCH] 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. (cherry picked from commit 8b0814689423857efd05f1b2c2f16973202cfe1b) --- misc/dist/html/editor.html | 65 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html index bd3ebe2b41..8b7c78176e 100644 --- a/misc/dist/html/editor.html +++ b/misc/dist/html/editor.html @@ -58,6 +58,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; @@ -206,6 +229,36 @@ +
@@ -274,7 +327,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'); + } + }