Move file thumbnail into the label element
This commit is contained in:
parent
acc9af8fc9
commit
81e9d43e23
|
@ -244,6 +244,15 @@ table td.filename a.name {
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
padding: 0;
|
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 {
|
table td.filename input.filename {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
|
@ -383,6 +392,7 @@ table td.filename .uploadtext {
|
||||||
/* sometimes checkbox height is bigger (KDE/Qt), so setting to absolute
|
/* sometimes checkbox height is bigger (KDE/Qt), so setting to absolute
|
||||||
* to prevent it to increase the height */
|
* to prevent it to increase the height */
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
#fileList tr td.filename>input[type="checkbox"] + label {
|
#fileList tr td.filename>input[type="checkbox"] + label {
|
||||||
left: 0;
|
left: 0;
|
||||||
|
@ -395,6 +405,7 @@ table td.filename .uploadtext {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 18px;
|
top: 18px;
|
||||||
left: 18px;
|
left: 18px;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
#fileList tr td.filename {
|
#fileList tr td.filename {
|
||||||
|
|
|
@ -93,6 +93,12 @@
|
||||||
*/
|
*/
|
||||||
fileActions: null,
|
fileActions: null,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether selection is allowed, checkboxes and selection overlay will
|
||||||
|
* be rendered
|
||||||
|
*/
|
||||||
|
_allowSelection: true,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Map of file id to file data
|
* Map of file id to file data
|
||||||
* @type Object.<int, Object>
|
* @type Object.<int, Object>
|
||||||
|
@ -679,10 +685,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// filename td
|
// filename td
|
||||||
td = $('<td></td>').attr({
|
td = $('<td class="filename"></td>');
|
||||||
"class": "filename",
|
|
||||||
"style": 'background-image:url(' + icon + '); background-size: 32px;'
|
|
||||||
});
|
|
||||||
|
|
||||||
// linkUrl
|
// linkUrl
|
||||||
if (type === 'dir') {
|
if (type === 'dir') {
|
||||||
|
@ -691,8 +695,16 @@
|
||||||
else {
|
else {
|
||||||
linkUrl = this.getDownloadUrl(name, path);
|
linkUrl = this.getDownloadUrl(name, path);
|
||||||
}
|
}
|
||||||
td.append('<input id="select-' + this.id + '-' + fileData.id +
|
if (this._allowSelection) {
|
||||||
'" type="checkbox" /><label for="select-' + this.id + '-' + fileData.id + '"></label>');
|
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({
|
var linkElem = $('<a></a>').attr({
|
||||||
"class": "name",
|
"class": "name",
|
||||||
"href": linkUrl
|
"href": linkUrl
|
||||||
|
@ -888,6 +900,7 @@
|
||||||
this.fileActions.display(filenameTd, !options.silent, this);
|
this.fileActions.display(filenameTd, !options.silent, this);
|
||||||
|
|
||||||
if (fileData.isPreviewAvailable) {
|
if (fileData.isPreviewAvailable) {
|
||||||
|
var iconDiv = filenameTd.find('.thumbnail');
|
||||||
// lazy load / newly inserted td ?
|
// lazy load / newly inserted td ?
|
||||||
if (options.animate) {
|
if (options.animate) {
|
||||||
this.lazyLoadPreview({
|
this.lazyLoadPreview({
|
||||||
|
@ -895,7 +908,7 @@
|
||||||
mime: mime,
|
mime: mime,
|
||||||
etag: fileData.etag,
|
etag: fileData.etag,
|
||||||
callback: function(url) {
|
callback: function(url) {
|
||||||
filenameTd.css('background-image', 'url(' + url + ')');
|
iconDiv.css('background-image', 'url(' + url + ')');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -907,7 +920,7 @@
|
||||||
};
|
};
|
||||||
var previewUrl = this.generatePreviewUrl(urlSpec);
|
var previewUrl = this.generatePreviewUrl(urlSpec);
|
||||||
previewUrl = previewUrl.replace('(', '%28').replace(')', '%29');
|
previewUrl = previewUrl.replace('(', '%28').replace(')', '%29');
|
||||||
filenameTd.css('background-image', 'url(' + previewUrl + ')');
|
iconDiv.css('background-image', 'url(' + previewUrl + ')');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return tr;
|
return tr;
|
||||||
|
|
|
@ -955,8 +955,8 @@ describe('OCA.Files.FileList tests', function() {
|
||||||
name: 'testFile.txt'
|
name: 'testFile.txt'
|
||||||
};
|
};
|
||||||
var $tr = fileList.add(fileData);
|
var $tr = fileList.add(fileData);
|
||||||
var $td = $tr.find('td.filename');
|
var $imgDiv = $tr.find('td.filename .thumbnail');
|
||||||
expect(OC.TestUtil.getImageUrl($td)).toEqual(OC.webroot + '/core/img/filetypes/file.svg');
|
expect(OC.TestUtil.getImageUrl($imgDiv)).toEqual(OC.webroot + '/core/img/filetypes/file.svg');
|
||||||
expect(previewLoadStub.notCalled).toEqual(true);
|
expect(previewLoadStub.notCalled).toEqual(true);
|
||||||
});
|
});
|
||||||
it('renders default icon for dir when none provided and no preview is available', function() {
|
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'
|
name: 'test dir'
|
||||||
};
|
};
|
||||||
var $tr = fileList.add(fileData);
|
var $tr = fileList.add(fileData);
|
||||||
var $td = $tr.find('td.filename');
|
var $imgDiv = $tr.find('td.filename .thumbnail');
|
||||||
expect(OC.TestUtil.getImageUrl($td)).toEqual(OC.webroot + '/core/img/filetypes/folder.svg');
|
expect(OC.TestUtil.getImageUrl($imgDiv)).toEqual(OC.webroot + '/core/img/filetypes/folder.svg');
|
||||||
expect(previewLoadStub.notCalled).toEqual(true);
|
expect(previewLoadStub.notCalled).toEqual(true);
|
||||||
});
|
});
|
||||||
it('renders provided icon for file when provided', function() {
|
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'
|
icon: OC.webroot + '/core/img/filetypes/application-pdf.svg'
|
||||||
};
|
};
|
||||||
var $tr = fileList.add(fileData);
|
var $tr = fileList.add(fileData);
|
||||||
var $td = $tr.find('td.filename');
|
var $imgDiv = $tr.find('td.filename .thumbnail');
|
||||||
expect(OC.TestUtil.getImageUrl($td)).toEqual(OC.webroot + '/core/img/filetypes/application-pdf.svg');
|
expect(OC.TestUtil.getImageUrl($imgDiv)).toEqual(OC.webroot + '/core/img/filetypes/application-pdf.svg');
|
||||||
expect(previewLoadStub.notCalled).toEqual(true);
|
expect(previewLoadStub.notCalled).toEqual(true);
|
||||||
});
|
});
|
||||||
it('renders preview when no icon was provided and preview is available', function() {
|
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 $tr = fileList.add(fileData);
|
||||||
var $td = $tr.find('td.filename');
|
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);
|
expect(previewLoadStub.calledOnce).toEqual(true);
|
||||||
// third argument is callback
|
// third argument is callback
|
||||||
previewLoadStub.getCall(0).args[0].callback(OC.webroot + '/somepath.png');
|
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() {
|
it('renders default file type icon when no icon was provided and no preview is available', function() {
|
||||||
var fileData = {
|
var fileData = {
|
||||||
|
@ -1001,8 +1001,8 @@ describe('OCA.Files.FileList tests', function() {
|
||||||
isPreviewAvailable: false
|
isPreviewAvailable: false
|
||||||
};
|
};
|
||||||
var $tr = fileList.add(fileData);
|
var $tr = fileList.add(fileData);
|
||||||
var $td = $tr.find('td.filename');
|
var $imgDiv = $tr.find('td.filename .thumbnail');
|
||||||
expect(OC.TestUtil.getImageUrl($td)).toEqual(OC.webroot + '/core/img/filetypes/file.svg');
|
expect(OC.TestUtil.getImageUrl($imgDiv)).toEqual(OC.webroot + '/core/img/filetypes/file.svg');
|
||||||
expect(previewLoadStub.notCalled).toEqual(true);
|
expect(previewLoadStub.notCalled).toEqual(true);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -38,6 +38,7 @@
|
||||||
_sharedWithUser: false,
|
_sharedWithUser: false,
|
||||||
_linksOnly: false,
|
_linksOnly: false,
|
||||||
_clientSideSort: true,
|
_clientSideSort: true,
|
||||||
|
_allowSelection: false,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @private
|
* @private
|
||||||
|
|
|
@ -105,7 +105,7 @@ describe('OCA.Sharing.Util tests', function() {
|
||||||
$action = $tr.find('.action-share');
|
$action = $tr.find('.action-share');
|
||||||
expect($action.hasClass('permanent')).toEqual(false);
|
expect($action.hasClass('permanent')).toEqual(false);
|
||||||
expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
|
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);
|
expect($action.find('img').length).toEqual(1);
|
||||||
});
|
});
|
||||||
it('shows simple share text with share icon', function() {
|
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.hasClass('permanent')).toEqual(true);
|
||||||
expect($action.find('>span').text()).toEqual('Shared');
|
expect($action.find('>span').text()).toEqual('Shared');
|
||||||
expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
|
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);
|
expect($action.find('img').length).toEqual(1);
|
||||||
});
|
});
|
||||||
it('shows simple share text with public icon when shared with link', function() {
|
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.hasClass('permanent')).toEqual(true);
|
||||||
expect($action.find('>span').text()).toEqual('Shared');
|
expect($action.find('>span').text()).toEqual('Shared');
|
||||||
expect(OC.basename($action.find('img').attr('src'))).toEqual('public.svg');
|
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);
|
expect($action.find('img').length).toEqual(1);
|
||||||
});
|
});
|
||||||
it('shows owner name when owner is available', function() {
|
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.hasClass('permanent')).toEqual(true);
|
||||||
expect($action.find('>span').text()).toEqual('User One');
|
expect($action.find('>span').text()).toEqual('User One');
|
||||||
expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
|
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() {
|
it('shows recipients when recipients are available', function() {
|
||||||
var $action, $tr;
|
var $action, $tr;
|
||||||
|
@ -187,7 +187,7 @@ describe('OCA.Sharing.Util tests', function() {
|
||||||
expect($action.hasClass('permanent')).toEqual(true);
|
expect($action.hasClass('permanent')).toEqual(true);
|
||||||
expect($action.find('>span').text()).toEqual('Shared with User One, User Two');
|
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($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);
|
expect($action.find('img').length).toEqual(1);
|
||||||
});
|
});
|
||||||
it('shows static share text when file shared with user that has no share permission', function() {
|
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.hasClass('permanent')).toEqual(true);
|
||||||
expect($action.find('>span').text().trim()).toEqual('User One');
|
expect($action.find('>span').text().trim()).toEqual('User One');
|
||||||
expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
|
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);
|
expect($action.find('img').length).toEqual(1);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -131,7 +131,7 @@ OC.Share={
|
||||||
}
|
}
|
||||||
for(i = 0; i < files.length; i++) {
|
for(i = 0; i < files.length; i++) {
|
||||||
if ($(files[i]).closest('tr').data('type') === 'dir') {
|
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 {
|
else {
|
||||||
shareFolderIcon = OC.imagePath('core', 'filetypes/folder-shared');
|
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') {
|
} else if (type === 'dir') {
|
||||||
shareFolderIcon = OC.imagePath('core', 'filetypes/folder');
|
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
|
// update share action text / icon
|
||||||
if (hasShares || owner) {
|
if (hasShares || owner) {
|
||||||
|
|
|
@ -509,7 +509,7 @@ describe('OC.Share tests', function() {
|
||||||
|
|
||||||
beforeEach(function() {
|
beforeEach(function() {
|
||||||
tipsyStub = sinon.stub($.fn, 'tipsy');
|
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(
|
$file.find('.filename').append(
|
||||||
'<span class="fileactions">' +
|
'<span class="fileactions">' +
|
||||||
'<a href="#" class="action action-share" data-action="Share">' +
|
'<a href="#" class="action action-share" data-action="Share">' +
|
||||||
|
@ -581,7 +581,7 @@ describe('OC.Share tests', function() {
|
||||||
|
|
||||||
describe('displaying the folder icon', function() {
|
describe('displaying the folder icon', function() {
|
||||||
function checkIcon(expectedImage) {
|
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);
|
expectedIcon = OC.imagePath('core', expectedImage);
|
||||||
expect(imageUrl).toEqual(expectedIcon);
|
expect(imageUrl).toEqual(expectedIcon);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue