From 1c2ea1571ce3154dba0e3e3ed3c115d03dbc1f6e Mon Sep 17 00:00:00 2001
From: Alezia Kurdis <60075796+AleziaKurdis@users.noreply.github.com>
Date: Mon, 21 Jun 2021 00:48:14 -0400
Subject: [PATCH 1/5] Add style for the new Zone Selector HDM compliant

Add style for the new Zone Selector HDM compliant
---
 scripts/system/html/css/edit-style.css | 59 ++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css
index 9f7f329040..5aea382d63 100644
--- a/scripts/system/html/css/edit-style.css
+++ b/scripts/system/html/css/edit-style.css
@@ -1955,6 +1955,65 @@ div.multiZoneSelToolbar {
     padding: 0px;
 }
 
+div.zoneSelectorListPanel {
+    position: absolute;
+    display: none;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border-width: 0px;
+    background-color: #666666;
+    color: #dddddd;
+    padding: 0% 2% 0% 2%;
+    z-index: 2;
+    cursor: pointer;
+}
+
+div.zoneSelectListHeader {
+    position: static;
+    width: 96%;
+    height: 6%;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;    
+    padding-top: 4px;
+    cursor: pointer;
+    border-width: 0px;    
+}
+
+div.zoneSelectList {
+    position: static;
+    width: 96%;
+    height: 86%;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;    
+    border-width: 0px;
+    background-color: #c0c0c0;
+    overflow-y: auto;
+    padding: 0px;
+    cursor: pointer;
+}
+
+div.zoneSelectListFooter {
+    position: static;
+    width: 96%;
+    height: auto;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;    
+    padding: 2px;
+    cursor: pointer;
+    border-width: 0px;
+    text-align: right;
+}
+
 #menuBackgroundOverlay{
     background-color:transparent;
     position:fixed;

From 77d91600773ee4e3b518b61eca8212022d762847 Mon Sep 17 00:00:00 2001
From: Alezia Kurdis <60075796+AleziaKurdis@users.noreply.github.com>
Date: Mon, 21 Jun 2021 00:50:40 -0400
Subject: [PATCH 2/5] Add a new Zone Selector HDM compliant

Add a new Zone Selector HDM compliant for renderWithZones.
The previous selector wasn't usable in HMD and it was pratically the last component
that forced us to remove our headset to complete the task.
---
 .../html/js/entityProperties.js               | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/scripts/system/create/entityProperties/html/js/entityProperties.js b/scripts/system/create/entityProperties/html/js/entityProperties.js
index 5c6806653d..0136d99cc4 100644
--- a/scripts/system/create/entityProperties/html/js/entityProperties.js
+++ b/scripts/system/create/entityProperties/html/js/entityProperties.js
@@ -3695,20 +3695,20 @@ function requestZoneList() {
     }));
 }
 
-function addZoneToZonesSelection(propertyId) {
+function addZoneToZonesSelection(propertyId, id) {
     let hiddenField = document.getElementById(propertyId);
     if (JSON.stringify(hiddenField.value) === '"undefined"') {
         hiddenField.value = "[]";
     }
     let selectedZones = JSON.parse(hiddenField.value);
-    let zoneToAdd = document.getElementById("zones-select-" + propertyId).value;
-    if (!selectedZones.includes(zoneToAdd)) {
-        selectedZones.push(zoneToAdd);
+    if (!selectedZones.includes(id)) {
+        selectedZones.push(id);
     }
     hiddenField.value = JSON.stringify(selectedZones);
     displaySelectedZones(propertyId, true);
     let propertyName = propertyId.replace("property-", "");
     updateProperty(propertyName, selectedZones, false);
+    document.getElementById("zones-select-selector-list-panel-" + propertyId).style.display = "none";
 }
 
 function removeZoneFromZonesSelection(propertyId, zoneId) {
@@ -3798,7 +3798,12 @@ function createZonesSelection(property, elProperty) {
 
 function setZonesSelectionData(element, isEditable) {
     let zoneSelectorContainer = document.getElementById("zones-selector-" + element.id);
-    let zoneSelector = "<div class='multiZoneSelToolbar' id='multiZoneSelTools-" + element.id + "'><select class = 'zoneSelect' id='zones-select-" + element.id + "' >";
+    let zoneSelector = "<div class='multiZoneSelToolbar' id='multiZoneSelTools-" + element.id + "'>";
+    zoneSelector += "<input type='button' value = 'Add a zone' class='secondary' id='zones-select-add-" + element.id + "' onClick='document.getElementById(";
+    zoneSelector += '"' + "zones-select-selector-list-panel-" + element.id + '"' + ").style.display = " + '"' + "block" + '"' + ";'>";
+    zoneSelector += "<div class = 'zoneSelectorListPanel' id='zones-select-selector-list-panel-" + element.id + "'>";
+    zoneSelector += "<div class='zoneSelectListHeader'>Select the Zone to add: </div>";
+    zoneSelector += "<div class='zoneSelectList' id = 'zones-select-selector-list-" + element.id + "'>";
     let i, name;
     for (i = 0; i < zonesList.length; i++) {
         if (zonesList[i].name === "") {
@@ -3806,28 +3811,34 @@ function setZonesSelectionData(element, isEditable) {
         } else {
             name = zonesList[i].name;
         }
-        zoneSelector += "<option value='" + zonesList[i].id + "'>" + name + "</option>";
+        zoneSelector += "<button class='menu-button' onClick='addZoneToZonesSelection(";
+        zoneSelector += '"' + element.id + '"' + ", " + '"' + zonesList[i].id + '"' + ");'>" + name + "</button><br>";
     }   
-    zoneSelector += "</select>&nbsp;<a href='#' id='zones-select-add-" + element.id + "' onClick='addZoneToZonesSelection(" + '"' + element.id + '"' + ");' >";
-    zoneSelector += "<img style='vertical-align:top' src='../../../html/css/img/add_icon.png'></a></div>";
+    zoneSelector += "</div>";
+    zoneSelector += "<div class='zoneSelectListFooter'>";
+    zoneSelector += "<input type='button' value = 'Cancel' class='normal' id='zones-select-cancel-" + element.id + "' onClick='document.getElementById(";
+    zoneSelector += '"' + "zones-select-selector-list-panel-" + element.id + '"' + ").style.display = " + '"' + "none" + '"' + ";'>";
+    zoneSelector += "</div></div></div>";
     zoneSelector += "<div class='selected-zone-container' id='selected-zones-" + element.id + "'></div>";
     zoneSelectorContainer.innerHTML = zoneSelector;
     displaySelectedZones(element.id, isEditable);
 }
 
 function updateAllZoneSelect() {
-    let allZoneSelects = document.querySelectorAll(".zoneSelect");
-    let i, j, name, propId;
+    let allZoneSelects = document.querySelectorAll(".zoneSelectList");
+    let i, j, name, propId, btnList;
     for (i = 0; i < allZoneSelects.length; i++) {
-        allZoneSelects[i].options.length = 0;
+        btnList = "";
         for (j = 0; j < zonesList.length; j++) {
             if (zonesList[j].name === "") {
                 name = zonesList[j].id;
             } else {
                 name = zonesList[j].name;
             }
-            allZoneSelects[i].options[j] = new Option(name, zonesList[j].id, false , false);
+            btnList += "<button class='menu-button' onClick='addZoneToZonesSelection(";
+            btnList += '"' + element.id + '"' + ", " + '"' + zonesList[j].id + '"' + ");'>" + name + "</button><br>";            
         }
+        allZoneSelects[i].innerHTML = btnList;
         propId = allZoneSelects[i].id.replace("zones-select-", "");
         if (document.getElementById("multiZoneSelTools-" + propId).style.display === "block") {
             displaySelectedZones(propId, true);

From 1ee65cafccb9167cee2572ee59f4552480805e5c Mon Sep 17 00:00:00 2001
From: Alezia Kurdis <60075796+AleziaKurdis@users.noreply.github.com>
Date: Mon, 21 Jun 2021 22:39:23 -0400
Subject: [PATCH 3/5] Css for HMD compliant Zone Selector

Css for HMD compliant Zone Selector

From 607ed288eb70b3a8e53223b8d881a06d910d45d2 Mon Sep 17 00:00:00 2001
From: Alezia Kurdis <60075796+AleziaKurdis@users.noreply.github.com>
Date: Mon, 21 Jun 2021 22:40:45 -0400
Subject: [PATCH 4/5] HMD compliant Zone Selector

HMD compliant Zone Selector
---
 .../create/entityProperties/html/js/entityProperties.js       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/system/create/entityProperties/html/js/entityProperties.js b/scripts/system/create/entityProperties/html/js/entityProperties.js
index 0136d99cc4..cf2694d5b6 100644
--- a/scripts/system/create/entityProperties/html/js/entityProperties.js
+++ b/scripts/system/create/entityProperties/html/js/entityProperties.js
@@ -3799,7 +3799,7 @@ function createZonesSelection(property, elProperty) {
 function setZonesSelectionData(element, isEditable) {
     let zoneSelectorContainer = document.getElementById("zones-selector-" + element.id);
     let zoneSelector = "<div class='multiZoneSelToolbar' id='multiZoneSelTools-" + element.id + "'>";
-    zoneSelector += "<input type='button' value = 'Add a zone' class='secondary' id='zones-select-add-" + element.id + "' onClick='document.getElementById(";
+    zoneSelector += "<input type='button' value = 'Add a Zone' id='zones-select-add-" + element.id + "' onClick='document.getElementById(";
     zoneSelector += '"' + "zones-select-selector-list-panel-" + element.id + '"' + ").style.display = " + '"' + "block" + '"' + ";'>";
     zoneSelector += "<div class = 'zoneSelectorListPanel' id='zones-select-selector-list-panel-" + element.id + "'>";
     zoneSelector += "<div class='zoneSelectListHeader'>Select the Zone to add: </div>";
@@ -3816,7 +3816,7 @@ function setZonesSelectionData(element, isEditable) {
     }   
     zoneSelector += "</div>";
     zoneSelector += "<div class='zoneSelectListFooter'>";
-    zoneSelector += "<input type='button' value = 'Cancel' class='normal' id='zones-select-cancel-" + element.id + "' onClick='document.getElementById(";
+    zoneSelector += "<input type='button' value = 'Cancel' id='zones-select-cancel-" + element.id + "' onClick='document.getElementById(";
     zoneSelector += '"' + "zones-select-selector-list-panel-" + element.id + '"' + ").style.display = " + '"' + "none" + '"' + ";'>";
     zoneSelector += "</div></div></div>";
     zoneSelector += "<div class='selected-zone-container' id='selected-zones-" + element.id + "'></div>";

From 3638b7357af278e7f46d6034e6cd90ef58d909ff Mon Sep 17 00:00:00 2001
From: Alezia Kurdis <60075796+AleziaKurdis@users.noreply.github.com>
Date: Tue, 22 Jun 2021 22:22:39 -0400
Subject: [PATCH 5/5] Fix Zone Selector loading issue

Fix Zone Selector loading issue
when we navigate between tabs (CREATE - PROPERTIES - GRID - ENTITY LIST)
---
 .../system/create/entityProperties/html/js/entityProperties.js   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scripts/system/create/entityProperties/html/js/entityProperties.js b/scripts/system/create/entityProperties/html/js/entityProperties.js
index cf2694d5b6..253b96998f 100644
--- a/scripts/system/create/entityProperties/html/js/entityProperties.js
+++ b/scripts/system/create/entityProperties/html/js/entityProperties.js
@@ -4511,6 +4511,7 @@ function loaded() {
         });
 
         updateVisibleSpaceModeProperties();
+        requestZoneList();
 
         if (window.EventBridge !== undefined) {
             EventBridge.scriptEventReceived.connect(function(data) {