CR changes and fix extra info toggle

This commit is contained in:
David Back 2018-10-22 11:56:47 -07:00
parent f5616acba9
commit ddbe02dd4e
3 changed files with 38 additions and 31 deletions

View file

@ -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;

View file

@ -31,11 +31,11 @@
<div id="entity-list">
<div id="filter-area">
<div class="multiselect">
<div class="selectBox" id="filter-type-selectBox">
<div class="select-box" id="filter-type-select-box">
<select>
<option id="filter-type-text">All Types</option>
</select>
<div class="overSelect"></div>
<div class="over-select"></div>
</div>
<div id="filter-type-checkboxes">
<!-- type options with checkbox, icon, and label are added at runtime in entityList -->
@ -47,7 +47,7 @@
<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="filter-radius" value="100" />
<input type="text" id="filter-radius" maxlength="9" value="100" />
</div>
</div>
<div id="entity-table-scroll">

View file

@ -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) {