Uses javascript to invert the SVGs.

diff --git a/settings/js/apps.js b/settings/js/apps.js
index 66c097e1257913f556ae68fc16863721e16363bd..d2411197c9ca4b6455c0059aaf8225cc07a2143a 100644 (file)
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -196,14 +196,14 @@ OC.Settings.Apps = OC.Settings.Apps || {
                if (app.preview && !OC.Util.isIE()) {
                        var currentImage = new Image();
                        currentImage.src = app.preview;
-
-                       currentImage.onload = function() {
-                               page.find('.app-image')
-                                       .append(this)
-                                       .fadeIn();
-                       };
                }
 
+               currentImage.onload = function() {
+                       page.find('.app-image')
+                               .append(OC.Settings.Apps.imageUrl(app.preview))
+                               .fadeIn();
+               };
+
                // set group select properly
                if(OC.Settings.Apps.isType(app, 'filesystem') || OC.Settings.Apps.isType(app, 'prelogin') ||
                        OC.Settings.Apps.isType(app, 'authentication') || OC.Settings.Apps.isType(app, 'logging') ||
@@ -226,6 +226,17 @@ OC.Settings.Apps = OC.Settings.Apps || {
                }
        },
 
+       /**
+        * Returns the image for apps listing
+        */
+
+       imageUrl : function (url) {
+               var img = '<svg width="72" height="72" viewBox="0 0 72 72">';
+               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="72" height="72" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="' + url + '"  class="app-icon" /></svg>';
+               return img;
+       },
+
        isType: function(app, type){
                return app.types && app.types.indexOf(type) !== -1;
        },