From 433cea30c3ffa7b314ad1f857a7ed2cf48f241e8 Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Mon, 13 Jun 2016 23:00:56 +0200 Subject: adds visual indication for file drag and drop --- apps/files/js/file-upload.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'apps/files/js/file-upload.js') diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index 3257ded7b89..eadb57d914d 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -494,7 +494,7 @@ OC.Upload = { * @param {object} e * @param {object} data */ - done:function(e, data) { + done: function(e, data) { OC.Upload.log('done', e, data); // handle different responses (json or body from iframe for ie) var response; @@ -667,7 +667,12 @@ OC.Upload = { OC.Upload._hideProgressBar(); } }); - + fileupload.on('fileuploaddragover', function(){ + $('#app-content').addClass('file-drag'); + }); + fileupload.on('fileuploaddragleave fileuploaddrop', function (){ + $('#app-content').removeClass('file-drag'); + }); } else { // for all browsers that don't support the progress bar // IE 8 & 9 -- cgit v1.2.3 From 203a07e7f35aeef8e22385b0a9fec216387430e4 Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Wed, 15 Jun 2016 01:03:59 +0200 Subject: change folder icon when dragging over a directory --- apps/files/css/files.css | 4 ++++ apps/files/js/file-upload.js | 15 +++++++++++++-- apps/files/js/filelist.js | 2 -- 3 files changed, 17 insertions(+), 4 deletions(-) (limited to 'apps/files/js/file-upload.js') diff --git a/apps/files/css/files.css b/apps/files/css/files.css index c462e27ff14..980332d781b 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -77,6 +77,10 @@ background-color: rgb(179, 230, 255); } +.dropping-to-dir .thumbnail { + background-image: url(/nextcloud/core/img/filetypes/folder-drag-accept.svg)!important; +} + /* icons for sidebar */ .nav-icon-files { background-image: url('../img/folder.svg'); diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index eadb57d914d..dbf08ac10b9 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -667,11 +667,22 @@ OC.Upload = { OC.Upload._hideProgressBar(); } }); - fileupload.on('fileuploaddragover', function(){ + fileupload.on('fileuploaddragover', function(e, data){ $('#app-content').addClass('file-drag'); + + var filerow = $(e.delegatedEvent.target).closest('tr'); + + if(!filerow.hasClass('dropping-to-dir')){ + $('.dropping-to-dir').removeClass('dropping-to-dir'); + } + + if(filerow.attr('data-type') === 'dir'){ + filerow.addClass('dropping-to-dir'); + } }); - fileupload.on('fileuploaddragleave fileuploaddrop', function (){ + fileupload.on('fileuploaddragleave fileuploaddrop', function (e, data){ $('#app-content').removeClass('file-drag'); + $('.dropping-to-dir').removeClass('dropping-to-dir'); }); } else { // for all browsers that don't support the progress bar diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index 4b1c07b297e..3ab5032599c 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -2528,9 +2528,7 @@ return false; } - console.log(e); var dropTarget = $(e.delegatedEvent.target); - console.log(dropTarget); // check if dropped inside this container and not another one if (dropTarget.length -- cgit v1.2.3 From 62144209747760505aa82526cb050aea2a9f8881 Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Wed, 15 Jun 2016 09:45:36 +0200 Subject: restrict dropZone to app-content div --- apps/files/js/file-upload.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'apps/files/js/file-upload.js') diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index dbf08ac10b9..3d0385f08ad 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -273,7 +273,7 @@ OC.Upload = { var self = this; if ( $('#file_upload_start').exists() ) { var file_upload_param = { - dropZone: $('#content'), // restrict dropZone to content div + dropZone: $('#app-content'), // restrict dropZone to app-content div pasteZone: null, autoUpload: false, sequentialUploads: true, -- cgit v1.2.3 From aecdcf737f30c8a621576d2843a50aac3815d1ab Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Wed, 15 Jun 2016 11:28:53 +0200 Subject: dragging over folder will highlight folder only --- apps/files/css/files.css | 8 ++++++++ apps/files/js/file-upload.js | 3 +++ 2 files changed, 11 insertions(+) (limited to 'apps/files/js/file-upload.js') diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 980332d781b..bb177db7524 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -77,6 +77,14 @@ background-color: rgb(179, 230, 255); } +.app-files #app-content.dir-drop, .file-drag #filestable tbody tr{ + background-color: rgba(0, 0, 0, 0); +} + +.app-files #app-content.dir-drop #filestable tbody tr.dropping-to-dir{ + background-color: rgb(179, 230, 255); +} + .dropping-to-dir .thumbnail { background-image: url(/nextcloud/core/img/filetypes/folder-drag-accept.svg)!important; } diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index 3d0385f08ad..d53ce1bd7ec 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -674,15 +674,18 @@ OC.Upload = { if(!filerow.hasClass('dropping-to-dir')){ $('.dropping-to-dir').removeClass('dropping-to-dir'); + $('.dir-drop').removeClass('dir-drop'); } if(filerow.attr('data-type') === 'dir'){ + $('#app-content').addClass('dir-drop'); filerow.addClass('dropping-to-dir'); } }); fileupload.on('fileuploaddragleave fileuploaddrop', function (e, data){ $('#app-content').removeClass('file-drag'); $('.dropping-to-dir').removeClass('dropping-to-dir'); + $('.dir-drop').removeClass('dir-drop'); }); } else { // for all browsers that don't support the progress bar -- cgit v1.2.3 From 10f8d643dc44ddf82db3cfd91d529d47cfe2d94d Mon Sep 17 00:00:00 2001 From: Vincent Chan Date: Wed, 15 Jun 2016 13:16:11 +0200 Subject: store icons in class --- apps/files/css/files.css | 4 ---- apps/files/js/file-upload.js | 7 +++++-- core/css/icons.css | 4 ++++ 3 files changed, 9 insertions(+), 6 deletions(-) (limited to 'apps/files/js/file-upload.js') diff --git a/apps/files/css/files.css b/apps/files/css/files.css index ccf91e377c9..f8a2d17aaf6 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -85,10 +85,6 @@ background-color: rgb(179, 230, 255)!important; } -.dropping-to-dir .thumbnail { - background-image: url(/nextcloud/core/img/filetypes/folder-drag-accept.svg)!important; -} - /* icons for sidebar */ .nav-icon-files { background-image: url('../img/folder.svg'); diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index d53ce1bd7ec..2453cc5207c 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -667,7 +667,7 @@ OC.Upload = { OC.Upload._hideProgressBar(); } }); - fileupload.on('fileuploaddragover', function(e, data){ + fileupload.on('fileuploaddragover', function(e){ $('#app-content').addClass('file-drag'); var filerow = $(e.delegatedEvent.target).closest('tr'); @@ -675,17 +675,20 @@ OC.Upload = { if(!filerow.hasClass('dropping-to-dir')){ $('.dropping-to-dir').removeClass('dropping-to-dir'); $('.dir-drop').removeClass('dir-drop'); + $('.icon-filetype-folder-drag-accept').removeClass('icon-filetype-folder-drag-accept'); } if(filerow.attr('data-type') === 'dir'){ $('#app-content').addClass('dir-drop'); filerow.addClass('dropping-to-dir'); + filerow.find('.thumbnail').addClass('icon-filetype-folder-drag-accept'); } }); - fileupload.on('fileuploaddragleave fileuploaddrop', function (e, data){ + fileupload.on('fileuploaddragleave fileuploaddrop', function (){ $('#app-content').removeClass('file-drag'); $('.dropping-to-dir').removeClass('dropping-to-dir'); $('.dir-drop').removeClass('dir-drop'); + $('.icon-filetype-folder-drag-accept').removeClass('icon-filetype-folder-drag-accept'); }); } else { // for all browsers that don't support the progress bar diff --git a/core/css/icons.css b/core/css/icons.css index 8bf4c204c94..89d974c49bf 100644 --- a/core/css/icons.css +++ b/core/css/icons.css @@ -353,6 +353,10 @@ img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading- background-image: url('../img/filetypes/folder.svg'); } +.icon-filetype-folder-drag-accept { + background-image: url('../img/filetypes/folder-drag-accept.svg')!important; +} + .icon-home { background-image: url('../img/places/home.svg'); } -- cgit v1.2.3