styling fixes, add icon, adjust Types text, click outside to close

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

@@ -1036,38 +1036,74 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     padding-bottom: 24px;
 }
 
-#filter-type-multiselect {
+#filter-area .multiselect {
     position: relative;
 }
-#filter-type-selectBox {
+#filter-area .selectBox {
     position: absolute;
 }
-#filter-type-selectBox select {
-	font-weight: bold;
+#filter-area .selectBox select {
     font-family: FiraSans-SemiBold;
-	color: #404040;
-	background-color: #afafaf;
+    font-size: 15px;
+    color: #afafaf;
+    background-color: #252525;
+    border: none;
+    height: 28px;
+    width: 107px;
+    text-align-last: center;
+}
+#filter-area .overSelect {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
 }
 #filter-type-checkboxes {
     position: absolute;
-	top: 20px;
+    z-index: 2;
+    top: 15px;
     display: none;
-	border: 1px #dadada solid;
+    border: none;
+}
+#filter-type-checkboxes div {
+    height: 19px;
+}
+#filter-type-checkboxes span {
+    font-family: hifi-glyphs;
+    font-size: 16px;
+    color: #404040;
+    padding: 12px 12px;
+    vertical-align: middle;
 }
 #filter-type-checkboxes label {
     display: block;
     font-family: FiraSans-SemiBold;
     color: #404040;
     background-color: #afafaf;
+    padding: 0 20px;
+    vertical-align: middle;
 }
 #filter-type-checkboxes label:hover {
     background-color: #1e90ff;
 }
+#filter-type-checkboxes input[type=checkbox] {
+    display: block;
+    position: relative;
+    top: 17px;
+    right: -10px;
+}
+#filter-type-checkboxes input[type=checkbox] + label {
+    background-image: none;
+}
+#filter-type-checkboxes input[type=checkbox]:checked + label {
+    background-image: none;
+}
 
 #filter-search-and-icon {
     position: absolute;
-	left: 100px;
-    width: 60%;
+    left: 120px;
+    width: calc(100% - 300px);
 }
 
 #filter-in-view {

scripts/system/html/entityList.html

@@ -31,9 +31,12 @@
         </div>
         <div id="entity-list">
             <div id="filter-area">
-				<div class="filter-type-multiselect">
+				<div class="multiselect">
 					<div class="selectBox" id="filter-type-selectBox">
-						<select><option>Types...</option></select>
+						<select>
+							<option id="filter-type-text">All Types</option>
+						</select>
+						<div class="overSelect"></div>
 					</div>
 					<div id="filter-type-checkboxes">
 						<!-- each type checkbox/label is added at runtime in entityList -->

scripts/system/html/js/entityList.js

@@ -71,6 +71,18 @@ const FILTER_TYPES = [
     "Text",
 ];
 
+const ICON_FOR_TYPE = {
+    Shape: "n",
+    Model: "",
+    Image: "",
+    Light: "p",
+    Zone: "o",
+    Web: "q",
+    Material: "",
+    ParticleEffect: "",
+    Text: "l",
+};
+
 // List of all entities
 var entities = []
 // List of all entities, indexed by Entity ID
@@ -119,6 +131,7 @@ function loaded() {
         elToggleVisible = document.getElementById("visible");
         elDelete = document.getElementById("delete");
         elFilterTypeSelectBox = document.getElementById("filter-type-selectBox");
+        elFilterTypeText = document.getElementById("filter-type-text");
         elFilterTypeCheckboxes = document.getElementById("filter-type-checkboxes");
         elFilterSearch = document.getElementById("filter-search");
         elFilterInView = document.getElementById("filter-in-view")
@@ -132,6 +145,8 @@ function loaded() {
         elNoEntitiesInView = document.getElementById("no-entities-in-view");
         elNoEntitiesRadius = document.getElementById("no-entities-radius");
         
+        document.body.onclick = onBodyClick;
+        
         document.getElementById("entity-name").onclick = function() {
             setSortColumn('name');
         };
@@ -203,6 +218,9 @@ function loaded() {
             let elLabel = document.createElement('label');
             elLabel.setAttribute("for", typeFilterID);
             elLabel.innerText = type;
+            let elSpan = document.createElement('span');
+            elSpan.setAttribute("class", "typeIcon");
+            elSpan.innerHTML = ICON_FOR_TYPE[type];
             let elInput = document.createElement('input');
             elInput.setAttribute("type", "checkbox");
             elInput.setAttribute("id", typeFilterID);
@@ -210,6 +228,7 @@ function loaded() {
             toggleTypeFilter(type, false); // add all types to the initial type filter
             elInput.onclick = onToggleTypeFilter(type);
             elDiv.appendChild(elInput);
+            elLabel.insertBefore(elSpan, elLabel.childNodes[0]);
             elDiv.appendChild(elLabel);
             elFilterTypeCheckboxes.appendChild(elDiv);
         }
@@ -656,6 +675,15 @@ function loaded() {
             } else {
                 typeFilters.push(type);
             }
+            
+            if (typeFilters.length === 0) {
+                elFilterTypeText.innerText = "No Types";
+            } else if (typeFilters.length === FILTER_TYPES.length) {
+                elFilterTypeText.innerText = "All Types";
+            } else {
+                elFilterTypeText.innerText = "Types...";
+            }
+            
             if (refresh) {
                 refreshEntityList();
             }
@@ -680,6 +708,14 @@ function loaded() {
             event.stopPropagation();
         }
         
+        function onBodyClick(event) {
+            let targetNode = event.target;
+            if (!elFilterTypeSelectBox.contains(targetNode) && !elFilterTypeCheckboxes.contains(targetNode) && 
+                elFilterTypeCheckboxes.style.display === "block") {
+                toggleTypeDropdown();
+            }
+        }
+    
         document.addEventListener("keydown", function (keyDownEvent) {
             if (keyDownEvent.target.nodeName === "INPUT") {
                 return;