show icons instead of text for file actions
This commit is contained in:
parent
74249c65da
commit
ece6bd663c
6 changed files with 38 additions and 26 deletions
|
@ -7,7 +7,7 @@ $(document).ready(function() {
|
||||||
$( 'body' ).append(overlay);
|
$( 'body' ).append(overlay);
|
||||||
var container=$('<div id="lightbox"/>');
|
var container=$('<div id="lightbox"/>');
|
||||||
$( 'body' ).append(container);
|
$( 'body' ).append(container);
|
||||||
FileActions.register('image','View',function(filename){
|
FileActions.register('image','View','',function(filename){
|
||||||
var location='ajax/download.php?files='+filename+'&dir='+$('#dir').val();
|
var location='ajax/download.php?files='+filename+'&dir='+$('#dir').val();
|
||||||
overlay.show();
|
overlay.show();
|
||||||
if(!images[location]){
|
if(!images[location]){
|
||||||
|
|
|
@ -40,11 +40,11 @@ function loadPlayer(type,ready){
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
loadPlayer.done=false
|
loadPlayer.done=false
|
||||||
|
|
||||||
FileActions.register('audio','Add to playlist',addAudio);
|
// FileActions.register('audio','Add to playlist','',addAudio);
|
||||||
FileActions.register('application/ogg','Add to playlist',addAudio);
|
// FileActions.register('application/ogg','Add to playlist','',addAudio);
|
||||||
|
|
||||||
FileActions.register('audio','Play',playAudio);
|
FileActions.register('audio','Play','',playAudio);
|
||||||
FileActions.register('application/ogg','Play',playAudio);
|
FileActions.register('application/ogg','','Play',playAudio);
|
||||||
FileActions.setDefault('audio','Play');
|
FileActions.setDefault('audio','Play');
|
||||||
FileActions.setDefault('application/ogg','Play');
|
FileActions.setDefault('application/ogg','Play');
|
||||||
});
|
});
|
|
@ -26,7 +26,7 @@ table th, table td { border-bottom:1px solid #ddd; text-align:left; font-weight:
|
||||||
table td { border-bottom:1px solid #eee; font-style:normal; }
|
table td { border-bottom:1px solid #eee; font-style:normal; }
|
||||||
table th#headerSize, table td.filesize, table th#headerDate, table td.date { width:5em; padding:0 1em; text-align:right; cursor:help; }
|
table th#headerSize, table td.filesize, table th#headerDate, table td.date { width:5em; padding:0 1em; text-align:right; cursor:help; }
|
||||||
table td.selection, table th.selection, table td.fileaction { width:2em; text-align:center; }
|
table td.selection, table th.selection, table td.fileaction { width:2em; text-align:center; }
|
||||||
table td.filename a { display:block; background-image:url('../img/file.png'); text-decoration:none; }
|
table td.filename a.name { display:block; background-image:url('../img/file.png'); text-decoration:none; }
|
||||||
table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:.5em .5em .5em 3em; background-position:1em center; background-repeat:no-repeat; }
|
table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:.5em .5em .5em 3em; background-position:1em center; background-repeat:no-repeat; }
|
||||||
table td.filename a:hover, table td.filename a:focus { outline:0; }
|
table td.filename a:hover, table td.filename a:focus { outline:0; }
|
||||||
table td.filename a:active { outline:0; }
|
table td.filename a:active { outline:0; }
|
||||||
|
@ -53,6 +53,7 @@ table td.delete { background-image:url('../img/delete.png'); }
|
||||||
#selectedActions { float:right; display:none; }
|
#selectedActions { float:right; display:none; }
|
||||||
#selectedActions a { margin:0 .5em; }
|
#selectedActions a { margin:0 .5em; }
|
||||||
#uploadsize-message { display:none; }
|
#uploadsize-message { display:none; }
|
||||||
|
a.file_action { float:right; display:inline; padding:3px !important }
|
||||||
|
|
||||||
/* add breadcrumb divider to the File item in navigation panel */
|
/* add breadcrumb divider to the File item in navigation panel */
|
||||||
#plugins li:first-child { background-position:15.7em 0px; background-repeat:no-repeat; background-image:url("/owncloud/core/img/breadcrumb-divider-start.png"); width:15.7em; padding-right:11px; }
|
#plugins li:first-child { background-position:15.7em 0px; background-repeat:no-repeat; background-image:url("/owncloud/core/img/breadcrumb-divider-start.png"); width:15.7em; padding-right:11px; }
|
||||||
|
|
|
@ -1,11 +1,14 @@
|
||||||
FileActions={
|
FileActions={
|
||||||
actions:{},
|
actions:{},
|
||||||
defaults:{},
|
defaults:{},
|
||||||
register:function(mime,name,action){
|
icons:{},
|
||||||
|
currentFile:null,
|
||||||
|
register:function(mime,name,icon,action){
|
||||||
if(!FileActions.actions[mime]){
|
if(!FileActions.actions[mime]){
|
||||||
FileActions.actions[mime]={};
|
FileActions.actions[mime]={};
|
||||||
}
|
}
|
||||||
FileActions.actions[mime][name]=action;
|
FileActions.actions[mime][name]=action;
|
||||||
|
FileActions.icons[name]=icon;
|
||||||
},
|
},
|
||||||
setDefault:function(mime,name){
|
setDefault:function(mime,name){
|
||||||
FileActions.defaults[mime]=name;
|
FileActions.defaults[mime]=name;
|
||||||
|
@ -49,14 +52,17 @@ FileActions={
|
||||||
return actions[name];
|
return actions[name];
|
||||||
},
|
},
|
||||||
display:function(parent){
|
display:function(parent){
|
||||||
$('#file_menu').empty();
|
FileActions.currentFile=parent;
|
||||||
parent.append($('#file_menu'));
|
|
||||||
var actions=FileActions.get(FileActions.getCurrentMimeType(),FileActions.getCurrentType());
|
var actions=FileActions.get(FileActions.getCurrentMimeType(),FileActions.getCurrentType());
|
||||||
var defaultAction=FileActions.getDefault(FileActions.getCurrentMimeType(),FileActions.getCurrentType());
|
var defaultAction=FileActions.getDefault(FileActions.getCurrentMimeType(),FileActions.getCurrentType());
|
||||||
for(name in actions){
|
for(name in actions){
|
||||||
if(actions[name]!=defaultAction && name!='Delete'){
|
if(actions[name]!=defaultAction && name!='Delete'){
|
||||||
var html='<a href="#" alt="'+name+'">'+name+'</a>';
|
var img=FileActions.icons[name];
|
||||||
|
var html='<a href="#" title="'+name+'" class="file_action"/>';
|
||||||
var element=$(html);
|
var element=$(html);
|
||||||
|
if(img){
|
||||||
|
element.append($('<img src="'+img+'"/>'));
|
||||||
|
}
|
||||||
element.data('action',name);
|
element.data('action',name);
|
||||||
element.click(function(event){
|
element.click(function(event){
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
@ -66,12 +72,16 @@ FileActions={
|
||||||
FileActions.hide();
|
FileActions.hide();
|
||||||
action(currentFile);
|
action(currentFile);
|
||||||
});
|
});
|
||||||
$('#file_menu').append(element);
|
parent.children('a.name').append(element);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if(actions['Delete']){
|
if(actions['Delete']){
|
||||||
var html='<a href="#" alt="Delete" id="action_delete">Delete</a>';
|
var img=FileActions.icons['Delete'];
|
||||||
|
var html='<a href="#" title="Delete" class="file_action"/>';
|
||||||
var element=$(html);
|
var element=$(html);
|
||||||
|
if(img){
|
||||||
|
element.append($('<img src="'+img+'"/>'));
|
||||||
|
}
|
||||||
element.data('action','Delete');
|
element.data('action','Delete');
|
||||||
element.click(function(event){
|
element.click(function(event){
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
@ -83,31 +93,27 @@ FileActions={
|
||||||
});
|
});
|
||||||
parent.parent().children().last().append(element);
|
parent.parent().children().last().append(element);
|
||||||
}
|
}
|
||||||
$('#file_menu').show();
|
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
hide:function(){
|
hide:function(){
|
||||||
$('#file_menu').hide();
|
$('.file_action').remove();
|
||||||
$('#file_menu').empty();
|
|
||||||
$('#action_delete').remove();
|
|
||||||
$('body').append($('#file_menu'));
|
|
||||||
},
|
},
|
||||||
getCurrentFile:function(){
|
getCurrentFile:function(){
|
||||||
return $('#file_menu').parent().parent().attr('data-file');
|
return FileActions.currentFile.parent().attr('data-file');
|
||||||
},
|
},
|
||||||
getCurrentMimeType:function(){
|
getCurrentMimeType:function(){
|
||||||
return $('#file_menu').parent().parent().attr('data-mime');
|
return FileActions.currentFile.parent().attr('data-mime');
|
||||||
},
|
},
|
||||||
getCurrentType:function(){
|
getCurrentType:function(){
|
||||||
return $('#file_menu').parent().parent().attr('data-type');
|
return FileActions.currentFile.parent().attr('data-type');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
FileActions.register('all','Download',function(filename){
|
FileActions.register('all','Download',OC.imagePath('core','actions/download'),function(filename){
|
||||||
window.location='ajax/download.php?files='+filename+'&dir='+$('#dir').val();
|
window.location='ajax/download.php?files='+filename+'&dir='+$('#dir').val();
|
||||||
});
|
});
|
||||||
|
|
||||||
FileActions.register('all','Delete',function(filename){
|
FileActions.register('all','Delete',OC.imagePath('core','actions/delete'),function(filename){
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: 'ajax/delete.php',
|
url: 'ajax/delete.php',
|
||||||
data: "dir="+encodeURIComponent($('#dir').val())+"&file="+encodeURIComponent(filename),
|
data: "dir="+encodeURIComponent($('#dir').val())+"&file="+encodeURIComponent(filename),
|
||||||
|
@ -119,9 +125,14 @@ FileActions.register('all','Delete',function(filename){
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
FileActions.register('all','Rename',OC.imagePath('core','actions/rename'),function(filename){
|
||||||
|
//todo
|
||||||
|
alert('Implement Me!!');
|
||||||
|
});
|
||||||
|
|
||||||
FileActions.setDefault('all','Download');
|
FileActions.setDefault('all','Download');
|
||||||
|
|
||||||
FileActions.register('dir','Open',function(filename){
|
FileActions.register('dir','Open','',function(filename){
|
||||||
window.location='index.php?dir='+$('#dir').val()+'/'+filename;
|
window.location='index.php?dir='+$('#dir').val()+'/'+filename;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -5,7 +5,7 @@ FileList={
|
||||||
addFile:function(name,size,lastModified,loading){
|
addFile:function(name,size,lastModified,loading){
|
||||||
var img=(loading)?'img/loading.gif':'img/file.png';
|
var img=(loading)?'img/loading.gif':'img/file.png';
|
||||||
var html='<tr data-file="'+name+'" data-type="file">';
|
var html='<tr data-file="'+name+'" data-type="file">';
|
||||||
html+='<td class="filename"><input type="checkbox" /><a style="background-image:url('+img+')" href="download.php?file='+$('#dir').val()+'/'+name+'">'+name+'</a></td>';
|
html+='<td class="filename"><input type="checkbox" /><a class="name" style="background-image:url('+img+')" href="download.php?file='+$('#dir').val()+'/'+name+'">'+name+'</a></td>';
|
||||||
html+='<td class="filesize">'+size+'</td>';
|
html+='<td class="filesize">'+size+'</td>';
|
||||||
html+='<td class="date">'+lastModified+'</td>';
|
html+='<td class="date">'+lastModified+'</td>';
|
||||||
html+='</tr>';
|
html+='</tr>';
|
||||||
|
@ -18,7 +18,7 @@ FileList={
|
||||||
},
|
},
|
||||||
addDir:function(name,size,lastModified){
|
addDir:function(name,size,lastModified){
|
||||||
var html='<tr data-file="'+name+'" data-type="dir">';
|
var html='<tr data-file="'+name+'" data-type="dir">';
|
||||||
html+='<td class="filename"><input type="checkbox" /><a style="background-image:url(img/folder.png)" href="index.php?dir='+$('#dir').val()+'/'+name+'"><strong>'+name+'</strong></a></td>';
|
html+='<td class="filename"><input type="checkbox" /><a class="name" style="background-image:url(img/folder.png)" href="index.php?dir='+$('#dir').val()+'/'+name+'"><strong>'+name+'</strong></a></td>';
|
||||||
html+='<td class="filesize">'+size+'</td>';
|
html+='<td class="filesize">'+size+'</td>';
|
||||||
html+='<td class="date">'+lastModified+'</td>';
|
html+='<td class="date">'+lastModified+'</td>';
|
||||||
html+='</tr>';
|
html+='</tr>';
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<tr data-file="<?php echo $file['name'];?>" data-type="<?php echo ($file['type'] == 'dir')?'dir':'file'?>" data-mime="<?php echo $file['mime']?>" data-size='<?php echo $file['size'];?>'>
|
<tr data-file="<?php echo $file['name'];?>" data-type="<?php echo ($file['type'] == 'dir')?'dir':'file'?>" data-mime="<?php echo $file['mime']?>" data-size='<?php echo $file['size'];?>'>
|
||||||
<td class="filename">
|
<td class="filename">
|
||||||
<input type="checkbox" />
|
<input type="checkbox" />
|
||||||
<a style="background-image:url(<?php if($file['type'] == 'dir') echo mimetype_icon('dir'); else echo mimetype_icon($file['mime']); ?>)" href="<?php if($file['type'] == 'dir') echo link_to('files', 'index.php?dir='.$file['directory'].'/'.$file['name']); else echo link_to('files', 'download.php?file='.$file['directory'].'/'.$file['name']); ?>" title="">
|
<a class="name" style="background-image:url(<?php if($file['type'] == 'dir') echo mimetype_icon('dir'); else echo mimetype_icon($file['mime']); ?>)" href="<?php if($file['type'] == 'dir') echo link_to('files', 'index.php?dir='.$file['directory'].'/'.$file['name']); else echo link_to('files', 'download.php?file='.$file['directory'].'/'.$file['name']); ?>" title="">
|
||||||
<?php if($file['type'] == 'dir'):?>
|
<?php if($file['type'] == 'dir'):?>
|
||||||
<strong><?php echo htmlspecialchars($file['name']);?></strong>
|
<strong><?php echo htmlspecialchars($file['name']);?></strong>
|
||||||
<?php else:?>
|
<?php else:?>
|
||||||
|
|
Loading…
Reference in a new issue