Make file actions use icon CSS classes

This makes theming of file actions possible

2 files changed, 15 insertions, 12 deletions

diff --git a/core/css/apps.css b/core/css/apps.css
index 9afd7044345..c4e2d11b6fc 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 9539e92e09b..61483f4cf4d 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);
 	},
 	/**
 	 *