Mirrors/overte-lubosz
3
0
Fork 0
mirror of https://github.com/lubosz/overte.git synced 2025-04-07 14:22:06 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #14919 from dback2/selectAllClearAll

Browse source 
Case 19930: Entity List - add select/clear all to entity type dropdown
This commit is contained in:
David Back 2019-02-15 10:12:30 -08:00 committed by GitHub
commit af25a7bf6e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 69 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
scripts/system/html/css/edit-style.css
View file

@ -1210,6 +1210,26 @@ div#grid-section, body#entity-list-body {
width: 200px;
padding-top: 1px;
}
#filter-type-options-buttons {
top: -22px;
width: 224px;
z-index: 2;
background-color: #afafaf;
padding-bottom: 6px;
}
#filter-type-options input[type=button] {
position: relative;
left: 16px;
z-index: 3;
height: 23px;
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;

4
scripts/system/html/entityList.html
View file

@ -44,6 +44,10 @@
</div>
<div id="filter-type-options" class="multiselect-options">
<!-- type options with checkbox, icon, and label are added at runtime in entityList -->
<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>
</div>
</div>
<div id="filter-search-and-icon">

58
scripts/system/html/js/entityList.js
View file

@ -188,6 +188,7 @@ let renameTimeout = null;
let renameLastBlur = null;
let renameLastEntityID = null;
let isRenameFieldBeingMoved = false;
let elFilterTypeInputs = {};
let elEntityTable,
elEntityTableHeader,
@ -201,6 +202,9 @@ let elEntityTable,
elFilterTypeMultiselectBox,
elFilterTypeText,
elFilterTypeOptions,
elFilterTypeOptionsButtons,
elFilterTypeSelectAll,
elFilterTypeClearAll,
elFilterSearch,
elFilterInView,
elFilterRadius,
@ -243,6 +247,9 @@ 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");
elFilterInView = document.getElementById("filter-in-view");
elFilterRadius = document.getElementById("filter-radius");
@ -276,6 +283,8 @@ function loaded() {
};
elRefresh.onclick = refreshEntities;
elFilterTypeMultiselectBox.onclick = onToggleTypeDropdown;
elFilterTypeSelectAll.onclick = onSelectAllTypes;
elFilterTypeClearAll.onclick = onClearAllTypes;
elFilterSearch.onkeyup = refreshEntityList;
elFilterSearch.onsearch = refreshEntityList;
elFilterInView.onclick = onToggleFilterInView;
@ -290,13 +299,14 @@ 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");
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 +1075,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 +1100,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 +1111,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