Invert app icons on IE11 as well

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2018-01-03 09:17:14 +01:00
parent f9490505ad
commit a3b6f05722
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
3 changed files with 40 additions and 20 deletions

View File

@ -66,8 +66,14 @@
<a href="<?php print_unescaped($entry['href']); ?>"
tabindex="3"
<?php if ($entry['active']): ?> class="active"<?php endif; ?>>
<img src="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"
class="app-icon"/>
<?php if ($_['themingInvertMenu']) { ?>
<svg width="20" height="20" viewBox="0 0 20 20">
<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" /></filter></defs>
<image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet" filter="url(#invert-<?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"
style="display:none;"></div>
</a>

View File

@ -105,6 +105,15 @@ class TemplateLayout extends \OC_Template {
$this->assign('userAvatarVersion', \OC::$server->getConfig()->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') {
parent::__construct('core', 'layout.guest', '', false);
$this->assign('bodyid', 'body-login');

View File

@ -631,24 +631,29 @@ OC.Settings.Apps = OC.Settings.Apps || {
}
if ($('#appmenu').children('li[data-id="' + entry.id + '"]').length === 0) {
var li = $('<li></li>');
li.attr('data-id', entry.id);
var img = '<img src="' + entry.icon + '" class="app-icon">';
var a = $('<a></a>').attr('href', entry.href);
var filename = $('<span></span>');
var loading = $('<div class="icon-loading-dark"></div>').css('display', 'none');
filename.text(entry.name);
a.prepend(filename);
a.prepend(loading);
a.prepend(img);
li.append(a);
$('#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});
}
var li = $('<li></li>');
li.attr('data-id', entry.id);
var img = '<img src="' + entry.icon + '" class="app-icon">';
if (OCA.Theming && OCA.Theming.inverted) {
img = '<svg width="20" height="20" viewBox="0 0 20 20">';
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>';
img += '<image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="' + entry.icon + '" class="app-icon" /></svg>';
}
var a = $('<a></a>').attr('href', entry.href);
var filename = $('<span></span>');
var loading = $('<div class="icon-loading-dark"></div>').css('display', 'none');
filename.text(entry.name);
a.prepend(filename);
a.prepend(loading);
a.prepend(img);
li.append(a);
$('#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;
}