From 653ddd2ae0ac4427dbd14ddfa5ed32ca6141f1f4 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sun, 27 Mar 2016 15:13:51 +1300
Subject: [PATCH] Style URL refresh buttons

---
 examples/html/edit-style.css        | 21 ++++++----
 examples/html/entityProperties.html | 60 +++++++++++++++++------------
 2 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 818fd72b00..db53544128 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -211,13 +211,15 @@ input:disabled, textarea:disabled {
     color: rgb(160, 160, 160);
 }
 
-input[type="text"], input[type="number"] {
+input[type="text"] {
     height: 28px;
-    width: 120px;
+    width: 100%;
 }
 
 input[type="number"] {
     position: relative;
+    height: 28px;
+    width: 120px;
 }
 
 input:focus {
@@ -229,10 +231,6 @@ input::selection {
     background-color: #00b4ef;
 }
 
-input[type="text"] {
-    width: 100%;
-}
-
 /* Spin Buttons modified  - credit for original implementation goes to http://jsfiddle.net/Volker_E/WwfW9/ */
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
@@ -276,7 +274,7 @@ input[type=button].glyph {
     font-family: HiFi-Glyphs;
     font-size: 20px;
     text-transform: none;
-    min-width: 34px;
+    min-width: 32px;
     padding: 0;
 }
 
@@ -436,6 +434,15 @@ input[type=checkbox]:checked + label:hover {
     float: left;
 }
 
+div.refresh {
+    box-sizing: border-box;
+    padding-right: 44px;
+}
+div.refresh input[type="button"] {
+    float: right;
+    margin-right: -44px;
+}
+
 .color span, .color label {
     display: inline-block;
     float: left;
diff --git a/examples/html/entityProperties.html b/examples/html/entityProperties.html
index 0c68683825..797b111a81 100644
--- a/examples/html/entityProperties.html
+++ b/examples/html/entityProperties.html
@@ -469,8 +469,8 @@
                 var PARAM_REGEXP = /(?:\?)(\S+)/; // Check if this has any parameters.
                 var TIMESTAMP_REGEXP = /(&?HFTime=\d+)/;
 
-                var refreshEvent = function(event){
-                    var urlElement = event.target.parentElement.getElementsByClassName("url")[0];
+                var refreshEvent = function (event) {
+                    var urlElement = event.target.parentElement.getElementsByTagName("INPUT")[0];
                     var content = urlElement.value;
                     var date = new Date();
                     var timeStamp = date.getTime();
@@ -493,7 +493,7 @@
 
                 for(var index = 0; index < urlUpdaters.length; index++){
                     var urlUpdater = urlUpdaters[index];
-                    urlUpdater.addEventListener("click", refreshEvent);
+                    urlUpdater.addEventListener("click", refreshEvent, true);
                 }
 
                 if (window.EventBridge !== undefined) {
@@ -873,7 +873,10 @@
     
                 elLifetime.addEventListener('change', createEmitNumberPropertyUpdateFunction('lifetime'));
                 elScriptURL.addEventListener('change', createEmitTextPropertyUpdateFunction('script'));
+                /*
+                FIXME: See FIXME for property-script-url.
                 elScriptTimestamp.addEventListener('change', createEmitNumberPropertyUpdateFunction('scriptTimestamp'));
+                */
                 elUserData.addEventListener('change', createEmitTextPropertyUpdateFunction('userData'));
     
                 var colorChangeFunction = createEmitColorPropertyUpdateFunction(
@@ -1051,12 +1054,15 @@
                         percentage: parseInt(elRescaleDimensionsPct.value),
                     }));
                 });
+                /*
+                FIXME: See FIXME for property-script-url.
                 elReloadScriptButton.addEventListener("click", function() {
                     EventBridge.emitWebEvent(JSON.stringify({
                         type: "action",
                         action: "reloadScript"
                     }));
                 });
+                */
                 elPreviewCameraButton.addEventListener("click", function() {
                     EventBridge.emitWebEvent(JSON.stringify({
                         type: "action",
@@ -1250,10 +1256,10 @@
             </div>
         </div>
         
-        <div class="zone-section keyLight-section property url">
+        <div class="zone-section keyLight-section property url refresh">
             <label for="property-zone-key-ambient-url">Ambient URL</label>
             <input type="text" id="property-zone-key-ambient-url">
-            <div class="update-url-version"></div>
+            <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
 
@@ -1328,10 +1334,10 @@
             </div>
         </div>
 
-        <div class="zone-section skybox-section property url">
+        <div class="zone-section skybox-section property url refresh">
             <label for="property-zone-skybox-url">Skybox URL</label>
             <input type="text" id="property-zone-skybox-url">
-            <div class="update-url-version"></div>
+            <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
 
@@ -1339,10 +1345,10 @@
             <label>Web</label><span>M</span>
         </div>
 
-        <div class="web-section property url">
+        <div class="web-section property url refresh">
             <label for="property-web-source-url">Source URL</label>
             <input type="text" id="property-web-source-url">
-            <div class="update-url-version"></div>
+            <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
 
@@ -1432,22 +1438,22 @@
               </select>
             </div>
 
-            <div class="property url">
+            <div class="property url refresh">
                 <label for="property-x-texture-url">X-axis texture URL</label>
                 <input type="text" id="property-x-texture-url">
-                <div class="update-url-version"></div>
+                <input type="button" class="update-url-version glyph" value="F" />
             </div>
 
-            <div class="property url">
+            <div class="property url refresh">
                 <label for="property-y-texture-url">Y-axis texture URL</label>
                 <input type="text" id="property-y-texture-url">
-                <div class="update-url-version"></div>
+                <input type="button" class="update-url-version glyph" value="F" />
             </div>
 
-            <div class="property url">
+            <div class="property url refresh">
                 <label for="property-z-texture-url">Z-axis texture URL</label>
                 <input type="text" id="property-z-texture-url">
-                <div class="update-url-version"></div>
+                <input type="button" class="update-url-version glyph" value="F" />
             </div>
         </div>
 
@@ -1608,10 +1614,10 @@
             </div>
         </div>
 
-        <div class="behavior-section property url">
+        <div class="behavior-section property url refresh">
             <label for="property-collision-sound-url">Collision sound URL</label>
             <input type="text" id="property-collision-sound-url">
-            <div class="update-url-version"></div>
+            <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
         <div class="behavior-section property">
@@ -1621,12 +1627,16 @@
             </div>
         </div>
 
-        <div class="behavior-section property url">
+        <div class="behavior-section property url refresh">
+            <!--
+            FIXME: If reload buttons at the end of each URL continue to work OK during beta, this reload button and associated 
+            code should be removed.
             <input type="hidden" id="property-script-timestamp" class="value">
             <input type="button" id="reload-script-button" value="Reload">
+            -->
             <label for="property-script-url">Script URL</label>
             <input type="text" id="property-script-url">
-            <div class="update-url-version"></div>
+            <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
 
@@ -1634,10 +1644,10 @@
             <label>Model</label><span>M</span>
         </div>
 
-        <div class="model-section property url">
+        <div class="model-section property url refresh">
             <label for="property-model-url">Model URL</label>
             <input type="text" id="property-model-url">
-            <div class="update-url-version"></div>
+            <input type="button" class="update-url-version glyph" value="F" />
         </div>
 
         <div class="model-section zone-section property">
@@ -1651,15 +1661,15 @@
                 </select>
             </div>
         </div>
-        <div class="model-section zone-section property url">
+        <div class="model-section zone-section property url refresh">
             <label for="property-compound-shape-url">Compound shape URL</label>
             <input type="text" id="property-compound-shape-url">
-            <div class="update-url-version"></div>
+            <input type="button" class="update-url-version glyph" value="F" />
         </div>
-        <div class="model-section property url">
+        <div class="model-section property url refresh">
             <label for="property-model-animation-url">Animation URL</label>
             <input type="text" id="property-model-animation-url">
-            <div class="update-url-version"></div>
+            <input type="button" class="update-url-version glyph" value="F" />
         </div>
         <div class="model-section property checkbox">
             <input type="checkbox" id="property-model-animation-playing">