Fixed regression by #15381 on IE8

The opacity for disabled menu items looks very ugly on IE8. Fixed by using the previous gray color for text and opacity filter only for the item icon. Change-Id: If48716cdccef05ebdba43b5600e41c0690398429
vaadin · Jun 22, 2015 · a418877 · a418877
1 parent 1ccb529
commit a418877
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/WebContent/VAADIN/themes/base/menubar/menubar.scss b/WebContent/VAADIN/themes/base/menubar/menubar.scss
@@ -56,7 +56,16 @@
 .#{$primaryStyleName} span.#{$primaryStyleName}-menuitem-disabled:active {
 	opacity: .5;
 	filter: alpha(opacity=50);
+
+	.v-ie8 & {
+		filter: none;
+		color: #999;
+		img {
+			filter: alpha(opacity=50);
+		}
+	}
 }
+
 .#{$primaryStyleName}-more-menuitem {
 	/* Arial has the most coverage for geometric entity characters */
 	font-family: arial, helvetica, sans-serif;

diff --git a/uitest/src/com/vaadin/tests/themes/base/DisabledMenuBarItemTest.java b/uitest/src/com/vaadin/tests/themes/base/DisabledMenuBarItemTest.java
@@ -21,19 +21,17 @@ public void disabledMenuItemShouldHaveOpacity() throws IOException {
         WebElement element = driver.findElement(By
                 .className("v-menubar-menuitem-disabled"));
 
-        assertThat(element.getCssValue("opacity"), is("0.5"));
-
-        if (browserIsIE8or9()) {
+        if (Browser.IE9.getDesiredCapabilities().equals(
+                getDesiredCapabilities())) {
             assertThat(element.getCssValue("filter"), is("alpha(opacity=50)"));
+        } else if (Browser.IE8.getDesiredCapabilities().equals(
+                getDesiredCapabilities())) {
+            WebElement icon = element.findElement(By.tagName("img"));
+            assertThat(icon.getCssValue("filter"), is("alpha(opacity=50)"));
+        } else {
+            assertThat(element.getCssValue("opacity"), is("0.5"));
         }
 
         compareScreen("transparent");
     }
-
-    private boolean browserIsIE8or9() {
-        return Browser.IE8.getDesiredCapabilities().equals(
-                getDesiredCapabilities())
-                || Browser.IE9.getDesiredCapabilities().equals(
-                        getDesiredCapabilities());
-    }
 }