From b634f1e2c70809a4fde7f738cb7c252b6fc3f4dc Mon Sep 17 00:00:00 2001
From: Vincent Petry <pvince81@owncloud.com>
Date: Thu, 25 Feb 2016 17:23:32 +0100
Subject: [PATCH] Make more action icons themable + style fixes

Action icons now appear properly in public link page.
More actions are now CSS icons.
---
 apps/files/css/files.css                |  6 ++++--
 apps/files/js/tagsplugin.js             | 16 ++++++++--------
 apps/files/templates/list.php           | 10 ++++------
 apps/files_sharing/css/sharetabview.css |  4 ++++
 apps/files_trashbin/templates/index.php | 10 ++++------
 core/js/sharedialogshareelistview.js    |  3 +--
 6 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 3b1bea3fd9..b65af1fa0f 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -785,10 +785,12 @@ html.ie8 #controls .button.new {
 	padding: 0;
 }
 
-.app-files .fileactions .action .icon,
-.app-files .actions .button .icon {
+#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 {
diff --git a/apps/files/js/tagsplugin.js b/apps/files/js/tagsplugin.js
index 81b22e34cc..3c0a231d00 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 ea3e6c61d4..29769bcd82 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_sharing/css/sharetabview.css b/apps/files_sharing/css/sharetabview.css
index 642c0909af..0433882088 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_trashbin/templates/index.php b/apps/files_trashbin/templates/index.php
index a7c1df93af..9ea8a9d14c 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/js/sharedialogshareelistview.js b/core/js/sharedialogshareelistview.js
index e8976bb26e..49580cc888 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'),