drop zone overlay

diff --git a/filex/templates/filex/upload.css.html b/filex/templates/filex/upload.css.html
index 3490714..9b1a588 100644 (file)
--- a/filex/templates/filex/upload.css.html
+++ b/filex/templates/filex/upload.css.html
@@ -10,6 +10,45 @@
         top: 90px;
         bottom: 51px;
         overflow-y: auto;
+        padding: 0 15px;
+    }
+
+    #elements:empty:before {
+        display: block;
+        content: "Upuść pliki tutaj";
+        position: absolute;
+        left: 0;
+        right: 0;
+        border: dashed 3px #bbb;
+        border-radius: 6px;
+        text-align: center;
+        font-size: 28px;
+        padding: 140px;
+        margin: 15px;
+        background: white;
+        overflow: hidden;
+        opacity: 0.5;
+    }
+
+    #drop-overlay {
+        display: none;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 90px;
+        border: dashed 3px #bbb;
+        border-radius: 6px;
+        text-align: center;
+        font-size: 28px;
+        padding: 140px;
+        margin: 15px;
+        background: white;
+        overflow: hidden;
+        opacity: 0.5;
+    }
+
+    #drop-overlay.in {
+        display: block;
     }
 
     #elements .item .text {

diff --git a/filex/templates/filex/upload.html b/filex/templates/filex/upload.html
index ef1ddf0..bf48a96 100644 (file)
--- a/filex/templates/filex/upload.html
+++ b/filex/templates/filex/upload.html
@@ -8,8 +8,9 @@
     <input id="files" type="file" name="files" multiple>
 </form>
 
-<div id="elements" class="container-fluid">
-</div>
+<div id="elements"></div>
+
+<div id="drop-overlay" class="fade">Upuść pliki tutaj</div>
 
 <footer class="navbar navbar-default navbar-fixed-bottom">
     <div class="container-fluid">

diff --git a/filex/templates/filex/upload.js.html b/filex/templates/filex/upload.js.html
index 1ad049f..603f402 100644 (file)
--- a/filex/templates/filex/upload.js.html
+++ b/filex/templates/filex/upload.js.html
@@ -78,6 +78,11 @@
             if ($('#files').fileupload('active'))
                 return 'Nie zakończono przesyłania wszystkich plików, czy chcesz kontynuować?';
         });
+
+        $(window).on('dragenter dragleave drop', function(e) {
+            $('#drop-overlay').toggleClass('in');
+        })
+
     });
 </script>