asgardius/virtualx-engine
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a welcome dialog to the HTML5 editor

Browse source 
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.
This commit is contained in:
Hugo Locurcio 2021-03-16 18:35:20 +01:00
parent 224f5cab99
commit 8b08146894
No known key found for this signature in database
GPG key ID: 39E8F8BE30B0A49C
1 changed files with 65 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
misc/dist/html/editor.html vendored
View file

@ -49,6 +49,29 @@
filter: brightness(82.5%); 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 { #tabs-buttons {
/* Match the default background color of the editor window for a seamless appearance. */ /* Match the default background color of the editor window for a seamless appearance. */
background-color: #202531; background-color: #202531;
@ -197,6 +220,36 @@
</style> </style>
</head> </head>
<body> <body>
<div
id="welcome-modal"
class="welcome-modal"
role="dialog"
aria-labelledby="welcome-modal-title"
aria-describedby="welcome-modal-description"
onclick="if (event.target === this) closeWelcomeModal(false)"
>
<div class="welcome-modal-content">
<h2 id="welcome-modal-title">Important - Please read before continuing</h2>
<div id="welcome-modal-description">
<p>
The Godot Web Editor has some limitations compared to the native version.
Its main focus is education and experimentation;
<strong>it is not recommended for production</strong>.
</p>
<p>
Refer to the
<a
href="https://docs.godotengine.org/en/latest/tutorials/editor/using_the_web_editor.html"
target="_blank"
rel="noopener"
>Web editor documentation</a> for usage instructions and limitations.
</p>
</div>
<button id="welcome-modal-dismiss" class="btn" type="button" onclick="closeWelcomeModal(true)" style="margin-top: 1rem">
OK, don't show again
</button>
</div>
</div>
<div id="tabs-buttons"> <div id="tabs-buttons">
<button id="btn-tab-loader" class="btn tab-btn" onclick="showTab('loader')">Loader</button> <button id="btn-tab-loader" class="btn tab-btn" onclick="showTab('loader')">Loader</button>
<button id="btn-tab-editor" class="btn tab-btn" disabled="disabled" onclick="showTab('editor')">Editor</button> <button id="btn-tab-editor" class="btn tab-btn" disabled="disabled" onclick="showTab('editor')">Editor</button>
@ -265,7 +318,19 @@
if ("serviceWorker" in navigator) { if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("service.worker.js"); 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');
}
}
</script> </script>
<script src='godot.tools.js'></script> <script src='godot.tools.js'></script>
<script>//<![CDATA[ <script>//<![CDATA[