Fix sections styling for Particle Explorer tab.

This commit is contained in:
Artur Gomes 2017-12-18 18:36:32 +00:00
parent 4d42dba300
commit 80898d9336
4 changed files with 25 additions and 10 deletions

View file

@ -261,15 +261,18 @@ HifiEntityUI.prototype = {
addSection: function (parent, section, properties, index) { addSection: function (parent, section, properties, index) {
var self = this; var self = this;
var sectionDivHeader = document.createElement("div"); var sectionDivHeader = document.createElement("fieldset");
var title = document.createElement("label"); var title = document.createElement("legend");
var dropDown = document.createElement("span"); var dropDown = document.createElement("span");
dropDown.className = "arrow"; dropDown.className = "arrow";
sectionDivHeader.className = "section-header"; sectionDivHeader.className = "major";
title.className = "section-header";
title.id = section + "-section";
title.innerHTML = section; title.innerHTML = section;
title.appendChild(dropDown);
sectionDivHeader.appendChild(title); sectionDivHeader.appendChild(title);
sectionDivHeader.appendChild(dropDown);
var collapsed = index !== 0; var collapsed = index !== 0;
dropDown.innerHTML = collapsed ? "L" : "M"; dropDown.innerHTML = collapsed ? "L" : "M";
@ -292,7 +295,7 @@ HifiEntityUI.prototype = {
} }
} }
sectionDivBody.appendChild(animationWrapper); sectionDivBody.appendChild(animationWrapper);
parent.appendChild(sectionDivBody); sectionDivHeader.appendChild(sectionDivBody);
_.defer(function () { _.defer(function () {
var height = (animationWrapper.clientHeight) + "px"; var height = (animationWrapper.clientHeight) + "px";
if (collapsed) { if (collapsed) {
@ -303,7 +306,7 @@ HifiEntityUI.prototype = {
sectionDivBody.style.maxHeight = height; sectionDivBody.style.maxHeight = height;
} }
sectionDivHeader.onclick = function () { title.onclick = function () {
collapsed = !collapsed; collapsed = !collapsed;
if (collapsed) { if (collapsed) {
sectionDivBody.classList.remove("visible"); sectionDivBody.classList.remove("visible");
@ -314,7 +317,7 @@ HifiEntityUI.prototype = {
} }
// sectionDivBody.style.display = collapsed ? "none": "block"; // sectionDivBody.style.display = collapsed ? "none": "block";
dropDown.innerHTML = collapsed ? "L" : "M"; dropDown.innerHTML = collapsed ? "L" : "M";
sectionDivHeader.setAttribute("collapsed", collapsed); title.setAttribute("collapsed", collapsed);
}; };
}); });
}, },

File diff suppressed because one or more lines are too long

View file

@ -30,8 +30,8 @@
<link rel="stylesheet" type="text/css" href="particle-style.css"> <link rel="stylesheet" type="text/css" href="particle-style.css">
</head> </head>
<body> <body>
<div id="particle-explorer"> <div id="properties-list">
<div class="section-header"> <div class="section-header" id="main-header">
<label> Particle Explorer </label> <label> Particle Explorer </label>
</div> </div>
<!-- This will be filled by the script! --> <!-- This will be filled by the script! -->

View file

@ -17,7 +17,7 @@
(function () { (function () {
var root = document.getElementById("particle-explorer"); var root = document.getElementById("properties-list");
window.onload = function () { window.onload = function () {
var ui = new HifiEntityUI(root); var ui = new HifiEntityUI(root);