This commit is contained in:
unknown 2018-10-12 11:39:54 -07:00
parent 97438a08d9
commit 6320f9bab7
2 changed files with 34 additions and 20 deletions

View file

@ -1036,13 +1036,13 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
padding-bottom: 24px; padding-bottom: 24px;
} }
#filter-area .multiselect { .multiselect {
position: relative; position: relative;
} }
#filter-area .selectBox { .selectBox {
position: absolute; position: absolute;
} }
#filter-area .selectBox select { .selectBox select {
font-family: FiraSans-SemiBold; font-family: FiraSans-SemiBold;
font-size: 15px; font-size: 15px;
color: #afafaf; color: #afafaf;
@ -1052,22 +1052,24 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
width: 107px; width: 107px;
text-align-last: center; text-align-last: center;
} }
#filter-area .overSelect { .overSelect {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
} }
#filter-type-checkboxes { #filter-type-checkboxes {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: 15px; top: 28px;
display: none; display: none;
border: none; border: none;
} }
#filter-type-checkboxes div { #filter-type-checkboxes div {
height: 19px; position: relative;
height: 25px;
} }
#filter-type-checkboxes span { #filter-type-checkboxes span {
font-family: hifi-glyphs; font-family: hifi-glyphs;
@ -1077,21 +1079,26 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
vertical-align: middle; vertical-align: middle;
} }
#filter-type-checkboxes label { #filter-type-checkboxes label {
position: relative;
top: -13px;
z-index: 3;
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; padding: 0 20px;
height: 25px;
vertical-align: middle; 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] { #filter-type-checkboxes input[type=checkbox] {
display: block;
position: relative; position: relative;
top: 17px; top: 4px;
right: -10px; right: -10px;
z-index: 4;
display: block;
} }
#filter-type-checkboxes input[type=checkbox] + label { #filter-type-checkboxes input[type=checkbox] + label {
background-image: none; background-image: none;
@ -1099,6 +1106,9 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
#filter-type-checkboxes input[type=checkbox]:checked + label { #filter-type-checkboxes input[type=checkbox]:checked + label {
background-image: none; background-image: none;
} }
#filter-type-checkboxes input[type=checkbox]:hover + label {
background-color: #1e90ff;
}
#filter-search-and-icon { #filter-search-and-icon {
position: absolute; position: absolute;

View file

@ -146,7 +146,6 @@ function loaded() {
elNoEntitiesRadius = document.getElementById("no-entities-radius"); elNoEntitiesRadius = document.getElementById("no-entities-radius");
document.body.onclick = onBodyClick; document.body.onclick = onBodyClick;
document.getElementById("entity-name").onclick = function() { document.getElementById("entity-name").onclick = function() {
setSortColumn('name'); setSortColumn('name');
}; };
@ -209,7 +208,7 @@ function loaded() {
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 with label and icon 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];
@ -225,7 +224,7 @@ function loaded() {
elInput.setAttribute("type", "checkbox"); elInput.setAttribute("type", "checkbox");
elInput.setAttribute("id", typeFilterID); elInput.setAttribute("id", typeFilterID);
elInput.checked = true; // all types are checked initially 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); elInput.onclick = onToggleTypeFilter(type);
elDiv.appendChild(elInput); elDiv.appendChild(elInput);
elLabel.insertBefore(elSpan, elLabel.childNodes[0]); elLabel.insertBefore(elSpan, elLabel.childNodes[0]);
@ -664,8 +663,12 @@ function loaded() {
refreshEntities(); refreshEntities();
} }
function isTypeDropdownVisible() {
return elFilterTypeCheckboxes.style.display === "block";
}
function toggleTypeDropdown() { function toggleTypeDropdown() {
elFilterTypeCheckboxes.style.display = elFilterTypeCheckboxes.style.display === "block" ? "none" : "block"; elFilterTypeCheckboxes.style.display = isTypeDropdownVisible() ? "none" : "block";
} }
function toggleTypeFilter(type, refresh) { 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) { function toggleInfo(event) {
showExtraInfo = !showExtraInfo; showExtraInfo = !showExtraInfo;
if (showExtraInfo) { if (showExtraInfo) {
@ -707,14 +719,6 @@ 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") {