diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 389b7fae806deefbe995d029ea47b5e324248c9c..b65af1fa0f3768ea6eb753156aeae50b4809a20e 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -747,9 +747,6 @@ html.ie8 #controls .button.new {
white-space: nowrap;
overflow: hidden;
}
-.newFileMenu.popovermenu .menuitem .icon {
- margin-bottom: -2px;
-}
.newFileMenu.popovermenu a.menuitem,
.newFileMenu.popovermenu label.menuitem,
.newFileMenu.popovermenu .menuitem {
@@ -788,3 +785,14 @@ html.ie8 #controls .button.new {
padding: 0;
}
+#filestable .filename .action .icon,
+#filestable .selectedActions a .icon,
+#controls .actions .button .icon {
+ display: inline-block;
+ vertical-align: middle;
+ background-size: 16px 16px;
+}
+
+.app-files .actions .button.new .icon {
+ margin-bottom: 2px;
+}
diff --git a/apps/files/js/fileactions.js b/apps/files/js/fileactions.js
index 67125f1570f46852569ad968a9609d6f80eab1dd..05ff2f0cbfa43e0d0fe1385b4f70943da3c83b71 100644
--- a/apps/files/js/fileactions.js
+++ b/apps/files/js/fileactions.js
@@ -12,7 +12,12 @@
var TEMPLATE_FILE_ACTION_TRIGGER =
'<a class="action action-{{nameLowerCase}}" href="#" data-action="{{name}}">' +
- '{{#if icon}}<img class="svg" alt="{{altText}}" src="{{icon}}" />{{/if}}' +
+ '{{#if icon}}' +
+ '<img class="svg" alt="{{altText}}" src="{{icon}}" />' +
+ '{{else}}' +
+ '{{#if iconClass}}<span class="icon {{iconClass}}" />{{/if}}' +
+ '{{#unless hasDisplayName}}<span class="hidden-visually">{{altText}}</span>{{/unless}}' +
+ '{{/if}}' +
'{{#if displayName}}<span> {{displayName}}</span>{{/if}}' +
'</a>';
@@ -143,6 +148,7 @@
mime: mime,
order: action.order || 0,
icon: action.icon,
+ iconClass: action.iconClass,
permissions: action.permissions,
type: action.type || FileActions.TYPE_DROPDOWN,
altText: action.altText || ''
@@ -299,10 +305,15 @@
nameLowerCase: actionSpec.name.toLowerCase(),
displayName: actionSpec.displayName,
icon: actionSpec.icon,
+ iconClass: actionSpec.iconClass,
altText: actionSpec.altText,
+ hasDisplayName: !!actionSpec.displayName
};
if (_.isFunction(actionSpec.icon)) {
- params.icon = actionSpec.icon(context.$file.attr('data-file'));
+ params.icon = actionSpec.icon(context.$file.attr('data-file'), context);
+ }
+ if (_.isFunction(actionSpec.iconClass)) {
+ params.iconClass = actionSpec.iconClass(context.$file.attr('data-file'), context);
}
var $actionLink = this._makeActionLink(params, context);
@@ -363,7 +374,7 @@
var $el = this._renderInlineAction({
name: 'menu',
displayName: '',
- icon: OC.imagePath('core', 'actions/more'),
+ iconClass: 'icon-more',
altText: t('files', 'Actions'),
action: this._showMenuClosure
}, false, context);
@@ -570,9 +581,7 @@
order: -20,
mime: 'all',
permissions: OC.PERMISSION_READ,
- icon: function () {
- return OC.imagePath('core', 'actions/download');
- },
+ iconClass: 'icon-download',
actionHandler: function (filename, context) {
var dir = context.dir || context.fileList.getCurrentDirectory();
var isDir = context.$file.attr('data-type') === 'dir';
@@ -602,9 +611,7 @@
mime: 'all',
order: -30,
permissions: OC.PERMISSION_UPDATE,
- icon: function() {
- return OC.imagePath('core', 'actions/rename');
- },
+ iconClass: 'icon-rename',
actionHandler: function (filename, context) {
context.fileList.rename(filename);
}
@@ -631,9 +638,7 @@
order: 1000,
// permission is READ because we show a hint instead if there is no permission
permissions: OC.PERMISSION_DELETE,
- icon: function() {
- return OC.imagePath('core', 'actions/delete');
- },
+ iconClass: 'icon-delete',
actionHandler: function(fileName, context) {
// if there is no permission to delete do nothing
if((context.$file.data('permissions') & OC.PERMISSION_DELETE) === 0) {
@@ -682,8 +687,8 @@
* Defaults to the name given in name property
* @property {String} mime mime type
* @property {int} permissions permissions
- * @property {(Function|String)} icon icon path to the icon or function
- * that returns it
+ * @property {(Function|String)} icon icon path to the icon or function that returns it (deprecated, use iconClass instead)
+ * @property {(Function|String)} iconClass class name of the icon (recommended for theming)
* @property {OCA.Files.FileActions~renderActionFunction} [render] optional rendering function
* @property {OCA.Files.FileActions~actionHandler} actionHandler action handler function
*/
diff --git a/apps/files/js/fileactionsmenu.js b/apps/files/js/fileactionsmenu.js
index 9e51d8f1f1fe58bf16da97fc9111b840a3cbcfd1..45d2bd83049aa1aa85bd5a64a68fc0629585c8b4 100644
--- a/apps/files/js/fileactionsmenu.js
+++ b/apps/files/js/fileactionsmenu.js
@@ -14,7 +14,16 @@
'<ul>' +
'{{#each items}}' +
'<li>' +
- '<a href="#" class="menuitem action action-{{nameLowerCase}} permanent" data-action="{{name}}">{{#if icon}}<img class="icon" src="{{icon}}"/>{{else}}<span class="no-icon"></span>{{/if}}<span>{{displayName}}</span></a>' +
+ '<a href="#" class="menuitem action action-{{nameLowerCase}} permanent" data-action="{{name}}">' +
+ '{{#if icon}}<img class="icon" src="{{icon}}"/>' +
+ '{{else}}'+
+ '{{#if iconClass}}' +
+ '<span class="icon {{iconClass}}"></span>' +
+ '{{else}}' +
+ '<span class="no-icon"></span>' +
+ '{{/if}}' +
+ '{{/if}}' +
+ '<span>{{displayName}}</span></a>' +
'</li>' +
'{{/each}}' +
'</ul>';
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 81dfea2114d138fd93cd264a07e59f371195d134..95fdac02c2d08377e3b3f5264b497a45c863e0ef 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -10,7 +10,10 @@
(function() {
- var TEMPLATE_ADDBUTTON = '<a href="#" class="button new"><img src="{{iconUrl}}" alt="{{addText}}"></img></a>';
+ var TEMPLATE_ADDBUTTON = '<a href="#" class="button new">' +
+ '<span class="icon {{iconClass}}"></span>' +
+ '<span class="hidden-visually">{{addText}}</span>' +
+ '</a>';
/**
* @class OCA.Files.FileList
@@ -329,7 +332,7 @@
displayName: t('files', 'Details'),
mime: 'all',
order: -50,
- icon: OC.imagePath('core', 'actions/details'),
+ iconClass: 'icon-details',
permissions: OC.PERMISSION_READ,
actionHandler: function(fileName, context) {
self._updateDetailsView(fileName);
@@ -2715,7 +2718,7 @@
}
var $newButton = $(this._addButtonTemplate({
addText: t('files', 'New'),
- iconUrl: OC.imagePath('core', 'actions/add')
+ iconClass: 'icon-add'
}));
$actionsContainer.prepend($newButton);
diff --git a/apps/files/js/tagsplugin.js b/apps/files/js/tagsplugin.js
index 81b22e34cc25724afe036a1741bff02c796ce0a6..3c0a231d003329060587f6bfcfb33504fb2b0875 100644
--- a/apps/files/js/tagsplugin.js
+++ b/apps/files/js/tagsplugin.js
@@ -15,17 +15,18 @@
var TEMPLATE_FAVORITE_ACTION =
'<a href="#" ' +
'class="action action-favorite {{#isFavorite}}permanent{{/isFavorite}}">' +
- '<img class="svg" alt="{{altText}}" src="{{imgFile}}" />' +
+ '<span class="icon {{iconClass}}" />' +
+ '<span class="hidden-visually">{{altText}}</span>' +
'</a>';
/**
- * Returns the path to the star image
+ * Returns the icon class for the matching state
*
* @param {boolean} state true if starred, false otherwise
- * @return {string} path to star image
+ * @return {string} icon class for star image
*/
- function getStarImage(state) {
- return OC.imagePath('core', state ? 'actions/starred' : 'actions/star');
+ function getStarIconClass(state) {
+ return state ? 'icon-starred' : 'icon-star';
}
/**
@@ -41,7 +42,7 @@
return this._template({
isFavorite: state,
altText: state ? t('files', 'Favorited') : t('files', 'Favorite'),
- imgFile: getStarImage(state)
+ iconClass: getStarIconClass(state)
});
}
@@ -52,8 +53,7 @@
* @param {boolean} state true if starred, false otherwise
*/
function toggleStar($actionEl, state) {
- $actionEl.find('img').attr('src', getStarImage(state));
- $actionEl.hide().show(0); //force Safari to redraw element on src change
+ $actionEl.removeClass('icon-star icon-starred').addClass(getStarIconClass(state));
$actionEl.toggleClass('permanent', state);
}
diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php
index ea3e6c61d4a03bb164944a2e8398253010d8e3a4..29769bcd82567feea53a33129c68a7ccbc5035c0 100644
--- a/apps/files/templates/list.php
+++ b/apps/files/templates/list.php
@@ -52,9 +52,8 @@
<a class="name sort columntitle" data-sort="name"><span><?php p($l->t( 'Name' )); ?></span><span class="sort-indicator"></span></a>
<span id="selectedActionsList" class="selectedActions">
<a href="" class="download">
- <img class="svg" alt=""
- src="<?php print_unescaped(image_path("core", "actions/download.svg")); ?>" />
- <?php p($l->t('Download'))?>
+ <span class="icon icon-download"></span>
+ <span><?php p($l->t('Download'))?></span>
</a>
</span>
</div>
@@ -65,9 +64,8 @@
<th id="headerDate" class="hidden column-mtime">
<a id="modified" class="columntitle" data-sort="mtime"><span><?php p($l->t( 'Modified' )); ?></span><span class="sort-indicator"></span></a>
<span class="selectedActions"><a href="" class="delete-selected">
- <?php p($l->t('Delete'))?>
- <img class="svg" alt=""
- src="<?php print_unescaped(image_path("core", "actions/delete.svg")); ?>" />
+ <span><?php p($l->t('Delete'))?></span>
+ <span class="icon icon-delete"></span>
</a></span>
</th>
</tr>
diff --git a/apps/files/tests/js/fileactionsSpec.js b/apps/files/tests/js/fileactionsSpec.js
index 4f4d4d3d197de83c8c921ba2d61122ed239a5c12..470f2854f43e32f697058b0e5b188ce6ca4c9353 100644
--- a/apps/files/tests/js/fileactionsSpec.js
+++ b/apps/files/tests/js/fileactionsSpec.js
@@ -153,7 +153,7 @@ describe('OCA.Files.FileActions tests', function() {
expect($tr.find('.action.action-match').length).toEqual(1);
expect($tr.find('.action.action-nomatch').length).toEqual(0);
});
- it('display inline icon', function() {
+ it('display inline icon with image path', function() {
fileActions.registerAction({
name: 'Icon',
displayName: 'IconDisplay',
@@ -179,7 +179,7 @@ describe('OCA.Files.FileActions tests', function() {
expect($tr.find('.action.action-noicon').length).toEqual(1);
expect($tr.find('.action.action-noicon').find('img').length).toEqual(0);
});
- it('display alt text on inline icon', function() {
+ it('display alt text on inline icon with image path', function() {
fileActions.registerAction({
name: 'IconAltText',
displayName: 'IconAltTextDisplay',
@@ -209,6 +209,63 @@ describe('OCA.Files.FileActions tests', function() {
expect($tr.find('.action.action-iconnoalttext').find('img').length).toEqual(1);
expect($tr.find('.action.action-iconnoalttext').find('img').eq(0).attr('alt')).toEqual('');
});
+ it('display inline icon with iconClass', function() {
+ fileActions.registerAction({
+ name: 'Icon',
+ displayName: 'IconDisplay',
+ type: OCA.Files.FileActions.TYPE_INLINE,
+ mime: 'all',
+ iconClass: 'icon-test',
+ permissions: OC.PERMISSION_READ
+ });
+ fileActions.registerAction({
+ name: 'NoIcon',
+ displayName: 'NoIconDisplay',
+ type: OCA.Files.FileActions.TYPE_INLINE,
+ mime: 'all',
+ permissions: OC.PERMISSION_READ
+ });
+
+ fileActions.display($tr.find('td.filename'), true, fileList);
+
+ expect($tr.find('.action.action-icon').length).toEqual(1);
+ expect($tr.find('.action.action-icon').find('.icon').length).toEqual(1);
+ expect($tr.find('.action.action-icon').find('.icon').hasClass('icon-test')).toEqual(true);
+
+ expect($tr.find('.action.action-noicon').length).toEqual(1);
+ expect($tr.find('.action.action-noicon').find('.icon').length).toEqual(0);
+ });
+ it('display alt text on inline icon with iconClass when no display name exists', function() {
+ fileActions.registerAction({
+ name: 'IconAltText',
+ displayName: '',
+ type: OCA.Files.FileActions.TYPE_INLINE,
+ mime: 'all',
+ iconClass: 'icon-alttext',
+ altText: 'alt icon text',
+ permissions: OC.PERMISSION_READ
+ });
+
+ fileActions.registerAction({
+ name: 'IconNoAltText',
+ displayName: 'IconNoAltTextDisplay',
+ type: OCA.Files.FileActions.TYPE_INLINE,
+ mime: 'all',
+ altText: 'useless alt text',
+ iconClass: 'icon-noalttext',
+ permissions: OC.PERMISSION_READ
+ });
+
+ fileActions.display($tr.find('td.filename'), true, fileList);
+
+ expect($tr.find('.action.action-iconalttext').length).toEqual(1);
+ expect($tr.find('.action.action-iconalttext').find('.icon').length).toEqual(1);
+ expect($tr.find('.action.action-iconalttext').find('.hidden-visually').text()).toEqual('alt icon text');
+
+ expect($tr.find('.action.action-iconnoalttext').length).toEqual(1);
+ expect($tr.find('.action.action-iconnoalttext').find('.icon').length).toEqual(1);
+ expect($tr.find('.action.action-iconnoalttext').find('.hidden-visually').length).toEqual(0);
+ });
});
describe('action handler', function() {
var actionStub, $tr, clock;
diff --git a/apps/files/tests/js/tagspluginspec.js b/apps/files/tests/js/tagspluginspec.js
index 533aa63362cb98f20f6ea03a2aadb58a115bfdc4..a4efc08aa53577908ed1a2584df7c973c8daf275 100644
--- a/apps/files/tests/js/tagspluginspec.js
+++ b/apps/files/tests/js/tagspluginspec.js
@@ -99,7 +99,8 @@ describe('OCA.Files.TagsPlugin tests', function() {
expect($tr.attr('data-favorite')).toEqual('true');
expect($tr.attr('data-tags').split('|')).toEqual(['tag1', 'tag2', 'tag3', OC.TAG_FAVORITE]);
expect(fileList.files[0].tags).toEqual(['tag1', 'tag2', 'tag3', OC.TAG_FAVORITE]);
- expect($action.find('img').attr('src')).toEqual(OC.imagePath('core', 'actions/starred'));
+ expect($action.find('.icon').hasClass('icon-star')).toEqual(false);
+ expect($action.find('.icon').hasClass('icon-starred')).toEqual(true);
$action.click();
@@ -119,7 +120,8 @@ describe('OCA.Files.TagsPlugin tests', function() {
expect($tr.attr('data-favorite')).toBeFalsy();
expect($tr.attr('data-tags').split('|')).toEqual(['tag1', 'tag2', 'tag3']);
expect(fileList.files[0].tags).toEqual(['tag1', 'tag2', 'tag3']);
- expect($action.find('img').attr('src')).toEqual(OC.imagePath('core', 'actions/star'));
+ expect($action.find('.icon').hasClass('icon-star')).toEqual(true);
+ expect($action.find('.icon').hasClass('icon-starred')).toEqual(false);
});
});
describe('elementToFile', function() {
diff --git a/apps/files_sharing/css/sharetabview.css b/apps/files_sharing/css/sharetabview.css
index 642c0909af3bb48cba57a796e4372ce583e2a1fc..04338820881cf964ac682fd3d4813c7e87912123 100644
--- a/apps/files_sharing/css/sharetabview.css
+++ b/apps/files_sharing/css/sharetabview.css
@@ -87,3 +87,7 @@
margin-top: 9px;
}
+.shareTabView .icon {
+ display: inline-block;
+ background-size: 16px 16px;
+}
diff --git a/apps/files_sharing/js/share.js b/apps/files_sharing/js/share.js
index 0a01c5af0addd46c758a571cc62ea1cdd32114b9..2711b2392e9fa1658d867842153c142bd023d3c5 100644
--- a/apps/files_sharing/js/share.js
+++ b/apps/files_sharing/js/share.js
@@ -131,7 +131,7 @@
displayName: '',
mime: 'all',
permissions: OC.PERMISSION_ALL,
- icon: OC.imagePath('core', 'actions/share'),
+ iconClass: 'icon-share',
type: OCA.Files.FileActions.TYPE_INLINE,
actionHandler: function(fileName) {
fileList.showDetailsView(fileName, 'shareTabView');
diff --git a/apps/files_sharing/tests/js/shareSpec.js b/apps/files_sharing/tests/js/shareSpec.js
index fd8e36d71ad8762e94deb483432e166b6ac25ee0..7607ada50baf69ca202e262a2ad1ce0e5298232d 100644
--- a/apps/files_sharing/tests/js/shareSpec.js
+++ b/apps/files_sharing/tests/js/shareSpec.js
@@ -97,9 +97,9 @@ describe('OCA.Sharing.Util tests', function() {
}]);
$tr = fileList.$el.find('tbody tr:first');
$action = $tr.find('.action-share');
- expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
+ expect($action.find('.icon').hasClass('icon-share')).toEqual(true);
+ expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
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() {
var $action, $tr;
@@ -116,9 +116,9 @@ describe('OCA.Sharing.Util tests', function() {
$tr = fileList.$el.find('tbody tr:first');
$action = $tr.find('.action-share');
expect($action.find('>span').text().trim()).toEqual('Shared');
- expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
+ expect($action.find('.icon').hasClass('icon-share')).toEqual(true);
+ expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
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() {
var $action, $tr;
@@ -136,9 +136,9 @@ describe('OCA.Sharing.Util tests', function() {
$tr = fileList.$el.find('tbody tr:first');
$action = $tr.find('.action-share');
expect($action.find('>span').text().trim()).toEqual('Shared');
- expect(OC.basename($action.find('img').attr('src'))).toEqual('public.svg');
+ expect($action.find('.icon').hasClass('icon-share')).toEqual(false);
+ expect($action.find('.icon').hasClass('icon-public')).toEqual(true);
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() {
var $action, $tr;
@@ -156,7 +156,8 @@ describe('OCA.Sharing.Util tests', function() {
$tr = fileList.$el.find('tbody tr:first');
$action = $tr.find('.action-share');
expect($action.find('>span').text().trim()).toEqual('User One');
- expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
+ expect($action.find('.icon').hasClass('icon-share')).toEqual(true);
+ expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-shared.svg');
});
it('shows recipients when recipients are available', function() {
@@ -175,9 +176,9 @@ describe('OCA.Sharing.Util tests', function() {
$tr = fileList.$el.find('tbody tr:first');
$action = $tr.find('.action-share');
expect($action.find('>span').text().trim()).toEqual('Shared with User One, User Two');
- expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
+ expect($action.find('.icon').hasClass('icon-share')).toEqual(true);
+ expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-shared.svg');
- expect($action.find('img').length).toEqual(1);
});
it('shows share action when shared with user who has no share permission', function() {
var $action, $tr;
@@ -282,7 +283,8 @@ describe('OCA.Sharing.Util tests', function() {
expect($tr.attr('data-share-recipients')).toEqual('Group One, Group Two, User One, User Two');
expect($action.find('>span').text().trim()).toEqual('Shared with Group One, Group Two, User One, User Two');
- expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
+ expect($action.find('.icon').hasClass('icon-share')).toEqual(true);
+ expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
});
it('updates share icon after updating shares of a file', function() {
var $action, $tr;
@@ -314,7 +316,8 @@ describe('OCA.Sharing.Util tests', function() {
expect($tr.attr('data-share-recipients')).toEqual('User One, User Three, User Two');
expect($action.find('>span').text().trim()).toEqual('Shared with User One, User Three, User Two');
- expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
+ expect($action.find('.icon').hasClass('icon-share')).toEqual(true);
+ expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
});
it('removes share icon after removing all shares from a file', function() {
var $action, $tr;
@@ -369,7 +372,8 @@ describe('OCA.Sharing.Util tests', function() {
expect($tr.attr('data-share-recipients')).toEqual('User Two');
expect($action.find('>span').text().trim()).toEqual('User One');
- expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
+ expect($action.find('.icon').hasClass('icon-share')).toEqual(true);
+ expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
});
it('keep share text after unsharing reshare', function() {
var $action, $tr;
@@ -399,7 +403,8 @@ describe('OCA.Sharing.Util tests', function() {
expect($tr.attr('data-share-recipients')).not.toBeDefined();
expect($action.find('>span').text().trim()).toEqual('User One');
- expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg');
+ expect($action.find('.icon').hasClass('icon-share')).toEqual(true);
+ expect($action.find('.icon').hasClass('icon-public')).toEqual(false);
});
});
describe('formatRecipients', function() {
diff --git a/apps/files_trashbin/js/app.js b/apps/files_trashbin/js/app.js
index 600a8ce2b03d03f01c753f371489cce126163d73..771ea90bc1616c585ce0a9024109c5a1fe896951 100644
--- a/apps/files_trashbin/js/app.js
+++ b/apps/files_trashbin/js/app.js
@@ -49,7 +49,7 @@ OCA.Trashbin.App = {
type: OCA.Files.FileActions.TYPE_INLINE,
mime: 'all',
permissions: OC.PERMISSION_READ,
- icon: OC.imagePath('core', 'actions/history'),
+ iconClass: 'icon-history',
actionHandler: function(filename, context) {
var fileList = context.fileList;
var tr = fileList.findFileEl(filename);
@@ -70,9 +70,7 @@ OCA.Trashbin.App = {
displayName: t('files', 'Delete'),
mime: 'all',
permissions: OC.PERMISSION_READ,
- icon: function() {
- return OC.imagePath('core', 'actions/delete');
- },
+ iconClass: 'icon-delete',
render: function(actionSpec, isDefault, context) {
var $actionLink = fileActions._makeActionLink(actionSpec, context);
$actionLink.attr('original-title', t('files_trashbin', 'Delete permanently'));
diff --git a/apps/files_trashbin/templates/index.php b/apps/files_trashbin/templates/index.php
index a7c1df93af2d7daf94906d7c0384c155ebfaac12..9ea8a9d14c4d4b2b1e3c8f70ca7adff491893ed7 100644
--- a/apps/files_trashbin/templates/index.php
+++ b/apps/files_trashbin/templates/index.php
@@ -30,9 +30,8 @@
<a class="name sort columntitle" data-sort="name"><span><?php p($l->t( 'Name' )); ?></span><span class="sort-indicator"></span></a>
<span id="selectedActionsList" class='selectedActions'>
<a href="" class="undelete">
- <img class="svg" alt=""
- src="<?php print_unescaped(image_path("core", "actions/history.svg")); ?>" />
- <?php p($l->t('Restore'))?>
+ <span class="icon icon-history"></span>
+ <span><?php p($l->t('Restore'))?></span>
</a>
</span>
</div>
@@ -41,9 +40,8 @@
<a id="modified" class="columntitle" data-sort="mtime"><span><?php p($l->t( 'Deleted' )); ?></span><span class="sort-indicator"></span></a>
<span class="selectedActions">
<a href="" class="delete-selected">
- <?php p($l->t('Delete'))?>
- <img class="svg" alt=""
- src="<?php print_unescaped(image_path("core", "actions/delete.svg")); ?>" />
+ <span><?php p($l->t('Delete'))?></span>
+ <span class="icon icon-delete"></span>
</a>
</span>
</th>
diff --git a/core/css/apps.css b/core/css/apps.css
index 9afd70443451ec628c3cda5c3f8a83bec4246b2f..c4e2d11b6fc21d9fffde1867cf8dbde5b6cb2319 100644
--- a/core/css/apps.css
+++ b/core/css/apps.css
@@ -642,6 +642,7 @@ em {
.popovermenu .menuitem,
.popovermenu .menuitem>span {
cursor: pointer;
+ vertical-align: middle;
}
.popovermenu .menuitem {
@@ -694,6 +695,7 @@ em {
width: 16px;
height: 16px;
margin-right: 10px;
+ vertical-align: middle;
}
.popovermenu .menuitem {
diff --git a/core/js/share.js b/core/js/share.js
index 9539e92e09b999a17e53d479876399d6726472bd..61483f4cf4d2ef2d26b2a67a90e98185a73b98c8 100644
--- a/core/js/share.js
+++ b/core/js/share.js
@@ -106,15 +106,15 @@ OC.Share = _.extend(OC.Share || {}, {
}
// TODO: iterating over the files might be more efficient
for (item in OC.Share.statuses){
- var image = OC.imagePath('core', 'actions/share');
+ var iconClass = 'icon-share';
var data = OC.Share.statuses[item];
var hasLink = data.link;
// Links override shared in terms of icon display
if (hasLink) {
- image = OC.imagePath('core', 'actions/public');
+ iconClass = 'icon-public';
}
if (itemType !== 'file' && itemType !== 'folder') {
- $('a.share[data-item="'+item+'"]').css('background', 'url('+image+') no-repeat center');
+ $('a.share[data-item="'+item+'"] .icon').removeClass('icon-share icon-public').addClass(iconClass);
} else {
// TODO: ultimately this part should be moved to files_sharing app
var file = $fileList.find('tr[data-id="'+item+'"]');
@@ -160,23 +160,24 @@ OC.Share = _.extend(OC.Share || {}, {
var shares = false;
var link = false;
var image = OC.imagePath('core', 'actions/share');
+ var iconClass = '';
$.each(OC.Share.itemShares, function(index) {
if (OC.Share.itemShares[index]) {
if (index == OC.Share.SHARE_TYPE_LINK) {
if (OC.Share.itemShares[index] == true) {
shares = true;
- image = OC.imagePath('core', 'actions/public');
+ iconClass = 'icon-public';
link = true;
return;
}
} else if (OC.Share.itemShares[index].length > 0) {
shares = true;
- image = OC.imagePath('core', 'actions/share');
+ iconClass = 'icon-share';
}
}
});
if (itemType != 'file' && itemType != 'folder') {
- $('a.share[data-item="'+itemSource+'"]').css('background', 'url('+image+') no-repeat center');
+ $('a.share[data-item="'+itemSource+'"] .icon').removeClass('icon-share icon-public').addClass(iconClass);
} else {
var $tr = $('tr').filterAttr('data-id', String(itemSource));
if ($tr.length > 0) {
@@ -255,12 +256,12 @@ OC.Share = _.extend(OC.Share || {}, {
markFileAsShared: function($tr, hasShares, hasLink) {
var action = $tr.find('.fileactions .action[data-action="Share"]');
var type = $tr.data('type');
- var img = action.find('img');
+ var icon = action.find('.icon');
var message;
var recipients;
var owner = $tr.attr('data-share-owner');
var shareFolderIcon;
- var image = OC.imagePath('core', 'actions/share');
+ var iconClass = 'icon-share';
action.removeClass('shared-style');
// update folder icon
if (type === 'dir' && (hasShares || hasLink || owner)) {
@@ -299,18 +300,18 @@ OC.Share = _.extend(OC.Share || {}, {
else if (recipients) {
message = t('core', 'Shared with {recipients}', {recipients: this._formatShareList(recipients.split(", ")).join(", ")}, 0, {escape: false});
}
- action.html('<span> ' + message + '</span>').prepend(img);
+ action.html('<span> ' + message + '</span>').prepend(icon);
if (owner || recipients) {
action.find('.remoteAddress').tipsy({gravity: 's'});
}
}
else {
- action.html('<span></span>').prepend(img);
+ action.html('<span></span>').prepend(icon);
}
if (hasLink) {
- image = OC.imagePath('core', 'actions/public');
+ iconClass = 'icon-public';
}
- img.attr('src', image);
+ icon.removeClass('icon-share icon-public').addClass(iconClass);
},
/**
*
diff --git a/core/js/sharedialogshareelistview.js b/core/js/sharedialogshareelistview.js
index e8976bb26e6eb03b64f5a1bb1de9b9db2023c002..49580cc888bce5ed15c3b9ce9f75ebf904ca154f 100644
--- a/core/js/sharedialogshareelistview.js
+++ b/core/js/sharedialogshareelistview.js
@@ -17,7 +17,7 @@
'<ul id="shareWithList" class="shareWithList">' +
'{{#each sharees}}' +
' <li data-share-id="{{shareId}}" data-share-type="{{shareType}}" data-share-with="{{shareWith}}">' +
- ' <a href="#" class="unshare"><span class="icon-loading-small hidden"></span><img class="svg" alt="{{unshareLabel}}" title="{{unshareLabel}}" src="{{unshareImage}}" /></a>' +
+ ' <a href="#" class="unshare"><span class="icon-loading-small hidden"></span><span class="icon icon-delete"></span><span class="hidden-visually">{{unshareLabel}}</span></a>' +
' {{#if avatarEnabled}}' +
' <div class="avatar {{#if modSeed}}imageplaceholderseed{{/if}}" data-username="{{shareWith}}" {{#if modSeed}}data-seed="{{shareWith}} {{shareType}}"{{/if}}></div>' +
' {{/if}}' +
@@ -140,7 +140,6 @@
mailNotificationEnabled: this.configModel.isMailNotificationEnabled(),
notifyByMailLabel: t('core', 'notify by email'),
unshareLabel: t('core', 'Unshare'),
- unshareImage: OC.imagePath('core', 'actions/delete'),
canShareLabel: t('core', 'can share'),
canEditLabel: t('core', 'can edit'),
createPermissionLabel: t('core', 'create'),