From 10f8e54903f7f7422b4be2ac0819d1d7d9bceb50 Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Wed, 14 Jan 2015 15:50:42 -0800 Subject: [PATCH 1/2] 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 { From dbb978e2786d43b35050f4cc46658c4b3922f6d9 Mon Sep 17 00:00:00 2001 From: Ryan Huffman Date: Thu, 15 Jan 2015 10:22:39 -0800 Subject: [PATCH 2/2] Update style and layout of entity properties window --- examples/html/entityProperties.html | 103 +++++++++++++--------------- examples/html/style.css | 70 ++++++++++++++----- 2 files changed, 98 insertions(+), 75 deletions(-) diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html index 2df5524795..52b8001c9e 100644 --- a/examples/html/entityProperties.html +++ b/examples/html/entityProperties.html @@ -445,47 +445,38 @@ } - -
- -
+
-
+
- ID +
+
+
-
-
- Type -
-
- -
-
-
+
Locked
-
+
Visible
-
+
Position
-
X
-
Y
-
Z
+
X
+
Y
+
Z
@@ -493,7 +484,7 @@
-
+
Registration
X
@@ -502,7 +493,7 @@
-
+
Dimensions
X
@@ -512,7 +503,7 @@
- % + %
@@ -520,7 +511,7 @@
-
+
Rotation
Pitch
@@ -529,7 +520,7 @@
-
+
Linear Velocity
X
@@ -537,13 +528,13 @@
Z
-
+
Linear Damping
-
+
Angular Velocity
Pitch
@@ -551,14 +542,14 @@
Roll
-
+
Angular Damping
-
+
Gravity
X
@@ -567,35 +558,35 @@
-
+
Mass
-
+
Ignore For Collisions
-
+
Collisions Will Move
-
+
Lifetime
-
+
Script URL
@@ -603,7 +594,7 @@
-
+
Color
R
@@ -614,49 +605,49 @@ -
+
Model URL
-
+
Animation URL
-
+
Animation Playing
-
+
Animation FPS
-
+
Animation Frame
-
+
Animation Settings
-
+
Textures
-
+
Original Textures
@@ -664,19 +655,19 @@
-
+
Text
-
+
Line Height
-
+
Text Color
R
@@ -684,7 +675,7 @@
B
-
+
Background Color
R
@@ -693,13 +684,13 @@
-
+
Spot Light
-
+
Diffuse
R
@@ -707,7 +698,7 @@
B
-
+
Ambient
R
@@ -715,7 +706,7 @@
B
-
+
Specular
R
@@ -723,31 +714,31 @@
B
-
+
Constant Attenuation
-
+
Linear Attenuation
-
+
Quadratic Attenuation
-
+
Exponent
-
+
Cutoff (degrees)
diff --git a/examples/html/style.css b/examples/html/style.css index 20baaca915..5023bb4609 100644 --- a/examples/html/style.css +++ b/examples/html/style.css @@ -6,8 +6,8 @@ body { padding: 0; background-color: #efefef; - font-family: Sans-Serif; - font-size: 12px; + font-family: Arial; + font-size: 11.5px; -webkit-touch-callout: none; -webkit-user-select: none; @@ -17,6 +17,12 @@ body { user-select: none; } +body.properties { + background-color: rgb(76, 76, 76); + color: rgb(204, 204, 204); + font-size: 11px; +} + .selectable { -webkit-touch-callout: text; -webkit-user-select: text; @@ -85,12 +91,10 @@ input[type=button] { border: 0; color: #fff; font-weight: bold; - margin: 0 2px; - margin-top: 5px; - font-size: .9em; } textarea, input { + margin: 0; padding: 2px; border: 1px solid #999; background-color: #eee; @@ -105,10 +109,15 @@ input.url { width: 100%; } +input.coord { + width: 7em; + display: block; +} + table#entity-table { border-collapse: collapse; font-family: Sans-Serif; - font-size: 12px; + /* font-size: 12px; */ width: 100%; } @@ -145,11 +154,42 @@ th#entity-url { div.input-area { display: inline-block; + font-size: 10px; } input { } +#type { + font-size: 14px; +} + +#type label { + color: rgb(150, 150, 150); +} + +#properties-list input, #properties-list textarea { + background-color: rgb(102, 102, 102); + color: rgb(204, 204, 204); + border: none; + font-size: 10px; +} + +#properties-list input[type=button] { + cursor: pointer; + background-color: rgb(51, 102, 102); + border-color: #608e96; + border-radius: 5px; + padding: 5px 10px; + border: 0; + color: rgb(204, 204, 204); +} + +#properties-list .property { + padding: 8px 8px; + border-top: 1px solid rgb(63, 63, 63); + min-height: 1em; +} table#properties-list { @@ -158,10 +198,13 @@ table#properties-list { width: 100%; background-color: #efefef; font-family: Arial; - font-size: 12px; table-layout: fixed; } +#properties-list > div { + margin: 4px 0; +} + #properties-list { border-bottom: 1px solid #e5e5e5; } @@ -174,21 +217,10 @@ table#properties-list { vertical-align: middle; height: 1.2em; - background-color: #ccc; - border-bottom: 1px solid #e5e5e5; -} - -#properties-list .value { - min-height: 1em; } #properties-list .value > div{ - padding: 4px; -} - -#properties-list > div > div{ - padding: 3px; - border-bottom: 1px solid black; + padding: 4px 0; } col#col-label {