Merge pull request #14198 from dback2/entityListTypeFilter

Entity list type filter and X to clear search
2025-04-16 09:29:16 +02:00 · 2018-10-24 11:27:50 -07:00 · 2018-10-24 11:27:50 -07:00 · 5729d35c48
commit 5729d35c48
parent fac9188dfb 073040d1fc
3 changed files with 274 additions and 65 deletions
--- a/scripts/system/html/css/edit-style.css
+++ b/scripts/system/html/css/edit-style.css
@ -198,7 +198,7 @@ td.url {
 }


-input[type="text"], input[type="number"], textarea {
+input[type="text"], input[type="search"], input[type="number"], textarea {
    margin: 0;
    padding: 0 12px;
    color: #afafaf;
@ -257,12 +257,22 @@ input[type="text"] {
    width: 100%;
 }

+input[type="search"] {
+    height: 28px;
+    width: 100%;
+}
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    height: 20px;
+    width: 20px;
+    background-image: url('data:image/png;base64,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')
+}
+
 input[type="number"] {
    position: relative;
    height: 28px;
    width: 124px;
 }
-
 input[type=number] {
    padding-right: 3px;
 }
@ -1045,31 +1055,123 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
    padding-top: 9px;
 }

-#search-area {
+#filter-area {
    padding-right: 168px;
    padding-bottom: 24px;
 }

-#filter {
-    width: 98%;
+.multiselect {
+    position: relative;
+}
+.select-box {
+    position: absolute;
+}
+.select-box select {
+    font-family: FiraSans-SemiBold;
+    font-size: 15px;
+    color: #afafaf;
+    background-color: #252525;
+    border: none;
+    height: 28px;
+    width: 107px;
+    text-align-last: center;
+}
+.over-select {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
 }

-#in-view {
+#filter-type-select-box select {
+    border-radius: 14.5px;
+}
+#filter-type-checkboxes {
    position: absolute;
+    z-index: 2;
+    top: 48px;
+    display: none;
+    border: none;
+}
+#filter-type-checkboxes div {
+    position: relative;
+    height: 22px;
+}
+#filter-type-checkboxes span {
+    position: relative;
+    top: 3px;
+    font-family: hifi-glyphs;
+    font-size: 13px;
+    color: #000000;
+    padding-left: 6px;
+    padding-right: 4px;
+}
+#filter-type-checkboxes label {
+    position: absolute;
+    top: -20px;
+    z-index: 2;
+    display: block;
+    font-family: FiraSans-SemiBold;
+    font-size: 11px;
+    color: #000000;
+    background-color: #afafaf;
+    width: 200px;
+    height: 22px;
+    padding-top: 1px;
+}
+#filter-type-checkboxes label:hover {
+    background-color: #1e90ff;
+}
+#filter-type-checkboxes input[type=checkbox] + label {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goSADUOYnF4LQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAIMSURBVFjD7ZmxkqowFIZ/7mwJPen1AezV3t6hFvrQhweAHvrQ8wL2xt4HwD7ppd+tvHOvu0gCYdEZTsmAfpNzzpcTcAB84o3iD94sZuCx4+Pxwvl8dl4JcL1ef84lMQPPwBZDSgkp5XsASylBKUUYhhBCvDbw7XYDpRRKKTRNA8YYOOevC5ymKZRS/13jnHdCTwLMOW8tAc45GGNomuY1gKuq6lxFIQQopdMDXy4X5HmudW8URdMCSynBGNOG3Ww20wHf9dVWl4+wbav7a8CMsW9G+Cm22+1T2F8BzvMc1+u18z5CCJIkseNhKSX2+z2qqjLWl84zhBAURQHXde0A31Oa57nWbqSrLwDwPA9FUcD3fTtb82NKu8QOAHVda+srSRJt2E7gtpQKIXA4HH6csmzpyxj4dDo9TalSCpRS1HX9TV86RujSlxGwlBJpmnY+rJRCGIZ/s2BTX9qnZgBwHAee52mJ/l7nx+PRqr6MVtj3fZRlaVRf/5aGDX0Z17DrusiyrHfqhuqrt9aiKEIcx4OBTfU1aOMIggBlWYIQ0utP+uhr8CyxXC5RFIUxdBAE1srKePgxbcbVamWlnAZNa7rNSAhBlmWv8yLlWTPa0Nco83BbM2ZZZsUIowzwj80YxzEWi8VoB4IPGz9yb0YhBHa73agnGGtHJNd1R4ed9FVV33Awf6ebgd8b+Av9A/rq6s3hjgAAAABJRU5ErkJggg==');
+    background-size: 11px 11px;
+    background-position: top 5px left 14px;
+}
+#filter-type-checkboxes input[type=checkbox]:checked + label {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goSADMveELP9QAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAIqSURBVFjD7ZmxkqowFIb/7GwJPfT6APZib+9QC33o4QGghz70vIC9sfcBsE966bPNWlxnlQTDRWc4JUT4hpPz5SQSAAofFF/4sJiBx47v+wun04m8E+B6vVbzlJiBZ2CLIYRQQgj1EcBCCEUpRRRF4Jyrtwa+Xq+glEJKia7rkKYpGGPqbYHzPFdSyn+uMcZ6oScBZowpzvmje0jTVHVd9x7ATdMoxtjTMZxzUErV5MDn81mVZak1No7jab+wEEKlaaoNGwQBmQz4pq9H8/IeNo5jMmnRpWmKeyP8FZvN5insfwEuy1JdLpfecb7vI8uy3tb2Szelu91ONU1jtP9jjKmmabRgq6qC4zh2VrpbSsuy1FqNdPUFAK7roqoqeJ6ntXH4Mk1pn9gBoG1bbX1lWaYN2wv8KKWcc+z3+z+7LFv6MgY+Ho9PUyqlBKUUbduqe33pGKFPX0bAQgiV53nvj6WUiKIIt2K0qS/tXTMAEELguq6W6H/nOQ6Hg1V9GX1hz/NIXdckCALtB7Vta1VfxnPYcRwURUEeNSGmYaqvwVqL45gkSfIysKm+Xlo4wjAkdV3D9/1BLxmir5d7ieVySaqqMoYOw3CwEV5ufkyLcbVaIUkSq2d1xt2abjH6vo+iKKwfLA5uL58Vow19jdIPPyrGoiisGGGUBv6+GJMkwWKxGO2M+dvGQ36LEZxztd1uRz0Qt7ZFchwHY8NOelQ1NAjm/+lm4M8G/gH2zx33BSr7jAAAAABJRU5ErkJggg==');
+    background-size: 11px 11px;
+    background-position: top 5px left 14px;
+}
+#filter-type-checkboxes input[type=checkbox]:hover + label {
+    background-color: #1e90ff;
+}
+
+#filter-search-and-icon {
+    position: relative;
+    left: 118px;
+    width: calc(100% - 126px);
+}
+
+#filter-in-view {
+    position: absolute;
+    top: 0px;
    right: 126px;
 }

-#radius-and-unit {
+#filter-radius-and-unit {
+    position: relative;
    float: right;
    margin-right: -168px;
-    position: relative;
-    top: -17px;
+    top: -45px;
 }
-#radius-and-unit label {
+#filter-radius-and-unit label {
    margin-left: 2px;
 }
-#radius-and-unit input {
+#filter-radius-and-unit span {
+    position: relative;
+    top: 25px;
+    right: 9px;
+    z-index: 2;
+    font-style: italic;
+}
+#filter-radius-and-unit input {
    width: 120px;
+    border-radius: 14.5px;
+    font-style: italic;
+}
+#filter-radius-and-unit input[type=number]::-webkit-inner-spin-button {
+    display: none;
 }

 #entity-table-scroll {
--- a/scripts/system/html/entityList.html
+++ b/scripts/system/html/entityList.html
@ -30,12 +30,25 @@
            <input type="button" class="red" id="delete" value="Delete" />
        </div>
        <div id="entity-list">
-            <div id="search-area">
-                <span class="icon-input"><input type="text" class="search" id="filter" placeholder="Filter" /><span>Y</span></span>
-                <input type="button" id="in-view" class="glyph" value="&#xe007;" />
-                <div id="radius-and-unit" class="number">
+            <div id="filter-area">
+                <div class="multiselect">
+                    <div class="select-box" id="filter-type-select-box">
+                        <select>
+                            <option id="filter-type-text">All Types</option>
+                        </select>
+                        <div class="over-select"></div>
+                    </div>
+                    <div id="filter-type-checkboxes">
+                        <!-- type options with checkbox, icon, and label are added at runtime in entityList -->
+                    </div>
+                </div>
+                <div id="filter-search-and-icon">
+                    <span class="icon-input"><input type="search" class="search" id="filter-search" placeholder="Search" /><span>Y</span></span>
+                </div>
+                <input type="button" id="filter-in-view" class="glyph" value="&#xe007;" />
+                <div id="filter-radius-and-unit" class="number">
                    <label for="radius">Search radius <span class="unit">m</span></label>
-                    <input type="number" id="radius" value="100" />
+                    <input type="text" id="filter-radius" maxlength="9" value="100" />
                </div>
            </div>
            <div id="entity-table-scroll">
@ -88,9 +101,8 @@
                        </tr>
                    </tbody>
                </table>
-
                <div id="no-entities">
-                    No entities found <span id="no-entities-in-view">in view</span> within a <span id="no-entities-radius">100</span> meter radius. Try moving to a different location and refreshing.
+                    There are no entities to display. Please check your filters or create an entity to begin.
                </div>
            </div>
        </div>
--- a/scripts/system/html/js/entityList.js
+++ b/scripts/system/html/js/entityList.js
@ -23,6 +23,7 @@ const FILTER_IN_VIEW_ATTRIBUTE = "pressed";
 const WINDOW_NONVARIABLE_HEIGHT = 227;
 const NUM_COLUMNS = 12;
 const EMPTY_ENTITY_ID = "0";
+const MAX_LENGTH_RADIUS = 9;
 const DELETE = 46; // Key code for the delete key.
 const KEY_P = 80; // Key code for letter p used for Parenting hotkey.

@ -59,6 +60,30 @@ const COMPARE_DESCENDING = function(a, b) {
    return COMPARE_ASCENDING(b, a);
 };

+const FILTER_TYPES = [
+    "Shape",
+    "Model",
+    "Image",
+    "Light",
+    "Zone",
+    "Web",
+    "Material",
+    "ParticleEffect",
+    "Text",
+];
+
+const ICON_FOR_TYPE = {
+    Shape: "n",
+    Model: "&#xe008;",
+    Image: "&#xe02a;",
+    Light: "p",
+    Zone: "o",
+    Web: "q",
+    Material: "&#xe00b;",
+    ParticleEffect: "&#xe004;",
+    Text: "l",
+};
+
 // List of all entities
 var entities = [];
 // List of all entities, indexed by Entity ID
@ -77,6 +102,7 @@ var entityListContextMenu = null;

 var currentSortColumn = 'type';
 var currentSortOrder = ASCENDING_SORT;
+var typeFilters = [];
 var isFilterInView = false;
 var showExtraInfo = false;

@ -110,9 +136,12 @@ function loaded() {
        elToggleLocked = document.getElementById("locked");
        elToggleVisible = document.getElementById("visible");
        elDelete = document.getElementById("delete");
-        elFilter = document.getElementById("filter");
-        elInView = document.getElementById("in-view")
-        elRadius = document.getElementById("radius");
+        elFilterTypeSelectBox = document.getElementById("filter-type-select-box");
+        elFilterTypeText = document.getElementById("filter-type-text");
+        elFilterTypeCheckboxes = document.getElementById("filter-type-checkboxes");
+        elFilterSearch = document.getElementById("filter-search");
+        elFilterInView = document.getElementById("filter-in-view")
+        elFilterRadius = document.getElementById("filter-radius");
        elExport = document.getElementById("export");
        elPal = document.getElementById("pal");
        elInfoToggle = document.getElementById("info-toggle");
@ -120,9 +149,8 @@ function loaded() {
        elSelectedEntitiesCount = document.getElementById("selected-entities-count");
        elVisibleEntitiesCount = document.getElementById("visible-entities-count");
        elNoEntitiesMessage = document.getElementById("no-entities");
-        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');
        };
@ -132,31 +160,31 @@ function loaded() {
        document.getElementById("entity-url").onclick = function() {
            setSortColumn('url');
        };
-        document.getElementById("entity-locked").onclick = function () {
+        document.getElementById("entity-locked").onclick = function() {
            setSortColumn('locked');
        };
-        document.getElementById("entity-visible").onclick = function () {
+        document.getElementById("entity-visible").onclick = function() {
            setSortColumn('visible');
        };
-        document.getElementById("entity-verticesCount").onclick = function () {
+        document.getElementById("entity-verticesCount").onclick = function() {
            setSortColumn('verticesCount');
        };
-        document.getElementById("entity-texturesCount").onclick = function () {
+        document.getElementById("entity-texturesCount").onclick = function() {
            setSortColumn('texturesCount');
        };
-        document.getElementById("entity-texturesSize").onclick = function () {
+        document.getElementById("entity-texturesSize").onclick = function() {
            setSortColumn('texturesSize');
        };
-        document.getElementById("entity-hasTransparent").onclick = function () {
+        document.getElementById("entity-hasTransparent").onclick = function() {
            setSortColumn('hasTransparent');
        };
-        document.getElementById("entity-isBaked").onclick = function () {
+        document.getElementById("entity-isBaked").onclick = function() {
            setSortColumn('isBaked');
        };
-        document.getElementById("entity-drawCalls").onclick = function () {
+        document.getElementById("entity-drawCalls").onclick = function() {
            setSortColumn('drawCalls');
        };
-        document.getElementById("entity-hasScript").onclick = function () {
+        document.getElementById("entity-hasScript").onclick = function() {
            setSortColumn('hasScript');
        };
        elRefresh.onclick = function() {
@ -177,15 +205,38 @@ function loaded() {
        elDelete.onclick = function() {
            EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' }));
        };
-        elFilter.onkeyup = refreshEntityList;
-        elFilter.onpaste = refreshEntityList;
-        elFilter.onchange = onFilterChange;
-        elFilter.onblur = refreshFooter;
-        elInView.onclick = toggleFilterInView;
-        elRadius.onchange = onRadiusChange;
+        elFilterTypeSelectBox.onclick = onToggleTypeDropdown;
+        elFilterSearch.onkeyup = refreshEntityList;
+        elFilterSearch.onsearch = refreshEntityList;
+        elFilterInView.onclick = toggleFilterInView;
+        elFilterRadius.onkeyup = onRadiusChange;
+        elFilterRadius.onchange = onRadiusChange;
+        elFilterRadius.onclick = onRadiusChange;
        elInfoToggle.onclick = toggleInfo;
        
-        elNoEntitiesInView.style.display = "none";
+        // create filter type dropdown checkboxes with label and icon for each type
+        for (let i = 0; i < FILTER_TYPES.length; ++i) {
+            let type = FILTER_TYPES[i];
+            let typeFilterID = "filter-type-" + type;
+            let elDiv = document.createElement('div');
+            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);
+            elInput.setAttribute("filterType", type);
+            elInput.checked = true; // all types are checked initially
+            toggleTypeFilter(elInput, false); // add all types to the initial types filter
+            elDiv.appendChild(elInput);
+            elLabel.insertBefore(elSpan, elLabel.childNodes[0]);
+            elDiv.appendChild(elLabel);
+            elFilterTypeCheckboxes.appendChild(elDiv);
+            elDiv.onclick = onToggleTypeFilter;
+        }
        
        entityList = new ListView(elEntityTableBody, elEntityTableScroll, elEntityTableHeaderRow,
                                  createRow, updateRow, clearRow, WINDOW_NONVARIABLE_HEIGHT);
@ -396,17 +447,16 @@ function loaded() {
        function refreshEntityList() {
            PROFILE("refresh-entity-list", function() {
                PROFILE("filter", function() {
-                    let searchTerm = elFilter.value.toLowerCase();
-                    if (searchTerm === '') {
-                        visibleEntities = entities.slice(0);
-                    } else {
-                        visibleEntities = entities.filter(function(e) {
-                            return e.name.toLowerCase().indexOf(searchTerm) > -1
-                                || e.type.toLowerCase().indexOf(searchTerm) > -1
-                                || e.fullUrl.toLowerCase().indexOf(searchTerm) > -1
-                                || e.id.toLowerCase().indexOf(searchTerm) > -1;
-                        });
-                    }
+                    let searchTerm = elFilterSearch.value.toLowerCase();
+                    visibleEntities = entities.filter(function(e) {
+                        let type = e.type === "Box" || e.type === "Sphere" ? "Shape" : e.type;
+                        let typeFilter = typeFilters.indexOf(type) > -1;
+                        let searchFilter = searchTerm === '' || (e.name.toLowerCase().indexOf(searchTerm) > -1 ||
+                                                                 e.type.toLowerCase().indexOf(searchTerm) > -1 ||
+                                                                 e.fullUrl.toLowerCase().indexOf(searchTerm) > -1 ||
+                                                                 e.id.toLowerCase().indexOf(searchTerm) > -1);
+                        return typeFilter && searchFilter;
+                    });
                });
                
                PROFILE("sort", function() {
@ -697,29 +747,74 @@ function loaded() {
        function toggleFilterInView() {
            isFilterInView = !isFilterInView;
            if (isFilterInView) {
-                elInView.setAttribute(FILTER_IN_VIEW_ATTRIBUTE, FILTER_IN_VIEW_ATTRIBUTE);
-                elNoEntitiesInView.style.display = "inline";
+                elFilterInView.setAttribute(FILTER_IN_VIEW_ATTRIBUTE, FILTER_IN_VIEW_ATTRIBUTE);
            } else {
-                elInView.removeAttribute(FILTER_IN_VIEW_ATTRIBUTE);
-                elNoEntitiesInView.style.display = "none";
+                elFilterInView.removeAttribute(FILTER_IN_VIEW_ATTRIBUTE);
            }
            EventBridge.emitWebEvent(JSON.stringify({ type: "filterInView", filterInView: isFilterInView }));
            refreshEntities();
        }
        
-        function onFilterChange() {
-            refreshEntityList();
-            entityList.resize();
-        }
-        
        function onRadiusChange() {
-            elRadius.value = Math.max(elRadius.value, 0);
-            elNoEntitiesRadius.firstChild.nodeValue = elRadius.value;
-            elNoEntitiesMessage.style.display = "none";
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'radius', radius: elRadius.value }));
+            elFilterRadius.value = elFilterRadius.value.replace(/[^0-9]/g, '');
+            elFilterRadius.value = Math.max(elFilterRadius.value, 0);
+            EventBridge.emitWebEvent(JSON.stringify({ type: 'radius', radius: elFilterRadius.value }));
            refreshEntities();
        }
-
+        
+        function isTypeDropdownVisible() {
+            return elFilterTypeCheckboxes.style.display === "block";
+        }
+        
+        function toggleTypeDropdown() {
+            elFilterTypeCheckboxes.style.display = isTypeDropdownVisible() ? "none" : "block";
+        }
+        
+        function onToggleTypeDropdown(event) {
+            toggleTypeDropdown();
+            event.stopPropagation();
+        }
+        
+        function toggleTypeFilter(elInput, refresh) {
+            let type = elInput.getAttribute("filterType");
+            let typeChecked = elInput.checked;
+            
+            let typeFilterIndex = typeFilters.indexOf(type);
+            if (!typeChecked && typeFilterIndex > -1) {
+                typeFilters.splice(typeFilterIndex, 1);
+            } else if (typeChecked && typeFilterIndex === -1) {
+                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();
+            }
+        }
+        
+        function onToggleTypeFilter(event) {
+            let elTarget = event.target;
+            if (elTarget instanceof HTMLInputElement) {
+                toggleTypeFilter(elTarget, true);
+            }
+            event.stopPropagation();
+        }
+        
+        function onBodyClick(event) {
+            // if clicking anywhere outside of the type filter dropdown (since click event bubbled up to onBodyClick and  
+            // propagation wasn't stopped by onToggleTypeFilter or onToggleTypeDropdown) and the dropdown is open then close it
+            if (isTypeDropdownVisible()) {
+                toggleTypeDropdown();
+            }
+        }
+        
        function toggleInfo(event) {
            showExtraInfo = !showExtraInfo;
            if (showExtraInfo) {
@ -732,7 +827,7 @@ function loaded() {
            entityList.resize();
            event.stopPropagation();
        }
-
+    
        document.addEventListener("keydown", function (keyDownEvent) {
            if (keyDownEvent.target.nodeName === "INPUT") {
                return;