From 92cff0984dffafcc6caa21f9662785cad92f5d96 Mon Sep 17 00:00:00 2001 From: Roeland Jago Douma Date: Wed, 17 Feb 2016 11:04:29 +0100 Subject: Make file actions use icon CSS classes This makes theming of file actions possible --- core/css/apps.css | 2 ++ core/js/share.js | 25 +++++++++++++------------ 2 files changed, 15 insertions(+), 12 deletions(-) (limited to 'core') 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(' ' + message + '').prepend(img); + action.html(' ' + message + '').prepend(icon); if (owner || recipients) { action.find('.remoteAddress').tipsy({gravity: 's'}); } } else { - action.html('').prepend(img); + action.html('').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); }, /** * -- cgit v1.2.3