From 65280105f06a56f0dbcfd0ad33b294c331bec5e0 Mon Sep 17 00:00:00 2001
From: ksuprynowicz <ksuprynowicz@post.pl>
Date: Fri, 15 Jul 2022 21:18:00 +0200
Subject: [PATCH] Added voxel edit help popup

---
 scripts/system/html/css/edit-style.css | 19 +++++++++++++++++++
 scripts/system/html/gridControls.html  | 10 ++++++++++
 scripts/system/html/js/gridControls.js | 12 ++++++++++++
 3 files changed, 41 insertions(+)

diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css
index 77ac0fb0c5..1f2539206c 100644
--- a/scripts/system/html/css/edit-style.css
+++ b/scripts/system/html/css/edit-style.css
@@ -2080,6 +2080,25 @@ div.tools-select-menu {
     cursor: pointer;
 }
 
+div.tools-help-popup {
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;
+    position: relative;
+    display: none;
+    width: 690px;
+    height: auto;
+    top: 0px;
+    left: 8px;
+    right: 0;
+    bottom: 0;
+    border-style: solid;
+    border-color: #505050;
+    border-width: 1px;
+    background-color: #404040;
+    z-index: 2;
+    cursor: pointer;
+}
+
 div.menu-separator{
     width: 100%;
     height: 2px;
diff --git a/scripts/system/html/gridControls.html b/scripts/system/html/gridControls.html
index d5a0978c01..fc3aa3dfca 100644
--- a/scripts/system/html/gridControls.html
+++ b/scripts/system/html/gridControls.html
@@ -90,6 +90,16 @@
                     <input type='checkbox' id="voxel-remove" style="width: 100%">
                     <label for="voxel-remove">&nbsp;</label>
                 </div>
+                <div class="property container">
+                    <input name="voxel-help-button" type="button" class="entity-list-menutitle" id="voxel-help-button" value="Voxel edit help&#9662;" />
+                </div>
+            </div>
+            <div class="tools-help-popup" id="voxel-help-popup" >
+                <p>To edit voxels, Voxel Edit Mode needs to be selected.</p>
+                <p>Desktop mode:</p>
+                <p>Click left mouse button to add voxel. Click middle mouse button to remove voxel. Hold mouse button and move mouse to add/remove voxels in a single plane. Plane is determined by the direction where you are looking when first voxel is added/removed (for example look downwards for horizontal plane.</p>
+                <p>VR mode:</p>
+                <p>Pressing trigger adds a voxel. Pressing trigger while holding grip removes it. Hold trigger to add multiple voxels in a single plane. Initial direction of controller ray determies the plane. Hold both grips and move your hands together or apart to change size of edit sphere.</p>
             </div>
         </div>
         <div id="grid-section" class="section">
diff --git a/scripts/system/html/js/gridControls.js b/scripts/system/html/js/gridControls.js
index e3d6d937e6..6f12825772 100644
--- a/scripts/system/html/js/gridControls.js
+++ b/scripts/system/html/js/gridControls.js
@@ -20,6 +20,8 @@ function loaded() {
         elVoxelEditModeSphere = document.getElementById("voxel-edit-mode-sphere");
         elVoxelEditModeCube = document.getElementById("voxel-edit-mode-cube");
         elMenuBackgroundOverlay = document.getElementById("menuBackgroundOverlay");
+        elVoxelHelpButton = document.getElementById("voxel-help-button");
+        elVoxelHelpPopup = document.getElementById("voxel-help-popup");
 
         elVoxelSphereSize = document.getElementById("voxel-sphere-size");
         //elVoxelEditDynamics = document.getElementById("voxel-edit-dynamics");
@@ -45,6 +47,11 @@ function loaded() {
             document.getElementById("voxel-edit-mode-menu").style.display = "block";
         };
 
+        elVoxelHelpButton.onclick = function() {
+            document.getElementById("menuBackgroundOverlay").style.display = "block";
+            document.getElementById("voxel-help-popup").style.display = "block";
+        };
+
         elMenuBackgroundOverlay.onclick = function() {
             closeAllEntityListMenu();
         };
@@ -84,6 +91,10 @@ function loaded() {
             closeAllEntityListMenu();
         };
 
+        elVoxelHelpPopup.onclick = function() {
+            closeAllEntityListMenu();
+        };
+
         if (window.EventBridge !== undefined) {
             EventBridge.scriptEventReceived.connect(function(data) {
                 data = JSON.parse(data);
@@ -278,6 +289,7 @@ function loaded() {
         document.getElementById("menuBackgroundOverlay").style.display = "none";
         document.getElementById("edit-mode-menu").style.display = "none";
         document.getElementById("voxel-edit-mode-menu").style.display = "none";
+        document.getElementById("voxel-help-popup").style.display = "none";
     }
 
     // Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked