godotengine/godot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #47069 from Calinou/html5-editor-welcome-dialog

Browse Source 
Add a welcome dialog to the HTML5 editor
This commit is contained in:
Fabio Alessandrelli 2021-04-17 14:43:16 +02:00 committed by GitHub
commit 0ee744ff5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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

@ -58,6 +58,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;
@ -206,6 +229,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>
@ -274,7 +327,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[