mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-07-22 20:46:56 +02:00
Restyle dropdowns
This commit is contained in:
David Rowe
parent
a2d9f088ab
commit
ab37534e0d
2 changed files with 211 additions and 30 deletions
|
|
@ -349,7 +349,6 @@ input[type=checkbox]:checked + label:hover {
|
|||
|
||||
|
||||
.section-header, .sub-section-header {
|
||||
position: relative;
|
||||
margin: 22px -12px 0 -12px;
|
||||
padding: 14px 12px 0 12px;
|
||||
font-size: 12px;
|
||||
|
|
@ -359,6 +358,7 @@ input[type=checkbox]:checked + label:hover {
|
|||
}
|
||||
|
||||
.section-header {
|
||||
position: relative;
|
||||
background: #404040 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAqCAIAAAAbNW1vAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAmSURBVChTY1BFAgzhSIDBAQmMcoYHRwIJMCgjAQZ9JMBgBQdWVgBh5XmBV5A2FQAAAABJRU5ErkJggg==) repeat-x top left;
|
||||
}
|
||||
|
||||
|
|
@ -438,7 +438,7 @@ input[type=checkbox]:checked + label:hover {
|
|||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.text label, .url label, .number label, .textarea label, .rgb label, .xyz label, .pyr label {
|
||||
.text label, .url label, .number label, .textarea label, .rgb label, .xyz label, .pyr label, .dropdown label {
|
||||
float: left;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
|
@ -455,6 +455,89 @@ input[type=checkbox]:checked + label:hover {
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown select {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.dropdown dl {
|
||||
clear: both;
|
||||
}
|
||||
.dropdown dl {
|
||||
font-family: FiraSans-SemiBold;
|
||||
font-size: 15px;
|
||||
width: 172px;
|
||||
height: 28px;
|
||||
padding: 0 28px 0 12px;
|
||||
|
||||
color: #afafaf;
|
||||
background: linear-gradient(#7d7d7d 20%, #686a68 100%);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
.dropdown dl[dropped="true"] {
|
||||
color: #404040;
|
||||
background: linear-gradient(#afafaf, #afafaf);
|
||||
}
|
||||
|
||||
.dropdown dt {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #121212;
|
||||
width: 100%;
|
||||
}
|
||||
.dropdown dt:hover {
|
||||
color: #404040;
|
||||
}
|
||||
.dropdown dt span:first-child {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
}
|
||||
.dropdown dt span:last-child {
|
||||
font-family: HiFi-Glyphs;
|
||||
font-size: 42px;
|
||||
float: right;
|
||||
margin-right: -48px;
|
||||
position: relative;
|
||||
left: -12px;
|
||||
top: -11px;
|
||||
}
|
||||
|
||||
.dropdown dd {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 3px;
|
||||
display: none;
|
||||
}
|
||||
.dropdown dl[dropped="true"] dd {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown li {
|
||||
list-style-type: none;
|
||||
padding: 3px 0 1px 12px;
|
||||
width: 200px;
|
||||
height: auto;
|
||||
font-family: FiraSans-SemiBold;
|
||||
font-size: 15px;
|
||||
color: #404040;
|
||||
background-color: #afafaf
|
||||
}
|
||||
.dropdown li:hover {
|
||||
background-color: #00b4ef;
|
||||
}
|
||||
|
||||
/*dd {
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
border: 1x dotted red;
|
||||
}*/
|
||||
|
||||
|
||||
div.refresh {
|
||||
box-sizing: border-box;
|
||||
padding-right: 44px;
|
||||
|
|
|
|||
|
|
@ -671,6 +671,7 @@
|
|||
|
||||
elModelURL.value = properties.modelURL;
|
||||
elShapeType.value = properties.shapeType;
|
||||
setDropdownText(elShapeType);
|
||||
elCompoundShapeURL.value = properties.compoundShapeURL;
|
||||
elModelAnimationURL.value = properties.animation.url;
|
||||
elModelAnimationPlaying.checked = properties.animation.running;
|
||||
|
|
@ -750,6 +751,7 @@
|
|||
elCompoundShapeURL.value = properties.compoundShapeURL;
|
||||
|
||||
elZoneBackgroundMode.value = properties.backgroundMode;
|
||||
setDropdownText(elZoneBackgroundMode);
|
||||
|
||||
elZoneSkyboxColor.style.backgroundColor = "rgb(" + properties.skybox.color.red + "," + properties.skybox.color.green + "," + properties.skybox.color.blue + ")";
|
||||
elZoneSkyboxColorRed.value = properties.skybox.color.red;
|
||||
|
|
@ -767,6 +769,7 @@
|
|||
elVoxelVolumeSizeY.value = properties.voxelVolumeSize.y.toFixed(2);
|
||||
elVoxelVolumeSizeZ.value = properties.voxelVolumeSize.z.toFixed(2);
|
||||
elVoxelSurfaceStyle.value = properties.voxelSurfaceStyle;
|
||||
setDropdownText(elVoxelSurfaceStyle);
|
||||
elXTextureURL.value = properties.xTextureURL;
|
||||
elYTextureURL.value = properties.yTextureURL;
|
||||
elZTextureURL.value = properties.zTextureURL;
|
||||
|
|
@ -1129,6 +1132,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
// Collapsible sections
|
||||
var elCollapsible = document.getElementsByClassName("section-header");
|
||||
|
||||
var toggleCollapsedEvent = function (event) {
|
||||
|
|
@ -1146,6 +1150,8 @@
|
|||
element.addEventListener("click", toggleCollapsedEvent, true);
|
||||
};
|
||||
|
||||
|
||||
// Textarea scollbars
|
||||
var elTextareas = document.getElementsByTagName("TEXTAREA");
|
||||
|
||||
var textareaOnChangeEvent = function (event) {
|
||||
|
|
@ -1161,6 +1167,104 @@
|
|||
event; mouseup is a partial stand-in but doesn't handle resizing if mouse moves outside textarea rectangle. */
|
||||
element.addEventListener("mouseup", textareaOnChangeEvent, false);
|
||||
};
|
||||
|
||||
// Dropdowns
|
||||
// For each dropdown the following replacement is created in place of the oriringal 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) {
|
||||
var lis = dropdown.parentNode.getElementsByTagName("li");
|
||||
var text = "";
|
||||
for (var i = 0; i < lis.length; i++) {
|
||||
if (lis[i].getAttribute("value") === dropdown.value) {
|
||||
text = lis[i].textContent;
|
||||
}
|
||||
}
|
||||
dropdown.firstChild.textContent = text;
|
||||
}
|
||||
|
||||
function toggleDropdown(event) {
|
||||
var element = event.target;
|
||||
if (element.nodeName !== "DT") {
|
||||
element = element.parentNode;
|
||||
}
|
||||
element = element.parentNode;
|
||||
var isDropped = element.getAttribute("dropped");
|
||||
element.setAttribute("dropped", isDropped !== "true" ? "true" : "false");
|
||||
}
|
||||
|
||||
function setDropdownValue(event) {
|
||||
var dt = event.target.parentNode.parentNode.previousSibling;
|
||||
dt.value = event.target.getAttribute("value");
|
||||
dt.firstChild.textContent = event.target.textContent;
|
||||
|
||||
dt.parentNode.setAttribute("dropped", "false");
|
||||
|
||||
var evt = document.createEvent("HTMLEvents");
|
||||
evt.initEvent("change", true, true);
|
||||
dt.dispatchEvent(evt);
|
||||
}
|
||||
|
||||
var elDropdowns = document.getElementsByTagName("select");
|
||||
for (var i = 0; i < elDropdowns.length; i++) {
|
||||
var options = elDropdowns[i].getElementsByTagName("option");
|
||||
var selectedOption = 0;
|
||||
for (var j = 0; j < options.length; j++) {
|
||||
if (options[i].getAttribute("selected") === "selected") {
|
||||
selectedOption = i;
|
||||
}
|
||||
}
|
||||
var div = elDropdowns[i].parentNode;
|
||||
|
||||
var dl = document.createElement("dl");
|
||||
div.appendChild(dl);
|
||||
|
||||
var dt = document.createElement("dt");
|
||||
dt.name = elDropdowns[i].name;
|
||||
dt.id = elDropdowns[i].id;
|
||||
dt.addEventListener("click", toggleDropdown, true);
|
||||
dl.appendChild(dt);
|
||||
|
||||
var span = document.createElement("span");
|
||||
span.setAttribute("value", options[selectedOption].value);
|
||||
span.textContent = options[selectedOption].firstChild.textContent;
|
||||
dt.appendChild(span);
|
||||
|
||||
var span = document.createElement("span");
|
||||
span.textContent = "5"; // caratDn
|
||||
dt.appendChild(span);
|
||||
|
||||
var dd = document.createElement("dd");
|
||||
dl.appendChild(dd);
|
||||
|
||||
var ul = document.createElement("ul");
|
||||
dd.appendChild(ul);
|
||||
|
||||
for (var j = 0; j < options.length; j++) {
|
||||
var li = document.createElement("li");
|
||||
li.setAttribute("value", options[j].value);
|
||||
li.textContent = options[j].firstChild.textContent;
|
||||
li.addEventListener("click", setDropdownValue);
|
||||
ul.appendChild(li);
|
||||
}
|
||||
}
|
||||
|
||||
elDropdowns = document.getElementsByTagName("select");
|
||||
while (elDropdowns.length > 0) {
|
||||
var el = elDropdowns[0];
|
||||
el.parentNode.removeChild(el);
|
||||
elDropdowns = document.getElementsByTagName("select");
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
|
@ -1317,14 +1421,12 @@
|
|||
<label>Background</label>
|
||||
</div>
|
||||
|
||||
<div class="zone-section background-section property">
|
||||
<div class="label">Background Mode</div>
|
||||
<div class="value">
|
||||
<select name="SelectBackgroundMode" id="property-zone-background-mode">
|
||||
<option value='inherit'>Nothing</option>
|
||||
<option value='skybox'>Skybox</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="zone-section background-section property dropdown">
|
||||
<label>Background mode</label>
|
||||
<select name="SelectBackgroundMode" id="property-zone-background-mode">
|
||||
<option value="inherit">Nothing</option>
|
||||
<option value="skybox">Skybox</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -1435,16 +1537,14 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="property">
|
||||
<div class="label">Surface Extractor</div>
|
||||
<div class="value">
|
||||
<select name="SelectVoxelSurfaceStyle" id="property-voxel-surface-style">
|
||||
<option value='0'>marching cubes</option>
|
||||
<option value='1'>cubic</option>
|
||||
<option value='2'>edged cubic</option>
|
||||
<option value='3'>edged marching cubes</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="property dropdown">
|
||||
<label>Surface extractor</label>
|
||||
<select name="SelectVoxelSurfaceStyle" id="property-voxel-surface-style">
|
||||
<option value="0">Marching cubes</option>
|
||||
<option value="1">Cubic</option>
|
||||
<option value="2">Edged cubic</option>
|
||||
<option value="3">Edged marching cubes</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="property url refresh">
|
||||
|
|
@ -1646,16 +1746,14 @@
|
|||
<input type="button" class="update-url-version glyph" value="F" />
|
||||
</div>
|
||||
|
||||
<div class="model-section zone-section property">
|
||||
<div class="label">Collision Shape Type</div>
|
||||
<div class="value">
|
||||
<select name="SelectShapeType" id="property-shape-type">
|
||||
<option value='none'>none</option>
|
||||
<option value='box'>box</option>
|
||||
<option value='sphere'>sphere</option>
|
||||
<option value='compound'>compound</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="model-section zone-section property dropdown">
|
||||
<label>Collision shape type</label>
|
||||
<select name="SelectShapeType" id="property-shape-type">
|
||||
<option value="none">None</option>
|
||||
<option value="box">Box</option>
|
||||
<option value="sphere">Sphere</option>
|
||||
<option value="compound">Compound</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="model-section zone-section property url refresh">
|
||||
<label for="property-compound-shape-url">Compound shape URL</label>
|
||||
|
|
|
|||
Loading…
Reference in a new issue