Merge pull request #1152 from AleziaKurdis/createAppHighlightAvatarEntities

Create app: highlight avatar entities

scripts/system/create/entityList/entityList.js

@@ -211,7 +211,7 @@ var EntityListTool = function(shouldUseEditTabletApp, selectionManager) {
             PROFILE("getMultipleProperties", function () {
                 var multipleProperties = Entities.getMultipleEntityProperties(ids, ['position', 'name', 'type', 'locked',
                     'visible', 'renderInfo', 'modelURL', 'materialURL', 'imageURL', 'script', 'serverScripts', 
-                    'skybox.url', 'ambientLight.url', 'created', 'lastEdited']);
+                    'skybox.url', 'ambientLight.url', 'created', 'lastEdited', 'entityHostType']);
                 for (var i = 0; i < multipleProperties.length; i++) {
                     var properties = multipleProperties[i];
 
@@ -256,7 +256,8 @@ var EntityListTool = function(shouldUseEditTabletApp, selectionManager) {
                             hasScript: (properties.script !== "" || properties.serverScripts !== ""),
                             parentState: parentState,
                             created: formatToStringDateTime(properties.created),
-                            lastEdited: formatToStringDateTime(properties.lastEdited)
+                            lastEdited: formatToStringDateTime(properties.lastEdited),
+                            entityHostType: properties.entityHostType
                         });
                     }
                 }

scripts/system/create/entityList/html/js/entityList.js

@@ -987,6 +987,7 @@ function loaded() {
                         parentState: entity.parentState,
                         created: entity.created,
                         lastEdited: entity.lastEdited,
+                        entityHostType: entity.entityHostType,
                         elRow: null, // if this entity has a visible row element assigned to it
                         selected: false // if this entity is selected for edit regardless of having a visible row
                     };
@@ -1183,7 +1184,11 @@ function loaded() {
                 if (entity !== undefined) {
                     entity.selected = false;
                     if (entity.elRow) {
-                        entity.elRow.className = "";
+                        if (entity.entityHostType === "avatar") {
+                            entity.elRow.className = "avatarEntity";
+                        } else {
+                            entity.elRow.className = "";
+                        }
                     }
                 }
             });
@@ -1197,9 +1202,17 @@ function loaded() {
                     entity.selected = true;
                     if (entity.elRow) {
                         if (id === lastSelectedEntity) {
-                            entity.elRow.className = "last-selected";
+                            if (entity.entityHostType === "avatar") {
+                                entity.elRow.className = "lastSelAvatarEntity";
+                            } else {
+                                entity.elRow.className = "last-selected";
+                            }
                         } else {
-                            entity.elRow.className = "selected";
+                            if (entity.entityHostType === "avatar") {
+                                entity.elRow.className = "selAvatarEntity";
+                            } else {
+                                entity.elRow.className = "selected";
+                            }
                         }
                     }
                 } else {
@@ -1270,12 +1283,24 @@ function loaded() {
             // if this entity was previously selected flag it's row as selected
             if (itemData.selected) {
                 if (itemData.id === lastSelectedEntity) {
-                    elRow.className = "last-selected";
+                    if (itemData.entityHostType === "avatar") {
+                        elRow.className = "lastSelAvatarEntity";
+                    } else {
+                        elRow.className = "last-selected";
+                    }
                 } else {
-                    elRow.className = "selected";
+                    if (itemData.entityHostType === "avatar") {
+                        elRow.className = "selAvatarEntity";
+                    } else {
+                        elRow.className = "selected";
+                    }
                 }
             } else {
-                elRow.className = "";
+                if (itemData.entityHostType === "avatar") {
+                    elRow.className = "avatarEntity";
+                } else {
+                    elRow.className = "";
+                }
             }
 
             // if this row previously had an associated entity ID that wasn't the new entity ID then clear

scripts/system/create/entityProperties/html/js/entityProperties.js

@@ -15,6 +15,10 @@ var currentTab = "base";
 
 const DEGREES_TO_RADIANS = Math.PI / 180.0;
 
+const ENTITY_HOST_TYPE_COLOR_DOMAIN = "#afafaf";
+const ENTITY_HOST_TYPE_COLOR_AVATAR = "#7fdb98";
+const ENTITY_HOST_TYPE_COLOR_LOCAL = "#f0d769";
+
 const NO_SELECTION = ",";
 
 const PROPERTY_SPACE_MODE = Object.freeze({
@@ -4219,6 +4223,8 @@ function handleEntitySelectionUpdate(selections, isPropertiesToolUpdate) {
 
         disableProperties();
     } else {
+        let entityHostType = selections[0].properties.entityHostType;
+        
         if (!isPropertiesToolUpdate && !hasSelectedEntityChanged && document.hasFocus()) {
             // in case the selection has not changed and we still have focus on the properties page,
             // we will ignore the event.
@@ -4303,9 +4309,31 @@ function handleEntitySelectionUpdate(selections, isPropertiesToolUpdate) {
                             property.elInput.classList.add('multi-diff');
                             property.elInput.value = "";
                         }
+                        if (propertyName === "id") {
+                            property.elInput.style.color = ENTITY_HOST_TYPE_COLOR_DOMAIN;
+                        }
                     } else {
                         property.elInput.classList.remove('multi-diff');
                         property.elInput.value = propertyValue;
+                        if (propertyName === "name" || propertyName === "id") {
+                            if (selections.length === 1) {
+                                switch (entityHostType) {
+                                    case "domain":
+                                        property.elInput.style.color = ENTITY_HOST_TYPE_COLOR_DOMAIN;
+                                        break;
+                                    case "avatar":
+                                        property.elInput.style.color = ENTITY_HOST_TYPE_COLOR_AVATAR;
+                                        break;
+                                    case "local":
+                                        property.elInput.style.color = ENTITY_HOST_TYPE_COLOR_LOCAL;
+                                        break;
+                                    default:
+                                        property.elInput.style.color = ENTITY_HOST_TYPE_COLOR_DOMAIN;
+                                }
+                            } else {
+                                property.elInput.style.color = ENTITY_HOST_TYPE_COLOR_DOMAIN;
+                            }
+                        }
                     }
                     break;
                 }

scripts/system/html/css/edit-style.css

@@ -175,6 +175,28 @@ tr:focus {
     outline: none;
 }
 
+tr.avatarEntity {
+    color: #7fdb98;
+}
+
+tr.selAvatarEntity {
+    color: #000000;
+    background-color: #7fdb98;
+}
+
+tr.selAvatarEntity + tr.selAvatarEntity {
+    border-top: 1px solid #2e2e2e;
+}
+
+tr.lastSelAvatarEntity {
+    color: #000000;
+    background-color: #06c73a;
+}
+
+tr.lastSelAvatarEntity + tr.lastSelAvatarEntity {
+    border-top: 1px solid #2e2e2e;
+}
+
 tr.selected {
     color: #000000;
     background-color: #00b4ef;