Merge pull request #7669 from nextcloud/ie-fix-invert
Fix inverted app icons on IE11
This commit is contained in:
commit
722097f7a0
|
@ -14,11 +14,6 @@
|
||||||
.searchbox input[type="search"] {
|
.searchbox input[type="search"] {
|
||||||
background: transparent url('../../../core/img/actions/search.svg') no-repeat 6px center;
|
background: transparent url('../../../core/img/actions/search.svg') no-repeat 6px center;
|
||||||
}
|
}
|
||||||
#appmenu li a img {
|
|
||||||
-webkit-filter: invert(1);
|
|
||||||
filter: invert(1);
|
|
||||||
filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1');
|
|
||||||
}
|
|
||||||
#contactsmenu .icon-contacts {
|
#contactsmenu .icon-contacts {
|
||||||
background-image: url('../../../core/img/places/contacts-dark.svg');
|
background-image: url('../../../core/img/places/contacts-dark.svg');
|
||||||
}
|
}
|
||||||
|
|
|
@ -46,8 +46,14 @@
|
||||||
<li data-id="<?php p($entry['id']); ?>" class="hidden">
|
<li data-id="<?php p($entry['id']); ?>" class="hidden">
|
||||||
<a href="<?php print_unescaped($entry['href']); ?>"
|
<a href="<?php print_unescaped($entry['href']); ?>"
|
||||||
<?php if ($entry['active']): ?> class="active"<?php endif; ?>>
|
<?php if ($entry['active']): ?> class="active"<?php endif; ?>>
|
||||||
<img src="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"
|
<?php if ($_['themingInvertMenu']) { ?>
|
||||||
class="app-icon" alt="<?php p($entry['name']); ?>" />
|
<svg width="20" height="20" viewBox="0 0 20 20">
|
||||||
|
<defs><filter id="invertMenuMain-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter></defs>
|
||||||
|
<image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet" filter="url(#invertMenuMain-<?php p($entry['id']); ?>)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>" class="app-icon" /></svg>
|
||||||
|
<?php } else { ?>
|
||||||
|
<img src="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"
|
||||||
|
class="app-icon" alt="<?php p($entry['name']); ?>" />
|
||||||
|
<?php } ?>
|
||||||
<div class="icon-loading-small-dark"
|
<div class="icon-loading-small-dark"
|
||||||
style="display:none;"></div>
|
style="display:none;"></div>
|
||||||
</a>
|
</a>
|
||||||
|
@ -73,8 +79,8 @@
|
||||||
<a href="<?php print_unescaped($entry['href']); ?>"
|
<a href="<?php print_unescaped($entry['href']); ?>"
|
||||||
<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
|
<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16">
|
<svg width="16" height="16" viewBox="0 0 16 16">
|
||||||
<defs><filter id="invert-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs>
|
<defs><filter id="invertMenuMore-<?php p($entry['id']); ?>"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs>
|
||||||
<image x="0" y="0" width="16" height="16" preserveAspectRatio="xMinYMin meet" filter="url(#invert-<?php p($entry['id']); ?>)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>" class="app-icon"></image>
|
<image x="0" y="0" width="16" height="16" preserveAspectRatio="xMinYMin meet" filter="url(#invertMenuMore-<?php p($entry['id']); ?>)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>" class="app-icon"></image>
|
||||||
</svg>
|
</svg>
|
||||||
<div class="icon-loading-small-dark" style="display:none;"></div>
|
<div class="icon-loading-small-dark" style="display:none;"></div>
|
||||||
<span><?php p($entry['name']); ?></span>
|
<span><?php p($entry['name']); ?></span>
|
||||||
|
|
|
@ -108,6 +108,15 @@ class TemplateLayout extends \OC_Template {
|
||||||
$this->assign('userAvatarVersion', $this->config->getUserValue(\OC_User::getUser(), 'avatar', 'version', 0));
|
$this->assign('userAvatarVersion', $this->config->getUserValue(\OC_User::getUser(), 'avatar', 'version', 0));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// check if app menu icons should be inverted
|
||||||
|
try {
|
||||||
|
/** @var \OCA\Theming\Util $util */
|
||||||
|
$util = \OC::$server->query(\OCA\Theming\Util::class);
|
||||||
|
$this->assign('themingInvertMenu', $util->invertTextColor(\OC::$server->getThemingDefaults()->getColorPrimary()));
|
||||||
|
} catch (\OCP\AppFramework\QueryException $e) {
|
||||||
|
$this->assign('themingInvertMenu', false);
|
||||||
|
}
|
||||||
|
|
||||||
} else if ($renderAs == 'error') {
|
} else if ($renderAs == 'error') {
|
||||||
parent::__construct('core', 'layout.guest', '', false);
|
parent::__construct('core', 'layout.guest', '', false);
|
||||||
$this->assign('bodyid', 'body-login');
|
$this->assign('bodyid', 'body-login');
|
||||||
|
|
|
@ -899,6 +899,7 @@ span.version {
|
||||||
}
|
}
|
||||||
.app-image {
|
.app-image {
|
||||||
width: 44px;
|
width: 44px;
|
||||||
|
height: auto;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
.app-image-icon svg {
|
.app-image-icon svg {
|
||||||
|
|
|
@ -247,8 +247,7 @@ OC.Settings.Apps = OC.Settings.Apps || {
|
||||||
|
|
||||||
var page = $('#app-' + app.id);
|
var page = $('#app-' + app.id);
|
||||||
|
|
||||||
// image loading kung-fu (IE doesn't properly scale SVGs, so disable app icons)
|
if (app.preview) {
|
||||||
if (app.preview && !OC.Util.isIE()) {
|
|
||||||
var currentImage = new Image();
|
var currentImage = new Image();
|
||||||
currentImage.src = app.preview;
|
currentImage.src = app.preview;
|
||||||
|
|
||||||
|
@ -300,8 +299,10 @@ OC.Settings.Apps = OC.Settings.Apps || {
|
||||||
img = '<svg viewBox="0 0 72 72">';
|
img = '<svg viewBox="0 0 72 72">';
|
||||||
img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" xlink:href="' + url + '" class="app-icon" /></svg>';
|
img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" xlink:href="' + url + '" class="app-icon" /></svg>';
|
||||||
} else {
|
} else {
|
||||||
|
var rnd = Math.floor((Math.random() * 100 )) + new Date().getSeconds() + new Date().getMilliseconds();
|
||||||
img = '<svg width="32" height="32" viewBox="0 0 32 32">';
|
img = '<svg width="32" height="32" viewBox="0 0 32 32">';
|
||||||
img += '<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" filter="url(#invertIcon)" xlink:href="' + url + '?v=' + oc_config.version + '" class="app-icon"></image></svg>';
|
img += '<defs><filter id="invertIconApps-' + rnd + '"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs>'
|
||||||
|
img += '<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" filter="url(#invertIconApps-' + rnd + ')" xlink:href="' + url + '?v=' + oc_config.version + '" class="app-icon"></image></svg>';
|
||||||
}
|
}
|
||||||
return img;
|
return img;
|
||||||
},
|
},
|
||||||
|
@ -652,24 +653,29 @@ OC.Settings.Apps = OC.Settings.Apps || {
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($('#appmenu').children('li[data-id="' + entry.id + '"]').length === 0) {
|
if ($('#appmenu').children('li[data-id="' + entry.id + '"]').length === 0) {
|
||||||
var li = $('<li></li>');
|
var li = $('<li></li>');
|
||||||
li.attr('data-id', entry.id);
|
li.attr('data-id', entry.id);
|
||||||
var img = '<img src="' + entry.icon + '" class="app-icon">';
|
var img = '<img src="' + entry.icon + '" class="app-icon">';
|
||||||
var a = $('<a></a>').attr('href', entry.href);
|
if (OCA.Theming && OCA.Theming.inverted) {
|
||||||
var filename = $('<span></span>');
|
img = '<svg width="20" height="20" viewBox="0 0 20 20">';
|
||||||
var loading = $('<div class="icon-loading-dark"></div>').css('display', 'none');
|
img += '<defs><filter id="invert"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0" /></filter></defs>';
|
||||||
filename.text(entry.name);
|
img += '<image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="' + entry.icon + '" class="app-icon" /></svg>';
|
||||||
a.prepend(filename);
|
}
|
||||||
a.prepend(loading);
|
var a = $('<a></a>').attr('href', entry.href);
|
||||||
a.prepend(img);
|
var filename = $('<span></span>');
|
||||||
li.append(a);
|
var loading = $('<div class="icon-loading-dark"></div>').css('display', 'none');
|
||||||
$('#appmenu li[data-id='+ previousEntry.id+']').after(li);
|
filename.text(entry.name);
|
||||||
if(addedApps[entry.id]) {
|
a.prepend(filename);
|
||||||
li.animate({opacity: 0.5})
|
a.prepend(loading);
|
||||||
.animate({opacity: 1})
|
a.prepend(img);
|
||||||
.animate({opacity: 0.5})
|
li.append(a);
|
||||||
.animate({opacity: 1});
|
$('#appmenu li[data-id='+ previousEntry.id+']').after(li);
|
||||||
}
|
if(addedApps[entry.id]) {
|
||||||
|
li.animate({opacity: 0.5})
|
||||||
|
.animate({opacity: 1})
|
||||||
|
.animate({opacity: 0.5})
|
||||||
|
.animate({opacity: 1});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
previousEntry = entry;
|
previousEntry = entry;
|
||||||
}
|
}
|
||||||
|
|
|
@ -203,9 +203,6 @@ script(
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="app-content" class="icon-loading">
|
<div id="app-content" class="icon-loading">
|
||||||
<svg class="app-filter">
|
|
||||||
<defs><filter id="invertIcon"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs>
|
|
||||||
</svg>
|
|
||||||
<div id="apps-list"></div>
|
<div id="apps-list"></div>
|
||||||
<div id="apps-list-empty" class="hidden emptycontent emptycontent-search">
|
<div id="apps-list-empty" class="hidden emptycontent emptycontent-search">
|
||||||
<div id="app-list-empty-icon" class="icon-search"></div>
|
<div id="app-list-empty-icon" class="icon-search"></div>
|
||||||
|
|
Loading…
Reference in New Issue