Grid sidebar menu design changed. See design document and comments at trac ticket. (#18325)

Change-Id: I6686d131f015cf0b7b9a6b43ce43284218d5dd63

8 files changed, 39 insertions, 22 deletions

diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss
index 31403428cd..f587dfef4f 100644
--- a/WebContent/VAADIN/themes/base/grid/grid.scss
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -108,6 +108,7 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
       outline: none;
       padding: 0 4px;
       text-align: right;
+      line-height: 1;
 
       &::-moz-focus-inner {
         border: 0;
@@ -128,10 +129,10 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
     &.open {
       .#{$primaryStyleName}-sidebar-button {
         width: 100%;
- 
+
         &:after {
-          content: "\00d7";
-          font-size: 16px;
+          content: "\f0c9";
+          font-size: $v-grid-header-font-size;
           line-height: 1;
         }
       }
@@ -142,11 +143,12 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
     }
 
     .v-ie8 &.open .#{$primaryStyleName}-sidebar-button:after {
+      vertical-align: middle;
+      text-align: center;
       display: inline;
     }
 
     .#{$primaryStyleName}-sidebar-content {
-      border-top: $v-grid-border;
       padding: 4px 0;
 
       .gwt-MenuBar {
diff --git a/WebContent/VAADIN/themes/chameleon/components/components.scss b/WebContent/VAADIN/themes/chameleon/components/components.scss
index 9c8a56b33d..578ea23bf3 100644
--- a/WebContent/VAADIN/themes/chameleon/components/components.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/components.scss
@@ -1,6 +1,7 @@
 @import "accordion/accordion.scss";
 @import "button/button.scss";
 @import "colorpicker/colorpicker.scss";
+@import "grid/grid.scss";
 @import "label/label.scss";
 @import "menubar/menubar.scss";
 @import "notification/notification.scss";
@@ -24,6 +25,7 @@
 	@include chameleon-accordion;
 	@include chameleon-button;
 	@include chameleon-colorpicker;
+	@include chameleon-grid;
 	@include chameleon-label;
 	@include chameleon-menubar;
 	@include chameleon-notification;
diff --git a/WebContent/VAADIN/themes/chameleon/components/grid/grid.scss b/WebContent/VAADIN/themes/chameleon/components/grid/grid.scss
new file mode 100644
index 0000000000..5007ad6619
--- /dev/null
+++ b/WebContent/VAADIN/themes/chameleon/components/grid/grid.scss
@@ -0,0 +1,12 @@
+@mixin chameleon-grid($primaryStyleName: v-grid) {
+
+  // Sidebar
+  .#{$primaryStyleName}-sidebar.v-contextmenu {
+
+    .v-on:before, .v-off:before {
+      content: none;
+      font-size: 0;
+      margin-right: 0;
+    }
+  }
+}
diff --git a/WebContent/VAADIN/themes/reindeer/grid/grid.scss b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
index 7ae0f402aa..cb5e9d454e 100644
--- a/WebContent/VAADIN/themes/reindeer/grid/grid.scss
+++ b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
@@ -40,6 +40,12 @@
     .#{$primaryStyleName}-sidebar-content {
       background-color: #f8f8f9;
     }
+
+    .v-on:before, .v-off:before {
+      content: none;
+      font-size: 0;
+      margin-right: 0;
+    }
   }
 
   // Sort indicators
diff --git a/WebContent/VAADIN/themes/runo/grid/grid.scss b/WebContent/VAADIN/themes/runo/grid/grid.scss
index aca9821c53..1f049c5fb0 100644
--- a/WebContent/VAADIN/themes/runo/grid/grid.scss
+++ b/WebContent/VAADIN/themes/runo/grid/grid.scss
@@ -30,14 +30,7 @@
   
   // Sidebar
   .#{$primaryStyleName}-sidebar.v-contextmenu {
-    &.open {
-      .#{$primaryStyleName}-sidebar-button {
-        &:after {
-          font-size: 22px;
-        }
-      }
-    }
-        
+
     .#{$primaryStyleName}-sidebar-content {
       background-color: transparent;
       
@@ -45,6 +38,12 @@
         border: none;
       }
     }
+
+    .v-on:before, .v-off:before {
+      content: none;
+      font-size: 0;
+      margin-right: 0;
+    }
   }
 
   // Sort indicators
diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss
index 27d421b9f2..d00ddf30a4 100644
--- a/WebContent/VAADIN/themes/valo/components/_grid.scss
+++ b/WebContent/VAADIN/themes/valo/components/_grid.scss
@@ -203,9 +203,6 @@ $v-grid-details-border-bottom-stripe: $v-grid-cell-horizontal-border !default;
   // Sidebar
   .#{$primary-stylename}-sidebar.v-contextmenu {
     &.open {
-      .#{$primary-stylename}-sidebar-button:after {
-        font-size: 20px;
-      }
 
       .#{$primary-stylename}-sidebar-content {
         margin: 0 0 2px;
diff --git a/client/src/com/vaadin/client/widgets/Grid.java b/client/src/com/vaadin/client/widgets/Grid.java
index 232d67c1d4..377943ed61 100644
--- a/client/src/com/vaadin/client/widgets/Grid.java
+++ b/client/src/com/vaadin/client/widgets/Grid.java
@@ -3248,7 +3248,6 @@ public class Grid<T> extends ResizeComposite implements
                 clickOutsideToCloseHandlerRegistration = Event
                         .addNativePreviewHandler(clickOutsideToCloseHandler);
             }
-            openCloseButton.setHeight("");
         }
 
         /**
diff --git a/uitest/src/com/vaadin/tests/components/grid/basicfeatures/server/GridSidebarThemeTest.java b/uitest/src/com/vaadin/tests/components/grid/basicfeatures/server/GridSidebarThemeTest.java
index 0e5dd32989..238b470feb 100644
--- a/uitest/src/com/vaadin/tests/components/grid/basicfeatures/server/GridSidebarThemeTest.java
+++ b/uitest/src/com/vaadin/tests/components/grid/basicfeatures/server/GridSidebarThemeTest.java
@@ -45,15 +45,15 @@ public class GridSidebarThemeTest extends GridBasicFeaturesTest {
     private void runTestSequence(String theme) throws IOException {
         openTestURL("theme=" + theme);
 
-        compareScreen(theme + "_SidebarClosed");
+        compareScreen(theme + "-SidebarClosed");
         getSidebarOpenButton().click();
 
-        compareScreen(theme + "_SidebarOpen");
+        compareScreen(theme + "-SidebarOpen");
 
         new Actions(getDriver()).moveToElement(getColumnHidingToggle(2), 5, 5)
                 .perform();
 
-        compareScreen(theme + "_OnMouseOverNotHiddenToggle");
+        compareScreen(theme + "-OnMouseOverNotHiddenToggle");
 
         getColumnHidingToggle(2).click();
         getColumnHidingToggle(3).click();
@@ -63,17 +63,17 @@ public class GridSidebarThemeTest extends GridBasicFeaturesTest {
                 .perform();
         ;
 
-        compareScreen(theme + "_TogglesTriggered");
+        compareScreen(theme + "-TogglesTriggered");
 
         new Actions(getDriver()).moveToElement(getColumnHidingToggle(2))
                 .perform();
         ;
 
-        compareScreen(theme + "_OnMouseOverHiddenToggle");
+        compareScreen(theme + "-OnMouseOverHiddenToggle");
 
         getSidebarOpenButton().click();
 
-        compareScreen(theme + "_SidebarClosed2");
+        compareScreen(theme + "-SidebarClosed2");
     }
 
     @Override