From 4883a60afc9326c016ef37f617d70c2bca27a13a Mon Sep 17 00:00:00 2001 From: David Back Date: Thu, 11 Oct 2018 18:55:14 -0700 Subject: [PATCH 01/10] entity list type filter WIP - still some style issues --- scripts/system/html/css/edit-style.css | 46 +++++++++-- scripts/system/html/entityList.html | 20 +++-- scripts/system/html/js/entityList.js | 109 +++++++++++++++++++------ 3 files changed, 136 insertions(+), 39 deletions(-) diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index 6c1931932a..fc055174fb 100644 --- a/scripts/system/html/css/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -1031,30 +1031,60 @@ textarea:enabled[scrolling="true"]::-webkit-resizer { position: relative; /* New positioning context. */ } -#search-area { +#filter-area { padding-right: 168px; padding-bottom: 24px; } -#filter { - width: 98%; +#filter-type-multiselect { + position: relative; +} +#filter-type-selectBox { + position: absolute; +} +#filter-type-selectBox select { + font-weight: bold; + font-family: FiraSans-SemiBold; + color: #404040; + background-color: #afafaf; +} +#filter-type-checkboxes { + position: absolute; + top: 20px; + display: none; + border: 1px #dadada solid; +} +#filter-type-checkboxes label { + display: block; + font-family: FiraSans-SemiBold; + color: #404040; + background-color: #afafaf; +} +#filter-type-checkboxes label:hover { + background-color: #1e90ff; } -#in-view { +#filter-search-and-icon { + position: absolute; + left: 100px; + width: 60%; +} + +#filter-in-view { position: absolute; right: 126px; } -#radius-and-unit { +#filter-radius-and-unit { + position: relative; float: right; margin-right: -168px; - position: relative; top: -17px; } -#radius-and-unit label { +#filter-radius-and-unit label { margin-left: 2px; } -#radius-and-unit input { +#filter-radius-and-unit input { width: 120px; } diff --git a/scripts/system/html/entityList.html b/scripts/system/html/entityList.html index 7eed78ecf3..8bcdc37d64 100644 --- a/scripts/system/html/entityList.html +++ b/scripts/system/html/entityList.html @@ -30,12 +30,22 @@
-
- Y - -
+
+
+
+ +
+
+ +
+
+
+ Y +
+ +
- +
diff --git a/scripts/system/html/js/entityList.js b/scripts/system/html/js/entityList.js index fed4dfb632..6b23d703ee 100644 --- a/scripts/system/html/js/entityList.js +++ b/scripts/system/html/js/entityList.js @@ -59,6 +59,18 @@ const COMPARE_DESCENDING = function(a, b) { return COMPARE_ASCENDING(b, a); } +const FILTER_TYPES = [ + "Shape", + "Model", + "Image", + "Light", + "Zone", + "Web", + "Material", + "ParticleEffect", + "Text", +]; + // List of all entities var entities = [] // List of all entities, indexed by Entity ID @@ -72,6 +84,7 @@ var entityList = null; // The ListView var currentSortColumn = 'type'; var currentSortOrder = ASCENDING_SORT; +var typeFilters = []; var isFilterInView = false; var showExtraInfo = false; @@ -105,9 +118,11 @@ 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-selectBox"); + 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"); @@ -171,13 +186,33 @@ 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; + elFilterSearch.onkeyup = refreshEntityList; + elFilterSearch.onpaste = refreshEntityList; + elFilterSearch.onchange = onFilterChange; + elFilterSearch.onblur = refreshFooter; + elFilterInView.onclick = toggleFilterInView; + elFilterRadius.onchange = onRadiusChange; elInfoToggle.onclick = toggleInfo; + + // create filter type dropdown checkboxes w/ label for each type + elFilterTypeSelectBox.onclick = toggleTypeDropdown; + 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 elInput = document.createElement('input'); + 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 + elInput.onclick = onToggleTypeFilter(type); + elDiv.appendChild(elInput); + elDiv.appendChild(elLabel); + elFilterTypeCheckboxes.appendChild(elDiv); + } elNoEntitiesInView.style.display = "none"; @@ -301,17 +336,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() { @@ -588,10 +622,10 @@ function loaded() { function toggleFilterInView() { isFilterInView = !isFilterInView; if (isFilterInView) { - elInView.setAttribute(FILTER_IN_VIEW_ATTRIBUTE, FILTER_IN_VIEW_ATTRIBUTE); + elFilterInView.setAttribute(FILTER_IN_VIEW_ATTRIBUTE, FILTER_IN_VIEW_ATTRIBUTE); elNoEntitiesInView.style.display = "inline"; } else { - elInView.removeAttribute(FILTER_IN_VIEW_ATTRIBUTE); + elFilterInView.removeAttribute(FILTER_IN_VIEW_ATTRIBUTE); elNoEntitiesInView.style.display = "none"; } EventBridge.emitWebEvent(JSON.stringify({ type: "filterInView", filterInView: isFilterInView })); @@ -604,12 +638,34 @@ function loaded() { } function onRadiusChange() { - elRadius.value = Math.max(elRadius.value, 0); - elNoEntitiesRadius.firstChild.nodeValue = elRadius.value; + elFilterRadius.value = Math.max(elFilterRadius.value, 0); + elNoEntitiesRadius.firstChild.nodeValue = elFilterRadius.value; elNoEntitiesMessage.style.display = "none"; - EventBridge.emitWebEvent(JSON.stringify({ type: 'radius', radius: elRadius.value })); + EventBridge.emitWebEvent(JSON.stringify({ type: 'radius', radius: elFilterRadius.value })); refreshEntities(); } + + function toggleTypeDropdown() { + elFilterTypeCheckboxes.style.display = elFilterTypeCheckboxes.style.display === "block" ? "none" : "block"; + } + + function toggleTypeFilter(type, refresh) { + let typeFilterIndex = typeFilters.indexOf(type); + if (typeFilterIndex > -1) { + typeFilters.splice(typeFilterIndex, 1); + } else { + typeFilters.push(type); + } + if (refresh) { + refreshEntityList(); + } + } + + function onToggleTypeFilter(type) { + return function() { + toggleTypeFilter(type, true); + }; + } function toggleInfo(event) { showExtraInfo = !showExtraInfo; @@ -623,7 +679,7 @@ function loaded() { entityList.resize(); event.stopPropagation(); } - + document.addEventListener("keydown", function (keyDownEvent) { if (keyDownEvent.target.nodeName === "INPUT") { return; @@ -675,6 +731,7 @@ function loaded() { refreshSortOrder(); refreshEntities(); }); + augmentSpinButtons(); From 97438a08d931da46505830deaf6529943983ac9d Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 11 Oct 2018 23:04:33 -0700 Subject: [PATCH 02/10] styling fixes, add icon, adjust Types text, click outside to close --- scripts/system/html/css/edit-style.css | 80 ++++++++---- scripts/system/html/entityList.html | 7 +- scripts/system/html/js/entityList.js | 168 +++++++++++++++---------- 3 files changed, 165 insertions(+), 90 deletions(-) diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index fc055174fb..da0d806a41 100644 --- a/scripts/system/html/css/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -1036,38 +1036,74 @@ textarea:enabled[scrolling="true"]::-webkit-resizer { padding-bottom: 24px; } -#filter-type-multiselect { - position: relative; +#filter-area .multiselect { + position: relative; } -#filter-type-selectBox { - position: absolute; +#filter-area .selectBox { + position: absolute; } -#filter-type-selectBox select { - font-weight: bold; - font-family: FiraSans-SemiBold; - color: #404040; - background-color: #afafaf; +#filter-area .selectBox select { + font-family: FiraSans-SemiBold; + font-size: 15px; + color: #afafaf; + background-color: #252525; + border: none; + height: 28px; + width: 107px; + text-align-last: center; +} +#filter-area .overSelect { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; } #filter-type-checkboxes { - position: absolute; - top: 20px; - display: none; - border: 1px #dadada solid; + position: absolute; + z-index: 2; + top: 15px; + display: none; + border: none; +} +#filter-type-checkboxes div { + height: 19px; +} +#filter-type-checkboxes span { + font-family: hifi-glyphs; + font-size: 16px; + color: #404040; + padding: 12px 12px; + vertical-align: middle; } #filter-type-checkboxes label { - display: block; - font-family: FiraSans-SemiBold; - color: #404040; - background-color: #afafaf; + display: block; + font-family: FiraSans-SemiBold; + color: #404040; + background-color: #afafaf; + padding: 0 20px; + vertical-align: middle; } #filter-type-checkboxes label:hover { - background-color: #1e90ff; + background-color: #1e90ff; +} +#filter-type-checkboxes input[type=checkbox] { + display: block; + position: relative; + top: 17px; + right: -10px; +} +#filter-type-checkboxes input[type=checkbox] + label { + background-image: none; +} +#filter-type-checkboxes input[type=checkbox]:checked + label { + background-image: none; } #filter-search-and-icon { - position: absolute; - left: 100px; - width: 60%; + position: absolute; + left: 120px; + width: calc(100% - 300px); } #filter-in-view { @@ -1076,7 +1112,7 @@ textarea:enabled[scrolling="true"]::-webkit-resizer { } #filter-radius-and-unit { - position: relative; + position: relative; float: right; margin-right: -168px; top: -17px; diff --git a/scripts/system/html/entityList.html b/scripts/system/html/entityList.html index 8bcdc37d64..e301f36945 100644 --- a/scripts/system/html/entityList.html +++ b/scripts/system/html/entityList.html @@ -31,9 +31,12 @@
-
+
- + +
diff --git a/scripts/system/html/js/entityList.js b/scripts/system/html/js/entityList.js index 6b23d703ee..8812594408 100644 --- a/scripts/system/html/js/entityList.js +++ b/scripts/system/html/js/entityList.js @@ -60,17 +60,29 @@ const COMPARE_DESCENDING = function(a, b) { } const FILTER_TYPES = [ - "Shape", - "Model", - "Image", - "Light", - "Zone", - "Web", - "Material", - "ParticleEffect", - "Text", + "Shape", + "Model", + "Image", + "Light", + "Zone", + "Web", + "Material", + "ParticleEffect", + "Text", ]; +const ICON_FOR_TYPE = { + Shape: "n", + Model: "", + Image: "", + Light: "p", + Zone: "o", + Web: "q", + Material: "", + ParticleEffect: "", + Text: "l", +}; + // List of all entities var entities = [] // List of all entities, indexed by Entity ID @@ -118,8 +130,9 @@ function loaded() { elToggleLocked = document.getElementById("locked"); elToggleVisible = document.getElementById("visible"); elDelete = document.getElementById("delete"); - elFilterTypeSelectBox = document.getElementById("filter-type-selectBox"); - elFilterTypeCheckboxes = document.getElementById("filter-type-checkboxes"); + elFilterTypeSelectBox = document.getElementById("filter-type-selectBox"); + 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"); @@ -132,6 +145,8 @@ function loaded() { 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'); }; @@ -193,26 +208,30 @@ function loaded() { elFilterInView.onclick = toggleFilterInView; elFilterRadius.onchange = onRadiusChange; elInfoToggle.onclick = toggleInfo; - - // create filter type dropdown checkboxes w/ label for each type - elFilterTypeSelectBox.onclick = toggleTypeDropdown; - 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 elInput = document.createElement('input'); - 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 - elInput.onclick = onToggleTypeFilter(type); - elDiv.appendChild(elInput); - elDiv.appendChild(elLabel); - elFilterTypeCheckboxes.appendChild(elDiv); - } + + // create filter type dropdown checkboxes w/ label for each type + elFilterTypeSelectBox.onclick = toggleTypeDropdown; + 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.checked = true; // all types are checked initially + toggleTypeFilter(type, false); // add all types to the initial type filter + elInput.onclick = onToggleTypeFilter(type); + elDiv.appendChild(elInput); + elLabel.insertBefore(elSpan, elLabel.childNodes[0]); + elDiv.appendChild(elLabel); + elFilterTypeCheckboxes.appendChild(elDiv); + } elNoEntitiesInView.style.display = "none"; @@ -336,16 +355,16 @@ function loaded() { function refreshEntityList() { PROFILE("refresh-entity-list", function() { PROFILE("filter", function() { - 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; - }); + 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() { @@ -644,29 +663,38 @@ function loaded() { EventBridge.emitWebEvent(JSON.stringify({ type: 'radius', radius: elFilterRadius.value })); refreshEntities(); } - - function toggleTypeDropdown() { - elFilterTypeCheckboxes.style.display = elFilterTypeCheckboxes.style.display === "block" ? "none" : "block"; - } - - function toggleTypeFilter(type, refresh) { - let typeFilterIndex = typeFilters.indexOf(type); - if (typeFilterIndex > -1) { - typeFilters.splice(typeFilterIndex, 1); - } else { - typeFilters.push(type); - } - if (refresh) { - refreshEntityList(); - } - } - - function onToggleTypeFilter(type) { - return function() { - toggleTypeFilter(type, true); - }; - } - + + function toggleTypeDropdown() { + elFilterTypeCheckboxes.style.display = elFilterTypeCheckboxes.style.display === "block" ? "none" : "block"; + } + + function toggleTypeFilter(type, refresh) { + let typeFilterIndex = typeFilters.indexOf(type); + if (typeFilterIndex > -1) { + typeFilters.splice(typeFilterIndex, 1); + } else { + 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(type) { + return function() { + toggleTypeFilter(type, true); + }; + } + function toggleInfo(event) { showExtraInfo = !showExtraInfo; if (showExtraInfo) { @@ -679,7 +707,15 @@ 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") { return; @@ -731,7 +767,7 @@ function loaded() { refreshSortOrder(); refreshEntities(); }); - + augmentSpinButtons(); From 6320f9bab7f6a34fde523e9544c75dbd83b0919e Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 12 Oct 2018 11:39:54 -0700 Subject: [PATCH 03/10] tweaks --- scripts/system/html/css/edit-style.css | 26 ++++++++++++++++-------- scripts/system/html/js/entityList.js | 28 +++++++++++++++----------- 2 files changed, 34 insertions(+), 20 deletions(-) diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index da0d806a41..8179b95e35 100644 --- a/scripts/system/html/css/edit-style.css +++ b/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; diff --git a/scripts/system/html/js/entityList.js b/scripts/system/html/js/entityList.js index 8812594408..f780fd0e2e 100644 --- a/scripts/system/html/js/entityList.js +++ b/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") { From a85336044f0201afa66fd287e5d9cdca13a99b1c Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 12 Oct 2018 18:03:47 -0700 Subject: [PATCH 04/10] add X to clear button to filter search --- scripts/system/html/css/edit-style.css | 14 +++++++++++++- scripts/system/html/entityList.html | 2 +- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index 8179b95e35..69fed02099 100644 --- 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,6 +257,18 @@ 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; + border-radius:10px; + background-image: url('data:image/png;base64,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') +} + input[type="number"] { position: relative; height: 28px; diff --git a/scripts/system/html/entityList.html b/scripts/system/html/entityList.html index e301f36945..626402362d 100644 --- a/scripts/system/html/entityList.html +++ b/scripts/system/html/entityList.html @@ -43,7 +43,7 @@
- Y + Y
From 978cd4bb7764cb4bbc017da1164043d0f509d75c Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 12 Oct 2018 18:57:26 -0700 Subject: [PATCH 05/10] styling tweaks, fix X clear search not refreshing --- scripts/system/html/css/edit-style.css | 15 ++++++++------- scripts/system/html/entityList.html | 2 +- scripts/system/html/js/entityList.js | 9 +-------- 3 files changed, 10 insertions(+), 16 deletions(-) diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index 69fed02099..699c27448a 100644 --- a/scripts/system/html/css/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -265,7 +265,6 @@ input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; height: 20px; width: 20px; - border-radius:10px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4goNAQIFbBwsbwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAZfSURBVDgRAVQGq/kAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9PT0YAwMDBgAAAAD8/Pz5+vr67MrKyv0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAA+Pj4KAgICQgAAAE3///9RAQEBFQAAAAD////pAQEBu/39/ab+/v7BxcXF9gAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAADs7OzMEBASIAQEBRAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP8AAACm+/v7cMXFxewAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAPT09OwEBAagBAQEcAQEBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD///8AAAAA2f///2XCwsLDAAAAAAAAAAABAAAAAAAAAAA9PT0KAwMDt////z4AAAAAAAAAAAEBAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEBAcIBAQFJvr6+9gAAAAACAAAAAAAAAAAAAABg////PgEBAQAAAAAAS0tLADg4OAAAAAAAAAAAAP///wADAwMAQEBAACEhIQD///8A////AP7+/j76+vpWAAAAAAAAAAACAAAAAD09PQ8CAgJkAQEBAP///wD///8ACgoKAFhYWAAyMjIAAAAAAAICAgBGRkYAT09PABEREQAAAAAAAAAAAAAAAAACAgJwOjo6EAAAAAAEAAAAAAICAg8BAQExAAAAAAEBAQABAQEAsrKyAAoKCgBaWloA9/f3ABsbGwBISEgAtra2AM7OzgACAgIA////AP///wABAQEuBQUFDgAAAPAEAAAAAPz8/BkEBAQAAQEBAAAAAAAAAAAA+vr6AKioqAALCwsAZWVlAAcHBwC/v78Au7u7AAEBAQD///8AAAAAAAAAAAAAAAABAAAAAAAAAAACAAAAAAQEBOgBAQEAAQEBAAEBAQABAQEAAQEBAPz8/ADT09MADg4OAP39/QDQ0NAA/v7+AP///wAAAAAAAAAAAAEBAQABAQEAAQEBAAAAAAACAAAAAAAAAP8AAAD/AAAAAAAAAAAAAAAAAAAAACkpKQBQUFAAx8fHAObm5gBfX18AFxcXAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAP39/fz+/v7z////AP///wD///8AJycnAGFhYQDc3NwApaWlAJaWlgD29vYAZmZmABQUFAACAgIAAQEBAAEBAQABAQH1AAAA/AAAAAACAAAAAPr6+ukBAQGkAAAAAAAAAAABAQEAQEBAAObm5gCmpqYA+fn5APPz8wCdnZ0A////ACwsLAD///8AAAAAAAAAAAD///+k9vb26QAAAAABAAAAAAAAAAA+Pj4uAgICxgAAAAsAAAAAEBAQAPr6+gD29vYAAAAAAAAAAAABAQEAAgICAP///wD+/v4AAAAAAAAAAPL8/Pw/xMTE0AAAAAACAAAAAAAAAAD5+fnV////nQICAgABAQEA8fHxAPX19QABAQEAAAAAAAAAAAD///8A/v7+AP7+/gAAAAAAAAAAAP7+/p36+vrSAAAAAAAAAAADAAAAAAAAAADl5eX/ICAgwQAAAA////8q////BgEBAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD1/f39mAEBAXrGxsb7AAAAAAAAAAADAAAAAAAAAAAAAAAA4eHh/BgYGLsBAQHDBAQEHAAAACP///8AAQEBAAAAAAAAAAAAAAAA+////7QBAQFu+fn5m8bGxvoAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPz8/Cv7+/iUBAQFMAgICEQICAgD8/PzdAwMDs/j4+OvHx8f5AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8TUnpZ7EwQgAAAABJRU5ErkJggg==') } @@ -1084,11 +1083,13 @@ textarea:enabled[scrolling="true"]::-webkit-resizer { height: 25px; } #filter-type-checkboxes span { + position: relative; + top: 3px; font-family: hifi-glyphs; font-size: 16px; color: #404040; - padding: 12px 12px; - vertical-align: middle; + padding-left: 12px; + padding-right: 12px; } #filter-type-checkboxes label { position: relative; @@ -1098,16 +1099,16 @@ textarea:enabled[scrolling="true"]::-webkit-resizer { font-family: FiraSans-SemiBold; color: #404040; background-color: #afafaf; - padding: 0 20px; - height: 25px; - vertical-align: middle; + padding-top: 1px; + padding-right: 12px; + height: 24px; } #filter-type-checkboxes label:hover { background-color: #1e90ff; } #filter-type-checkboxes input[type=checkbox] { position: relative; - top: 4px; + top: 6px; right: -10px; z-index: 4; display: block; diff --git a/scripts/system/html/entityList.html b/scripts/system/html/entityList.html index 626402362d..06c2be8e73 100644 --- a/scripts/system/html/entityList.html +++ b/scripts/system/html/entityList.html @@ -39,7 +39,7 @@
- +
diff --git a/scripts/system/html/js/entityList.js b/scripts/system/html/js/entityList.js index f780fd0e2e..0f3f27a547 100644 --- a/scripts/system/html/js/entityList.js +++ b/scripts/system/html/js/entityList.js @@ -201,9 +201,7 @@ function loaded() { EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' })); } elFilterSearch.onkeyup = refreshEntityList; - elFilterSearch.onpaste = refreshEntityList; - elFilterSearch.onchange = onFilterChange; - elFilterSearch.onblur = refreshFooter; + elFilterSearch.onsearch = refreshEntityList; elFilterInView.onclick = toggleFilterInView; elFilterRadius.onchange = onRadiusChange; elInfoToggle.onclick = toggleInfo; @@ -650,11 +648,6 @@ function loaded() { refreshEntities(); } - function onFilterChange() { - refreshEntityList(); - entityList.resize(); - } - function onRadiusChange() { elFilterRadius.value = Math.max(elFilterRadius.value, 0); elNoEntitiesRadius.firstChild.nodeValue = elFilterRadius.value; From a2aa63e9ed8ee169cef523c22de24f40abd52a9f Mon Sep 17 00:00:00 2001 From: David Back Date: Tue, 16 Oct 2018 14:28:52 -0700 Subject: [PATCH 06/10] adjust no entities message --- scripts/system/html/entityList.html | 2 +- scripts/system/html/js/entityList.js | 9 --------- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/scripts/system/html/entityList.html b/scripts/system/html/entityList.html index 06c2be8e73..f9b6fbd59b 100644 --- a/scripts/system/html/entityList.html +++ b/scripts/system/html/entityList.html @@ -108,7 +108,7 @@
- No entities found in view within a 100 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.
diff --git a/scripts/system/html/js/entityList.js b/scripts/system/html/js/entityList.js index 0f3f27a547..2b720f614d 100644 --- a/scripts/system/html/js/entityList.js +++ b/scripts/system/html/js/entityList.js @@ -142,8 +142,6 @@ function loaded() { elInfoToggleGlyph = elInfoToggle.firstChild; elFooter = document.getElementById("footer-text"); 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() { @@ -230,8 +228,6 @@ function loaded() { elFilterTypeCheckboxes.appendChild(elDiv); } - elNoEntitiesInView.style.display = "none"; - entityList = new ListView(elEntityTableBody, elEntityTableScroll, elEntityTableHeaderRow, createRow, updateRow, clearRow, WINDOW_NONVARIABLE_HEIGHT); @@ -639,10 +635,8 @@ function loaded() { isFilterInView = !isFilterInView; if (isFilterInView) { elFilterInView.setAttribute(FILTER_IN_VIEW_ATTRIBUTE, FILTER_IN_VIEW_ATTRIBUTE); - elNoEntitiesInView.style.display = "inline"; } else { elFilterInView.removeAttribute(FILTER_IN_VIEW_ATTRIBUTE); - elNoEntitiesInView.style.display = "none"; } EventBridge.emitWebEvent(JSON.stringify({ type: "filterInView", filterInView: isFilterInView })); refreshEntities(); @@ -650,8 +644,6 @@ function loaded() { function onRadiusChange() { elFilterRadius.value = Math.max(elFilterRadius.value, 0); - elNoEntitiesRadius.firstChild.nodeValue = elFilterRadius.value; - elNoEntitiesMessage.style.display = "none"; EventBridge.emitWebEvent(JSON.stringify({ type: 'radius', radius: elFilterRadius.value })); refreshEntities(); } @@ -765,7 +757,6 @@ function loaded() { refreshEntities(); }); - augmentSpinButtons(); // Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked From 9cd3c35cc6858473c012e4f380b7d92f9a4381e1 Mon Sep 17 00:00:00 2001 From: David Back Date: Wed, 17 Oct 2018 18:18:51 -0700 Subject: [PATCH 07/10] style changes and fix hidden top row --- scripts/system/html/css/edit-style.css | 58 ++++++++++++++------------ scripts/system/html/entityList.html | 28 ++++++------- scripts/system/html/js/entityList.js | 7 +++- 3 files changed, 52 insertions(+), 41 deletions(-) diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index 088b0952ae..1b0094cfb7 100644 --- a/scripts/system/html/css/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -273,7 +273,6 @@ input[type="number"] { height: 28px; width: 124px; } - input[type=number] { padding-right: 3px; } @@ -1085,66 +1084,68 @@ textarea:enabled[scrolling="true"]::-webkit-resizer { bottom: 0; } +#filter-type-selectBox select { + border-radius: 14.5px; +} #filter-type-checkboxes { position: absolute; z-index: 2; - top: 28px; + top: 48px; display: none; border: none; } #filter-type-checkboxes div { position: relative; - height: 25px; + height: 22px; } #filter-type-checkboxes span { position: relative; top: 3px; font-family: hifi-glyphs; - font-size: 16px; - color: #404040; - padding-left: 12px; - padding-right: 12px; + font-size: 13px; + color: #000000; + padding-left: 6px; + padding-right: 4px; } #filter-type-checkboxes label { - position: relative; - top: -13px; - z-index: 3; + position: absolute; + top: -20px; + z-index: 2; display: block; font-family: FiraSans-SemiBold; - color: #404040; + font-size: 11px; + color: #000000; background-color: #afafaf; + width: 200px; + height: 22px; padding-top: 1px; - padding-right: 12px; - height: 24px; } #filter-type-checkboxes label:hover { background-color: #1e90ff; } -#filter-type-checkboxes input[type=checkbox] { - position: relative; - top: 6px; - right: -10px; - z-index: 4; - display: block; -} #filter-type-checkboxes input[type=checkbox] + label { - background-image: none; + 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: none; + 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: absolute; - left: 120px; - width: calc(100% - 300px); + position: relative; + left: 118px; + width: calc(100% - 126px); } #filter-in-view { position: absolute; + top: 0px; right: 126px; } @@ -1152,13 +1153,18 @@ textarea:enabled[scrolling="true"]::-webkit-resizer { position: relative; float: right; margin-right: -168px; - top: -17px; + top: -45px; } #filter-radius-and-unit label { margin-left: 2px; } #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 { diff --git a/scripts/system/html/entityList.html b/scripts/system/html/entityList.html index 8371e2cbd7..dc022c9ab9 100644 --- a/scripts/system/html/entityList.html +++ b/scripts/system/html/entityList.html @@ -30,20 +30,20 @@
-
-
- -
-
-
- -
-
-
- Y -
+
+
+ +
+
+
+ +
+
+
+ Y +
diff --git a/scripts/system/html/js/entityList.js b/scripts/system/html/js/entityList.js index 400cdc7dce..66ad08e27c 100644 --- 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. @@ -203,7 +204,11 @@ function loaded() { elFilterSearch.onsearch = refreshEntityList; elFilterInView.onclick = toggleFilterInView; elFilterRadius.onchange = onRadiusChange; - elInfoToggle.onclick = toggleInfo; + elFilterRadius.oninput = function(event) { + if (event.target.value.length > MAX_LENGTH_RADIUS) { + event.target.value = event.target.value.slice(0, MAX_LENGTH_RADIUS); + } + } // create filter type dropdown checkboxes with label and icon for each type elFilterTypeSelectBox.onclick = toggleTypeDropdown; From 9e35af0c4a3ff246d3fe32410c9b67952f22e265 Mon Sep 17 00:00:00 2001 From: David Back Date: Wed, 17 Oct 2018 18:24:09 -0700 Subject: [PATCH 08/10] remove space --- scripts/system/html/entityList.html | 1 - 1 file changed, 1 deletion(-) diff --git a/scripts/system/html/entityList.html b/scripts/system/html/entityList.html index dc022c9ab9..434f8a5f87 100644 --- a/scripts/system/html/entityList.html +++ b/scripts/system/html/entityList.html @@ -100,7 +100,6 @@ -
There are no entities to display. Please check your filters or create an entity to begin.
From ddbe02dd4e9b5993027a86ab72e9a405d80c5056 Mon Sep 17 00:00:00 2001 From: David Back Date: Mon, 22 Oct 2018 11:56:47 -0700 Subject: [PATCH 09/10] CR changes and fix extra info toggle --- scripts/system/html/css/edit-style.css | 15 +++++--- scripts/system/html/entityList.html | 6 ++-- scripts/system/html/js/entityList.js | 48 +++++++++++++------------- 3 files changed, 38 insertions(+), 31 deletions(-) diff --git a/scripts/system/html/css/edit-style.css b/scripts/system/html/css/edit-style.css index 1b0094cfb7..13952c5e38 100644 --- a/scripts/system/html/css/edit-style.css +++ b/scripts/system/html/css/edit-style.css @@ -1063,10 +1063,10 @@ textarea:enabled[scrolling="true"]::-webkit-resizer { .multiselect { position: relative; } -.selectBox { +.select-box { position: absolute; } -.selectBox select { +.select-box select { font-family: FiraSans-SemiBold; font-size: 15px; color: #afafaf; @@ -1076,7 +1076,7 @@ textarea:enabled[scrolling="true"]::-webkit-resizer { width: 107px; text-align-last: center; } -.overSelect { +.over-select { position: absolute; left: 0; right: 0; @@ -1084,7 +1084,7 @@ textarea:enabled[scrolling="true"]::-webkit-resizer { bottom: 0; } -#filter-type-selectBox select { +#filter-type-select-box select { border-radius: 14.5px; } #filter-type-checkboxes { @@ -1158,6 +1158,13 @@ textarea:enabled[scrolling="true"]::-webkit-resizer { #filter-radius-and-unit label { margin-left: 2px; } +#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; diff --git a/scripts/system/html/entityList.html b/scripts/system/html/entityList.html index 434f8a5f87..187aa70347 100644 --- a/scripts/system/html/entityList.html +++ b/scripts/system/html/entityList.html @@ -31,11 +31,11 @@
-
+
-
+
@@ -47,7 +47,7 @@
- +
diff --git a/scripts/system/html/js/entityList.js b/scripts/system/html/js/entityList.js index 66ad08e27c..2d248e48e6 100644 --- a/scripts/system/html/js/entityList.js +++ b/scripts/system/html/js/entityList.js @@ -131,7 +131,7 @@ function loaded() { elToggleLocked = document.getElementById("locked"); elToggleVisible = document.getElementById("visible"); elDelete = document.getElementById("delete"); - elFilterTypeSelectBox = document.getElementById("filter-type-selectBox"); + elFilterTypeSelectBox = document.getElementById("filter-type-select-box"); elFilterTypeText = document.getElementById("filter-type-text"); elFilterTypeCheckboxes = document.getElementById("filter-type-checkboxes"); elFilterSearch = document.getElementById("filter-search"); @@ -155,31 +155,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() { @@ -203,12 +203,9 @@ function loaded() { elFilterSearch.onkeyup = refreshEntityList; elFilterSearch.onsearch = refreshEntityList; elFilterInView.onclick = toggleFilterInView; + elFilterRadius.onkeyup = onRadiusChange; elFilterRadius.onchange = onRadiusChange; - elFilterRadius.oninput = function(event) { - if (event.target.value.length > MAX_LENGTH_RADIUS) { - event.target.value = event.target.value.slice(0, MAX_LENGTH_RADIUS); - } - } + elInfoToggle.onclick = toggleInfo; // create filter type dropdown checkboxes with label and icon for each type elFilterTypeSelectBox.onclick = toggleTypeDropdown; @@ -225,9 +222,10 @@ function loaded() { 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(type, false); // add all types to the initial types filter - elInput.onclick = onToggleTypeFilter(type); + toggleTypeFilter(elInput, false); // add all types to the initial types filter + elInput.onclick = onToggleTypeFilter; elDiv.appendChild(elInput); elLabel.insertBefore(elSpan, elLabel.childNodes[0]); elDiv.appendChild(elLabel); @@ -642,6 +640,7 @@ function loaded() { } function onRadiusChange() { + 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(); @@ -655,11 +654,14 @@ function loaded() { elFilterTypeCheckboxes.style.display = isTypeDropdownVisible() ? "none" : "block"; } - function toggleTypeFilter(type, refresh) { + function toggleTypeFilter(elInput, refresh) { + let type = elInput.getAttribute("filterType"); + let typeChecked = elInput.checked; + let typeFilterIndex = typeFilters.indexOf(type); - if (typeFilterIndex > -1) { + if (!typeChecked && typeFilterIndex > -1) { typeFilters.splice(typeFilterIndex, 1); - } else { + } else if (typeChecked && typeFilterIndex === -1) { typeFilters.push(type); } @@ -676,10 +678,8 @@ function loaded() { } } - function onToggleTypeFilter(type) { - return function() { - toggleTypeFilter(type, true); - }; + function onToggleTypeFilter(event) { + toggleTypeFilter(this, true); } function onBodyClick(event) { From e5caf016818854b7b68be61ab2fde98837145d52 Mon Sep 17 00:00:00 2001 From: David Back Date: Mon, 22 Oct 2018 14:51:54 -0700 Subject: [PATCH 10/10] CR change for body click event --- scripts/system/html/js/entityList.js | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/scripts/system/html/js/entityList.js b/scripts/system/html/js/entityList.js index 2d248e48e6..a4e4c0dcd1 100644 --- a/scripts/system/html/js/entityList.js +++ b/scripts/system/html/js/entityList.js @@ -200,15 +200,16 @@ function loaded() { elDelete.onclick = function() { EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' })); } + elFilterTypeSelectBox.onclick = onToggleTypeDropdown; elFilterSearch.onkeyup = refreshEntityList; elFilterSearch.onsearch = refreshEntityList; elFilterInView.onclick = toggleFilterInView; elFilterRadius.onkeyup = onRadiusChange; elFilterRadius.onchange = onRadiusChange; + elFilterRadius.onclick = onRadiusChange; elInfoToggle.onclick = toggleInfo; // 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]; let typeFilterID = "filter-type-" + type; @@ -225,11 +226,11 @@ function loaded() { elInput.setAttribute("filterType", type); elInput.checked = true; // all types are checked initially toggleTypeFilter(elInput, false); // add all types to the initial types filter - elInput.onclick = onToggleTypeFilter; elDiv.appendChild(elInput); elLabel.insertBefore(elSpan, elLabel.childNodes[0]); elDiv.appendChild(elLabel); elFilterTypeCheckboxes.appendChild(elDiv); + elDiv.onclick = onToggleTypeFilter; } entityList = new ListView(elEntityTableBody, elEntityTableScroll, elEntityTableHeaderRow, @@ -654,6 +655,11 @@ function loaded() { 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; @@ -679,14 +685,17 @@ function loaded() { } function onToggleTypeFilter(event) { - toggleTypeFilter(this, true); + 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 and it's open then close it - let elTarget = event.target; - if (isTypeDropdownVisible() && !elFilterTypeSelectBox.contains(elTarget) && - !elFilterTypeCheckboxes.contains(elTarget)) { + // 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(); } }