summaryrefslogtreecommitdiffstats
path: root/apps/files
diff options
context:
space:
mode:
Diffstat (limited to 'apps/files')
-rw-r--r--apps/files/css/files.css12
-rw-r--r--apps/files/js/fileactions.js35
-rw-r--r--apps/files/js/fileactionsmenu.js11
-rw-r--r--apps/files/js/filelist.js9
-rw-r--r--apps/files/tests/js/fileactionsSpec.js61
5 files changed, 104 insertions, 24 deletions
diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 389b7fae806..3b1bea3fd9a 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,12 @@ html.ie8 #controls .button.new {
padding: 0;
}
+.app-files .fileactions .action .icon,
+.app-files .actions .button .icon {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.app-files .actions .button.new .icon {
+ margin-bottom: 2px;
+}
diff --git a/apps/files/js/fileactions.js b/apps/files/js/fileactions.js
index 67125f1570f..1e4f7d1ba8c 100644
--- a/apps/files/js/fileactions.js
+++ b/apps/files/js/fileactions.js
@@ -11,8 +11,13 @@
(function() {
var TEMPLATE_FILE_ACTION_TRIGGER =
- '<a class="action action-{{nameLowerCase}}" href="#" data-action="{{name}}">' +
- '{{#if icon}}<img class="svg" alt="{{altText}}" src="{{icon}}" />{{/if}}' +
+ '<a class="action action-{{nameLowerCase}} href="#" data-action="{{name}}">' +
+ '{{#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 9e51d8f1f1f..45d2bd83049 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 81dfea2114d..95fdac02c2d 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/tests/js/fileactionsSpec.js b/apps/files/tests/js/fileactionsSpec.js
index 4f4d4d3d197..470f2854f43 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;
generated by cgit v1.2.3 (git 2.39.1) at 2025-02-02 09:32:35 +0000