Bläddra i källkod

[filebrowser] Re-enabled d'n'd on upload modal

Minor UI restyle
Enrico Berti 10 år sedan
förälder
incheckning
430cee1

+ 44 - 1
apps/filebrowser/src/filebrowser/static/filebrowser/css/listdir_components.css

@@ -235,4 +235,47 @@
 
 
 .progress .bar-upload {
 .progress .bar-upload {
   background-color: #338BB8;
   background-color: #338BB8;
-}
+}
+
+.qq-upload-button {
+  display: inline-block;
+  height: 29px;
+  min-height: 29px;
+  padding: 0 8px;
+  margin: 0;
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 29px;
+  color: #444;
+  text-align: center;
+  text-shadow: none;
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: #f9f9f9;
+  background-image: -moz-linear-gradient(top, #fff, #f1f1f1);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#f1f1f1));
+  background-image: -webkit-linear-gradient(top, #fff, #f1f1f1);
+  background-image: -o-linear-gradient(top, #fff, #f1f1f1);
+  background-image: linear-gradient(to bottom, #fff, #f1f1f1);
+  background-repeat: repeat-x;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-color: #f1f1f1 #f1f1f1 #cbcbcb;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  border-color: rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff1f1f1', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+.qq-upload-button-focus {
+  outline: none;
+}
+
+.qq-upload-drop-area {
+  width: 99%;
+}

+ 25 - 11
apps/filebrowser/src/filebrowser/templates/listdir_components.mako

@@ -325,7 +325,7 @@ from django.utils.translation import ugettext as _
   <div id="uploadFileModal" class="modal hide fade">
   <div id="uploadFileModal" class="modal hide fade">
     <div class="modal-header">
     <div class="modal-header">
       <a href="#" class="close" data-dismiss="modal">&times;</a>
       <a href="#" class="close" data-dismiss="modal">&times;</a>
-      <h3>${_('Uploading to:')} <span id="uploadDirName" data-bind="text: currentPath"></span></h3>
+      <h3>${_('Upload to')} <span id="uploadDirName" data-bind="text: currentPath"></span></h3>
     </div>
     </div>
     <div class="modal-body form-inline">
     <div class="modal-body form-inline">
       <div id="fileUploader" class="uploader">
       <div id="fileUploader" class="uploader">
@@ -341,8 +341,7 @@ from django.utils.translation import ugettext as _
   <div id="uploadArchiveModal" class="modal hide fade">
   <div id="uploadArchiveModal" class="modal hide fade">
     <div class="modal-header">
     <div class="modal-header">
       <a href="#" class="close" data-dismiss="modal">&times;</a>
       <a href="#" class="close" data-dismiss="modal">&times;</a>
-      <h3>${_('Uploading to:')} <span id="uploadDirName" data-bind="text: currentPath"></span></h3>
-      <p>${_('The file will then be extracted in the path specified above.')}</p>
+      <h3>${_('Upload and extract in')} <span id="uploadDirName" data-bind="text: currentPath"></span></h3>
     </div>
     </div>
     <div class="modal-body form-inline">
     <div class="modal-body form-inline">
       <div id="archiveUploader" class="uploader">
       <div id="archiveUploader" class="uploader">
@@ -507,6 +506,7 @@ from django.utils.translation import ugettext as _
 
 
   <script charset="utf-8">
   <script charset="utf-8">
     var _dragged;
     var _dragged;
+    var _dropzone;
 
 
     ko.bindingHandlers.drag = {
     ko.bindingHandlers.drag = {
       init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
       init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
@@ -1263,9 +1263,9 @@ from django.utils.translation import ugettext as _
         var uploader = new qq.FileUploader({
         var uploader = new qq.FileUploader({
           element:document.getElementById("fileUploader"),
           element:document.getElementById("fileUploader"),
           action:action,
           action:action,
-          template:'<div class="qq-uploader">' +
-                  '<div class="qq-upload-drop-area"><span>${_('Drop files here to upload')}</span></div>' +
-                  '<div class="qq-upload-button">${_('Select files')}</div>' +
+          template:'<div class="qq-uploader" style="margin-left: 10px">' +
+                  '<div class="qq-upload-drop-area"><span>${_('Drop the files here to upload')}</span></div>' +
+                  '<div class="qq-upload-button">${_('Select files')}</div> &nbsp; <span class="muted">or drag and drop them here</span>' +
                   '<ul class="qq-upload-list"></ul>' +
                   '<ul class="qq-upload-list"></ul>' +
                   '</div>',
                   '</div>',
           fileTemplate:'<li>' +
           fileTemplate:'<li>' +
@@ -1313,9 +1313,9 @@ from django.utils.translation import ugettext as _
         var uploader = new qq.FileUploader({
         var uploader = new qq.FileUploader({
           element:document.getElementById("archiveUploader"),
           element:document.getElementById("archiveUploader"),
           action:"/filebrowser/upload/archive",
           action:"/filebrowser/upload/archive",
-          template:'<div class="qq-uploader">' +
-                  '<div class="qq-upload-drop-area"><span>${_('Drop files here to upload')}</span></div>' +
-                  '<div class="qq-upload-button">${_('Upload an Archive')}</div>' +
+          template:'<div class="qq-uploader" style="margin-left: 10px">' +
+                  '<div class="qq-upload-drop-area"><span>${_('Drop the archives here to upload and extract them')}</span></div>' +
+                  '<div class="qq-upload-button">${_('Select ZIP, TGZ or BZ2 files')}</div> &nbsp; <span class="muted">or drag and drop them here</span>' +
                   '<ul class="qq-upload-list"></ul>' +
                   '<ul class="qq-upload-list"></ul>' +
                   '</div>',
                   '</div>',
           fileTemplate:'<li>' +
           fileTemplate:'<li>' +
@@ -1445,7 +1445,7 @@ from django.utils.translation import ugettext as _
         $('.card').on('dragenter', function (e) {
         $('.card').on('dragenter', function (e) {
           e.preventDefault();
           e.preventDefault();
 
 
-          if (_isExternalFile) {
+          if (_isExternalFile && !($("#uploadFileModal").is(":visible")) && !($("#uploadArchiveModal").is(":visible"))) {
             showHoverMsg("${_('Drop files here to upload')}");
             showHoverMsg("${_('Drop files here to upload')}");
           }
           }
         });
         });
@@ -1471,7 +1471,6 @@ from django.utils.translation import ugettext as _
           }
           }
         });
         });
 
 
-        var _dropzone;
         $(document).on('currPathLoaded', function (e, ops) {
         $(document).on('currPathLoaded', function (e, ops) {
           try {
           try {
             _dropzone.destroy();
             _dropzone.destroy();
@@ -1885,6 +1884,21 @@ from django.utils.translation import ugettext as _
           resetActionbar();
           resetActionbar();
         }
         }
       });
       });
+
+      $("#uploadFileModal").on("shown", function(){
+        _dropzone.disable();
+      });
+      $("#uploadFileModal").on("hidden", function(){
+        _dropzone.enable();
+        $(".qq-upload-drop-area").hide();
+      });
+      $("#uploadArchiveModal").on("shown", function(){
+        _dropzone.disable();
+      });
+      $("#uploadArchiveModal").on("hidden", function(){
+        _dropzone.enable();
+        $(".qq-upload-drop-area").hide();
+      });
     });
     });
   </script>
   </script>
 </%def>
 </%def>

+ 4 - 0
apps/oozie/src/oozie/static/oozie/css/common-editor.css

@@ -118,6 +118,10 @@ input[type="text"].filechooser-input.input-xlarge {
   box-shadow: none;
   box-shadow: none;
 }
 }
 
 
+.qq-upload-button-focus {
+  outline: none;
+}
+
 ul.with-margin li {
 ul.with-margin li {
   margin-bottom: 4px;
   margin-bottom: 4px;
 }
 }