mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-08-04 08:24:47 +02:00
Style entity property headings
This commit is contained in:
David Rowe
parent
f85b7696b3
commit
b7fa9d5f8d
2 changed files with 140 additions and 86 deletions
|
|
@ -346,12 +346,59 @@ input[type=checkbox]:checked + label:hover {
|
|||
border: 1.5pt solid black;
|
||||
}
|
||||
|
||||
|
||||
.section-header, .sub-section-header {
|
||||
padding: 0 0 0 0;
|
||||
position: relative;
|
||||
margin: 22px -12px 0 -12px;
|
||||
padding: 14px 12px 0 12px;
|
||||
font-size: 12px;
|
||||
color: #afafaf;
|
||||
height: 28px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAqCAIAAAAbNW1vAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAmSURBVChTY1BFAgzhSIDBAQmMcoYHRwIJMCgjAQZ9JMBgBQdWVgBh5XmBV5A2FQAAAABJRU5ErkJggg==) repeat-x top left;
|
||||
}
|
||||
|
||||
.sub-section-header, .no-collapse {
|
||||
background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAjSURBVBhXY1RVVf3PgARYjIyMoEwIYHRwcEBRwQSloYCBAQCwjgPMiI7W2QAAAABJRU5ErkJggg==) repeat-x top left;
|
||||
}
|
||||
|
||||
.section-header:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
background: none;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sub-section-header {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.section-header span {
|
||||
font-family: HiFi-Glyphs;
|
||||
float: right;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.text-section[collapsed="true"] ~ .text-section,
|
||||
.zone-section[collapsed="true"] ~ .zone-section,
|
||||
.web-section[collapsed="true"] ~ .web-section,
|
||||
.hyperlink-section[collapsed="true"] ~ .hyperlink-section,
|
||||
.spatial-section[collapsed="true"] ~ .spatial-section,
|
||||
.physical-section[collapsed="true"] ~ .physical-section,
|
||||
.behavior-section[collapsed="true"] ~ .behavior-section,
|
||||
.model-section[collapsed="true"] ~ .model-section,
|
||||
.light-section[collapsed="true"] ~ .light-section
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.property {
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
|
@ -547,19 +594,17 @@ input[type=checkbox]:checked + label:hover {
|
|||
}
|
||||
|
||||
|
||||
#properties-list .property:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
div.input-area {
|
||||
display: inline-block;
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
#type, #id {
|
||||
font-size: 9.0pt;
|
||||
}
|
||||
|
||||
#type label, #id label {
|
||||
color: rgb(150, 150, 150);
|
||||
}
|
||||
|
||||
#properties-list input[type=checkbox] {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
|
@ -586,19 +631,6 @@ div.input-area {
|
|||
}
|
||||
|
||||
|
||||
table#properties-list {
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
background-color: #efefef;
|
||||
font-family: Arial;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
#properties-list {
|
||||
border-bottom: 0.75pt solid #e5e5e5;
|
||||
}
|
||||
|
||||
.sub-props-checkbox-group {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
|
@ -638,3 +670,4 @@ div.inner {
|
|||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -492,6 +492,22 @@
|
|||
urlUpdater.addEventListener("click", refreshEvent);
|
||||
}
|
||||
|
||||
var toggleCollapsedEvent = function (event) {
|
||||
var element = event.target;
|
||||
if (element.nodeName !== "DIV") {
|
||||
element = element.parentNode;
|
||||
}
|
||||
var collapsed = element.getAttribute("collapsed") !== "true";
|
||||
element.setAttribute("collapsed", collapsed ? "true" : "false");
|
||||
element.getElementsByTagName("span")[0].textContent = collapsed ? "L" : "M";
|
||||
};
|
||||
|
||||
var elCollapsible = document.getElementsByClassName("collapsible");
|
||||
for (var i = 0, length = elCollapsible.length; i < length; i++) {
|
||||
var element = elCollapsible[i];
|
||||
addEventListener("click", toggleCollapsedEvent);
|
||||
};
|
||||
|
||||
if (window.EventBridge !== undefined) {
|
||||
var properties;
|
||||
EventBridge.scriptEventReceived.connect(function(data) {
|
||||
|
|
@ -1095,7 +1111,7 @@
|
|||
</script>
|
||||
</head>
|
||||
|
||||
<body class="properties" onload='loaded();'>
|
||||
<body onload='loaded();'>
|
||||
<div id="properties-list">
|
||||
<div id="type" class="property">
|
||||
<div class="label">
|
||||
|
|
@ -1138,8 +1154,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-header text-section">
|
||||
<label>Text</label>
|
||||
<div id="text-section" class="section-header text-section collapsible">
|
||||
<label>Text</label><span>M</span>
|
||||
</div>
|
||||
|
||||
<div class="text-section property">
|
||||
|
|
@ -1170,12 +1186,12 @@
|
|||
<div class="input-area">R <input class="coord" type="number" id="property-text-background-color-red"></div>
|
||||
<div class="input-area">G <input class="coord" type="number" id="property-text-background-color-green"></div>
|
||||
<div class="input-area">B <input class="coord" type="number" id="property-text-background-color-blue"></div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-header zone-section">
|
||||
<label>Zone</label>
|
||||
<label>Zone</label><span>M</span>
|
||||
</div>
|
||||
|
||||
<div class="zone-section property">
|
||||
|
|
@ -1286,6 +1302,7 @@
|
|||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sub-section-header zone-section skybox-section">
|
||||
<label>Skybox</label>
|
||||
</div>
|
||||
|
|
@ -1309,7 +1326,7 @@
|
|||
</div>
|
||||
|
||||
<div class="section-header web-section">
|
||||
<label>Web</label>
|
||||
<label>Web</label><span>M</span>
|
||||
</div>
|
||||
|
||||
<div class="web-section property">
|
||||
|
|
@ -1323,7 +1340,7 @@
|
|||
|
||||
|
||||
<div class="section-header hyperlink-section">
|
||||
<label>Hyperlink</label>
|
||||
<label>Hyperlink</label><span>M</span>
|
||||
</div>
|
||||
|
||||
<div class="hyperlink-section property">
|
||||
|
|
@ -1342,16 +1359,16 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="section-header">
|
||||
<label>Spatial Properties</label>
|
||||
<div class="section-header spatial-section">
|
||||
<label>Spatial Properties</label><span>M</span>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<div class="spatial-section property">
|
||||
<div class="label">Position</div>
|
||||
<div class="value">
|
||||
<div class="input-area ">X<input class="coord" type='number' id="property-pos-x"><div class="prop-x"></div></div>
|
||||
<div class="input-area ">Y<input class="coord" type='number' id="property-pos-y"><div class="prop-y"></div></div>
|
||||
<div class="input-area ">Z<input class="coord" type='number' id="property-pos-z" ><div class="prop-z"></div></div>
|
||||
<div class="input-area ">Z<input class="coord" type='number' id="property-pos-z"><div class="prop-z"></div></div>
|
||||
<div>
|
||||
<input type="button" id="move-selection-to-grid" value="Selection to Grid">
|
||||
<input type="button" id="move-all-to-grid" value="All to Grid">
|
||||
|
|
@ -1360,20 +1377,20 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<div class="spatial-section property">
|
||||
<span class="label" style="float: left; margin-right: 6px">ParentID</span>
|
||||
<div class="value" style="overflow: hidden;">
|
||||
<input type="text" id="property-parent-id">
|
||||
</div>
|
||||
</div>
|
||||
<div class="property">
|
||||
<div class="spatial-section property">
|
||||
<span class="label" style="float: left; margin-right: 6px">ParentJointIndex</span>
|
||||
<div class="value" style="overflow: hidden;">
|
||||
<input type="text" id="property-parent-joint-index">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<div class="spatial-section property">
|
||||
<div class="label">Registration</div>
|
||||
<div class="value">
|
||||
<div class="input-area">X <input class="coord" type="number" id="property-reg-x"><div class="prop-x"></div></div>
|
||||
|
|
@ -1382,7 +1399,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<div class="spatial-section property">
|
||||
<div class="label">Dimensions</div>
|
||||
<div class="value">
|
||||
<div class="input-area">X <input class="coord" type="number" id="property-dim-x" step="0.1"><div class="prop-x"></div></div>
|
||||
|
|
@ -1400,7 +1417,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="poly-vox-section property">
|
||||
<div class="spatial-section poly-vox-section property">
|
||||
<div class="label">Voxel Volume Size</div>
|
||||
<div class="value">
|
||||
<div class="input-area">X <br> <input class="coord" type="number" id="property-voxel-volume-size-x"></div>
|
||||
|
|
@ -1437,7 +1454,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<div class="spatial-section property">
|
||||
<div class="label">Rotation</div>
|
||||
<div class="value">
|
||||
<div class="input-area">Pitch <input class="coord" type="number" id="property-rot-x" step="0.1"></div>
|
||||
|
|
@ -1447,11 +1464,11 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="section-header">
|
||||
<label>Physical Properites</label>
|
||||
<div class="section-header physical-section">
|
||||
<label>Physical Properites</label><span>M</span>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<div class="physical-section property">
|
||||
<div class="label">Linear Velocity</div>
|
||||
<div class="value">
|
||||
<div class="input-area">X <input class="coord" type="number" id="property-lvel-x"><div class="prop-x"></div></div>
|
||||
|
|
@ -1459,13 +1476,13 @@
|
|||
<div class="input-area">Z <input class="coord" type="number" id="property-lvel-z"><div class="prop-z"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property">
|
||||
<div class="physical-section property">
|
||||
<div class="label">Linear Damping</div>
|
||||
<div class="value">
|
||||
<input class="coord" type="number" id="property-ldamping">
|
||||
</div>
|
||||
</div>
|
||||
<div class="property">
|
||||
<div class="physical-section property">
|
||||
<div class="label">Angular Velocity</div>
|
||||
<div class="value">
|
||||
<div class="input-area">Pitch <input class="coord" type="number" id="property-avel-x"></div>
|
||||
|
|
@ -1473,26 +1490,26 @@
|
|||
<div class="input-area">Roll <input class="coord" type="number" id="property-avel-z"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property">
|
||||
<div class="physical-section property">
|
||||
<div class="label">Angular Damping</div>
|
||||
<div class="value">
|
||||
<input class="coord" type="number" id="property-adamping">
|
||||
</div>
|
||||
</div>
|
||||
<div class="property">
|
||||
<div class="physical-section property">
|
||||
<div class="label">Restitution</div>
|
||||
<div class="value">
|
||||
<input class="coord" type="number" id="property-restitution">
|
||||
</div>
|
||||
</div>
|
||||
<div class="property">
|
||||
<div class="physical-section property">
|
||||
<div class="label">Friction</div>
|
||||
<div class="value">
|
||||
<input class="coord" type="number" id="property-friction">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<div class="physical-section property">
|
||||
<div class="label">Gravity</div>
|
||||
<div class="value">
|
||||
<div class="input-area">X <input class="coord" type="number" id="property-grav-x"><div class="prop-x"></div></div>
|
||||
|
|
@ -1501,7 +1518,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<div class="physical-section property">
|
||||
<div class="label">Acceleration</div>
|
||||
<div class="value">
|
||||
<div class="input-area">X <input class="coord" type="number" id="property-lacc-x"><div class="prop-x"></div></div>
|
||||
|
|
@ -1510,14 +1527,14 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<div class="physical-section property">
|
||||
<div class="label">Density</div>
|
||||
<div>
|
||||
<input type="number" id="property-density">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="color-section" class="property">
|
||||
<div id="color-section" class="physical-section property">
|
||||
<div class="label">Color</div>
|
||||
<div class="value">
|
||||
<div id="property-color" class='color-picker'></div>
|
||||
|
|
@ -1528,18 +1545,18 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="section-header">
|
||||
<label>Behavior</label>
|
||||
<div class="section-header behavior-section">
|
||||
<label>Behavior</label><span>M</span>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<div class="behavior-section property">
|
||||
<span class="label">Collisionless</span>
|
||||
<span class="value">
|
||||
<input type='checkbox' id="property-collisionless">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<div class="behavior-section property">
|
||||
<span class="label">Dynamic</span>
|
||||
<span class="value">
|
||||
<input type='checkbox' id="property-dynamic">
|
||||
|
|
@ -1547,46 +1564,51 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class = "sub-section-header"> Collides With: </div>
|
||||
<div class = "sub-props-checkbox-group">
|
||||
<div class = "sub-section-header behavior-section">
|
||||
<span>Collides With</span>
|
||||
</div>
|
||||
<div class = "sub-props-checkbox-group behavior-section">
|
||||
<div class="property">
|
||||
<span class="label"> static</span>
|
||||
<span class="value">
|
||||
<input type='checkbox' id="property-collide-static">
|
||||
</span>
|
||||
<span class="label"> static</span>
|
||||
<span class="value">
|
||||
<input type='checkbox' id="property-collide-static">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<span class="label"> dynamic</span>
|
||||
<span class="value">
|
||||
<input type='checkbox' id="property-collide-dynamic">
|
||||
</span>
|
||||
<span class="label"> dynamic</span>
|
||||
<span class="value">
|
||||
<input type='checkbox' id="property-collide-dynamic">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<span class="label"> kinematic</span>
|
||||
<span class="value">
|
||||
<input type='checkbox' id="property-collide-kinematic">
|
||||
</span>
|
||||
<span class="label"> kinematic</span>
|
||||
<span class="value">
|
||||
<input type='checkbox' id="property-collide-kinematic">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<span class="label"> myAvatar</span>
|
||||
<span class="value">
|
||||
<input type='checkbox' id="property-collide-myAvatar">
|
||||
</span>
|
||||
<span class="label"> myAvatar</span>
|
||||
<span class="value">
|
||||
<input type='checkbox' id="property-collide-myAvatar">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<span class="label"> otherAvatar</span>
|
||||
<span class="value">
|
||||
<input type='checkbox' id="property-collide-otherAvatar">
|
||||
</span>
|
||||
<span class="label"> otherAvatar</span>
|
||||
<span class="value">
|
||||
<input type='checkbox' id="property-collide-otherAvatar">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class = "sub-section-header"> Grabbable: </div>
|
||||
<div class = "sub-props-checkbox-group">
|
||||
|
||||
<div class = "sub-section-header behavior-section">
|
||||
<span>Grabbable</span>
|
||||
</div>
|
||||
<div class = "sub-props-checkbox-group behavior-section">
|
||||
<div class="property">
|
||||
<span class="label">grabbable</span>
|
||||
<span class="value">
|
||||
|
|
@ -1609,9 +1631,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<div class="behavior-section property">
|
||||
<div class="label">Collision Sound URL</div>
|
||||
<div class="value">
|
||||
<input id="property-collision-sound-url" class="url">
|
||||
|
|
@ -1619,14 +1640,14 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<div class="behavior-section property">
|
||||
<div class="label">Lifetime</div>
|
||||
<div class="value">
|
||||
<input type="number" id="property-lifetime">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<div class="behavior-section property">
|
||||
<div class="label">Script URL
|
||||
<input type="hidden" id="property-script-timestamp" class="value">
|
||||
<input type="button" id="reload-script-button" value="Reload">
|
||||
|
|
@ -1638,8 +1659,8 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="section-header model-section zone-section">
|
||||
<label>Model</label>
|
||||
<div class="section-header model-section">
|
||||
<label>Model</label><span>M</span>
|
||||
</div>
|
||||
|
||||
<div class="model-section property">
|
||||
|
|
@ -1731,7 +1752,7 @@
|
|||
</div>
|
||||
|
||||
<div class="section-header light-section">
|
||||
<label>Light</label>
|
||||
<label>Light</label><span>M</span>
|
||||
</div>
|
||||
|
||||
<div class="light-section property">
|
||||
|
|
|
|||
Loading…
Reference in a new issue