Mirrors/overte-JulianGro
3
0
Fork 0
mirror of https://github.com/JulianGro/overte.git synced 2025-04-26 16:55:06 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

styling fixes

Browse source
This commit is contained in:
David Back 2018-10-09 12:42:57 -07:00
parent 7aba0a9082
commit 60d102c9bf
2 changed files with 142 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -478,13 +478,11 @@ input[type=checkbox]:checked + label:hover {
box-shadow: none; box-shadow: none;
} }
#properties-list > fieldset#properties-header { #properties-list > fieldset#properties-base {
margin-top: 0px; margin-top: 0px;
padding-bottom: 0px; padding-bottom: 0px;
} }
#properties-list > fieldset > legend { #properties-list > fieldset > legend {
position: relative; position: relative;
display: table; display: table;
@ -896,7 +894,7 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
} }
#properties-list fieldset .two-column { #properties-list fieldset .two-column {
padding-top:21px; padding-top: 21px;
display: flex; display: flex;
} }
@ -917,7 +915,7 @@ tuple, .blue:focus, .tuple .z:focus, .tuple .roll:focus {
font-family: Raleway-Regular; font-family: Raleway-Regular;
font-size: 12px; font-size: 12px;
color: #afafaf; color: #afafaf;
height: 28px; height: 20px;
text-transform: uppercase; text-transform: uppercase;
outline: none; outline: none;
} }
@ -1270,7 +1268,7 @@ th#entity-hasScript {
color: #afafaf; color: #afafaf;
} }
#base #property-type-icon { #properties-base #property-type-icon {
font-family: hifi-glyphs; font-family: hifi-glyphs;
font-size: 31px; font-size: 31px;
color: #00b4ef; color: #00b4ef;
@ -1279,52 +1277,39 @@ th#entity-hasScript {
display: none; display: none;
} }
#base #property-type { #properties-base #property-type {
padding: 5px 24px 5px 0; padding: 5px 24px 5px 0;
border-right: 1px solid #808080; border-right: 1px solid #808080;
width: auto; width: auto;
display: inline-block; display: inline-block;
} }
#base #div-locked { #properties-base #div-property-locked {
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 140px; right: 140px;
} }
#base #div-visible { #properties-base #div-property-visible {
position: absolute; position: absolute;
top: 20px; top: 20px;
right: 20px; right: 20px;
} }
#base .checkbox { #properties-base .checkbox label span {
position: relative;
top: -1px;
}
#base .checkbox:last-child {
padding-left: 24px;
}
#base .checkbox label {
background-position-y: 1px;
}
#base .checkbox label span {
font-family: HiFi-Glyphs; font-family: HiFi-Glyphs;
font-size: 20px; font-size: 20px;
padding-right: 6px; padding-right: 6px;
vertical-align: top; vertical-align: top;
position: relative; position: relative;
top: -4px; top: -2px;
} }
#base input[type=checkbox]:checked + label span { #properties-base input[type=checkbox]:checked + label span {
color: #ffffff; color: #ffffff;
} }
#base + hr { #properties-base + hr {
margin-top: 12px; margin-top: 12px;
} }

139
scripts/system/html/js/entityProperties.js
View file

@ -775,7 +775,7 @@ const GROUPS = [
{ {
label: "Can cast shadow", label: "Can cast shadow",
type: "bool", type: "bool",
propertyName: "castShadow", propertyName: "canCastShadow",
}, },
{ {
label: "Script", label: "Script",
@ -957,12 +957,6 @@ function disableProperties() {
} }
} }
function showElements(els, show) {
for (var i = 0; i < els.length; i++) {
els[i].style.display = (show) ? 'table' : 'none';
}
}
function updateProperty(propertyName, propertyValue) { function updateProperty(propertyName, propertyValue) {
var properties = {}; var properties = {};
let splitPropertyName = propertyName.split('.'); let splitPropertyName = propertyName.split('.');
@ -1688,11 +1682,17 @@ function resetProperties() {
for (let propertyToHide in propertyShowRules) { for (let propertyToHide in propertyShowRules) {
let elPropertyToHide = elPropertyElements[propertyToHide]; let elPropertyToHide = elPropertyElements[propertyToHide];
if (elPropertyToHide) { if (elPropertyToHide) {
let nodeToHide = elPropertyToHide;
if (elPropertyToHide.nodeName !== "DIV") {
let parentNode = elPropertyToHide.parentNode; let parentNode = elPropertyToHide.parentNode;
if (parentNode === undefined && elPropertyToHide instanceof Array) { if (parentNode === undefined && elPropertyToHide instanceof Array) {
parentNode = elPropertyToHide[0].parentNode; parentNode = elPropertyToHide[0].parentNode;
} }
parentNode.style.display = "none"; if (parentNode !== undefined) {
nodeToHide = parentNode;
}
}
nodeToHide.style.display = "none";
} }
} }
} }
@ -1705,13 +1705,13 @@ function loaded() {
GROUPS.forEach(function(group) { GROUPS.forEach(function(group) {
let elGroup; let elGroup;
if (group.addToGroup !== undefined) { if (group.addToGroup !== undefined) {
let fieldset = document.getElementById(group.addToGroup); let fieldset = document.getElementById("properties-" + group.addToGroup);
elGroup = document.createElement('div'); elGroup = document.createElement('div');
fieldset.appendChild(elGroup); fieldset.appendChild(elGroup);
} else { } else {
elGroup = document.createElement('fieldset'); elGroup = document.createElement('fieldset');
elGroup.setAttribute("class", "major"); elGroup.setAttribute("class", "major");
elGroup.setAttribute("id", group.id); elGroup.setAttribute("id", "properties-" + group.id);
elPropertiesList.appendChild(elGroup); elPropertiesList.appendChild(elGroup);
} }
@ -1739,7 +1739,7 @@ function loaded() {
elProperty.setAttribute("class", "sub-section-header"); elProperty.setAttribute("class", "sub-section-header");
} else { } else {
elProperty = document.createElement('div'); elProperty = document.createElement('div');
elProperty.setAttribute("id", "div-" + propertyName); elProperty.setAttribute("id", "div-" + propertyID);
} }
if (group.twoColumn && property.column !== undefined && property.column !== -1) { if (group.twoColumn && property.column !== undefined && property.column !== -1) {
@ -1944,6 +1944,7 @@ function loaded() {
let elInput = document.createElement('select'); let elInput = document.createElement('select');
elInput.setAttribute("id", propertyID); elInput.setAttribute("id", propertyID);
elInput.setAttribute("propertyName", propertyName);
for (let optionKey in property.options) { for (let optionKey in property.options) {
let option = document.createElement('option'); let option = document.createElement('option');
@ -2035,7 +2036,7 @@ function loaded() {
break; break;
} }
case 'buttons': { case 'buttons': {
elProperty.setAttribute("class", "property Text"); elProperty.setAttribute("class", "property text");
let hasLabel = property.label !== undefined; let hasLabel = property.label !== undefined;
if (hasLabel) { if (hasLabel) {
@ -2234,7 +2235,7 @@ function loaded() {
elProperty[0].value = (propertyValue.x * 1 / elProperty[0].getAttribute("multiplier")).toFixed(4); elProperty[0].value = (propertyValue.x * 1 / elProperty[0].getAttribute("multiplier")).toFixed(4);
elProperty[1].value = (propertyValue.y * 1 / elProperty[1].getAttribute("multiplier")).toFixed(4); elProperty[1].value = (propertyValue.y * 1 / elProperty[1].getAttribute("multiplier")).toFixed(4);
if (elProperty[2] !== undefined) { if (elProperty[2] !== undefined) {
elProperty[2].value = (propertyValue.z * 1 / elProperty[1].getAttribute("multiplier")).toFixed(4); elProperty[2].value = (propertyValue.z * 1 / elProperty[2].getAttribute("multiplier")).toFixed(4);
} }
} else if (elProperty.length === 4) { } else if (elProperty.length === 4) {
// color is array of color picker and 3 input numbers // color is array of color picker and 3 input numbers
@ -2262,8 +2263,9 @@ function loaded() {
} else if (elProperty.nodeName === "TEXTAREA") { } else if (elProperty.nodeName === "TEXTAREA") {
elProperty.value = propertyValue; elProperty.value = propertyValue;
setTextareaScrolling(elProperty); setTextareaScrolling(elProperty);
} else if (elProperty.nodeName === "SELECT") { // dropdown } else if (elProperty.nodeName === "DT") { // dropdown
elProperty.value = propertyValue; elProperty.value = propertyValue;
setDropdownText(elProperty);
} else { } else {
elProperty.value = propertyValue; elProperty.value = propertyValue;
} }
@ -2275,11 +2277,17 @@ function loaded() {
let show = String(propertyValue) === String(showIfThisPropertyValue); let show = String(propertyValue) === String(showIfThisPropertyValue);
let elPropertyToShow = elPropertyElements[propertyToShow]; let elPropertyToShow = elPropertyElements[propertyToShow];
if (elPropertyToShow) { if (elPropertyToShow) {
let nodeToShow = elPropertyToShow;
if (elPropertyToShow.nodeName !== "DIV") {
let parentNode = elPropertyToShow.parentNode; let parentNode = elPropertyToShow.parentNode;
if (parentNode === undefined && elPropertyToShow instanceof Array) { if (parentNode === undefined && elPropertyToShow instanceof Array) {
parentNode = elPropertyToShow[0].parentNode; parentNode = elPropertyToShow[0].parentNode;
} }
parentNode.style.display = show ? "block" : "none"; if (parentNode !== undefined) {
nodeToShow = parentNode;
}
}
nodeToShow.style.display = show ? "table" : "none";
} }
} }
} }
@ -2525,6 +2533,107 @@ function loaded() {
curTextAreaElement.addEventListener("mouseup", textareaOnChangeEvent, false); curTextAreaElement.addEventListener("mouseup", textareaOnChangeEvent, false);
} }
// Dropdowns
// For each dropdown the following replacement is created in place of the original dropdown...
// Structure created:
// <dl dropped="true/false">
// <dt name="?" id="?" value="?"><span>display text</span><span>carat</span></dt>
// <dd>
// <ul>
// <li value="??>display text</li>
// <li>...</li>
// </ul>
// </dd>
// </dl>
function setDropdownText(dropdown) {
let lis = dropdown.parentNode.getElementsByTagName("li");
let text = "";
for (let i = 0; i < lis.length; i++) {
if (String(lis[i].getAttribute("value")) === String(dropdown.value)) {
text = lis[i].textContent;
}
}
dropdown.firstChild.textContent = text;
}
function toggleDropdown(event) {
let element = event.target;
if (element.nodeName !== "DT") {
element = element.parentNode;
}
element = element.parentNode;
let isDropped = element.getAttribute("dropped");
element.setAttribute("dropped", isDropped !== "true" ? "true" : "false");
}
function setDropdownValue(event) {
let dt = event.target.parentNode.parentNode.previousSibling;
dt.value = event.target.getAttribute("value");
dt.firstChild.textContent = event.target.textContent;
dt.parentNode.setAttribute("dropped", "false");
let evt = document.createEvent("HTMLEvents");
evt.initEvent("change", true, true);
dt.dispatchEvent(evt);
}
let elDropdowns = document.getElementsByTagName("select");
for (let dropDownIndex = 0; dropDownIndex < elDropdowns.length; ++dropDownIndex) {
let options = elDropdowns[dropDownIndex].getElementsByTagName("option");
let selectedOption = 0;
for (let optionIndex = 0; optionIndex < options.length; ++optionIndex) {
if (options[optionIndex].getAttribute("selected") === "selected") {
selectedOption = optionIndex;
// TODO: Shouldn't there be a break here?
}
}
let div = elDropdowns[dropDownIndex].parentNode;
let dl = document.createElement("dl");
div.appendChild(dl);
let dt = document.createElement("dt");
dt.name = elDropdowns[dropDownIndex].name;
dt.id = elDropdowns[dropDownIndex].id;
dt.addEventListener("click", toggleDropdown, true);
dl.appendChild(dt);
let span = document.createElement("span");
span.setAttribute("value", options[selectedOption].value);
span.textContent = options[selectedOption].firstChild.textContent;
dt.appendChild(span);
let spanCaratDown = document.createElement("span");
spanCaratDown.textContent = "5"; // caratDn
dt.appendChild(spanCaratDown);
let dd = document.createElement("dd");
dl.appendChild(dd);
let ul = document.createElement("ul");
dd.appendChild(ul);
for (let listOptionIndex = 0; listOptionIndex < options.length; ++listOptionIndex) {
let li = document.createElement("li");
li.setAttribute("value", options[listOptionIndex].value);
li.textContent = options[listOptionIndex].firstChild.textContent;
li.addEventListener("click", setDropdownValue);
ul.appendChild(li);
}
let propertyName = elDropdowns[dropDownIndex].getAttribute("propertyName");
elPropertyElements[propertyName] = dt;
dt.addEventListener('change', createEmitTextPropertyUpdateFunction(propertyName));
}
elDropdowns = document.getElementsByTagName("select");
while (elDropdowns.length > 0) {
var el = elDropdowns[0];
el.parentNode.removeChild(el);
elDropdowns = document.getElementsByTagName("select");
}
document.addEventListener("keydown", function (keyDown) { document.addEventListener("keydown", function (keyDown) {
if (keyDown.keyCode === KEY_P && keyDown.ctrlKey) { if (keyDown.keyCode === KEY_P && keyDown.ctrlKey) {
if (keyDown.shiftKey) { if (keyDown.shiftKey) {