Skip to content

Commit 25ba9cb

Browse files
MorrisJobkeMorrisJobke
authored
Merge pull request #7684 from nextcloud/backport-ie-fix-invert
[stable12] Fix inverted app icons on IE11
2 parents 2f9d595 + 1d47410 commit 25ba9cb

File tree

6 files changed

+47
-33
lines changed

6 files changed

+47
-33
lines changed

‎apps/theming/css/theming.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,6 @@
1414
.searchbox input[type="search"] {
1515
background: transparent url('../../../core/img/actions/search.svg') no-repeat 6px center;
1616
}
17-
#appmenu li a img {
18-
-webkit-filter: invert(1);
19-
filter: invert(1);
20-
filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1');
21-
}
2217
#contactsmenu .icon-contacts {
2318
background-image: url('../../../core/img/places/contacts-dark.svg');
2419
}

‎core/templates/layout.user.php‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,14 @@
6666
<a href="<?php print_unescaped($entry['href']); ?>"
6767
tabindex="3"
6868
<?php if ($entry['active']): ?> class="active"<?php endif; ?>>
69-
<img src="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"
70-
class="app-icon"/>
69+
<?php if ($_['themingInvertMenu']) { ?>
70+
<svg width="20" height="20" viewBox="0 0 20 20">
71+
<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>
72+
<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>
73+
<?php } else { ?>
74+
<img src="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"
75+
class="app-icon" alt="<?php p($entry['name']); ?>" />
76+
<?php } ?>
7177
<div class="icon-loading-small-dark"
7278
style="display:none;"></div>
7379
</a>
@@ -94,8 +100,8 @@ class="app-icon"/>
94100
<a href="<?php print_unescaped($entry['href']); ?>" tabindex="3"
95101
<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
96102
<svg width="16" height="16" viewBox="0 0 16 16">
97-
<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>
98-
<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>
103+
<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>
104+
<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>
99105
</svg>
100106
<div class="icon-loading-small-dark" style="display:none;"></div>
101107
<span><?php p($entry['name']); ?></span>

‎lib/private/TemplateLayout.php‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,15 @@ public function __construct( $renderAs, $appId = '' ) {
105105
$this->assign('userAvatarVersion', \OC::$server->getConfig()->getUserValue(\OC_User::getUser(), 'avatar', 'version', 0));
106106
}
107107

108+
// check if app menu icons should be inverted
109+
try {
110+
/** @var \OCA\Theming\Util $util */
111+
$util = \OC::$server->query(\OCA\Theming\Util::class);
112+
$this->assign('themingInvertMenu', $util->invertTextColor(\OC::$server->getThemingDefaults()->getColorPrimary()));
113+
} catch (\OCP\AppFramework\QueryException $e) {
114+
$this->assign('themingInvertMenu', false);
115+
}
116+
108117
} else if ($renderAs == 'error') {
109118
parent::__construct('core', 'layout.guest', '', false);
110119
$this->assign('bodyid', 'body-login');

‎settings/css/settings.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1050,6 +1050,7 @@ form.section {
10501050

10511051
#apps-list.installed .app-image {
10521052
width: 44px;
1053+
height: auto;
10531054
text-align: right;
10541055
}
10551056

‎settings/js/apps.js‎

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -233,8 +233,7 @@ OC.Settings.Apps = OC.Settings.Apps || {
233233

234234
var page = $('#app-' + app.id);
235235

236-
// image loading kung-fu (IE doesn't properly scale SVGs, so disable app icons)
237-
if (app.preview && !OC.Util.isIE()) {
236+
if (app.preview) {
238237
var currentImage = new Image();
239238
currentImage.src = app.preview;
240239

@@ -286,8 +285,10 @@ OC.Settings.Apps = OC.Settings.Apps || {
286285
img = '<svg viewBox="0 0 72 72">';
287286
img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" xlink:href="' + url + '" class="app-icon" /></svg>';
288287
} else {
288+
var rnd = Math.floor((Math.random() * 100 )) + new Date().getSeconds() + new Date().getMilliseconds();
289289
img = '<svg width="32" height="32" viewBox="0 0 32 32">';
290-
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>';
290+
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>'
291+
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>';
291292
}
292293
return img;
293294
},
@@ -631,24 +632,29 @@ OC.Settings.Apps = OC.Settings.Apps || {
631632
}
632633

633634
if ($('#appmenu').children('li[data-id="' + entry.id + '"]').length === 0) {
634-
var li = $('<li></li>');
635-
li.attr('data-id', entry.id);
636-
var img = '<img src="' + entry.icon + '" class="app-icon">';
637-
var a = $('<a></a>').attr('href', entry.href);
638-
var filename = $('<span></span>');
639-
var loading = $('<div class="icon-loading-dark"></div>').css('display', 'none');
640-
filename.text(entry.name);
641-
a.prepend(filename);
642-
a.prepend(loading);
643-
a.prepend(img);
644-
li.append(a);
645-
$('#appmenu li[data-id='+ previousEntry.id+']').after(li);
646-
if(addedApps[entry.id]) {
647-
li.animate({opacity: 0.5})
648-
.animate({opacity: 1})
649-
.animate({opacity: 0.5})
650-
.animate({opacity: 1});
651-
}
635+
var li = $('<li></li>');
636+
li.attr('data-id', entry.id);
637+
var img = '<img src="' + entry.icon + '" class="app-icon">';
638+
if (OCA.Theming && OCA.Theming.inverted) {
639+
img = '<svg width="20" height="20" viewBox="0 0 20 20">';
640+
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>';
641+
img += '<image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="' + entry.icon + '" class="app-icon" /></svg>';
642+
}
643+
var a = $('<a></a>').attr('href', entry.href);
644+
var filename = $('<span></span>');
645+
var loading = $('<div class="icon-loading-dark"></div>').css('display', 'none');
646+
filename.text(entry.name);
647+
a.prepend(filename);
648+
a.prepend(loading);
649+
a.prepend(img);
650+
li.append(a);
651+
$('#appmenu li[data-id='+ previousEntry.id+']').after(li);
652+
if(addedApps[entry.id]) {
653+
li.animate({opacity: 0.5})
654+
.animate({opacity: 1})
655+
.animate({opacity: 0.5})
656+
.animate({opacity: 1});
657+
}
652658
}
653659
previousEntry = entry;
654660
}

‎settings/templates/apps.php‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -201,9 +201,6 @@
201201
</ul>
202202
</div>
203203
<div id="app-content" class="icon-loading">
204-
<svg class="app-filter">
205-
<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>
206-
</svg>
207204
<div id="apps-list"></div>
208205
<div id="apps-list-empty" class="hidden emptycontent emptycontent-search">
209206
<div class="icon-search"></div>

0 commit comments

Comments
 (0)