mirror of
https://github.com/overte-org/overte.git
synced 2025-07-26 08:50:21 +02:00
Merge pull request #4110 from huffman/update-properties-layout
Update properties layout
This commit is contained in:
Brad Hefta-Gaub
commit
28c0cb0c3e
2 changed files with 274 additions and 284 deletions
|
|
@ -181,10 +181,10 @@
|
||||||
elLocked.checked = properties.locked;
|
elLocked.checked = properties.locked;
|
||||||
|
|
||||||
if (properties.locked) {
|
if (properties.locked) {
|
||||||
disableChildren(document.getElementById("properties-table"), 'input');
|
disableChildren(document.getElementById("properties-list"), 'input');
|
||||||
elLocked.removeAttribute('disabled');
|
elLocked.removeAttribute('disabled');
|
||||||
} else {
|
} else {
|
||||||
enableChildren(document.getElementById("properties-table"), 'input');
|
enableChildren(document.getElementById("properties-list"), 'input');
|
||||||
}
|
}
|
||||||
|
|
||||||
elVisible.checked = properties.visible;
|
elVisible.checked = properties.visible;
|
||||||
|
|
@ -231,7 +231,7 @@
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
for (var i = 0; i < elBoxSections.length; i++) {
|
for (var i = 0; i < elBoxSections.length; i++) {
|
||||||
elBoxSections[i].style.display = 'table-row';
|
elBoxSections[i].style.display = 'block';
|
||||||
}
|
}
|
||||||
|
|
||||||
elBoxColorRed.value = properties.color.red;
|
elBoxColorRed.value = properties.color.red;
|
||||||
|
|
@ -245,7 +245,7 @@
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
for (var i = 0; i < elModelSections.length; i++) {
|
for (var i = 0; i < elModelSections.length; i++) {
|
||||||
elModelSections[i].style.display = 'table-row';
|
elModelSections[i].style.display = 'block';
|
||||||
}
|
}
|
||||||
|
|
||||||
elModelURL.value = properties.modelURL;
|
elModelURL.value = properties.modelURL;
|
||||||
|
|
@ -264,7 +264,7 @@
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
for (var i = 0; i < elTextSections.length; i++) {
|
for (var i = 0; i < elTextSections.length; i++) {
|
||||||
elTextSections[i].style.display = 'table-row';
|
elTextSections[i].style.display = 'block';
|
||||||
}
|
}
|
||||||
|
|
||||||
elTextText.value = properties.text;
|
elTextText.value = properties.text;
|
||||||
|
|
@ -283,7 +283,7 @@
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
for (var i = 0; i < elLightSections.length; i++) {
|
for (var i = 0; i < elLightSections.length; i++) {
|
||||||
elLightSections[i].style.display = 'table-row';
|
elLightSections[i].style.display = 'block';
|
||||||
}
|
}
|
||||||
|
|
||||||
elLightDiffuseRed.value = properties.diffuseColor.red;
|
elLightDiffuseRed.value = properties.diffuseColor.red;
|
||||||
|
|
@ -442,117 +442,60 @@
|
||||||
percentage: parseInt(elRescaleDimensionsPct.value),
|
percentage: parseInt(elRescaleDimensionsPct.value),
|
||||||
}));
|
}));
|
||||||
});
|
});
|
||||||
|
|
||||||
var resizing = false;
|
|
||||||
var startX = 0;
|
|
||||||
var originalWidth = 0;
|
|
||||||
var resizeHandleWidth = 10;
|
|
||||||
|
|
||||||
var col1 = document.querySelector("#col-label");
|
|
||||||
|
|
||||||
document.body.addEventListener('mousemove', function(event) {
|
|
||||||
if (resizing) {
|
|
||||||
var dX = event.x - startX;
|
|
||||||
col1.style.width = (originalWidth + dX) + "px";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
document.body.addEventListener('mouseup', function(event) {
|
|
||||||
resizing = false;
|
|
||||||
});
|
|
||||||
document.body.addEventListener('mouseleave', function(event) {
|
|
||||||
resizing = false;
|
|
||||||
});
|
|
||||||
var els = document.querySelectorAll("#properties-table td");
|
|
||||||
for (var i = 0; i < els.length; i++) {
|
|
||||||
var el = els[i];
|
|
||||||
el.addEventListener('mousemove', function(event) {
|
|
||||||
if (!resizing) {
|
|
||||||
var distance = this.offsetWidth - event.offsetX;
|
|
||||||
if (distance < resizeHandleWidth) {
|
|
||||||
document.body.style.cursor = "ew-resize";
|
|
||||||
} else {
|
|
||||||
document.body.style.cursor = "initial";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
el.addEventListener('mousedown', function(event) {
|
|
||||||
var distance = this.offsetWidth - event.offsetX;
|
|
||||||
if (distance < resizeHandleWidth) {
|
|
||||||
startX = event.x;
|
|
||||||
originalWidth = this.offsetWidth;
|
|
||||||
resizing = true;
|
|
||||||
target = this;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body onload='loaded();'>
|
<body class="properties" onload='loaded();'>
|
||||||
<div class="section-header">
|
<div id="properties-list">
|
||||||
<label>Entity Properties</label>
|
<div id="type" class="property">
|
||||||
</div>
|
<div class="label">
|
||||||
<table id="properties-table">
|
<label>Type: </label><span id="property-type"></span>
|
||||||
<colgroup>
|
</div>
|
||||||
<col id="col-label">
|
</div>
|
||||||
<col>
|
<div class="property">
|
||||||
</colgroup>
|
<div class="value">
|
||||||
<tr>
|
|
||||||
<td class="label">
|
|
||||||
ID
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label id="property-id" class="selectable"></label>
|
<label id="property-id" class="selectable"></label>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr>
|
<div class="property">
|
||||||
<td class="label">
|
<div class="label">Locked</div>
|
||||||
Type
|
<div class="value">
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label id="property-type"></label>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td class="label">Locked</td>
|
|
||||||
<td>
|
|
||||||
<input type='checkbox' id="property-locked">
|
<input type='checkbox' id="property-locked">
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
|
||||||
<tr>
|
<div class="property">
|
||||||
<td class="label">Visible</td>
|
<div class="label">Visible</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input type='checkbox' id="property-visible">
|
<input type='checkbox' id="property-visible">
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
|
||||||
<tr>
|
<div class="property">
|
||||||
<td class="label">Position</td>
|
<div class="label">Position</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<div class="input-area">X <input class="coord" type='number' id="property-pos-x"></input></div>
|
<div class="input-area">X <br><input class="coord" type='number' id="property-pos-x"></input></div>
|
||||||
<div class="input-area">Y <input class="coord" type='number' id="property-pos-y"></input></div>
|
<div class="input-area">Y <br><input class="coord" type='number' id="property-pos-y"></input></div>
|
||||||
<div class="input-area">Z <input class="coord" type='number' id="property-pos-z"></input></div>
|
<div class="input-area">Z <br><input class="coord" type='number' id="property-pos-z"></input></div>
|
||||||
<div>
|
<div>
|
||||||
<input type="button" id="move-selection-to-grid" value="Selection to Grid">
|
<input type="button" id="move-selection-to-grid" value="Selection to Grid">
|
||||||
<input type="button" id="move-all-to-grid" value="All to Grid">
|
<input type="button" id="move-all-to-grid" value="All to Grid">
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
|
||||||
<tr>
|
<div class="property">
|
||||||
<td class="label">Registration</td>
|
<div class="label">Registration</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<div class="input-area">X <input class="coord" type='number' id="property-reg-x"></input></div>
|
<div class="input-area">X <input class="coord" type='number' id="property-reg-x"></input></div>
|
||||||
<div class="input-area">Y <input class="coord" type='number' id="property-reg-y"></input></div>
|
<div class="input-area">Y <input class="coord" type='number' id="property-reg-y"></input></div>
|
||||||
<div class="input-area">Z <input class="coord" type='number' id="property-reg-z"></input></div>
|
<div class="input-area">Z <input class="coord" type='number' id="property-reg-z"></input></div>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
|
||||||
<tr>
|
<div class="property">
|
||||||
<td class="label">Dimensions</td>
|
<div class="label">Dimensions</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<div class="input-area">X <input class="coord" type='number' id="property-dim-x"></input></div>
|
<div class="input-area">X <input class="coord" type='number' id="property-dim-x"></input></div>
|
||||||
<div class="input-area">Y <input class="coord" type='number' id="property-dim-y"></input></div>
|
<div class="input-area">Y <input class="coord" type='number' id="property-dim-y"></input></div>
|
||||||
<div class="input-area">Z <input class="coord" type='number' id="property-dim-z"></input></div>
|
<div class="input-area">Z <input class="coord" type='number' id="property-dim-z"></input></div>
|
||||||
|
|
@ -560,248 +503,255 @@
|
||||||
<input type="button" id="reset-to-natural-dimensions" value="Reset to Natural Dimensions">
|
<input type="button" id="reset-to-natural-dimensions" value="Reset to Natural Dimensions">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-area">
|
<div class="input-area">
|
||||||
<input class="coord" type='number' id="dimension-rescale-pct" value=100></input>%
|
<input class="" type='number' id="dimension-rescale-pct" value=100></input>%
|
||||||
</div>
|
</div>
|
||||||
<span>
|
<span>
|
||||||
<input type="button" id="dimension-rescale-button" value="Rescale"></input>
|
<input type="button" id="dimension-rescale-button" value="Rescale"></input>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
|
||||||
<tr>
|
<div class="property">
|
||||||
<td class="label">Rotation</td>
|
<div class="label">Rotation</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<div class="input-area">Pitch <input class="coord" type='number' id="property-rot-x"></input></div>
|
<div class="input-area">Pitch <input class="coord" type='number' id="property-rot-x"></input></div>
|
||||||
<div class="input-area">Yaw <input class="coord" type='number' id="property-rot-y"></input></div>
|
<div class="input-area">Yaw <input class="coord" type='number' id="property-rot-y"></input></div>
|
||||||
<div class="input-area">Roll <input class="coord" type='number' id="property-rot-z"></input></div>
|
<div class="input-area">Roll <input class="coord" type='number' id="property-rot-z"></input></div>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
|
||||||
<tr>
|
<div class="property">
|
||||||
<td class="label">Linear Velocity</td>
|
<div class="label">Linear Velocity</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<div class="input-area">X <input class="coord" type='number' id="property-lvel-x"></input></div>
|
<div class="input-area">X <input class="coord" type='number' id="property-lvel-x"></input></div>
|
||||||
<div class="input-area">Y <input class="coord" type='number' id="property-lvel-y"></input></div>
|
<div class="input-area">Y <input class="coord" type='number' id="property-lvel-y"></input></div>
|
||||||
<div class="input-area">Z <input class="coord" type='number' id="property-lvel-z"></input></div>
|
<div class="input-area">Z <input class="coord" type='number' id="property-lvel-z"></input></div>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr>
|
<div class="property">
|
||||||
<td class="label">Linear Damping</td>
|
<div class="label">Linear Damping</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input class="coord" type='number' id="property-ldamping"></input>
|
<input class="coord" type='number' id="property-ldamping"></input>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr>
|
<div class="property">
|
||||||
<td class="label">Angular Velocity</td>
|
<div class="label">Angular Velocity</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<div class="input-area">Pitch <input class="coord" type='number' id="property-avel-x"></input></div>
|
<div class="input-area">Pitch <input class="coord" type='number' id="property-avel-x"></input></div>
|
||||||
<div class="input-area">Yaw <input class="coord" type='number' id="property-avel-y"></input></div>
|
<div class="input-area">Yaw <input class="coord" type='number' id="property-avel-y"></input></div>
|
||||||
<div class="input-area">Roll <input class="coord" type='number' id="property-avel-z"></input></div>
|
<div class="input-area">Roll <input class="coord" type='number' id="property-avel-z"></input></div>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr>
|
<div class="property">
|
||||||
<td class="label">Angular Damping</td>
|
<div class="label">Angular Damping</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input class="coord" type='number' id="property-adamping"></input>
|
<input class="coord" type='number' id="property-adamping"></input>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
|
||||||
<tr>
|
<div class="property">
|
||||||
<td class="label">Gravity</td>
|
<div class="label">Gravity</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<div class="input-area">X <input class="coord" type='number' id="property-grav-x"></input></div>
|
<div class="input-area">X <input class="coord" type='number' id="property-grav-x"></input></div>
|
||||||
<div class="input-area">Y <input class="coord" type='number' id="property-grav-y"></input></div>
|
<div class="input-area">Y <input class="coord" type='number' id="property-grav-y"></input></div>
|
||||||
<div class="input-area">Z <input class="coord" type='number' id="property-grav-z"></input></div>
|
<div class="input-area">Z <input class="coord" type='number' id="property-grav-z"></input></div>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
|
||||||
<tr>
|
<div class="property">
|
||||||
<td class="label">Density</td>
|
<div class="label">Mass</div>
|
||||||
<td>
|
<div class="value">
|
||||||
|
<input type='number' id="property-mass"></input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="label">Density</div>
|
||||||
|
<div>
|
||||||
<input type='number' id="property-density"></input>
|
<input type='number' id="property-density"></input>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
|
||||||
<tr>
|
<div class="property">
|
||||||
<td class="label">Ignore For Collisions</td>
|
<div class="label">Ignore For Collisions</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input type='checkbox' id="property-ignore-for-collisions"></input>
|
<input type='checkbox' id="property-ignore-for-collisions"></input>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
|
||||||
<tr>
|
<div class="property">
|
||||||
<td class="label">Collisions Will Move</td>
|
<div class="label">Collisions Will Move</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input type='checkbox' id="property-collisions-will-move"></input>
|
<input type='checkbox' id="property-collisions-will-move"></input>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
|
||||||
<tr>
|
<div class="property">
|
||||||
<td class="label">Lifetime</td>
|
<div class="label">Lifetime</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input type='number' id="property-lifetime"></input>
|
<input type='number' id="property-lifetime"></input>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
|
||||||
<tr>
|
<div class="property">
|
||||||
<td class="label">Script URL</td>
|
<div class="label">Script URL</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input id="property-script-url" class="url"></input>
|
<input id="property-script-url" class="url"></input>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<tr class="box-section">
|
<div class="box-section property">
|
||||||
<td class="label">Color</td>
|
<div class="label">Color</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<div class="input-area">R <input class="coord" type='number' id="property-box-red"></input></div>
|
<div class="input-area">R <input class="coord" type='number' id="property-box-red"></input></div>
|
||||||
<div class="input-area">G <input class="coord" type='number' id="property-box-green"></input></div>
|
<div class="input-area">G <input class="coord" type='number' id="property-box-green"></input></div>
|
||||||
<div class="input-area">B <input class="coord" type='number' id="property-box-blue"></input></div>
|
<div class="input-area">B <input class="coord" type='number' id="property-box-blue"></input></div>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<tr class="model-section">
|
<div class="model-section property">
|
||||||
<td class="label">Model URL</td>
|
<div class="label">Model URL</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input type="text" id="property-model-url" class="url"></input>
|
<input type="text" id="property-model-url" class="url"></input>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="model-section">
|
<div class="model-section property">
|
||||||
<td class="label">Animation URL</td>
|
<div class="label">Animation URL</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input type="text" id="property-model-animation-url" class="url"></input>
|
<input type="text" id="property-model-animation-url" class="url"></input>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="model-section">
|
<div class="model-section property">
|
||||||
<td class="label">Animation Playing</td>
|
<div class="label">Animation Playing</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input type='checkbox' id="property-model-animation-playing">
|
<input type='checkbox' id="property-model-animation-playing">
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="model-section">
|
<div class="model-section property">
|
||||||
<td class="label">Animation FPS</td>
|
<div class="label">Animation FPS</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input class="coord" type='number' id="property-model-animation-fps"></input>
|
<input class="coord" type='number' id="property-model-animation-fps"></input>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="model-section">
|
<div class="model-section property">
|
||||||
<td class="label">Animation Frame</td>
|
<div class="label">Animation Frame</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input class="coord" type='number' id="property-model-animation-frame"></input>
|
<input class="coord" type='number' id="property-model-animation-frame"></input>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="model-section">
|
<div class="model-section property">
|
||||||
<td class="label">Animation Settings</td>
|
<div class="label">Animation Settings</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<textarea id="property-model-animation-settings" value='asdfasdf'></textarea>
|
<textarea id="property-model-animation-settings" value='asdfasdf'></textarea>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="model-section">
|
<div class="model-section property">
|
||||||
<td class="label">Textures</td>
|
<div class="label">Textures</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<textarea id="property-model-textures" value='asdfasdf'></textarea>
|
<textarea id="property-model-textures" value='asdfasdf'></textarea>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="model-section">
|
<div class="model-section property">
|
||||||
<td class="label">Original Textures</td>
|
<div class="label">Original Textures</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<textarea id="property-model-original-textures" readonly value='asdfasdf'></textarea>
|
<textarea id="property-model-original-textures" readonly value='asdfasdf'></textarea>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<tr class="text-section">
|
<div class="text-section property">
|
||||||
<td class="label">Text</td>
|
<div class="label">Text</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input type="text" id="property-text-text"></input>
|
<input type="text" id="property-text-text"></input>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="text-section">
|
<div class="text-section property">
|
||||||
<td class="label">Line Height</td>
|
<div class="label">Line Height</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input class="coord" type='number' id="property-text-line-height"></input>
|
<input class="coord" type='number' id="property-text-line-height"></input>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="text-section">
|
<div class="text-section property">
|
||||||
<td class="label">Text Color</td>
|
<div class="label">Text Color</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<div class="input-area">R <input class="coord" type='number' id="property-text-text-color-red"></input></div>
|
<div class="input-area">R <input class="coord" type='number' id="property-text-text-color-red"></input></div>
|
||||||
<div class="input-area">G <input class="coord" type='number' id="property-text-text-color-green"></input></div>
|
<div class="input-area">G <input class="coord" type='number' id="property-text-text-color-green"></input></div>
|
||||||
<div class="input-area">B <input class="coord" type='number' id="property-text-text-color-blue"></input></div>
|
<div class="input-area">B <input class="coord" type='number' id="property-text-text-color-blue"></input></div>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="text-section">
|
<div class="text-section property">
|
||||||
<td class="label">Background Color</td>
|
<div class="label">Background Color</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<div class="input-area">R <input class="coord" type='number' id="property-text-background-color-red"></input></div>
|
<div class="input-area">R <input class="coord" type='number' id="property-text-background-color-red"></input></div>
|
||||||
<div class="input-area">G <input class="coord" type='number' id="property-text-background-color-green"></input></div>
|
<div class="input-area">G <input class="coord" type='number' id="property-text-background-color-green"></input></div>
|
||||||
<div class="input-area">B <input class="coord" type='number' id="property-text-background-color-blue"></input></div>
|
<div class="input-area">B <input class="coord" type='number' id="property-text-background-color-blue"></input></div>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
|
||||||
<tr class="light-section">
|
<div class="light-section property">
|
||||||
<td class="label">Spot Light</td>
|
<div class="label">Spot Light</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input type='checkbox' id="property-light-spot-light">
|
<input type='checkbox' id="property-light-spot-light">
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="light-section">
|
<div class="light-section property">
|
||||||
<td class="label">Diffuse</td>
|
<div class="label">Diffuse</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<div class="input-area">R <input class="coord" type='number' id="property-light-diffuse-red"></input></div>
|
<div class="input-area">R <input class="coord" type='number' id="property-light-diffuse-red"></input></div>
|
||||||
<div class="input-area">G <input class="coord" type='number' id="property-light-diffuse-green"></input></div>
|
<div class="input-area">G <input class="coord" type='number' id="property-light-diffuse-green"></input></div>
|
||||||
<div class="input-area">B <input class="coord" type='number' id="property-light-diffuse-blue"></input></div>
|
<div class="input-area">B <input class="coord" type='number' id="property-light-diffuse-blue"></input></div>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="light-section">
|
<div class="light-section property">
|
||||||
<td class="label">Ambient</td>
|
<div class="label">Ambient</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<div class="input-area">R <input class="coord" type='number' id="property-light-ambient-red"></input></div>
|
<div class="input-area">R <input class="coord" type='number' id="property-light-ambient-red"></input></div>
|
||||||
<div class="input-area">G <input class="coord" type='number' id="property-light-ambient-green"></input></div>
|
<div class="input-area">G <input class="coord" type='number' id="property-light-ambient-green"></input></div>
|
||||||
<div class="input-area">B <input class="coord" type='number' id="property-light-ambient-blue"></input></div>
|
<div class="input-area">B <input class="coord" type='number' id="property-light-ambient-blue"></input></div>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="light-section">
|
<div class="light-section property">
|
||||||
<td class="label">Specular</td>
|
<div class="label">Specular</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<div class="input-area">R <input class="coord" type='number' id="property-light-specular-red"></input></div>
|
<div class="input-area">R <input class="coord" type='number' id="property-light-specular-red"></input></div>
|
||||||
<div class="input-area">G <input class="coord" type='number' id="property-light-specular-green"></input></div>
|
<div class="input-area">G <input class="coord" type='number' id="property-light-specular-green"></input></div>
|
||||||
<div class="input-area">B <input class="coord" type='number' id="property-light-specular-blue"></input></div>
|
<div class="input-area">B <input class="coord" type='number' id="property-light-specular-blue"></input></div>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="light-section">
|
<div class="light-section property">
|
||||||
<td class="label">Constant Attenuation</td>
|
<div class="label">Constant Attenuation</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input class="coord" type='number' id="property-light-constant-attenuation"></input>
|
<input class="coord" type='number' id="property-light-constant-attenuation"></input>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="light-section">
|
<div class="light-section property">
|
||||||
<td class="label">Linear Attenuation</td>
|
<div class="label">Linear Attenuation</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input class="coord" type='number' id="property-light-linear-attenuation"></input>
|
<input class="coord" type='number' id="property-light-linear-attenuation"></input>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="light-section">
|
<div class="light-section property">
|
||||||
<td class="label">Quadratic Attenuation</td>
|
<div class="label">Quadratic Attenuation</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input class="coord" type='number' id="property-light-quadratic-attenuation"></input>
|
<input class="coord" type='number' id="property-light-quadratic-attenuation"></input>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="light-section">
|
<div class="light-section property">
|
||||||
<td class="label">Exponent</td>
|
<div class="label">Exponent</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input class="coord" type='number' id="property-light-exponent"></input>
|
<input class="coord" type='number' id="property-light-exponent"></input>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
<tr class="light-section">
|
<div class="light-section property">
|
||||||
<td class="label">Cutoff (degrees)</td>
|
<div class="label">Cutoff (degrees)</div>
|
||||||
<td>
|
<div class="value">
|
||||||
<input class="coord" type='number' id="property-light-cutoff"></input>
|
<input class="coord" type='number' id="property-light-cutoff"></input>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
</table>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -6,8 +6,8 @@ body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
background-color: #efefef;
|
background-color: #efefef;
|
||||||
font-family: Sans-Serif;
|
font-family: Arial;
|
||||||
font-size: 12px;
|
font-size: 11.5px;
|
||||||
|
|
||||||
-webkit-touch-callout: none;
|
-webkit-touch-callout: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
|
|
@ -17,6 +17,12 @@ body {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body.properties {
|
||||||
|
background-color: rgb(76, 76, 76);
|
||||||
|
color: rgb(204, 204, 204);
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
.selectable {
|
.selectable {
|
||||||
-webkit-touch-callout: text;
|
-webkit-touch-callout: text;
|
||||||
-webkit-user-select: text;
|
-webkit-user-select: text;
|
||||||
|
|
@ -85,12 +91,10 @@ input[type=button] {
|
||||||
border: 0;
|
border: 0;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin: 0 2px;
|
|
||||||
margin-top: 5px;
|
|
||||||
font-size: .9em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea, input {
|
textarea, input {
|
||||||
|
margin: 0;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
border: 1px solid #999;
|
border: 1px solid #999;
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
|
|
@ -105,10 +109,15 @@ input.url {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input.coord {
|
||||||
|
width: 7em;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
table#entity-table {
|
table#entity-table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
font-family: Sans-Serif;
|
font-family: Sans-Serif;
|
||||||
font-size: 12px;
|
/* font-size: 12px; */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -145,31 +154,62 @@ th#entity-url {
|
||||||
|
|
||||||
div.input-area {
|
div.input-area {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#type {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#type label {
|
||||||
|
color: rgb(150, 150, 150);
|
||||||
|
}
|
||||||
|
|
||||||
|
#properties-list input, #properties-list textarea {
|
||||||
|
background-color: rgb(102, 102, 102);
|
||||||
|
color: rgb(204, 204, 204);
|
||||||
|
border: none;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#properties-list input[type=button] {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: rgb(51, 102, 102);
|
||||||
|
border-color: #608e96;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border: 0;
|
||||||
|
color: rgb(204, 204, 204);
|
||||||
|
}
|
||||||
|
|
||||||
|
#properties-list .property {
|
||||||
|
padding: 8px 8px;
|
||||||
|
border-top: 1px solid rgb(63, 63, 63);
|
||||||
|
min-height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
table#properties-table {
|
table#properties-list {
|
||||||
border: none;
|
border: none;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #efefef;
|
background-color: #efefef;
|
||||||
font-family: Arial;
|
font-family: Arial;
|
||||||
font-size: 12px;
|
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
#properties-table tr {
|
#properties-list > div {
|
||||||
|
margin: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#properties-list {
|
||||||
border-bottom: 1px solid #e5e5e5;
|
border-bottom: 1px solid #e5e5e5;
|
||||||
}
|
}
|
||||||
|
|
||||||
#properties-table td.label {
|
#properties-list .label {
|
||||||
padding-right: 10px;
|
|
||||||
border-right: 1px solid #999;
|
|
||||||
text-align: right;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -179,8 +219,8 @@ table#properties-table {
|
||||||
height: 1.2em;
|
height: 1.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#properties-table td {
|
#properties-list .value > div{
|
||||||
padding: 5px;
|
padding: 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
col#col-label {
|
col#col-label {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue