Browse Source

Use modal panel instead of prompt() when creating folders

Pierre-Olivier Latour 11 years ago
parent
commit
ccfb4f0b54

+ 5 - 0
GCDWebUploader/GCDWebUploader.bundle/css/index.css

@@ -64,6 +64,11 @@
   float: right;
 }
 
+#create-input {
+  width: 250px;
+  height: 20px;
+}
+
 /* Bootstrap overrides */
 
 .btn:focus {

+ 21 - 0
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">

+ 12 - 2
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',