From 46ff3a84057dfd67813809b11f2d023cde5227da Mon Sep 17 00:00:00 2001
From: David Back <davidback@highfidelity.io>
Date: Thu, 14 Feb 2019 10:23:21 -0800
Subject: [PATCH] add select/clear all buttons to entity type dropdown
---
scripts/system/html/css/edit-style.css | 20 ++++++++++
scripts/system/html/entityList.html | 4 ++
scripts/system/html/js/entityList.js | 54 ++++++++++++++++++++------
3 files changed, 66 insertions(+), 12 deletions(-)
diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css
index 6a0e7c8343..e9fa27d997 100644
--- a/scripts/system/html/css/edit-style.css
+++ b/scripts/system/html/css/edit-style.css
@@ -1210,6 +1210,26 @@ div#grid-section, body#entity-list-body {
width: 200px;
padding-top: 1px;
}
+#filter-type-options-buttons {
+ top: -20px;
+ width: 224px;
+ z-index: 2;
+ background-color: #afafaf;
+}
+#filter-type-options input[type=button] {
+ position: relative;
+ top: 5px;
+ left: 15px;
+ z-index: 3;
+ height: 14px;
+ min-width: 60px;
+ font-size: 10px;
+ color: #000;
+ background: linear-gradient(#afafaf 20%, #808080 100%);
+}
+#filter-type-options input[type=button]:enabled:hover {
+ background: linear-gradient(#afafaf 20%, #575757 100%);
+}
#filter-search-and-icon {
position: relative;
diff --git a/scripts/system/html/entityList.html b/scripts/system/html/entityList.html
index f525c84cbc..cfbce3c4d3 100644
--- a/scripts/system/html/entityList.html
+++ b/scripts/system/html/entityList.html
@@ -43,6 +43,10 @@
<div class="over-select"></div>
</div>
<div id="filter-type-options" class="multiselect-options">
+ <div id="filter-type-options-buttons">
+ <input type="button" id="filter-type-select-all" value="Select All"/>
+ <input type="button" id="filter-type-clear-all" value="Clear All"/>
+ </div>
<!-- type options with checkbox, icon, and label are added at runtime in entityList -->
</div>
</div>
diff --git a/scripts/system/html/js/entityList.js b/scripts/system/html/js/entityList.js
index b19873a049..b487be0fd2 100644
--- a/scripts/system/html/js/entityList.js
+++ b/scripts/system/html/js/entityList.js
@@ -188,6 +188,7 @@ let renameTimeout = null;
let renameLastBlur = null;
let renameLastEntityID = null;
let isRenameFieldBeingMoved = false;
+let elFilterTypeInputs = {};
let elEntityTable,
elEntityTableHeader,
@@ -201,6 +202,8 @@ let elEntityTable,
elFilterTypeMultiselectBox,
elFilterTypeText,
elFilterTypeOptions,
+ elFilterTypeSelectAll,
+ elFilterTypeClearAll,
elFilterSearch,
elFilterInView,
elFilterRadius,
@@ -243,6 +246,8 @@ function loaded() {
elFilterTypeMultiselectBox = document.getElementById("filter-type-multiselect-box");
elFilterTypeText = document.getElementById("filter-type-text");
elFilterTypeOptions = document.getElementById("filter-type-options");
+ elFilterTypeSelectAll = document.getElementById('filter-type-select-all');
+ elFilterTypeClearAll = document.getElementById('filter-type-clear-all');
elFilterSearch = document.getElementById("filter-search");
elFilterInView = document.getElementById("filter-in-view");
elFilterRadius = document.getElementById("filter-radius");
@@ -276,6 +281,8 @@ function loaded() {
};
elRefresh.onclick = refreshEntities;
elFilterTypeMultiselectBox.onclick = onToggleTypeDropdown;
+ elFilterTypeSelectAll.onclick = onSelectAllTypes;
+ elFilterTypeClearAll.onclick = onClearAllTypes;
elFilterSearch.onkeyup = refreshEntityList;
elFilterSearch.onsearch = refreshEntityList;
elFilterInView.onclick = onToggleFilterInView;
@@ -297,6 +304,7 @@ function loaded() {
elInput.setAttribute("id", typeFilterID);
elInput.setAttribute("filterType", type);
elInput.checked = true; // all types are checked initially
+ elFilterTypeInputs[type] = elInput;
elDiv.appendChild(elInput);
let elLabel = document.createElement('label');
@@ -1065,7 +1073,21 @@ function loaded() {
event.stopPropagation();
}
- function toggleTypeFilter(elInput, refresh) {
+ function refreshTypeFilter(refreshList) {
+ if (typeFilters.length === 0) {
+ elFilterTypeText.innerText = "No Types";
+ } else if (typeFilters.length === FILTER_TYPES.length) {
+ elFilterTypeText.innerText = "All Types";
+ } else {
+ elFilterTypeText.innerText = "Types...";
+ }
+
+ if (refreshList) {
+ refreshEntityList();
+ }
+ }
+
+ function toggleTypeFilter(elInput, refreshList) {
let type = elInput.getAttribute("filterType");
let typeChecked = elInput.checked;
@@ -1076,17 +1098,7 @@ function loaded() {
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();
- }
+ refreshTypeFilter(refreshList);
}
function onToggleTypeFilter(event) {
@@ -1097,6 +1109,24 @@ function loaded() {
event.stopPropagation();
}
+ function onSelectAllTypes(event) {
+ for (let type in elFilterTypeInputs) {
+ elFilterTypeInputs[type].checked = true;
+ }
+ typeFilters = FILTER_TYPES;
+ refreshTypeFilter(true);
+ event.stopPropagation();
+ }
+
+ function onClearAllTypes(event) {
+ for (let type in elFilterTypeInputs) {
+ elFilterTypeInputs[type].checked = false;
+ }
+ typeFilters = [];
+ refreshTypeFilter(true);
+ event.stopPropagation();
+ }
+
function onBodyClick(event) {
// if clicking anywhere outside of the multiselect dropdowns (since click event bubbled up to onBodyClick and
// propagation wasn't stopped in the toggle type/column callbacks) and the dropdown is open then close it