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:
parent
c767030f07
commit
b634f1e2c7
|
@ -785,10 +785,12 @@ html.ie8 #controls .button.new {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-files .fileactions .action .icon,
|
#filestable .filename .action .icon,
|
||||||
.app-files .actions .button .icon {
|
#filestable .selectedActions a .icon,
|
||||||
|
#controls .actions .button .icon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
background-size: 16px 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-files .actions .button.new .icon {
|
.app-files .actions .button.new .icon {
|
||||||
|
|
|
@ -15,17 +15,18 @@
|
||||||
var TEMPLATE_FAVORITE_ACTION =
|
var TEMPLATE_FAVORITE_ACTION =
|
||||||
'<a href="#" ' +
|
'<a href="#" ' +
|
||||||
'class="action action-favorite {{#isFavorite}}permanent{{/isFavorite}}">' +
|
'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>';
|
'</a>';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns the path to the star image
|
* Returns the icon class for the matching state
|
||||||
*
|
*
|
||||||
* @param {boolean} state true if starred, false otherwise
|
* @param {boolean} state true if starred, false otherwise
|
||||||
* @return {string} path to star image
|
* @return {string} icon class for star image
|
||||||
*/
|
*/
|
||||||
function getStarImage(state) {
|
function getStarIconClass(state) {
|
||||||
return OC.imagePath('core', state ? 'actions/starred' : 'actions/star');
|
return state ? 'icon-starred' : 'icon-star';
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -41,7 +42,7 @@
|
||||||
return this._template({
|
return this._template({
|
||||||
isFavorite: state,
|
isFavorite: state,
|
||||||
altText: state ? t('files', 'Favorited') : t('files', 'Favorite'),
|
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
|
* @param {boolean} state true if starred, false otherwise
|
||||||
*/
|
*/
|
||||||
function toggleStar($actionEl, state) {
|
function toggleStar($actionEl, state) {
|
||||||
$actionEl.find('img').attr('src', getStarImage(state));
|
$actionEl.removeClass('icon-star icon-starred').addClass(getStarIconClass(state));
|
||||||
$actionEl.hide().show(0); //force Safari to redraw element on src change
|
|
||||||
$actionEl.toggleClass('permanent', state);
|
$actionEl.toggleClass('permanent', state);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
<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">
|
<span id="selectedActionsList" class="selectedActions">
|
||||||
<a href="" class="download">
|
<a href="" class="download">
|
||||||
<img class="svg" alt=""
|
<span class="icon icon-download"></span>
|
||||||
src="<?php print_unescaped(image_path("core", "actions/download.svg")); ?>" />
|
<span><?php p($l->t('Download'))?></span>
|
||||||
<?php p($l->t('Download'))?>
|
|
||||||
</a>
|
</a>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -65,9 +64,8 @@
|
||||||
<th id="headerDate" class="hidden column-mtime">
|
<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>
|
<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">
|
<span class="selectedActions"><a href="" class="delete-selected">
|
||||||
<?php p($l->t('Delete'))?>
|
<span><?php p($l->t('Delete'))?></span>
|
||||||
<img class="svg" alt=""
|
<span class="icon icon-delete"></span>
|
||||||
src="<?php print_unescaped(image_path("core", "actions/delete.svg")); ?>" />
|
|
||||||
</a></span>
|
</a></span>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
@ -87,3 +87,7 @@
|
||||||
margin-top: 9px;
|
margin-top: 9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.shareTabView .icon {
|
||||||
|
display: inline-block;
|
||||||
|
background-size: 16px 16px;
|
||||||
|
}
|
||||||
|
|
|
@ -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>
|
<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'>
|
<span id="selectedActionsList" class='selectedActions'>
|
||||||
<a href="" class="undelete">
|
<a href="" class="undelete">
|
||||||
<img class="svg" alt=""
|
<span class="icon icon-history"></span>
|
||||||
src="<?php print_unescaped(image_path("core", "actions/history.svg")); ?>" />
|
<span><?php p($l->t('Restore'))?></span>
|
||||||
<?php p($l->t('Restore'))?>
|
|
||||||
</a>
|
</a>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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>
|
<a id="modified" class="columntitle" data-sort="mtime"><span><?php p($l->t( 'Deleted' )); ?></span><span class="sort-indicator"></span></a>
|
||||||
<span class="selectedActions">
|
<span class="selectedActions">
|
||||||
<a href="" class="delete-selected">
|
<a href="" class="delete-selected">
|
||||||
<?php p($l->t('Delete'))?>
|
<span><?php p($l->t('Delete'))?></span>
|
||||||
<img class="svg" alt=""
|
<span class="icon icon-delete"></span>
|
||||||
src="<?php print_unescaped(image_path("core", "actions/delete.svg")); ?>" />
|
|
||||||
</a>
|
</a>
|
||||||
</span>
|
</span>
|
||||||
</th>
|
</th>
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
'<ul id="shareWithList" class="shareWithList">' +
|
'<ul id="shareWithList" class="shareWithList">' +
|
||||||
'{{#each sharees}}' +
|
'{{#each sharees}}' +
|
||||||
' <li data-share-id="{{shareId}}" data-share-type="{{shareType}}" data-share-with="{{shareWith}}">' +
|
' <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}}' +
|
' {{#if avatarEnabled}}' +
|
||||||
' <div class="avatar {{#if modSeed}}imageplaceholderseed{{/if}}" data-username="{{shareWith}}" {{#if modSeed}}data-seed="{{shareWith}} {{shareType}}"{{/if}}></div>' +
|
' <div class="avatar {{#if modSeed}}imageplaceholderseed{{/if}}" data-username="{{shareWith}}" {{#if modSeed}}data-seed="{{shareWith}} {{shareType}}"{{/if}}></div>' +
|
||||||
' {{/if}}' +
|
' {{/if}}' +
|
||||||
|
@ -140,7 +140,6 @@
|
||||||
mailNotificationEnabled: this.configModel.isMailNotificationEnabled(),
|
mailNotificationEnabled: this.configModel.isMailNotificationEnabled(),
|
||||||
notifyByMailLabel: t('core', 'notify by email'),
|
notifyByMailLabel: t('core', 'notify by email'),
|
||||||
unshareLabel: t('core', 'Unshare'),
|
unshareLabel: t('core', 'Unshare'),
|
||||||
unshareImage: OC.imagePath('core', 'actions/delete'),
|
|
||||||
canShareLabel: t('core', 'can share'),
|
canShareLabel: t('core', 'can share'),
|
||||||
canEditLabel: t('core', 'can edit'),
|
canEditLabel: t('core', 'can edit'),
|
||||||
createPermissionLabel: t('core', 'create'),
|
createPermissionLabel: t('core', 'create'),
|
||||||
|
|
Loading…
Reference in New Issue