diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 86fb0dc604..50aa58b53d 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -147,14 +147,14 @@ a.action>img { max-height:16px; max-width:16px; vertical-align:text-bottom; } display:none; } #fileList tr:hover a.action, #fileList a.action.permanent { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=.5)"; - filter: alpha(opacity=.5); + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); opacity: .5; display:inline; } #fileList tr:hover a.action:hover { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; - filter: alpha(opacity=1); + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); opacity: 1; display:inline; } diff --git a/apps/files/js/fileactions.js b/apps/files/js/fileactions.js index de67d13559..5027211b53 100644 --- a/apps/files/js/fileactions.js +++ b/apps/files/js/fileactions.js @@ -123,14 +123,11 @@ var FileActions = { img = img(file); } if (typeof trashBinApp !== 'undefined' && trashBinApp) { - var html = ''; + var html = ''; } else { - var html = ''; + var html = ''; } var element = $(html); - if (img) { - element.append($('')); - } element.data('action', actions['Delete']); element.on('click', {a: null, elem: parent, actionFunc: actions['Delete']}, actionHandler); parent.parent().children().last().append(element); diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index f7cc3767b2..10801af3ea 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -15,7 +15,7 @@ var FileList={ // filename td td = $('').attr({ "class": "filename", - "style": 'background-image:url('+iconurl+')' + "style": 'background-image:url('+iconurl+'); background-size: 16px;' }); td.append(''); var link_elem = $('').attr({ @@ -371,9 +371,7 @@ var FileList={ } for (var i=0; i'; - deleteAction.html(newHTML); + deleteAction.removeClass('delete-icon').addClass('progress-icon'); } // Finish any existing actions if (FileList.lastAction) { @@ -395,8 +393,8 @@ var FileList={ checkTrashStatus(); } else { $.each(files,function(index,file) { - var deleteAction = $('tr').filterAttr('data-file',file).children("td.date").children(".move2trash"); - deleteAction.html(oldHTML); + var deleteAction = $('tr').filterAttr('data-file',files[i]).children("td.date").children(".action.delete"); + deleteAction.removeClass('progress-icon').addClass('delete-icon'); }); } }); diff --git a/core/css/styles.css b/core/css/styles.css index 1b58899eef..c3d3425385 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -833,9 +833,25 @@ div.crumb:active { } /* icons */ +.folder-icon, .delete-icon, .edit-icon, .progress-icon { + background-repeat: no-repeat; + background-position: center; +} .folder-icon { background-image: url('../img/places/folder.svg'); } .delete-icon { background-image: url('../img/actions/delete.svg'); } +.delete-icon:hover, .delete-icon:focus { + background-image: url('../img/actions/delete-hover.svg'); +} .edit-icon { background-image: url('../img/actions/rename.svg'); } +.progress-icon { + background-image: url('../img/loading.gif'); + background-size: 16px; + /* force show the loading icon, not only on hover */ + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter:alpha(opacity=100); + opacity: 1 !important; + display: inline !important; +} /* buttons */ button.loading { @@ -855,6 +871,10 @@ button.loading { ::-moz-focus-inner { border: 0; } +.lte8 .delete-icon { background-image: url('../img/actions/delete.png'); } +.lte8 .delete-icon:hover, .delete-icon:focus { + background-image: url('../img/actions/delete-hover.png'); +} /* IE8 needs background to be set to same color to make transparency look good. */ .lte9 #body-login form input[type="text"] { diff --git a/core/img/actions/delete-hover.png b/core/img/actions/delete-hover.png new file mode 100644 index 0000000000..99f549faf9 Binary files /dev/null and b/core/img/actions/delete-hover.png differ diff --git a/core/img/actions/delete-hover.svg b/core/img/actions/delete-hover.svg new file mode 100644 index 0000000000..568185c5c7 --- /dev/null +++ b/core/img/actions/delete-hover.svg @@ -0,0 +1,12 @@ + + + + + image/svg+xml + + + + + + + diff --git a/core/img/actions/delete.png b/core/img/actions/delete.png index 99f549faf9..0d8c89a56e 100644 Binary files a/core/img/actions/delete.png and b/core/img/actions/delete.png differ diff --git a/core/img/actions/delete.svg b/core/img/actions/delete.svg index 568185c5c7..ef564bfd48 100644 --- a/core/img/actions/delete.svg +++ b/core/img/actions/delete.svg @@ -1,12 +1,6 @@ + - - - - image/svg+xml - - - - - - + + + diff --git a/core/js/js.js b/core/js/js.js index 60a29342f2..c2b81ae327 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -762,7 +762,6 @@ $(document).ready(function(){ $('.password .action').tipsy({gravity:'se', fade:true, live:true}); $('#upload').tipsy({gravity:'w', fade:true}); $('.selectedActions a').tipsy({gravity:'s', fade:true, live:true}); - $('a.delete').tipsy({gravity: 'e', fade:true, live:true}); $('a.action').tipsy({gravity:'s', fade:true, live:true}); $('td .modified').tipsy({gravity:'s', fade:true, live:true});