Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-09 08:49:05 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

styling fixes, add icon, adjust Types text, click outside to close

Browse source
This commit is contained in:
unknown 2018-10-11 23:04:33 -07:00
parent 4883a60afc
commit 97438a08d9
3 changed files with 165 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1036,38 +1036,74 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
padding-bottom: 24px; padding-bottom: 24px;
} }
#filter-type-multiselect { #filter-area .multiselect {
position: relative; position: relative;
} }
#filter-type-selectBox { #filter-area .selectBox {
position: absolute; position: absolute;
} }
#filter-type-selectBox select { #filter-area .selectBox select {
font-weight: bold; font-family: FiraSans-SemiBold;
font-family: FiraSans-SemiBold; font-size: 15px;
color: #404040; color: #afafaf;
background-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 { #filter-type-checkboxes {
position: absolute; position: absolute;
top: 20px; z-index: 2;
display: none; top: 15px;
border: 1px #dadada solid; 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 { #filter-type-checkboxes label {
display: block; display: block;
font-family: FiraSans-SemiBold; font-family: FiraSans-SemiBold;
color: #404040; color: #404040;
background-color: #afafaf; background-color: #afafaf;
padding: 0 20px;
vertical-align: middle;
} }
#filter-type-checkboxes label:hover { #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 { #filter-search-and-icon {
position: absolute; position: absolute;
left: 100px; left: 120px;
width: 60%; width: calc(100% - 300px);
} }
#filter-in-view { #filter-in-view {
@ -1076,7 +1112,7 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
} }
#filter-radius-and-unit { #filter-radius-and-unit {
position: relative; position: relative;
float: right; float: right;
margin-right: -168px; margin-right: -168px;
top: -17px; top: -17px;

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

@ -31,9 +31,12 @@
</div> </div>
<div id="entity-list"> <div id="entity-list">
<div id="filter-area"> <div id="filter-area">
<div class="filter-type-multiselect"> <div class="multiselect">
<div class="selectBox" id="filter-type-selectBox"> <div class="selectBox" id="filter-type-selectBox">
<select><option>Types...</option></select> <select>
<option id="filter-type-text">All Types</option>
</select>
<div class="overSelect"></div>
</div> </div>
<div id="filter-type-checkboxes"> <div id="filter-type-checkboxes">
<!-- each type checkbox/label is added at runtime in entityList --> <!-- each type checkbox/label is added at runtime in entityList -->

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

@ -60,17 +60,29 @@ const COMPARE_DESCENDING = function(a, b) {
} }
const FILTER_TYPES = [ const FILTER_TYPES = [
"Shape", "Shape",
"Model", "Model",
"Image", "Image",
"Light", "Light",
"Zone", "Zone",
"Web", "Web",
"Material", "Material",
"ParticleEffect", "ParticleEffect",
"Text", "Text",
]; ];
const ICON_FOR_TYPE = {
Shape: "n",
Model: "&#xe008;",
Image: "&#xe02a;",
Light: "p",
Zone: "o",
Web: "q",
Material: "&#xe00b;",
ParticleEffect: "&#xe004;",
Text: "l",
};
// List of all entities // List of all entities
var entities = [] var entities = []
// List of all entities, indexed by Entity ID // List of all entities, indexed by Entity ID
@ -118,8 +130,9 @@ function loaded() {
elToggleLocked = document.getElementById("locked"); elToggleLocked = document.getElementById("locked");
elToggleVisible = document.getElementById("visible"); elToggleVisible = document.getElementById("visible");
elDelete = document.getElementById("delete"); elDelete = document.getElementById("delete");
elFilterTypeSelectBox = document.getElementById("filter-type-selectBox"); elFilterTypeSelectBox = document.getElementById("filter-type-selectBox");
elFilterTypeCheckboxes = document.getElementById("filter-type-checkboxes"); elFilterTypeText = document.getElementById("filter-type-text");
elFilterTypeCheckboxes = document.getElementById("filter-type-checkboxes");
elFilterSearch = document.getElementById("filter-search"); elFilterSearch = document.getElementById("filter-search");
elFilterInView = document.getElementById("filter-in-view") elFilterInView = document.getElementById("filter-in-view")
elFilterRadius = document.getElementById("filter-radius"); elFilterRadius = document.getElementById("filter-radius");
@ -132,6 +145,8 @@ function loaded() {
elNoEntitiesInView = document.getElementById("no-entities-in-view"); elNoEntitiesInView = document.getElementById("no-entities-in-view");
elNoEntitiesRadius = document.getElementById("no-entities-radius"); elNoEntitiesRadius = document.getElementById("no-entities-radius");
document.body.onclick = onBodyClick;
document.getElementById("entity-name").onclick = function() { document.getElementById("entity-name").onclick = function() {
setSortColumn('name'); setSortColumn('name');
}; };
@ -193,26 +208,30 @@ function loaded() {
elFilterInView.onclick = toggleFilterInView; elFilterInView.onclick = toggleFilterInView;
elFilterRadius.onchange = onRadiusChange; elFilterRadius.onchange = onRadiusChange;
elInfoToggle.onclick = toggleInfo; elInfoToggle.onclick = toggleInfo;
// create filter type dropdown checkboxes w/ label for each type // create filter type dropdown checkboxes w/ label for each type
elFilterTypeSelectBox.onclick = toggleTypeDropdown; elFilterTypeSelectBox.onclick = toggleTypeDropdown;
for (let i = 0; i < FILTER_TYPES.length; ++i) { for (let i = 0; i < FILTER_TYPES.length; ++i) {
let type = FILTER_TYPES[i]; let type = FILTER_TYPES[i];
let typeFilterID = "filter-type-" + type; let typeFilterID = "filter-type-" + type;
let elDiv = document.createElement('div'); let elDiv = document.createElement('div');
let elLabel = document.createElement('label'); let elLabel = document.createElement('label');
elLabel.setAttribute("for", typeFilterID); elLabel.setAttribute("for", typeFilterID);
elLabel.innerText = type; elLabel.innerText = type;
let elInput = document.createElement('input'); let elSpan = document.createElement('span');
elInput.setAttribute("type", "checkbox"); elSpan.setAttribute("class", "typeIcon");
elInput.setAttribute("id", typeFilterID); elSpan.innerHTML = ICON_FOR_TYPE[type];
elInput.checked = true; // all types are checked initially let elInput = document.createElement('input');
toggleTypeFilter(type, false); // add all types to the initial type filter elInput.setAttribute("type", "checkbox");
elInput.onclick = onToggleTypeFilter(type); elInput.setAttribute("id", typeFilterID);
elDiv.appendChild(elInput); elInput.checked = true; // all types are checked initially
elDiv.appendChild(elLabel); toggleTypeFilter(type, false); // add all types to the initial type filter
elFilterTypeCheckboxes.appendChild(elDiv); elInput.onclick = onToggleTypeFilter(type);
} elDiv.appendChild(elInput);
elLabel.insertBefore(elSpan, elLabel.childNodes[0]);
elDiv.appendChild(elLabel);
elFilterTypeCheckboxes.appendChild(elDiv);
}
elNoEntitiesInView.style.display = "none"; elNoEntitiesInView.style.display = "none";
@ -336,16 +355,16 @@ function loaded() {
function refreshEntityList() { function refreshEntityList() {
PROFILE("refresh-entity-list", function() { PROFILE("refresh-entity-list", function() {
PROFILE("filter", function() { PROFILE("filter", function() {
let searchTerm = elFilterSearch.value.toLowerCase(); let searchTerm = elFilterSearch.value.toLowerCase();
visibleEntities = entities.filter(function(e) { visibleEntities = entities.filter(function(e) {
let type = e.type === "Box" || e.type === "Sphere" ? "Shape" : e.type; let type = e.type === "Box" || e.type === "Sphere" ? "Shape" : e.type;
let typeFilter = typeFilters.indexOf(type) > -1; let typeFilter = typeFilters.indexOf(type) > -1;
let searchFilter = searchTerm === '' || (e.name.toLowerCase().indexOf(searchTerm) > -1 || let searchFilter = searchTerm === '' || (e.name.toLowerCase().indexOf(searchTerm) > -1 ||
e.type.toLowerCase().indexOf(searchTerm) > -1 || e.type.toLowerCase().indexOf(searchTerm) > -1 ||
e.fullUrl.toLowerCase().indexOf(searchTerm) > -1 || e.fullUrl.toLowerCase().indexOf(searchTerm) > -1 ||
e.id.toLowerCase().indexOf(searchTerm) > -1); e.id.toLowerCase().indexOf(searchTerm) > -1);
return typeFilter && searchFilter; return typeFilter && searchFilter;
}); });
}); });
PROFILE("sort", function() { PROFILE("sort", function() {
@ -644,29 +663,38 @@ function loaded() {
EventBridge.emitWebEvent(JSON.stringify({ type: 'radius', radius: elFilterRadius.value })); EventBridge.emitWebEvent(JSON.stringify({ type: 'radius', radius: elFilterRadius.value }));
refreshEntities(); refreshEntities();
} }
function toggleTypeDropdown() { function toggleTypeDropdown() {
elFilterTypeCheckboxes.style.display = elFilterTypeCheckboxes.style.display === "block" ? "none" : "block"; elFilterTypeCheckboxes.style.display = elFilterTypeCheckboxes.style.display === "block" ? "none" : "block";
} }
function toggleTypeFilter(type, refresh) { function toggleTypeFilter(type, refresh) {
let typeFilterIndex = typeFilters.indexOf(type); let typeFilterIndex = typeFilters.indexOf(type);
if (typeFilterIndex > -1) { if (typeFilterIndex > -1) {
typeFilters.splice(typeFilterIndex, 1); typeFilters.splice(typeFilterIndex, 1);
} else { } else {
typeFilters.push(type); typeFilters.push(type);
} }
if (refresh) {
refreshEntityList(); if (typeFilters.length === 0) {
} elFilterTypeText.innerText = "No Types";
} } else if (typeFilters.length === FILTER_TYPES.length) {
elFilterTypeText.innerText = "All Types";
function onToggleTypeFilter(type) { } else {
return function() { elFilterTypeText.innerText = "Types...";
toggleTypeFilter(type, true); }
};
} if (refresh) {
refreshEntityList();
}
}
function onToggleTypeFilter(type) {
return function() {
toggleTypeFilter(type, true);
};
}
function toggleInfo(event) { function toggleInfo(event) {
showExtraInfo = !showExtraInfo; showExtraInfo = !showExtraInfo;
if (showExtraInfo) { if (showExtraInfo) {
@ -679,7 +707,15 @@ function loaded() {
entityList.resize(); entityList.resize();
event.stopPropagation(); 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) { document.addEventListener("keydown", function (keyDownEvent) {
if (keyDownEvent.target.nodeName === "INPUT") { if (keyDownEvent.target.nodeName === "INPUT") {
return; return;
@ -731,7 +767,7 @@ function loaded() {
refreshSortOrder(); refreshSortOrder();
refreshEntities(); refreshEntities();
}); });
augmentSpinButtons(); augmentSpinButtons();