Move file thumbnail into the label element

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 60afcf9b5795395c52e44be6318d6a6a746f4112..20f402e90b604f5726c8aff9075499119ef80db9 100644 (file)
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -244,6 +244,15 @@ table td.filename a.name {
        line-height: 50px;
        padding: 0;
 }
+table td.filename .thumbnail {
+       display: inline-block;
+       width: 32px;
+       height: 32px;
+       margin-left: 8px;
+       margin-top: 9px;
+       cursor: pointer;
+       float: left;
+}
 table td.filename input.filename {
        width: 70%;
        margin-top: 1px;
@@ -383,6 +392,7 @@ table td.filename .uploadtext {
        /* sometimes checkbox height is bigger (KDE/Qt), so setting to absolute
         * to prevent it to increase the height */
        position: absolute;
+       z-index: 10;
 }
 #fileList tr td.filename>input[type="checkbox"] + label {
        left: 0;
@@ -395,6 +405,7 @@ table td.filename .uploadtext {
        position: absolute;
        top: 18px;
        left: 18px;
+       z-index: 10;
 }
 
 #fileList tr td.filename {

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 6ffc10cdcbdbed96cca4dfa429e75632336e4a4a..15f257bba92493a491e4fe271314081f83cd09b6 100644 (file)
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -93,6 +93,12 @@
                 */
                fileActions: null,
 
+               /**
+                * Whether selection is allowed, checkboxes and selection overlay will
+                * be rendered
+                */
+               _allowSelection: true,
+
                /**
                 * Map of file id to file data
                 * @type Object.<int, Object>
@@ -679,10 +685,8 @@
                        }
 
                        // filename td
-                       td = $('<td></td>').attr({
-                               "class": "filename",
-                               "style": 'background-image:url(' + icon + '); background-size: 32px;'
-                       });
+                       td = $('<td class="filename"></td>');
+
 
                        // linkUrl
                        if (type === 'dir') {
@@ -691,8 +695,16 @@
                        else {
                                linkUrl = this.getDownloadUrl(name, path);
                        }
-                       td.append('<input id="select-' + this.id + '-' + fileData.id +
-                               '" type="checkbox" /><label for="select-' + this.id + '-' + fileData.id + '"></label>');
+                       if (this._allowSelection) {
+                               td.append(
+                                       '<input id="select-' + this.id + '-' + fileData.id +
+                                       '" type="checkbox" /><label for="select-' + this.id + '-' + fileData.id + '">' +
+                                       '<div class="thumbnail" style="background-image:url(' + icon + '); background-size: 32px;"></div>' +
+                                       '</label>'
+                               );
+                       } else {
+                               td.append('<div class="thumbnail" style="background-image:url(' + icon + '); background-size: 32px;"></div>');
+                       }
                        var linkElem = $('<a></a>').attr({
                                "class": "name",
                                "href": linkUrl
@@ -888,6 +900,7 @@
                        this.fileActions.display(filenameTd, !options.silent, this);
 
                        if (fileData.isPreviewAvailable) {
+                               var iconDiv = filenameTd.find('.thumbnail');
                                // lazy load / newly inserted td ?
                                if (options.animate) {
                                        this.lazyLoadPreview({
@@ -895,7 +908,7 @@
                                                mime: mime,
                                                etag: fileData.etag,
                                                callback: function(url) {
-                                                       filenameTd.css('background-image', 'url(' + url + ')');
+                                                       iconDiv.css('background-image', 'url(' + url + ')');
                                                }
                                        });
                                }
@@ -907,7 +920,7 @@
                                                };
                                        var previewUrl = this.generatePreviewUrl(urlSpec);
                                        previewUrl = previewUrl.replace('(', '%28').replace(')', '%29');
-                                       filenameTd.css('background-image', 'url(' + previewUrl + ')');
+                                       iconDiv.css('background-image', 'url(' + previewUrl + ')');
                                }
                        }
                        return tr;

diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js
index 21f8a12f4b5f0e5ef17ca56bee6764b26f1b0648..83ff532313cea0d730bb56f1dc845429add9703b 100644 (file)
--- a/apps/files/tests/js/filelistSpec.js
+++ b/apps/files/tests/js/filelistSpec.js
@@ -955,8 +955,8 @@ describe('OCA.Files.FileList tests', function() {
                                name: 'testFile.txt'
                        };
                        var $tr = fileList.add(fileData);
-                       var $td = $tr.find('td.filename');
-                       expect(OC.TestUtil.getImageUrl($td)).toEqual(OC.webroot + '/core/img/filetypes/file.svg');
+                       var $imgDiv = $tr.find('td.filename .thumbnail');
+                       expect(OC.TestUtil.getImageUrl($imgDiv)).toEqual(OC.webroot + '/core/img/filetypes/file.svg');
                        expect(previewLoadStub.notCalled).toEqual(true);
                });
                it('renders default icon for dir when none provided and no preview is available', function() {
@@ -965,8 +965,8 @@ describe('OCA.Files.FileList tests', function() {
                                name: 'test dir'
                        };
                        var $tr = fileList.add(fileData);
-                       var $td = $tr.find('td.filename');
-                       expect(OC.TestUtil.getImageUrl($td)).toEqual(OC.webroot + '/core/img/filetypes/folder.svg');
+                       var $imgDiv = $tr.find('td.filename .thumbnail');
+                       expect(OC.TestUtil.getImageUrl($imgDiv)).toEqual(OC.webroot + '/core/img/filetypes/folder.svg');
                        expect(previewLoadStub.notCalled).toEqual(true);
                });
                it('renders provided icon for file when provided', function() {
@@ -976,8 +976,8 @@ describe('OCA.Files.FileList tests', function() {
                                icon: OC.webroot + '/core/img/filetypes/application-pdf.svg'
                        };
                        var $tr = fileList.add(fileData);
-                       var $td = $tr.find('td.filename');
-                       expect(OC.TestUtil.getImageUrl($td)).toEqual(OC.webroot + '/core/img/filetypes/application-pdf.svg');
+                       var $imgDiv = $tr.find('td.filename .thumbnail');
+                       expect(OC.TestUtil.getImageUrl($imgDiv)).toEqual(OC.webroot + '/core/img/filetypes/application-pdf.svg');
                        expect(previewLoadStub.notCalled).toEqual(true);
                });
                it('renders preview when no icon was provided and preview is available', function() {
@@ -988,11 +988,11 @@ describe('OCA.Files.FileList tests', function() {
                        };
                        var $tr = fileList.add(fileData);
                        var $td = $tr.find('td.filename');
-                       expect(OC.TestUtil.getImageUrl($td)).toEqual(OC.webroot + '/core/img/filetypes/file.svg');
+                       expect(OC.TestUtil.getImageUrl($td.find('.thumbnail'))).toEqual(OC.webroot + '/core/img/filetypes/file.svg');
                        expect(previewLoadStub.calledOnce).toEqual(true);
                        // third argument is callback
                        previewLoadStub.getCall(0).args[0].callback(OC.webroot + '/somepath.png');
-                       expect(OC.TestUtil.getImageUrl($td)).toEqual(OC.webroot + '/somepath.png');
+                       expect(OC.TestUtil.getImageUrl($td.find('.thumbnail'))).toEqual(OC.webroot + '/somepath.png');
                });
                it('renders default file type icon when no icon was provided and no preview is available', function() {
                        var fileData = {
@@ -1001,8 +1001,8 @@ describe('OCA.Files.FileList tests', function() {
                                isPreviewAvailable: false
                        };
                        var $tr = fileList.add(fileData);
-                       var $td = $tr.find('td.filename');
-                       expect(OC.TestUtil.getImageUrl($td)).toEqual(OC.webroot + '/core/img/filetypes/file.svg');
+                       var $imgDiv = $tr.find('td.filename .thumbnail');
+                       expect(OC.TestUtil.getImageUrl($imgDiv)).toEqual(OC.webroot + '/core/img/filetypes/file.svg');
                        expect(previewLoadStub.notCalled).toEqual(true);
                });
        });

diff --git a/apps/files_sharing/js/sharedfilelist.js b/apps/files_sharing/js/sharedfilelist.js
index 7a7c24993c0d6f9d130e9ad41e7e1552a090998e..12bca9708a64979a4bb429f953a9cad52097a7b4 100644 (file)
--- a/apps/files_sharing/js/sharedfilelist.js
+++ b/apps/files_sharing/js/sharedfilelist.js
@@ -38,6 +38,7 @@
                _sharedWithUser: false,
                _linksOnly: false,
                _clientSideSort: true,
+               _allowSelection: false,
 
                /**
                 * @private

diff --git a/apps/files_sharing/tests/js/shareSpec.js b/apps/files_sharing/tests/js/shareSpec.js
index 2cf5dc47b6349b5e005180fd9276e53b8f643392..bfcef992463006cd78b2827a6359143846899d03 100644 (file)
--- a/apps/files_sharing/tests/js/shareSpec.js
+++ b/apps/files_sharing/tests/js/shareSpec.js
@@ -105,7 +105,7 @@ describe('OCA.Sharing.Util tests', function() {
                        $action = $tr.find('.action-share');
                        expect($action.hasClass('permanent')).toEqual(false);
                        expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
-                       expect(OC.basename(getImageUrl($tr.find('.filename')))).toEqual('folder.svg');
+                       expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder.svg');
                        expect($action.find('img').length).toEqual(1);
                });
                it('shows simple share text with share icon', function() {
@@ -125,7 +125,7 @@ describe('OCA.Sharing.Util tests', function() {
                        expect($action.hasClass('permanent')).toEqual(true);
                        expect($action.find('>span').text()).toEqual('Shared');
                        expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
-                       expect(OC.basename(getImageUrl($tr.find('.filename')))).toEqual('folder-shared.svg');
+                       expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-shared.svg');
                        expect($action.find('img').length).toEqual(1);
                });
                it('shows simple share text with public icon when shared with link', function() {
@@ -146,7 +146,7 @@ describe('OCA.Sharing.Util tests', function() {
                        expect($action.hasClass('permanent')).toEqual(true);
                        expect($action.find('>span').text()).toEqual('Shared');
                        expect(OC.basename($action.find('img').attr('src'))).toEqual('public.svg');
-                       expect(OC.basename(getImageUrl($tr.find('.filename')))).toEqual('folder-public.svg');
+                       expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-public.svg');
                        expect($action.find('img').length).toEqual(1);
                });
                it('shows owner name when owner is available', function() {
@@ -167,7 +167,7 @@ describe('OCA.Sharing.Util tests', function() {
                        expect($action.hasClass('permanent')).toEqual(true);
                        expect($action.find('>span').text()).toEqual('User One');
                        expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
-                       expect(OC.basename(getImageUrl($tr.find('.filename')))).toEqual('folder-shared.svg');
+                       expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-shared.svg');
                });
                it('shows recipients when recipients are available', function() {
                        var $action, $tr;
@@ -187,7 +187,7 @@ describe('OCA.Sharing.Util tests', function() {
                        expect($action.hasClass('permanent')).toEqual(true);
                        expect($action.find('>span').text()).toEqual('Shared with User One, User Two');
                        expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
-                       expect(OC.basename(getImageUrl($tr.find('.filename')))).toEqual('folder-shared.svg');
+                       expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-shared.svg');
                        expect($action.find('img').length).toEqual(1);
                });
                it('shows static share text when file shared with user that has no share permission', function() {
@@ -209,7 +209,7 @@ describe('OCA.Sharing.Util tests', function() {
                        expect($action.hasClass('permanent')).toEqual(true);
                        expect($action.find('>span').text().trim()).toEqual('User One');
                        expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
-                       expect(OC.basename(getImageUrl($tr.find('.filename')))).toEqual('folder-shared.svg');
+                       expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-shared.svg');
                        expect($action.find('img').length).toEqual(1);
                });
        });

diff --git a/core/js/share.js b/core/js/share.js
index 80a2d7d169e45408741e624ecdf5d8aafbc4de6f..bcb604feaa39b81431fd335e8618d16cad94722e 100644 (file)
--- a/core/js/share.js
+++ b/core/js/share.js
@@ -131,7 +131,7 @@ OC.Share={
                                                                }
                                                                for(i = 0; i < files.length; i++) {
                                                                        if ($(files[i]).closest('tr').data('type') === 'dir') {
-                                                                               $(files[i]).css('background-image', 'url('+shareFolder+')');
+                                                                               $(files[i]).find('.thumbnail').css('background-image', 'url('+shareFolder+')');
                                                                        }
                                                                }
                                                        }
@@ -238,10 +238,10 @@ OC.Share={
                        else {
                                shareFolderIcon = OC.imagePath('core', 'filetypes/folder-shared');
                        }
-                       $tr.children('.filename').css('background-image', 'url(' + shareFolderIcon + ')');
+                       $tr.find('.filename .thumbnail').css('background-image', 'url(' + shareFolderIcon + ')');
                } else if (type === 'dir') {
                        shareFolderIcon = OC.imagePath('core', 'filetypes/folder');
-                       $tr.children('.filename').css('background-image', 'url(' + shareFolderIcon + ')');
+                       $tr.find('.filename .thumbnail').css('background-image', 'url(' + shareFolderIcon + ')');
                }
                // update share action text / icon
                if (hasShares || owner) {

diff --git a/core/js/tests/specs/shareSpec.js b/core/js/tests/specs/shareSpec.js
index f714b41dda61df03dbf4dcdfca86529399027667..4859ba782d2cb8df21b5e7f400c7f02957928b8a 100644 (file)
--- a/core/js/tests/specs/shareSpec.js
+++ b/core/js/tests/specs/shareSpec.js
@@ -509,7 +509,7 @@ describe('OC.Share tests', function() {
 
                beforeEach(function() {
                        tipsyStub = sinon.stub($.fn, 'tipsy');
-                       $file = $('<tr><td class="filename">File name</td></tr>');
+                       $file = $('<tr><td class="filename"><div class="thumbnail"></div><span class="name">File name</span></td></tr>');
                        $file.find('.filename').append(
                                '<span class="fileactions">' +
                                '<a href="#" class="action action-share" data-action="Share">' +
@@ -581,7 +581,7 @@ describe('OC.Share tests', function() {
 
                describe('displaying the folder icon', function() {
                        function checkIcon(expectedImage) {
-                               var imageUrl = OC.TestUtil.getImageUrl($file.find('.filename'));
+                               var imageUrl = OC.TestUtil.getImageUrl($file.find('.filename .thumbnail'));
                                expectedIcon = OC.imagePath('core', expectedImage);
                                expect(imageUrl).toEqual(expectedIcon);
                        }