diff --git a/static/css/dropzone.css b/static/css/dropzone.css index 35345b3..d410bb6 100644 --- a/static/css/dropzone.css +++ b/static/css/dropzone.css @@ -1,5 +1,4 @@ -#dropzone { - width: 400px; +#dropzone { width: 400px; margin-left: auto; margin-right: auto; } @@ -46,6 +45,11 @@ div.upload { color: #556A7F; } +.upload .deleted, +.upload .error { + color: #E68181; +} + .upload .right { float: right; padding-left: 5px; @@ -55,4 +59,10 @@ div.upload { margin-right: 5px; font-size: 10px; border-bottom: 1px dotted #556A7F; -} \ No newline at end of file + color: #E68181; + cursor: pointer; +} + +.dz-drag-hover div.dz-default { + background-color: #2c89f0; +} diff --git a/static/js/upload.js b/static/js/upload.js index 52368d2..80c57bc 100644 --- a/static/js/upload.js +++ b/static/js/upload.js @@ -1,24 +1,5 @@ Dropzone.options.dropzone = { init: function() { - this.dzone = document.getElementById("dzone"); - this.on("drop", function(ev) { - this.dzone.style.backgroundColor = "#FAFBFC"; - }); - this.on("dragstart", function(ev) { - this.dzone.style.backgroundColor = "#2c89f0"; - }); - this.on("dragend", function(ev) { - this.dzone.style.backgroundColor = "#FAFBFC"; - }); - this.on("dragenter", function(ev) { - this.dzone.style.backgroundColor = "#2c89f0"; - }); - this.on("dragover", function(ev) { - this.dzone.style.backgroundColor = "#2c89f0"; - }); - this.on("dragleave", function(ev) { - this.dzone.style.backgroundColor = "#FAFBFC"; - }); }, addedfile: function(file) { var upload = document.createElement("div"); @@ -62,7 +43,6 @@ Dropzone.options.dropzone = { file.leftElement.innerHTML = '' + resp.url + ''; file.rightRightElement.innerHTML = "Delete"; file.rightRightElement.className = "cancel"; - file.rightRightElement.style.color = "#E68181"; file.rightRightElement.onclick = function(ev) { xhr = new XMLHttpRequest(); xhr.open("DELETE", resp.url, true); @@ -70,7 +50,7 @@ Dropzone.options.dropzone = { xhr.onreadystatechange = function(file) { if (xhr.status === 404) { file.leftElement.innerHTML = 'Deleted ' + resp.url + ''; - file.leftElement.style.color = "#E68181"; + file.leftElement.className = "deleted"; file.rightRightElement.onclick = null; file.rightRightElement.innerHTML = ""; } @@ -88,7 +68,7 @@ Dropzone.options.dropzone = { else { file.leftElement.innerHTML = "Could not upload " + file.name; } - file.leftElement.style.color = "#E68181"; + file.leftElement.className = "error"; }, maxFilesize: 4096,