From 46ff3a84057dfd67813809b11f2d023cde5227da Mon Sep 17 00:00:00 2001 From: David Back Date: Thu, 14 Feb 2019 10:23:21 -0800 Subject: [PATCH 1/3] 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 @@
+
+ + +
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 From f6baa2432ab7870f689b2b4d6fd5339ef938b792 Mon Sep 17 00:00:00 2001 From: David Back Date: Thu, 14 Feb 2019 17:27:05 -0800 Subject: [PATCH 2/3] design feedback --- scripts/system/html/css/edit-style.css | 6 +++--- scripts/system/html/entityList.html | 2 +- scripts/system/html/js/entityList.js | 4 +++- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index e9fa27d997..6870f18721 100644 --- a/scripts/system/html/css/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -1215,13 +1215,13 @@ div#grid-section, body#entity-list-body { width: 224px; z-index: 2; background-color: #afafaf; + padding-bottom: 2px; } #filter-type-options input[type=button] { position: relative; - top: 5px; - left: 15px; + left: 16px; z-index: 3; - height: 14px; + height: 19px; min-width: 60px; font-size: 10px; color: #000; diff --git a/scripts/system/html/entityList.html b/scripts/system/html/entityList.html index cfbce3c4d3..986e5c09b0 100644 --- a/scripts/system/html/entityList.html +++ b/scripts/system/html/entityList.html @@ -43,11 +43,11 @@
+
-
diff --git a/scripts/system/html/js/entityList.js b/scripts/system/html/js/entityList.js index b487be0fd2..8482591771 100644 --- a/scripts/system/html/js/entityList.js +++ b/scripts/system/html/js/entityList.js @@ -202,6 +202,7 @@ let elEntityTable, elFilterTypeMultiselectBox, elFilterTypeText, elFilterTypeOptions, + elFilterTypeOptionsButtons, elFilterTypeSelectAll, elFilterTypeClearAll, elFilterSearch, @@ -246,6 +247,7 @@ function loaded() { elFilterTypeMultiselectBox = document.getElementById("filter-type-multiselect-box"); elFilterTypeText = document.getElementById("filter-type-text"); elFilterTypeOptions = document.getElementById("filter-type-options"); + elFilterTypeOptionsButtons = document.getElementById("filter-type-options-buttons"); elFilterTypeSelectAll = document.getElementById('filter-type-select-all'); elFilterTypeClearAll = document.getElementById('filter-type-clear-all'); elFilterSearch = document.getElementById("filter-search"); @@ -297,7 +299,7 @@ function loaded() { let elDiv = document.createElement('div'); elDiv.onclick = onToggleTypeFilter; - elFilterTypeOptions.appendChild(elDiv); + elFilterTypeOptions.insertBefore(elDiv, elFilterTypeOptionsButtons); let elInput = document.createElement('input'); elInput.setAttribute("type", "checkbox"); From e944e284a6afeea9ca80a0734cd6eefcaf84f21d Mon Sep 17 00:00:00 2001 From: David Back Date: Thu, 14 Feb 2019 17:37:58 -0800 Subject: [PATCH 3/3] design feedback --- scripts/system/html/css/edit-style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index 6870f18721..926eeaeeb3 100644 --- a/scripts/system/html/css/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -1211,17 +1211,17 @@ div#grid-section, body#entity-list-body { padding-top: 1px; } #filter-type-options-buttons { - top: -20px; + top: -22px; width: 224px; z-index: 2; background-color: #afafaf; - padding-bottom: 2px; + padding-bottom: 6px; } #filter-type-options input[type=button] { position: relative; left: 16px; z-index: 3; - height: 19px; + height: 23px; min-width: 60px; font-size: 10px; color: #000;