mirror of
https://github.com/overte-org/overte.git
synced 2025-08-09 18:42:58 +02:00
tweaks
This commit is contained in:
parent
97438a08d9
commit
6320f9bab7
2 changed files with 34 additions and 20 deletions
|
@ -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;
|
||||||
|
|
|
@ -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") {
|
||||||
|
|
Loading…
Reference in a new issue