Add buttons to entities list that toggle locked and visible

examples/edit.js

@@ -1194,6 +1194,30 @@ function deleteSelectedEntities() {
     }
 }
 
+function toggleSelectedEntitiesLocked() {
+    if (SelectionManager.hasSelection()) {
+        var locked = !Entities.getEntityProperties(SelectionManager.selections[0], ["locked"]).locked;
+        for (var i = 0; i < selectionManager.selections.length; i++) {
+            var entityID = SelectionManager.selections[i];
+            Entities.editEntity(entityID, { locked: locked });
+        }
+        entityListTool.sendUpdate();
+        selectionManager._update();
+    }
+}
+
+function toggleSelectedEntitiesVisible() {
+    if (SelectionManager.hasSelection()) {
+        var visible = !Entities.getEntityProperties(SelectionManager.selections[0], ["visible"]).visible;
+        for (var i = 0; i < selectionManager.selections.length; i++) {
+            var entityID = SelectionManager.selections[i];
+            Entities.editEntity(entityID, { visible: visible });
+        }
+        entityListTool.sendUpdate();
+        selectionManager._update();
+    }
+}
+
 function handeMenuEvent(menuItem) {
     if (menuItem == "Allow Selecting of Small Models") {
         allowSmallModels = Menu.isOptionChecked("Allow Selecting of Small Models");

examples/html/edit-style.css

@@ -304,7 +304,7 @@ input[type=button] {
     height: 28px;
     min-width: 120px;
     padding: 0px 18px;
-    margin-right: 7px;
+    margin-right: 6px;
     border-radius: 5px;
     border: none;
     color: #fff;
@@ -534,7 +534,7 @@ hr {
     float: left;
 }
 .property .number + .number {
-    margin-left: 14px;
+    margin-left: 10px;
 }
 
 .text label, .url label, .number label, .textarea label, .rgb label, .xyz label, .pyr label, .dropdown label, .gen label {
@@ -697,14 +697,14 @@ div.refresh input[type="button"] {
 .tuple div {
     display: inline-block;
     position: relative;
-    margin-right: 7px;
+    margin-right: 6px;
 }
 .tuple div:last-child {
     margin-right: 0;
 }
 
 .tuple label {
-    margin-right: -7px;
+    margin-right: -6px;
 }
 
 .rgb .tuple input {
@@ -765,7 +765,7 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
 .row .property {
     width: auto;
     display: inline-block;
-    margin-right: 7px;
+    margin-right: 6px;
 }
 .row .property:last-child {
     margin-right: 0;
@@ -824,6 +824,27 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     margin-bottom: 36px;
 }
 
+#entity-list-header div {
+    display: inline-block;
+    width: 65px;
+    margin-right: 6px;
+}
+
+#entity-list-header div input:first-child {
+    margin-right: 0;
+    float: left;
+    width: 33px;
+    border-right: 1px solid #808080;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+#entity-list-header div input:last-child {
+    margin-right: 0;
+    float: right;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
 #delete {
     float: right;
     margin-right: 0;
@@ -1045,11 +1066,15 @@ input#property-parent-id {
 
 input#dimension-rescale-button {
     min-width: 50px;
-    margin-left: 7px;
+    margin-left: 6px;
 }
 input#reset-to-natural-dimensions {
     margin-right: 0;
 }
+input#preview-camera-button {
+    margin-left: 1px;
+    margin-right: 0;
+}
 
 #animation-fps {
     margin-top: 48px;

examples/html/entityList.html

@@ -39,6 +39,8 @@
               elEntityTable = document.getElementById("entity-table");
               elEntityTableBody = document.getElementById("entity-table-body");
               elRefresh = document.getElementById("refresh");
+              elToggleLocked = document.getElementById("locked");
+              elToggleVisible = document.getElementById("visible");
               elDelete = document.getElementById("delete");
               elTeleport = document.getElementById("teleport");
               elRadius = document.getElementById("radius");
@@ -212,7 +214,13 @@
               elRefresh.onclick = function() {
                   refreshEntities();
               }
-              elTeleport.onclick = function() {
+              elToggleLocked.onclick = function () {
+                  EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleLocked' }));
+              }
+              elToggleVisible.onclick = function () {
+                  EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleVisible' }));
+              }
+              elTeleport.onclick = function () {
                   EventBridge.emitWebEvent(JSON.stringify({ type: 'teleport' }));
               }
               elDelete.onclick = function() {
@@ -297,6 +305,10 @@
 <body onload='loaded();'>
     <div id="entity-list-header">
         <input type="button" class="glyph" id="refresh" value="F" />
+        <div>
+            <input type="button" id="locked" class="glyph" value="&#xe006;" />
+            <input type="button" id="visible" class="glyph" value="&#xe007;" />
+        </div>
         <input type="button" id="teleport" value="Jump To Selection" />
         <input type="button" class="red" id="delete" value="Delete" />
     </div>

examples/libraries/entityList.js

@@ -101,6 +101,10 @@ EntityListTool = function(opts) {
             }
         } else if (data.type == "delete") {
             deleteSelectedEntities();
+        } else if (data.type == "toggleLocked") {
+            toggleSelectedEntitiesLocked();
+        } else if (data.type == "toggleVisible") {
+            toggleSelectedEntitiesVisible();
         } else if (data.type === "radius") {
             searchRadius = data.radius;
             that.sendUpdate();

interface/resources/qml/ToolWindow.qml

@@ -30,7 +30,7 @@ Window {
     title: "Edit"
     property alias tabView: tabView
     implicitWidth: 520; implicitHeight: 695
-    minSize: Qt.vector2d(452, 500)
+    minSize: Qt.vector2d(456, 500)
 
     HifiConstants { id: hifi }