From 10f8e54903f7f7422b4be2ac0819d1d7d9bceb50 Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Wed, 14 Jan 2015 15:50:42 -0800 Subject: [PATCH] Update style of properties windows --- examples/html/entityProperties.html | 468 +++++++++++++--------------- examples/html/style.css | 24 +- 2 files changed, 226 insertions(+), 266 deletions(-) diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html index c23a3cd5ab..2df5524795 100644 --- a/examples/html/entityProperties.html +++ b/examples/html/entityProperties.html @@ -181,10 +181,10 @@ elLocked.checked = properties.locked; if (properties.locked) { - disableChildren(document.getElementById("properties-table"), 'input'); + disableChildren(document.getElementById("properties-list"), 'input'); elLocked.removeAttribute('disabled'); } else { - enableChildren(document.getElementById("properties-table"), 'input'); + enableChildren(document.getElementById("properties-list"), 'input'); } elVisible.checked = properties.visible; @@ -231,7 +231,7 @@ } } else { for (var i = 0; i < elBoxSections.length; i++) { - elBoxSections[i].style.display = 'table-row'; + elBoxSections[i].style.display = 'block'; } elBoxColorRed.value = properties.color.red; @@ -245,7 +245,7 @@ } } else { for (var i = 0; i < elModelSections.length; i++) { - elModelSections[i].style.display = 'table-row'; + elModelSections[i].style.display = 'block'; } elModelURL.value = properties.modelURL; @@ -264,7 +264,7 @@ } } else { for (var i = 0; i < elTextSections.length; i++) { - elTextSections[i].style.display = 'table-row'; + elTextSections[i].style.display = 'block'; } elTextText.value = properties.text; @@ -283,7 +283,7 @@ } } else { for (var i = 0; i < elLightSections.length; i++) { - elLightSections[i].style.display = 'table-row'; + elLightSections[i].style.display = 'block'; } elLightDiffuseRed.value = properties.diffuseColor.red; @@ -442,50 +442,6 @@ 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; - } - }); - } - } @@ -493,44 +449,40 @@
- - - - - - - - - - - - - - - - - + + - - - - + + - - - - + + - - - - + + - - - - + + - - - - + + - - - - - - - - - - - - - - - - + + - - - - + + - - - - + + - - - - + + - - - - + + - - - - + + - - - - + + - - - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - - - - - - - - - - - - - - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+
+
ID -
+ +
-
+ + +
+
Type -
+ +
-
Locked + + +
+
Locked
+
-
Visible +
+
Visible
+
-
Position +
+
Position
+
X
Y
Z
@@ -538,21 +490,21 @@
-
Registration +
+
Registration
+
X
Y
Z
-
Dimensions +
+
Dimensions
+
X
Y
Z
@@ -565,243 +517,243 @@ -
Rotation +
+
Rotation
+
Pitch
Yaw
Roll
-
Linear Velocity +
+
Linear Velocity
+
X
Y
Z
-
Linear Damping + + +
+
Linear Damping
+
-
Angular Velocity + + +
+
Angular Velocity
+
Pitch
Yaw
Roll
-
Angular Damping + + +
+
Angular Damping
+
-
Gravity +
+
Gravity
+
X
Y
Z
-
Mass +
+
Mass
+
-
Ignore For Collisions +
+
Ignore For Collisions
+
-
Collisions Will Move +
+
Collisions Will Move
+
-
Lifetime +
+
Lifetime
+
-
Script URL +
+
Script URL
+
-
Color +
+
Color
+
R
G
B
-
Model URL +
+
Model URL
+
-
Animation URL + + +
+
Animation URL
+
-
Animation Playing + + +
+
Animation Playing
+
-
Animation FPS + + +
+
Animation FPS
+
-
Animation Frame + + +
+
Animation Frame
+
-
Animation Settings + + +
+
Animation Settings
+
-
Textures + + +
+
Textures
+
-
Original Textures + + +
+
Original Textures
+
-
Text +
+
Text
+
-
Line Height + + +
+
Line Height
+
-
Text Color + + +
+
Text Color
+
R
G
B
-
Background Color + + +
+
Background Color
+
R
G
B
-
Spot Light +
+
Spot Light
+
-
Diffuse + + +
+
Diffuse
+
R
G
B
-
Ambient + + +
+
Ambient
+
R
G
B
-
Specular + + +
+
Specular
+
R
G
B
-
Constant Attenuation + + +
+
Constant Attenuation
+
-
Linear Attenuation + + +
+
Linear Attenuation
+
-
Quadratic Attenuation + + +
+
Quadratic Attenuation
+
-
Exponent + + +
+
Exponent
+
-
Cutoff (degrees) + + +
+
Cutoff (degrees)
+
-
+ + + diff --git a/examples/html/style.css b/examples/html/style.css index 7ffbacb15e..20baaca915 100644 --- a/examples/html/style.css +++ b/examples/html/style.css @@ -152,7 +152,7 @@ input { -table#properties-table { +table#properties-list { border: none; border-collapse: collapse; width: 100%; @@ -162,14 +162,11 @@ table#properties-table { table-layout: fixed; } -#properties-table tr { +#properties-list { border-bottom: 1px solid #e5e5e5; } -#properties-table td.label { - padding-right: 10px; - border-right: 1px solid #999; - text-align: right; +#properties-list .label { font-weight: bold; white-space: nowrap; overflow: hidden; @@ -177,10 +174,21 @@ table#properties-table { vertical-align: middle; height: 1.2em; + background-color: #ccc; + border-bottom: 1px solid #e5e5e5; } -#properties-table td { - padding: 5px; +#properties-list .value { + min-height: 1em; +} + +#properties-list .value > div{ + padding: 4px; +} + +#properties-list > div > div{ + padding: 3px; + border-bottom: 1px solid black; } col#col-label {