Bläddra i källkod

HUE-3251 [home] Use enter to create directory in modal

I've also added some simple validation to prevent error messages and enabled close with esc key to all doc modals.
Johan Ahlen 9 år sedan
förälder
incheckning
9962f32

+ 3 - 3
desktop/core/src/desktop/static/desktop/js/fileBrowser/hueFileEntry.js

@@ -441,7 +441,7 @@
 
   HueFileEntry.prototype.upload = function () {
     var self = this;
-    if (self.app === 'documents') {
+    if (document.getElementById("importDocumentInput").files.length > 0 && self.app === 'documents') {
       self.uploading(true);
       self.uploadComplete(false);
       self.uploadFailed(false);
@@ -496,7 +496,7 @@
       if (self.selectedEntries().length > 0) {
         var ids = self.selectedEntries().map(function (entry) {
           return entry.definition().id;
-        })
+        });
         window.location.href = '/desktop/api2/doc/export?documents=' + ko.mapping.toJSON(ids);
       } else {
         self.downloadThis();
@@ -506,7 +506,7 @@
 
   HueFileEntry.prototype.createDirectory = function (name) {
     var self = this;
-    if (self.app === 'documents') {
+    if (name && self.app === 'documents') {
       self.assistHelper.createDocumentsFolder({
         successCallback: self.load.bind(self),
         parentUuid: self.definition().uuid,

+ 36 - 34
desktop/core/src/desktop/templates/file_browser.mako

@@ -312,7 +312,7 @@ from desktop.views import _ko
       <i class="fa fa-fw"></i><span class="drag-text">4 entries</span>
     </div>
 
-    <div id="shareDocumentModal" class="modal hide fade">
+    <div id="shareDocumentModal" data-keyboard="true" class="modal hide fade" tabindex="-1">
       <!-- ko with: activeEntry -->
       <!-- ko with: selectedEntry -->
       <!-- ko with: document -->
@@ -387,53 +387,55 @@ from desktop.views import _ko
       <!-- /ko -->
     </div>
 
-    <div id="importDocumentsModal" class="modal hide fade fileupload-modal">
+    <div id="importDocumentsModal" data-keyboard="true" class="modal hide fade fileupload-modal" tabindex="-1">
       <!-- ko with: activeEntry -->
       <div class="modal-header">
         <a href="#" class="close" data-clear="importDocumentsForm" data-bind="click: closeUploadModal">&times;</a>
         <h3>${_('Import Hue documents')}</h3>
       </div>
-        <div class="modal-body form-horizontal">
-          <form id="importDocumentsForm" style="display: inline" enctype="multipart/form-data">
-            <div class="control-group" data-bind="visible: !uploading() && !uploadComplete()">
-              <label class="control-label" for="importDocumentInput">${ _('Select json file') }</label>
-              <div class="controls">
-                <input id="importDocumentInput" style="line-height: 10px; margin-top: 5px;" type="file" name="documents" accept=".json" />
+        <form id="importDocumentsForm" class="form-horizontal" style="display: inline" enctype="multipart/form-data">
+          <div class="modal-body">
+              <div class="control-group" data-bind="visible: !uploading() && !uploadComplete()">
+                <label class="control-label" for="importDocumentInput">${ _('Select json file') }</label>
+                <div class="controls">
+                  <input id="importDocumentInput" style="line-height: 10px; margin-top: 5px;" type="file" name="documents" accept=".json" />
+                </div>
               </div>
-            </div>
-            <span data-bind="visible: !uploadFailed() && uploadComplete()">${ _('Import complete!') }</span>
-            <span data-bind="visible: uploadFailed">${ _('Import failed!') }</span>
-            <progress data-bind="visible: uploading() || uploadComplete()" id="importDocumentsProgress" value="0" max="100" style="width: 560px;"></progress>
-            ${ csrf_token(request) | n,unicode }
-            <input type="hidden" name="path" data-bind="value: definition().path" />
-          </form>
-        </div>
-        <div class="modal-footer">
-          <!-- ko ifnot: uploading() || uploadComplete() -->
-          <a href="#" class="btn" data-clear="importDocumentsForm" data-bind="click: closeUploadModal">${ _('Cancel') }</a>
-          <a herf="#" class="btn btn-danger" data-bind="click: upload">${ _('Import') }</a>
-          <!-- /ko -->
-          <!-- ko if: uploading() || uploadComplete() -->
-          <a href="#" class="btn" data-clear="importDocumentsForm" data-bind="click: closeUploadModal">${ _('Close') }</a>
-          <!-- /ko -->
-        </div>
+              <span data-bind="visible: !uploadFailed() && uploadComplete()">${ _('Import complete!') }</span>
+              <span data-bind="visible: uploadFailed">${ _('Import failed!') }</span>
+              <progress data-bind="visible: uploading() || uploadComplete()" id="importDocumentsProgress" value="0" max="100" style="width: 560px;"></progress>
+              ${ csrf_token(request) | n,unicode }
+              <input type="hidden" name="path" data-bind="value: definition().path" />
+          </div>
+          <div class="modal-footer">
+            <!-- ko ifnot: uploading() || uploadComplete() -->
+            <input type="button" class="btn" data-clear="importDocumentsForm" data-bind="click: closeUploadModal" value="${ _('Cancel') }" />
+            <input type="submit" class="btn btn-danger" data-bind="click: upload" value="${ _('Import') }" />
+            <!-- /ko -->
+            <!-- ko if: uploading() || uploadComplete() -->
+            <a href="#" class="btn" data-clear="importDocumentsForm" data-bind="click: closeUploadModal">${ _('Close') }</a>
+            <!-- /ko -->
+          </div>
+        </form>
 
       <!-- /ko -->
     </div>
 
-    <div id="createDirectoryModal" class="modal hide fade">
+    <div id="createDirectoryModal" data-keyboard="true" class="modal hide fade" tabindex="-1">
       <!-- ko with: activeEntry -->
-      <div class="modal-body form-horizontal">
-        <input id="newDirectoryName" class="input large-as-modal" type="text" placeholder="${ _('Directory name') }" data-bind="floatlabel" />
-      </div>
-      <div class="modal-footer">
-        <input type="button" class="btn" data-dismiss="modal" value="${ _('Cancel') }">
-        <input type="button" class="btn btn-primary disable-feedback" value="${ _('Create') }" data-bind="click: function () { $data.createDirectory($('#newDirectoryName').val()); $('#createDirectoryModal').modal('hide'); }"/>
-      </div>
+      <form class="form-horizontal">
+        <div class="modal-body ">
+          <input id="newDirectoryName" class="input large-as-modal" type="text" placeholder="${ _('Directory name') }" data-bind="floatlabel" />
+        </div>
+        <div class="modal-footer">
+          <input type="button" class="btn" data-dismiss="modal" value="${ _('Cancel') }">
+          <input type="submit" class="btn btn-primary disable-feedback" value="${ _('Create') }" data-bind="click: function () { if ($('#newDirectoryName').val()) { $data.createDirectory($('#newDirectoryName').val()); $('#createDirectoryModal').modal('hide'); } }"/>
+        </div>
+      </form>
       <!-- /ko -->
     </div>
 
-    <div id="deleteEntriesModal" class="modal hide fade">
+    <div id="deleteEntriesModal" data-keyboard="true" class="modal hide fade" tabindex="-1">
       <!-- ko with: activeEntry -->
       <div class="modal-header">
         <a href="#" class="close" data-dismiss="modal">&times</a>