Valo theming for Grid's sidebar #17412

Little theming for Reindeer and Runo too, but no designs yet.

Change-Id: I967d377cf33d64c9566b7a28d81002e669562be7

4 files changed, 90 insertions, 14 deletions

diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss
index 7dc877dca5..360f020822 100644
--- a/WebContent/VAADIN/themes/base/grid/grid.scss
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -87,18 +87,24 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
   
   // Sidebar
   
-  .#{$primaryStyleName}-sidebar {
+  .#{$primaryStyleName}-sidebar.v-contextmenu {
+    @include box-shadow(none);
     position: absolute;
-    top: 1px;
-    right : 1px;
+    top: 0;
+    right: 0;
 
     background-color: $v-grid-header-background-color;
-    border-left: $v-grid-header-border;
-    border-bottom: $v-grid-header-border;    
+    border: $v-grid-header-border;
+    padding: 0;
     z-index: 5;
 
     .#{$primaryStyleName}-sidebar-button {
+      background: transparent;
+      border: none;
+      cursor: pointer;
       height: $v-grid-header-row-height;
+      outline: none;
+      padding: 0 4px;
       text-align: right;
 
       &:after {
@@ -106,19 +112,34 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
         font-family: FontAwesome, sans-serif;
         font-size: $v-grid-header-font-size;
         line-height: $v-grid-header-row-height;
-        padding: 0 $v-grid-cell-padding-horizontal;
       }
     }
 
-    .#{$primaryStyleName}-sidebar-content {
+    &.closed {
+      border-radius: 0;
+    }
+    
+    &.opened {
+      .#{$primaryStyleName}-sidebar-button {
+        width: 100%;
       
-      .column-hiding-panel {
-        display: block;
-        .column-hiding-toggle {
-          display: block;
-          padding: 3px 12px;
+        &:after {
+          content: "\00d7";
+          font-size: 16px;
+        }
+      }
+    }
+
+    .#{$primaryStyleName}-sidebar-content {
+      background: #fff;
+      border-top: $v-grid-border;
+      padding: 4px 0;
+
+      .gwt-MenuBar {
+        .gwt-MenuItem .column-hiding-toggle {
+          text-shadow: none;
         }
-      }      
+      }
     }
   }
 
diff --git a/WebContent/VAADIN/themes/reindeer/grid/grid.scss b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
index 28c5977fda..f9b966096a 100644
--- a/WebContent/VAADIN/themes/reindeer/grid/grid.scss
+++ b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
@@ -34,6 +34,19 @@
       border-color: #b1cde4;
     }
   }
+  
+  // Sidebar
+  .#{$primaryStyleName}-sidebar.v-contextmenu {
+    &.closed {
+      .#{$primaryStyleName}-sidebar-button:after {
+        line-height: 20px;
+      }
+    }
+    
+    .#{$primaryStyleName}-sidebar-content {
+      background-color: #f8f8f9;
+    }
+  }
 
   // Sort indicators
   .#{$primaryStyleName} th.sort-asc,
diff --git a/WebContent/VAADIN/themes/runo/grid/grid.scss b/WebContent/VAADIN/themes/runo/grid/grid.scss
index 06a04ec626..71ec6e06e0 100644
--- a/WebContent/VAADIN/themes/runo/grid/grid.scss
+++ b/WebContent/VAADIN/themes/runo/grid/grid.scss
@@ -27,6 +27,25 @@
       border-color: lighten($v-grid-row-selected-background-color, 20%);
     }
   }
+  
+  // Sidebar
+  .#{$primaryStyleName}-sidebar.v-contextmenu {
+    &.opened {
+      .#{$primaryStyleName}-sidebar-button {
+        &:after {
+          font-size: 22px;
+        }
+      }
+    }
+        
+    .#{$primaryStyleName}-sidebar-content {
+      background-color: transparent;
+      
+      .gwt-MenuBar {
+        border: none;
+      }
+    }
+  }
 
   // Sort indicators
   .#{$primaryStyleName} th.sort-asc,
diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss
index 0adfdd27ab..c1862c8209 100644
--- a/WebContent/VAADIN/themes/valo/components/_grid.scss
+++ b/WebContent/VAADIN/themes/valo/components/_grid.scss
@@ -182,12 +182,35 @@ $v-grid-details-border-bottom-stripe: $v-grid-cell-horizontal-border !default;
     padding: round($v-layout-spacing-vertical / 2) round($v-layout-spacing-horizontal / 2);
     margin: 0;
     outline: none;
-  }
+  }  
 
   .#{$primary-stylename}-spacer {
     margin-top: first-number($v-grid-border) * -1;
   }
 
+  // Sidebar
+  .#{$primary-stylename}-sidebar.v-contextmenu {
+    &.opened {
+      .#{$primary-stylename}-sidebar-button:after {
+        font-size: 20px;
+        line-height: 20px;
+      }
+      
+      .#{$primary-stylename}-sidebar-content {
+        margin: 0 0 2px;
+        padding: 4px 4px 2px;
+      }
+    }
+    
+    &.closed {
+      @include valo-gradient($v-grid-header-background-color);
+      
+      .#{$primary-stylename}-sidebar-button {
+        line-height: 36px;
+      }
+    }
+  }
+  
   // Customize scrollbars
   .#{$primary-stylename}-scroller {
     &::-webkit-scrollbar {