Make more action icons themable + style fixes

Action icons now appear properly in public link page.
More actions are now CSS icons.
This commit is contained in:
Vincent Petry 2016-02-25 17:23:32 +01:00 committed by Morris Jobke
parent c767030f07
commit b634f1e2c7
6 changed files with 25 additions and 24 deletions

View File

@ -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 {

View File

@ -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);
}

View File

@ -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>

View File

@ -87,3 +87,7 @@
margin-top: 9px;
}
.shareTabView .icon {
display: inline-block;
background-size: 16px 16px;
}

View File

@ -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>

View File

@ -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'),