Merge pull request #19454 from owncloud/ie8-madness-returns

[IE8] Fix file type sizes and popover menus in file list

apps/files/css/files.css

@@ -580,6 +580,9 @@ a.action > img {
 #fileList .popovermenu {
 	margin-right: 21px;
 }
+.ie8 #fileList .popovermenu {
+	margin-top: -10px;
+}
 
 .ie8 #fileList a.action img,
 #fileList tr:hover a.action,

apps/files/js/mainfileinfodetailview.js

@@ -131,6 +131,7 @@
 				} else {
 					// TODO: special icons / shared / external
 					$iconDiv.css('background-image', 'url("' + OC.MimeType.getIconUrl('dir') + '")');
+					OC.Util.scaleFixForIE8($iconDiv);
 				}
 				this.$el.find('[title]').tooltip({placement: 'bottom'});
 			} else {
@@ -214,6 +215,7 @@
 					$iconDiv.css({
 						'background-image': 'url("' + $iconDiv.previewImg + '")'
 					});
+					OC.Util.scaleFixForIE8($iconDiv);
 				}.bind(this)
 			});
 		}

apps/files/js/newfilemenu.js

@@ -212,6 +212,7 @@
 					fileType: 'folder'
 				}]
 			}));
+			OC.Util.scaleFixForIE8(this.$('.svg'));
 		},
 
 		/**

core/css/apps.css

@@ -308,6 +308,13 @@
 	-o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
 	filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
 }
+.ie8 .bubble {
+	border: 1px solid #eee;
+	margin-top: 18px;
+}
+.ie8 .bubble:after {
+	display: none;
+}
 /* miraculous border arrow stuff */
 .bubble:after,
 #app-navigation .app-navigation-entry-menu:after {

core/js/js.js

@@ -1596,6 +1596,46 @@ OC.Util = {
 		});
 	},
 
+	/**
+	 * Fix image scaling for IE8, since background-size is not supported.
+	 *
+	 * This scales the image to the element's actual size, the URL is
+	 * taken from the "background-image" CSS attribute.
+	 *
+	 * @param {Object} $el image element
+	 */
+	scaleFixForIE8: function($el) {
+		if (!this.isIE8()) {
+			return;
+		}
+		var self = this;
+		$($el).each(function() {
+			var url = $(this).css('background-image');
+			var r = url.match(/url\(['"]?([^'")]*)['"]?\)/);
+			if (!r) {
+				return;
+			}
+			url = r[1];
+			url = self.replaceSVGIcon(url);
+			// TODO: escape
+			url = url.replace(/'/g, '%27');
+			$(this).css({
+				'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + url + '\', sizingMethod=\'scale\')',
+				'background-image': ''
+			});
+		});
+		return $el;
+	},
+
+	/**
+	 * Returns whether this is IE8
+	 *
+	 * @return {bool} true if this is IE8, false otherwise
+	 */
+	isIE8: function() {
+		return $('html').hasClass('ie8');
+	},
+
 	/**
 	 * Remove the time component from a given date
 	 *