Mirrors
/
nextcloud-server
mirror of https://github.com/nextcloud/server
3
0
Fork 0
Code Releases Activity
Browse Source

Move file thumbnail into the label element

remotes/origin/fix-10825
Vincent Petry 11 years ago
parent
acc9af8fc9
commit
81e9d43e23
7 changed files with 54 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      apps/files/css/files.css
  2. 29
      apps/files/js/filelist.js
  3. 20
      apps/files/tests/js/filelistSpec.js
  4. 1
      apps/files_sharing/js/sharedfilelist.js
  5. 12
      apps/files_sharing/tests/js/shareSpec.js
  6. 6
      core/js/share.js
  7. 4
      core/js/tests/specs/shareSpec.js

11
apps/files/css/files.css
View File

@ -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 {

29
apps/files/js/filelist.js
View File

@ -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;

20
apps/files/tests/js/filelistSpec.js
View File

@ -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);
});
});

1
apps/files_sharing/js/sharedfilelist.js
View File

@ -38,6 +38,7 @@
_sharedWithUser: false,
_linksOnly: false,
_clientSideSort: true,
_allowSelection: false,
/**
* @private

12
apps/files_sharing/tests/js/shareSpec.js
View File

@ -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);
});
});

6
core/js/share.js
View File

@ -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) {

4
core/js/tests/specs/shareSpec.js
View File

@ -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);
}

Write Preview
Loading…
Cancel
Save