tweaks

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

@@ -1036,13 +1036,13 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     padding-bottom: 24px;
 }
 
-#filter-area .multiselect {
+.multiselect {
     position: relative;
 }
-#filter-area .selectBox {
+.selectBox {
     position: absolute;
 }
-#filter-area .selectBox select {
+.selectBox select {
     font-family: FiraSans-SemiBold;
     font-size: 15px;
     color: #afafaf;
@@ -1052,22 +1052,24 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     width: 107px;
     text-align-last: center;
 }
-#filter-area .overSelect {
+.overSelect {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
 }
+
 #filter-type-checkboxes {
     position: absolute;
     z-index: 2;
-    top: 15px;
+    top: 28px;
     display: none;
     border: none;
 }
 #filter-type-checkboxes div {
-    height: 19px;
+    position: relative;
+    height: 25px;
 }
 #filter-type-checkboxes span {
     font-family: hifi-glyphs;
@@ -1077,21 +1079,26 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     vertical-align: middle;
 }
 #filter-type-checkboxes label {
+    position: relative;
+    top: -13px;
+    z-index: 3;
     display: block;
     font-family: FiraSans-SemiBold;
     color: #404040;
     background-color: #afafaf;
     padding: 0 20px;
+    height: 25px;
     vertical-align: middle;
 }
 #filter-type-checkboxes label:hover {
     background-color: #1e90ff;
 }
 #filter-type-checkboxes input[type=checkbox] {
-    display: block;
     position: relative;
-    top: 17px;
+    top: 4px;
     right: -10px;
+    z-index: 4;
+    display: block;
 }
 #filter-type-checkboxes input[type=checkbox] + label {
     background-image: none;
@@ -1099,6 +1106,9 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
 #filter-type-checkboxes input[type=checkbox]:checked + label {
     background-image: none;
 }
+#filter-type-checkboxes input[type=checkbox]:hover + label {
+    background-color: #1e90ff;
+}
 
 #filter-search-and-icon {
     position: absolute;

scripts/system/html/js/entityList.js

@@ -146,7 +146,6 @@ function loaded() {
         elNoEntitiesRadius = document.getElementById("no-entities-radius");
         
         document.body.onclick = onBodyClick;
-        
         document.getElementById("entity-name").onclick = function() {
             setSortColumn('name');
         };
@@ -209,7 +208,7 @@ function loaded() {
         elFilterRadius.onchange = onRadiusChange;
         elInfoToggle.onclick = toggleInfo;
         
-        // create filter type dropdown checkboxes w/ label for each type
+        // create filter type dropdown checkboxes with label and icon for each type
         elFilterTypeSelectBox.onclick = toggleTypeDropdown;
         for (let i = 0; i < FILTER_TYPES.length; ++i) {
             let type = FILTER_TYPES[i];
@@ -225,7 +224,7 @@ function loaded() {
             elInput.setAttribute("type", "checkbox");
             elInput.setAttribute("id", typeFilterID);
             elInput.checked = true; // all types are checked initially
-            toggleTypeFilter(type, false); // add all types to the initial type filter
+            toggleTypeFilter(type, false); // add all types to the initial types filter
             elInput.onclick = onToggleTypeFilter(type);
             elDiv.appendChild(elInput);
             elLabel.insertBefore(elSpan, elLabel.childNodes[0]);
@@ -664,8 +663,12 @@ function loaded() {
             refreshEntities();
         }
         
+        function isTypeDropdownVisible() {
+            return elFilterTypeCheckboxes.style.display === "block";
+        }
+        
         function toggleTypeDropdown() {
-            elFilterTypeCheckboxes.style.display = elFilterTypeCheckboxes.style.display === "block" ? "none" : "block";
+            elFilterTypeCheckboxes.style.display = isTypeDropdownVisible() ? "none" : "block";
         }
         
         function toggleTypeFilter(type, refresh) {
@@ -695,6 +698,15 @@ function loaded() {
             };
         }
         
+        function onBodyClick(event) {
+            // if clicking anywhere outside of the type filter dropdown and it's open then close it
+            let elTarget = event.target;
+            if (isTypeDropdownVisible() && !elFilterTypeSelectBox.contains(elTarget) && 
+                                           !elFilterTypeCheckboxes.contains(elTarget)) {
+                toggleTypeDropdown();
+            }
+        }
+        
         function toggleInfo(event) {
             showExtraInfo = !showExtraInfo;
             if (showExtraInfo) {
@@ -707,14 +719,6 @@ function loaded() {
             entityList.resize();
             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") {