From 8c77fd369bc7cb5ce9bf3900a14cf5ba88e4ab4d Mon Sep 17 00:00:00 2001
From: Zander Otavka <zotavka@gmail.com>
Date: Tue, 23 Jun 2015 17:40:25 -0700
Subject: [PATCH] Add subsections to the edit.js properties list.

---
 examples/html/entityProperties.html | 184 +++++++++++++++-------------
 examples/html/style.css             |  12 +-
 2 files changed, 112 insertions(+), 84 deletions(-)

diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index c0737a1880..56eee899f9 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -955,17 +955,6 @@
             </div>
         </div>
 
-        <div class="property">
-            <div class="label">Hyperlink</div>
-            <div class="input-area">Href<br></div>
-            <div class="value">
-                <input id="property-hyperlink-href" class="url"></input>
-            </div>
-            <div class="input-area">Description<br></div> <div class="value">
-                <input id="property-hyperlink-description" class="url"></input>
-            </div>
-        </div>
-
         <div class="property">
             <span class="label">Locked</span>
             <span class="value">
@@ -988,6 +977,24 @@
         </div>
 
 
+        <div class="sub-section-header">
+            <label>Hyperlink</label>
+        </div>
+
+        <div class="property">
+            <div class="label">Href</div>
+            <div class="value">
+                <input id="property-hyperlink-href" class="url"></input>
+            </div>
+        </div>
+        <div class="property">
+            <div class="label">Description</div>
+            <div class="value">
+                <input id="property-hyperlink-description" class="url"></input>
+            </div>
+        </div>
+
+
         <div class="section-header">
             <label>Spacial Properites</label>
         </div>
@@ -1181,6 +1188,78 @@
         </div>
 
 
+        <div class="section-header model-section zone-section">
+            <label>Model</label>
+        </div>
+
+        <div class="model-section property">
+            <div class="label">Model URL</div>
+            <div class="value">
+                <input type="text" id="property-model-url" class="url"></input>
+            </div>
+        </div>
+
+        <div class="model-section zone-section property">
+            <div class="label">Shape Type</div>
+            <div class="value">
+                <select name="SelectShapeType" id="property-shape-type" name="SelectShapeType">
+                    <option value='none'>none</option>
+                    <option value='box'>box</option>
+                    <option value='sphere'>sphere</option>
+                    <option value='compound'>compound</option>
+                </select>
+            </div>
+        </div>
+        <div class="model-section zone-section property">
+            <div class="label">Compound Shape URL</div>
+            <div class="value">
+                <input type="text" id="property-compound-shape-url" class="url"></input>
+            </div>
+        </div>
+        <div class="model-section property">
+            <div class="label">Animation URL</div>
+            <div class="value">
+                <input type="text" id="property-model-animation-url" class="url"></input>
+            </div>
+        </div>
+        <div class="model-section property">
+            <span class="label">Animation Playing</span>
+            <span class="value">
+                <input type='checkbox' id="property-model-animation-playing">
+            </span>
+        </div>
+        <div class="model-section property">
+            <div class="label">Animation FPS</div>
+            <div class="value">
+                <input class="coord" type='number' id="property-model-animation-fps"></input>
+            </div>
+        </div>
+        <div class="model-section property">
+            <div class="label">Animation Frame</div>
+            <div class="value">
+                <input class="coord" type='number' id="property-model-animation-frame"></input>
+            </div>
+        </div>
+        <div class="model-section property">
+            <div class="label">Animation Settings</div>
+            <div class="value">
+                <textarea id="property-model-animation-settings"></textarea>
+            </div>
+        </div>
+        <div class="model-section property">
+            <div class="label">Textures</div>
+            <div class="value">
+                <textarea id="property-model-textures" value='asdfasdf'></textarea>
+            </div>
+        </div>
+        <div class="model-section property">
+            <div class="label">Original Textures</div>
+            <div class="value">
+                <textarea id="property-model-original-textures" readonly value='asdfasdf'></textarea>
+            </div>
+        </div>
+
+
         <div class="section-header web-section">
             <label>Web</label>
         </div>
@@ -1243,77 +1322,6 @@
         </div>
 
 
-        <div class="section-header model-section">
-            <label>Model</label>
-        </div>
-
-        <div class="model-section property">
-            <div class="label">Model URL</div>
-            <div class="value">
-                <input type="text" id="property-model-url" class="url"></input>
-            </div>
-        </div>
-        <div class="model-section zone-section property">
-            <div class="label">Shape Type</div>
-            <div class="value">
-                <select name="SelectShapeType" id="property-shape-type" name="SelectShapeType">
-                    <option value='none'>none</option>
-                    <option value='box'>box</option>
-                    <option value='sphere'>sphere</option>
-                    <option value='compound'>compound</option>
-                </select>
-            </div>
-        </div>
-        <div class="model-section zone-section property">
-            <div class="label">Compound Shape URL</div>
-            <div class="value">
-                <input type="text" id="property-compound-shape-url" class="url"></input>
-            </div>
-        </div>
-        <div class="model-section property">
-            <div class="label">Animation URL</div>
-            <div class="value">
-                <input type="text" id="property-model-animation-url" class="url"></input>
-            </div>
-        </div>
-        <div class="model-section property">
-            <span class="label">Animation Playing</span>
-            <span class="value">
-                <input type='checkbox' id="property-model-animation-playing">
-            </span>
-        </div>
-        <div class="model-section property">
-            <div class="label">Animation FPS</div>
-            <div class="value">
-                <input class="coord" type='number' id="property-model-animation-fps"></input>
-            </div>
-        </div>
-        <div class="model-section property">
-            <div class="label">Animation Frame</div>
-            <div class="value">
-                <input class="coord" type='number' id="property-model-animation-frame"></input>
-            </div>
-        </div>
-        <div class="model-section property">
-            <div class="label">Animation Settings</div>
-            <div class="value">
-                <textarea id="property-model-animation-settings"></textarea>
-            </div>
-        </div>
-        <div class="model-section property">
-            <div class="label">Textures</div>
-            <div class="value">
-                <textarea id="property-model-textures" value='asdfasdf'></textarea>
-            </div>
-        </div>
-        <div class="model-section property">
-            <div class="label">Original Textures</div>
-            <div class="value">
-                <textarea id="property-model-original-textures" readonly value='asdfasdf'></textarea>
-            </div>
-        </div>
-
-
         <div class="section-header text-section">
             <label>Text</label>
         </div>
@@ -1479,6 +1487,12 @@
                 </select> 
             </div>
         </div>
+
+
+        <div class="sub-section-header zone-section skybox-section">
+            <label>Skybox</label>
+        </div>
+
         <div class="zone-section skybox-section property">
             <div class="label">Skybox Color</div>
             <div class="value">
@@ -1494,6 +1508,12 @@
                 <input type="text" id="property-zone-skybox-url" class="url"></input>
             </div>
         </div>
+
+
+        <div class="sub-section-header zone-section atmosphere-section">
+            <label>Atmosphere</label>
+        </div>
+
         <div class="zone-section atmosphere-section property">
             <div class="label">Atmosphere Center</div>
             <div class="value">
diff --git a/examples/html/style.css b/examples/html/style.css
index ff07411aaf..f12cfb6dd0 100644
--- a/examples/html/style.css
+++ b/examples/html/style.css
@@ -44,7 +44,7 @@ body {
     border: 1.5pt solid black;
 }
 
-.section-header {
+.section-header, .sub-section-header {
     background: #AAA;
     border-bottom: 0.75pt solid #CCC;
     background-color: #333333;
@@ -53,11 +53,19 @@ body {
     padding-top: 6pt;
 }
 
-.section-header label {
+.section-header label, .sub-section-header label {
     font-weight: bold;
     font-size: 11pt;
 }
 
+.sub-section-header {
+    padding-top: 4px;
+}
+
+.sub-section-header label {
+    font-size: 9pt;
+}
+
 .multi-property-section {
 }