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 3b1bea3fd9a..b65af1fa0f3 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 81b22e34cc2..3c0a231d003 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 ea3e6c61d4a..29769bcd825 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 642c0909af3..04338820881 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 a7c1df93af2..9ea8a9d14c4 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 e8976bb26e6..49580cc888b 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'),
--
GitLab