Changed 'browse' buttons on firmware/backup pages to use bootstrap (#416

)
sidoh · Mar 17, 2019 · 228fc3b · 228fc3b
1 parent 4b0ac78
commit 228fc3b
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 11 deletions.
diff --git a/web/src/index.html b/web/src/index.html
@@ -408,15 +408,29 @@ <h2 class="modal-title">Update Firmware</h2>
             </p>
           </div>
           <form action="/firmware" method="post" enctype="multipart/form-data">
-            <input type="file" name="file"/>
-            <p>&nbsp;</p>
-            <input type="submit" name="submit" class="btn btn-success"/>
+            <div class="input-group">
+              <label class="input-group-btn">
+                <span class="btn btn-primary">
+                  Browse
+                  <input type="file" name="file" style="display: none;">
+                </span>
+              </label>
+
+              <input type="text" class="form-control" readonly="">
+
+              <label class="input-group-btn">
+                <span class="btn btn-success">
+                  Upload Firmware
+                  <input type="submit" style="display: none;">
+                </span>
+              </label>
+            </div>
           </form>
-        </div>
+		</div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>
-      </div>
+</div>
 
     </div>
   </div>
@@ -474,6 +488,7 @@ <h4>Latest Version</h4>
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h2 class="modal-title">Backup & Restore Settings</h2>
         </div>
         <div class="modal-body">
           <div>
@@ -484,12 +499,23 @@ <h3 class="section-title">Backup Settings</h3>
           <div>
             <h3 class="section-title">Restore Settings</h3>
             <form action="/settings" method="post" enctype="multipart/form-data">
-              <p>
-                <input type="file" name="file"/>
-              </p>
-              <p>
-                <input type="submit" name="submit" class="btn btn-success"/>
-              </p>
+              <div class="input-group">
+                <label class="input-group-btn">
+                  <span class="btn btn-primary">
+                    Browse
+                    <input type="file" name="file" style="display: none;">
+                  </span>
+                </label>
+
+                <input type="text" class="form-control" readonly="">
+
+                <label class="input-group-btn">
+                  <span class="btn btn-success">
+                    Upload
+                    <input type="submit" style="display: none;">
+                  </span>
+                </label>
+              </div>
             </form>
           </div>
         </div>

diff --git a/web/src/js/script.js b/web/src/js/script.js
@@ -1,3 +1,23 @@
+$(function() {
+  $(document).on('change', ':file', function() {
+    var input = $(this),
+        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
+    input.trigger('fileselect', [label]);
+  });
+
+  $(document).ready( function() {
+    $(':file').on('fileselect', function(event, label) {
+
+        var input = $(this).parents('.input-group').find(':text'),
+            log = label;
+
+        if( input.length ) {
+            input.val(log);
+        }
+    });
+  });  
+});
+
 var UNIT_PARAMS = {
   minMireds: 153,
   maxMireds: 370,
@@ -1064,3 +1084,23 @@ $(function() {
   loadSettings();
   updateModeOptions();
 });
+
+$(function() {
+  $(document).on('change', ':file', function() {
+    var input = $(this),
+        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
+    input.trigger('fileselect', [label]);
+  });
+
+  $(document).ready( function() {
+    $(':file').on('fileselect', function(event, label) {
+
+        var input = $(this).parents('.input-group').find(':text'),
+            log = label;
+
+        if( input.length ) {
+            input.val(log);
+        }
+    });
+  });  
+});