Home Explore Help
Register Sign In
zhangyupeng
/
Babylon.js
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Merge pull request #5287 from sbtron/playground2

Update playground frame to match sandbox
sebavan 6 years ago
parent
602e12acc7 4ce883cac1
commit
caa77fb6a0
6 changed files with 66 additions and 27 deletions
Unified View Show Diff Stats
  1. 46 18
      Playground/frame.css
  2. 11 9
      Playground/frame.html
  3. 8 0
      Playground/js/frame.js
  4. BIN
      Playground/textures/Edit_32.png
  5. BIN
      Playground/textures/Refresh_32.png
  6. 1 0
      Playground/textures/icons/Icon_Fullscreen.svg

+ 46 - 18
Playground/frame.css
View File 

@@ -9,38 +9,66 @@
 
 }

 }

 

 

 canvas {

 canvas {

+    height: calc(100% - 56px);

     border:none !important;

     border:none !important;

     outline:none !important;

     outline:none !important;

 }

 }

 

 

+.footerLeft{

+    position: relative;

+    display: flex;

+    align-items: center;

+}

+

 #fpsLabel {

 #fpsLabel {

-    position: absolute;

-    right: 10px;

-    top: 20px;

     cursor: default;

     cursor: default;

     z-index:10;

     z-index:10;

-    background-color: #7283a0;

     color:white;

     color:white;

-    padding:5px;

-    font-family: 'Segoe UI';

     pointer-events: none;

     pointer-events: none;

     user-select: none;

     user-select: none;

+    line-height: 56px;

+    vertical-align: middle;

+    margin: auto 0px auto 15px;

 }

 }

 

 

-.refreshlabel, .editlabel{

+

+.footer {

     position: absolute;

     position: absolute;

-    left: 0px;

-    cursor: pointer;    

-    color: white;

-    background-color: #7283a0;

-    color:white;

-    padding:5px;

-    

+    width: 100%;

+    height: 56px;

+    bottom: 0;

+    margin: 0;

+    padding: 0;

+    right: 0;

+    left: 0;

+    background-color: #3B789A;

+}

+

+.footerRight {

+    display: inline;

+    position: absolute;

+    bottom: 0;

+    right: 0px;

+    top: 0px;

+}

+

+.footerRight a {

+    float: left; /* Float links side by side */

+    width: 56px; 

+    height: 56px;

+    margin: 0px;

+    padding: 0;

+    transition: all 0.3s ease; /* Add transition for hover effects */

 }

 }

 

 

-.refreshlabel {

-    top: 20px;

+.footerRight a img {

+    margin: 10px;

 }

 }

-.editlabel {

-    top: 75px;

+

+.footerRight a:hover {

+    background-color: #2c5a74; /* Add a hover color */    

+}

+

+.footerRight a:active{

+    background-color: #162D3A; /* Add a hover color */

 }

 }

+ 11 - 9
Playground/frame.html
View File 

@@ -76,18 +76,20 @@
 
     <body>

     <body>

         <canvas touch-action="none" id="renderCanvas" tabindex="1"></canvas>

         <canvas touch-action="none" id="renderCanvas" tabindex="1"></canvas>

 

 

+        <div class="footer">

         <span id="fpsLabel">FPS</span>

         <span id="fpsLabel">FPS</span>

-

-        <div class="refreshlabel">

-                <img id="refresh" src="textures/Refresh_32.png" height="32" width="32" alt="Reload Page" title="Reload Page"/>

+        <div class="footerRight">

+                <a href="javascript:void(null);" id="btnFullscreen">

+                    <img src="textures/icons/Icon_Fullscreen.svg" width="36" height="36" alt="Full screen" title="Full screen" />

+                </a> 

+                <a href="javascript:void(null);">

+                <img id="refresh" src="textures/icons/refresh.png"  width="36" height="36" alt="Reload page" title="Reload page"/>

+                </a>

+                <a id="edit" href="#" target="_blank">

+                    <img src="textures/icons/edit.png" width="36" height="36" alt="Edit in playground" title="Edit in playground"/>

+                </a>

         </div>

         </div>

-

-        <div class="editlabel">

-            <a id="edit" href="#" target="_blank">

-                <img src="textures/Edit_32.png" height="32" width="32" alt="Edit in Playground" title="Edit in Playground"/>

-            </a>

         </div>

         </div>

-        

 

 

         <script src="https://code.jquery.com/jquery.js"></script>

         <script src="https://code.jquery.com/jquery.js"></script>

         <script src="js/frame.js"></script>

         <script src="js/frame.js"></script>

+ 8 - 0
Playground/js/frame.js
View File 

@@ -3,6 +3,7 @@
 
     var currentSnippetToken;

     var currentSnippetToken;

     var engine;

     var engine;

     var fpsLabel = document.getElementById("fpsLabel");

     var fpsLabel = document.getElementById("fpsLabel");

+    var btnFullScreen = document.getElementById("btnFullscreen");

     var refreshAnchor = document.getElementById("refresh");

     var refreshAnchor = document.getElementById("refresh");

     var editAnchor = document.getElementById("edit");

     var editAnchor = document.getElementById("edit");

     var scripts;

     var scripts;

@@ -149,6 +150,13 @@
 
         }

         }

     });

     });

 

 

+    btnFullScreen.addEventListener('click', function() {

+        if (engine) {

+            engine.switchFullscreen(true);

+        }

+    }, false);

+

+

     // UI

     // UI

 

 

     var cleanHash = function () {

     var cleanHash = function () {

BIN
Playground/textures/Edit_32.png
View File


BIN
Playground/textures/Refresh_32.png
View File


+ 1 - 0
Playground/textures/icons/Icon_Fullscreen.svg
View File 

@@ -0,0 +1 @@
 
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Icon_Fullscreen</title><path class="cls-1" d="M117.66,42.34v26.9h-5.38V51.54L51.54,112.28h17.7v5.38H42.34V90.76h5.38v17.7l60.74-60.74H90.76V42.34Z"/></svg>