Mirrors/overte-JulianGro
3
0
Fork 0
mirror of https://github.com/JulianGro/overte.git synced 2025-04-25 18:55:01 +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

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

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

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

@ -775,7 +775,7 @@ const GROUPS = [
{
label: "Can cast shadow",
type: "bool",
propertyName: "castShadow",
propertyName: "canCastShadow",
},
{
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) {
var properties = {};
let splitPropertyName = propertyName.split('.');
@ -1688,11 +1682,17 @@ function resetProperties() {
for (let propertyToHide in propertyShowRules) {
let elPropertyToHide = elPropertyElements[propertyToHide];
if (elPropertyToHide) {
let parentNode = elPropertyToHide.parentNode;
if (parentNode === undefined && elPropertyToHide instanceof Array) {
parentNode = elPropertyToHide[0].parentNode;
let nodeToHide = elPropertyToHide;
if (elPropertyToHide.nodeName !== "DIV") {
let parentNode = elPropertyToHide.parentNode;
if (parentNode === undefined && elPropertyToHide instanceof Array) {
parentNode = elPropertyToHide[0].parentNode;
}
if (parentNode !== undefined) {
nodeToHide = parentNode;
}
}
parentNode.style.display = "none";
nodeToHide.style.display = "none";
}
}
}
@ -1705,13 +1705,13 @@ function loaded() {
GROUPS.forEach(function(group) {
let elGroup;
if (group.addToGroup !== undefined) {
let fieldset = document.getElementById(group.addToGroup);
let fieldset = document.getElementById("properties-" + group.addToGroup);
elGroup = document.createElement('div');
fieldset.appendChild(elGroup);
} else {
elGroup = document.createElement('fieldset');
elGroup.setAttribute("class", "major");
elGroup.setAttribute("id", group.id);
elGroup.setAttribute("id", "properties-" + group.id);
elPropertiesList.appendChild(elGroup);
}
@ -1739,7 +1739,7 @@ function loaded() {
elProperty.setAttribute("class", "sub-section-header");
} else {
elProperty = document.createElement('div');
elProperty.setAttribute("id", "div-" + propertyName);
elProperty.setAttribute("id", "div-" + propertyID);
}
if (group.twoColumn && property.column !== undefined && property.column !== -1) {
@ -1944,6 +1944,7 @@ function loaded() {
let elInput = document.createElement('select');
elInput.setAttribute("id", propertyID);
elInput.setAttribute("propertyName", propertyName);
for (let optionKey in property.options) {
let option = document.createElement('option');
@ -2035,7 +2036,7 @@ function loaded() {
break;
}
case 'buttons': {
elProperty.setAttribute("class", "property Text");
elProperty.setAttribute("class", "property text");
let hasLabel = property.label !== undefined;
if (hasLabel) {
@ -2234,7 +2235,7 @@ function loaded() {
elProperty[0].value = (propertyValue.x * 1 / elProperty[0].getAttribute("multiplier")).toFixed(4);
elProperty[1].value = (propertyValue.y * 1 / elProperty[1].getAttribute("multiplier")).toFixed(4);
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) {
// color is array of color picker and 3 input numbers
@ -2262,8 +2263,9 @@ function loaded() {
} else if (elProperty.nodeName === "TEXTAREA") {
elProperty.value = propertyValue;
setTextareaScrolling(elProperty);
} else if (elProperty.nodeName === "SELECT") { // dropdown
} else if (elProperty.nodeName === "DT") { // dropdown
elProperty.value = propertyValue;
setDropdownText(elProperty);
} else {
elProperty.value = propertyValue;
}
@ -2275,11 +2277,17 @@ function loaded() {
let show = String(propertyValue) === String(showIfThisPropertyValue);
let elPropertyToShow = elPropertyElements[propertyToShow];
if (elPropertyToShow) {
let parentNode = elPropertyToShow.parentNode;
if (parentNode === undefined && elPropertyToShow instanceof Array) {
parentNode = elPropertyToShow[0].parentNode;
let nodeToShow = elPropertyToShow;
if (elPropertyToShow.nodeName !== "DIV") {
let parentNode = elPropertyToShow.parentNode;
if (parentNode === undefined && elPropertyToShow instanceof Array) {
parentNode = elPropertyToShow[0].parentNode;
}
if (parentNode !== undefined) {
nodeToShow = parentNode;
}
}
parentNode.style.display = show ? "block" : "none";
nodeToShow.style.display = show ? "table" : "none";
}
}
}
@ -2524,6 +2532,107 @@ function loaded() {
event; mouseup is a partial stand-in but doesn't handle resizing if mouse moves outside textarea rectangle. */
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) {
if (keyDown.keyCode === KEY_P && keyDown.ctrlKey) {