Invert app icons on IE11 as well

Signed-off-by: Julius Härtl <jus@bitgrid.net>

diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 50ed08761ae46329f068ad8953fefa6f7c9b92b0..0249ddd4ffbbb18f789df93d0490d44670beb3ca 100644 (file)
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -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>

diff --git a/lib/private/TemplateLayout.php b/lib/private/TemplateLayout.php
index f7bb23cd3de2717f5e835fc35f5a1da3bb9ddb69..dcc0fd3ba67a80a72dedc1b1250dac1e75d406e0 100644 (file)
--- a/lib/private/TemplateLayout.php
+++ b/lib/private/TemplateLayout.php
@@ -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');

diff --git a/settings/js/apps.js b/settings/js/apps.js
index 278c307b1f307087fd1d574b157af1e5cbea3ffa..350c29f5a69b2019010f35692c4a302d038ae0ba 100644 (file)
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -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;
                                }