Merge pull request nextcloud#905 from nextcloud/invisible_icons

Fix icons on App page in FF
GitHubUser4234 · Aug 17, 2016 · 07bf33c · 07bf33c
2 parents c7848ed + 98382e3
commit 07bf33c
Show file tree

Hide file tree

Showing 11 changed files with 22 additions and 18 deletions.
diff --git a/apps/comments/img/comments.svg b/apps/comments/img/comments.svg
diff --git a/apps/files_external/img/app.svg b/apps/files_external/img/app.svg
diff --git a/apps/files_sharing/img/app.svg b/apps/files_sharing/img/app.svg
diff --git a/apps/files_trashbin/img/app.svg b/apps/files_trashbin/img/app.svg
diff --git a/apps/files_versions/img/app.svg b/apps/files_versions/img/app.svg
diff --git a/apps/systemtags/img/app.svg b/apps/systemtags/img/app.svg
diff --git a/apps/testing/img/app.svg b/apps/testing/img/app.svg
diff --git a/apps/user_ldap/img/app.svg b/apps/user_ldap/img/app.svg
diff --git a/core/img/default-app-icon.svg b/core/img/default-app-icon.svg
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
@@ -114,8 +114,8 @@
 						<a href="<?php print_unescaped($entry['href']); ?>" tabindex="3"
 							<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
 							<svg width="32" height="32" viewBox="0 0 32 32">
-								<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>
-								<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="<?php print_unescaped($entry['icon']); ?>"  class="app-icon"/>
+								<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"></feColorMatrix></filter></defs>
+								<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="<?php print_unescaped($entry['icon']); ?>"  class="app-icon"></image>
 							</svg>
 							<div class="icon-loading-dark" style="display:none;"></div>
 							<span>
@@ -132,8 +132,8 @@
 						<a href="<?php print_unescaped(\OC::$server->getURLGenerator()->linkToRoute('settings.AppSettings.viewApps')); ?>" tabindex="4"
 							<?php if( $_['appsmanagement_active'] ): ?> class="active"<?php endif; ?>>
 							<svg width="32" height="32" viewBox="0 0 32 32" class="app-icon">
-								<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>
-								<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="<?php print_unescaped(image_path('settings', 'apps.svg')); ?>"/>
+								<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"></feColorMatrix></filter></defs>
+								<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="<?php print_unescaped(image_path('settings', 'apps.svg')); ?>"></image>
 							</svg>
 							<div class="icon-loading-dark" style="display:none;"></div>
 							<span>

diff --git a/settings/js/apps.js b/settings/js/apps.js
@@ -196,13 +196,13 @@ 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(OC.Settings.Apps.imageUrl(app.preview, app.detailpage))
-				.fadeIn();
-		};
+			currentImage.onload = function() {
+				page.find('.app-image')
+					.append(OC.Settings.Apps.imageUrl(app.preview, app.detailpage))
+					.fadeIn();
+			};
+		}
 
 		// set group select properly
 		if(OC.Settings.Apps.isType(app, 'filesystem') || OC.Settings.Apps.isType(app, 'prelogin') ||
@@ -234,11 +234,12 @@ OC.Settings.Apps = OC.Settings.Apps || {
 
 	imageUrl : function (url, appfromstore) {
 		var img = '<svg width="72" height="72" viewBox="0 0 72 72">';
+
 		if (appfromstore) {
 			img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" xlink:href="' + url + '"  class="app-icon" /></svg>';
 		} else {
-			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>';
+			img += '<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>';
+			img += '<image x="0" y="0" width="72" height="72" preserveAspectRatio="xMinYMin meet" filter="url(#invertIcon)" xlink:href="' + url + '"  class="app-icon"></image></svg>';
 		}
 		return img;
 	},