From ccfb4f0b54d5d4493fa8a0bfc4862ed0d7d69ea0 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Latour <pol@mac.com>
Date: Wed, 2 Apr 2014 09:41:07 -0700
Subject: [PATCH] Use modal panel instead of prompt() when creating folders

---
 .../GCDWebUploader.bundle/css/index.css       |  5 +++++
 .../GCDWebUploader.bundle/index.html          | 21 +++++++++++++++++++
 .../GCDWebUploader.bundle/js/index.js         | 14 +++++++++++--
 3 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/GCDWebUploader/GCDWebUploader.bundle/css/index.css b/GCDWebUploader/GCDWebUploader.bundle/css/index.css
index 4ec6f15..44832c7 100644
--- a/GCDWebUploader/GCDWebUploader.bundle/css/index.css
+++ b/GCDWebUploader/GCDWebUploader.bundle/css/index.css
@@ -64,6 +64,11 @@
   float: right;
 }
 
+#create-input {
+  width: 250px;
+  height: 20px;
+}
+
 /* Bootstrap overrides */
 
 .btn:focus {
diff --git a/GCDWebUploader/GCDWebUploader.bundle/index.html b/GCDWebUploader/GCDWebUploader.bundle/index.html
index 6a3d9d7..6612528 100644
--- a/GCDWebUploader/GCDWebUploader.bundle/index.html
+++ b/GCDWebUploader/GCDWebUploader.bundle/index.html
@@ -95,6 +95,27 @@
       
     </div>
     
+    <div class="modal fade" id="create-modal" tabindex="-1">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal">&times;</button>
+            <h4 class="modal-title">Create Folder</h4>
+          </div>
+          <div class="modal-body">
+            <p>Please enter the name of the folder to be created:</p>
+            <form onsubmit="return false">
+              <input type="text" autocomplete="off" id="create-input">
+            </form>            
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+            <button type="button" class="btn btn-primary" id="create-confirm">Create</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    
     <script type="text/x-tmpl" id="template-listing">
       <tr class="row-file" data-path="{%=o.path%}" data-name="{%=o.name%}">
         <td class="column-icon">
diff --git a/GCDWebUploader/GCDWebUploader.bundle/js/index.js b/GCDWebUploader/GCDWebUploader.bundle/js/index.js
index 34a2b42..45bc49f 100644
--- a/GCDWebUploader/GCDWebUploader.bundle/js/index.js
+++ b/GCDWebUploader/GCDWebUploader.bundle/js/index.js
@@ -203,8 +203,18 @@ $(document).ready(function() {
   });
   
   $("#create-folder").click(function(event) {
-    var name = prompt("Please enter folder name:", "Untitled folder");
-    if ((name != null) && (name != "")) {
+    $("#create-input").val("Untitled folder");
+    $("#create-modal").modal("show");
+    $("#create-modal").on("shown.bs.modal", function(event) {
+      $("#create-input").focus();
+      $("#create-input").select();
+    })
+  });
+  
+  $("#create-confirm").click(function(event) {
+    $("#create-modal").modal("hide");
+    var name = $("#create-input").val();
+    if (name != "") {
       $.ajax({
         url: 'create',
         type: 'POST',