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

Improve the editor HTML template

Browse source 
- Darken the header tab background to match the default editor
  background color.
- Hide the distracting focus outlines for the editor and game canvas.
- Use a pure black background for the game canvas to better distinguish it
  from the editor and provide a more neutral background.
- Use a bold font weight for the Start Godot editor button on the
  loader page.
- Link to the web editor documentation on the loader page.
- Clarify what happens when clicking "OK" in the persistent data removal
  warning dialog.
- Tidy up the HTML template by removing obsolete attributes.

(cherry picked from commit 3527756943)
This commit is contained in:
Hugo Locurcio 2021-02-24 22:46:43 +01:00 committed by Rémi Verschelde
parent 8190305075
commit 3b4dd88e56
1 changed files with 26 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,8 +5,7 @@
<meta name='viewport' content='width=device-width, user-scalable=no' />
<link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' />
<title>Godot Engine Web Editor ($GODOT_VERSION)</title>
<style type='text/css'>
<style>
*:focus {
/* More visible outline for better keyboard navigation. */
outline: 0.125rem solid hsl(220, 100%, 62.5%);
@ -40,13 +39,30 @@
filter: brightness(82.5%);
}
#tabs-buttons {
/* Match the default background color of the editor window for a seamless appearance. */
background-color: #202531;
}
#tab-game {
/* Use a pure black background to better distinguish the running project */
/* from the editor window, and to use a more neutral background color (no tint). */
background-color: black;
/* Make the background span the entire page height. */
min-height: 100vh;
}
#canvas, #gameCanvas {
display: block;
margin: 0;
color: white;
}
#canvas:focus, #gameCanvas:focus {
/* Don't show distracting focus outlines for the main tabs' contents. */
#tab-editor canvas:focus,
#tab-game canvas:focus,
#canvas:focus,
#gameCanvas:focus {
outline: none;
}
@ -200,9 +216,11 @@
<a href="demo.zip">(Try this for example)</a>
<br />
<br />
<button id="startButton" class="btn" style="margin-bottom: 4rem">Start Godot editor</button>
<button id="startButton" class="btn" style="margin-bottom: 4rem; font-weight: 700">Start Godot editor</button>
<br />
<button class="btn" onclick="clearPersistence()">Clear persistent data</button>
<button class="btn" onclick="clearPersistence()" style="margin-bottom: 1.5rem">Clear persistent data</button>
<br />
<a href="https://docs.godotengine.org/en/latest/tutorials/editor/using_the_web_editor.html">Web editor documentation</a>
</div>
</div>
<div id='tab-editor' style="display: none;">
@ -233,8 +251,8 @@
</div>
</div>
<script type='text/javascript' src='godot.tools.js'></script>
<script type='text/javascript'>//<![CDATA[
<script src='godot.tools.js'></script>
<script>//<![CDATA[
var editor = null;
var game = null;
@ -258,7 +276,7 @@
});
}
if (!window.confirm("Are you sure you want to delete all the locally stored files?")) {
if (!window.confirm("Are you sure you want to delete all the locally stored files?\nClicking \"OK\" will permanently remove your projects and editor settings!")) {
return;
}
Promise.all([