Updates styles for Grid editor row in Valo (ticket #13334).

Also fixes breaking tests for Reindeer changes.

Change-Id: I18b3434b70f7bc3c0fd736e86f9008265f82018e

3 files changed, 520 insertions, 90 deletions

diff --git a/WebContent/VAADIN/themes/reindeer/grid/grid.scss b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
new file mode 100644
index 0000000000..976693fba7
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
@@ -0,0 +1,175 @@
+@mixin reindeer-grid($primary-stylename : v-grid) {
+  
+  // TODO: check/set these values
+  $scrollbar-size: 15px;
+  $header-height: 22px;
+  
+  $grid-border-main: 1px solid #c2c3c4;
+  $grid-border-light: 1px solid #d4d4d4;
+  
+  .#{$primary-stylename} {
+    outline: none;
+  }
+  
+  // Table wrapper
+  .#{$primary-stylename}-tablewrapper {
+    @include box-sizing(border-box);
+    border: $grid-border-light;
+  }
+  
+  // Grid header.
+  .#{$primary-stylename}-header, .#{$primary-stylename}-footer {
+    
+    .#{$primary-stylename}-cell {
+      background: transparent repeat-x;
+      background-image: url(img/header-bg-light.png);
+      border: $grid-border-main;
+      border-right: none;
+      color: #222;
+      font-size: 10px;
+      font-weight: bold;
+      line-height: normal;
+      padding: 4px 4px 5px 6px;
+      text-shadow: #f3f5f8 0 1px 0;
+      text-transform: uppercase;
+      
+      &:first-child {
+        border-left: none;
+      }
+    }
+  }
+  
+  .#{$primary-stylename}-header {
+    border-top: none;
+  }
+  
+  .#{$primary-stylename}-footer {
+    border-bottom: none;
+  }
+  
+  // Grid body
+  .#{$primary-stylename}-body {
+    
+    // Rows
+    .#{$primary-stylename}-row:nth-child(odd) .#{$primary-stylename}-cell {
+      background-color: #eff0f1;
+    }
+    
+    // Cells
+    .#{$primary-stylename}-cell {
+      border: none;
+      border-left: 1px solid #d3d4d5;
+      padding: 3px 6px;
+      
+      &:first-child {
+        border-left: none;
+        
+        input[type="checkbox"] {
+          margin: 0;
+        }
+      }
+    }
+    
+    // Active state
+    .#{$primary-stylename}-row-active {
+      
+      .#{$primary-stylename}-cell {
+        background: none;
+      }
+      
+      .#{$primary-stylename}-cell-active {
+        border: 1px solid #0f68ba;
+      
+        // Adjust padding for 'active' borders.
+        padding: 2px 5px 2px 6px;
+        &:first-child {
+          padding-left: 5px;
+        }
+      }
+    }
+    
+    // Selected state
+    .#{$primary-stylename}-row-selected {
+      color: #fff;
+      text-shadow: #3b5a7a 0 1px 0;
+      
+      .#{$primary-stylename}-cell {
+        background: #4d749f url(../common/img/sel-bg.png) repeat-x;
+        border-color: #466c90;
+      }
+      
+      .#{$primary-stylename}-cell-active {
+        border-color: #b1cde4;
+      }
+    }
+  }
+  
+  // Sort indicators
+  .#{$primary-stylename} th.sort-asc:after,
+  .#{$primary-stylename} th.sort-desc:after {
+    content: " " attr(sort-order);
+    position: absolute;
+    right: 5px;
+    background: transparent no-repeat right 7px;
+    width: 16px;
+    height: 12px;
+    top: 0px;
+  }
+  
+  .#{$primary-stylename} th.sort-asc:after {
+    background-image: url(img/desc-light.png);
+  }
+  
+  .#{$primary-stylename} th.sort-desc:after {
+    background-image: url(img/asc-light.png);
+  }
+  
+  // Scrollbars
+  .#{$primary-stylename}-scroller {
+    @include box-sizing(border-box);
+    outline: none;
+  }  
+  
+  .#{$primary-stylename}-scroller-vertical {
+    border-top: $grid-border-main;
+    border-bottom: $grid-border-light;
+  }
+  
+  .#{$primary-stylename}-scroller-horizontal {
+    border-left: $grid-border-light;
+    border-right: $grid-border-light;
+  }
+  
+  // Fillers
+  .#{$primary-stylename}-filler-x {
+    @include box-sizing(border-box);
+    background: transparent repeat-x;
+    background-image: url(img/header-bg-light.png);
+    border: $grid-border-light;
+    border-top: none;
+    bottom: 0px;
+    height: $scrollbar-size;
+    left: 0;
+    position: absolute;
+    width: 100%;
+  }
+  
+  .#{$primary-stylename}-filler-y {
+    @include box-sizing(border-box);
+    background: transparent repeat-x;
+    background-image: url(img/header-bg-light.png);
+    border: $grid-border-light;
+    border-left: none;
+    height: $header-height;
+    position: absolute;
+    right: 0;
+    top: 0px;
+    width: $scrollbar-size; 
+  }
+}
+
+@mixin box-sizing($value) {
+  box-sizing: $value;
+  -moz-box-sizing: $value;
+  -webkit-box-sizing: $value;
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/grid/grid.scss b/WebContent/VAADIN/themes/runo/grid/grid.scss
new file mode 100644
index 0000000000..65d16849a8
--- /dev/null
+++ b/WebContent/VAADIN/themes/runo/grid/grid.scss
@@ -0,0 +1,165 @@
+@mixin runo-grid($primary-stylename : v-grid) {
+  
+  // TODO: check/set these values
+  $scrollbar-size: 15px;
+  $header-height: 38px;
+  
+  $grid-border-main: 1px solid #b6bbbc;
+  
+  .#{$primary-stylename} {
+    outline: none;
+  }
+  
+  .#{$primary-stylename}-tablewrapper {
+    @include box-sizing(border-box);
+    border: $grid-border-main;
+  }
+  
+  // Grid header.
+  .#{$primary-stylename}-header, .#{$primary-stylename}-footer {
+    
+    .#{$primary-stylename}-cell {
+      color: #393a3c;
+      background: #e7e9ea url(img/header-bg.png) repeat-x;
+      border: none;
+      font-size: 15px;
+      font-weight: normal;
+      padding: 9px 2px 9px 6px;
+      position: relative;
+      text-shadow: #ffffff 0 1px 0;
+      
+      &:first-child {
+      	&:before, &:after {
+      	  content: none;
+      	}
+      }
+      
+      &:before {
+        background-image: url(img/resizer-bg.png);
+        content: "";
+        height: 100%;
+        left: 0;
+        top: 0;
+        width: 2px;
+        position: absolute;
+      }
+    }
+  }
+  
+  .#{$primary-stylename}-header .#{$primary-stylename}-cell {
+    border-bottom: $grid-border-main;
+  }
+  
+  .#{$primary-stylename}-footer .#{$primary-stylename}-cell {
+    border-top: $grid-border-main;
+  }
+  
+  // Sort indicators
+  .#{$primary-stylename} th.sort-asc:after,
+  .#{$primary-stylename} th.sort-desc:after {
+    content: "";
+    height: 36px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 20px;
+  }
+  
+  .#{$primary-stylename} th.sort-asc:after {
+    background: transparent url(img/sort-asc.png) no-repeat right 50%;
+  }
+  
+  .#{$primary-stylename} th.sort-desc:after {
+    background: transparent url(img/sort-desc.png) no-repeat right 50%;
+  }
+  
+  // Grid body
+  .#{$primary-stylename}-body {
+    
+    .#{$primary-stylename}-row:nth-child(odd) .#{$primary-stylename}-cell {
+      background-color: #f6f7f7;
+    }
+    
+    // Cells
+    .#{$primary-stylename}-cell {
+      border: none;
+      line-height: 23px;
+      padding: 3px 6px 0 6px;
+    }
+    
+    // Active state
+    .#{$primary-stylename}-row-active {
+      
+      .#{$primary-stylename}-cell {
+        background: none;
+      }
+      
+      .#{$primary-stylename}-cell-active {
+        border: 1px solid #57a7ed;
+      
+        // Adjust padding for 'active' border.
+        padding: 2px 5px 0 5px;
+      }
+    }
+    
+    // Selected state
+    .#{$primary-stylename}-row.#{$primary-stylename}-row-selected {
+      color: white;
+      
+      .#{$primary-stylename}-cell {
+        background-color: #57a7ed;
+      }
+      
+      .#{$primary-stylename}-cell-active {
+        border-color: #c5e0f7;
+      }
+    }
+  }
+  
+  // Scrollbars
+  .#{$primary-stylename}-scroller {
+    @include box-sizing(border-box);
+    outline: none;
+  }
+  
+  .#{$primary-stylename}-scroller-vertical {
+    border-top: $grid-border-main;
+    border-bottom: $grid-border-main;
+  }
+  
+  .#{$primary-stylename}-scroller-horizontal {
+    border-left: $grid-border-main;
+    border-right: $grid-border-main;
+  }
+  
+  // Fillers
+  .#{$primary-stylename}-filler-x {
+    @include box-sizing(border-box);
+    background: #e7e9ea url(img/header-bg.png) repeat-x;
+    border: $grid-border-main;
+    border-top: none;
+    bottom: 0px;
+    height: $scrollbar-size;
+    left: 0;
+    position: absolute;
+    width: 100%;
+  }
+  
+  .#{$primary-stylename}-filler-y {
+    @include box-sizing(border-box);
+    background: #e7e9ea url(img/header-bg.png) repeat-x;
+    border: $grid-border-main;
+    border-left: none;
+    height: $header-height;
+    position: absolute;
+    right: 0;
+    top: 0px;
+    width: $scrollbar-size;
+  }
+}
+
+@mixin box-sizing($value) {
+  box-sizing: $value;
+  -moz-box-sizing: $value;
+  -webkit-box-sizing: $value;
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss
index b318b7c120..6a17393809 100644
--- a/WebContent/VAADIN/themes/valo/components/_grid.scss
+++ b/WebContent/VAADIN/themes/valo/components/_grid.scss
@@ -5,6 +5,9 @@ $primary-stylename: v-grid;
 $grid-background-color: valo-table-background-color();
 $grid-border: valo-border($color: $grid-background-color, $strength: 0.8);
 
+$grid-cell-active-border-width: round($v-unit-size * 0.05);
+$grid-cell-padding-vertical: round(($v-table-row-height - $v-font-size)/2);
+
 /**
  *
  * 
@@ -15,78 +18,16 @@ $grid-border: valo-border($color: $grid-background-color, $strength: 0.8);
 @mixin valo-grid($primary-stylename : v-grid) {
 
   @include base-escalator($primary-stylename);
-
-  // TODO: check/set scrollbar height
+  
+  // TODO: check/set these values
   $scrollbar-size: 15px;
-
-  // Base grid.
+  $header-height: 39px;
+  
   .#{$primary-stylename} {
-    th {
-      position: relative;
-    }
-
-    th.sort-asc:after {
-      content: "\f0dd" attr(sort-order);
-      font-family: FontAwesome;
-      float: right;
-    }
-
-    th.sort-desc:after {
-      content: "\f0de" attr(sort-order);
-      font-family: FontAwesome;
-      float: right;
-    }
-
-    &:after {
-      @include valo-gradient($v-background-color);
-      
-      content: "";
-      width: 100%;
-      height: $scrollbar-size;
-      position: absolute;
-      bottom: 0;
-
-      border: $grid-border;
-      border-top: none;
-
-      @include box-sizing(border-box);
-    }
-  }
-
-  .#{$primary-stylename}-row-selected > td {
-    background: $v-selection-color;
+    outline: none;
   }
-
-  // Empty area before horizontal scroll.
-
-
-  // All but first column cells have left border.
-  .#{$primary-stylename}-row {
-    th, td {
-      background: none;
-      border: none;
-      border-left: $grid-border;
-
-      &:first-child {
-        border-left: none; 
-      }
-    }
-  }
-
-  // Clear the float and change display value for all cells.
-  .#{$primary-stylename}-cell {
-    float: none;
-    display: inline-block;
-
-    &.frozen {
-      @include box-shadow(2px 0 2px rgba(0,0,0,0.1));
-    }
-    &.#{$primary-stylename}-cell-active {
-      @include box-shadow(inset 2px 2px 0px #77aeee, inset -2px -2px 0px #77aeee);
-    }
-  }
-
-  // Main border, moved from .#{$primary-stylename} due to scroll div widths.
+  
+  // Table wrapper
   .#{$primary-stylename}-tablewrapper {
     border: $grid-border;
     @include box-sizing(border-box);
@@ -96,40 +37,190 @@ $grid-border: valo-border($color: $grid-background-color, $strength: 0.8);
   .#{$primary-stylename}-header {
     @include valo-grid-header-style;
   }
+  
+  // Sort indicators
+  .#{$primary-stylename} th.sort-asc:after, th.sort-desc:after {
+    font-family: FontAwesome;
+    float: right;
+  }
 
-  // Grid footer.
-  .#{$primary-stylename}-footer {
-    @include valo-grid-footer-style;
+  .#{$primary-stylename} th.sort-asc:after {
+   content: "\f0dd" attr(sort-order);
+  }
+  
+  .#{$primary-stylename} th.sort-desc:after {
+    content: "\f0de" attr(sort-order);
   }
 
   // Grid body.
   .#{$primary-stylename}-body {
     
+    // Rows
+    .#{$primary-stylename}-row {
+      &:nth-child(odd) td {
+        $bg-lightness: if(color-luminance($grid-background-color) < 10, 4%, -4%);
+        background-color: scale-color($grid-background-color, $lightness: $bg-lightness);
+      }
+
+      &:nth-child(even) td {
+        background-color: $grid-background-color;
+      }
+    }
+    
+    // Cells
     .#{$primary-stylename}-cell {
-      line-height: 1;
-      $vertical-padding: round(($v-table-row-height - $v-font-size)/2);
-      padding: $vertical-padding $v-table-cell-padding-horizontal;
+      padding: $grid-cell-padding-vertical $v-table-cell-padding-horizontal;
     }
-
-    .#{$primary-stylename}-row {
-      border-bottom: $grid-border;
+    
+    
+    // Active state
+    .#{$primary-stylename}-row-active .#{$primary-stylename}-cell-active {
+      border: $grid-cell-active-border-width solid $v-selection-color;
+      padding-top: $grid-cell-padding-vertical - $grid-cell-active-border-width;
+      padding-right: $v-table-cell-padding-horizontal - $grid-cell-active-border-width;
+      padding-bottom: $grid-cell-padding-vertical - $grid-cell-active-border-width;
+      padding-left: $v-table-cell-padding-horizontal - round($grid-cell-active-border-width/2);
       
-      &.#{$primary-stylename}-row-active td {
+      &:first-child {
+        padding-left: $v-table-cell-padding-horizontal - $grid-cell-active-border-width;
+      }
+    }
+    
+    // Selected state
+    .#{$primary-stylename}-row-selected {
+      
+      .#{$primary-stylename}-cell-active {
+        border-color: adjust-color($v-selection-color, $lightness: 20%);
+      }
+      
+      td {
         @include valo-gradient($v-selection-color);
         color: $grid-background-color;
         border-color: adjust-color($v-selection-color, $lightness: -8%, $saturation: -8%);
       }
     }
-
-    .#{$primary-stylename}-row > td {
-        background-color: $grid-background-color;
+  }
+  
+  // Common styles for all cells
+  .#{$primary-stylename}-cell {
+    border: none;
+    border-left: $grid-border;
+    line-height: 1;
+    
+    &.frozen {
+      @include box-shadow(2px 0 2px rgba(0,0,0,0.1));
     }
-
-    .#{$primary-stylename}-row-stripe > td {
-        $bg-lightness: if(color-luminance($grid-background-color) < 10, 4%, -4%);
-        background-color: scale-color($grid-background-color, $lightness: $bg-lightness);
+    
+    &:first-child {
+      border-left: none;
+      position: relative;
+        
+      // Position the first column checkboxes
+      input[type="checkbox"] {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        margin: auto;
+        right: 0;
+        top: 0;
+      }
+    }
+  }
+  
+  // Grid footer.
+  .#{$primary-stylename}-footer {
+    @include valo-grid-footer-style;
+  }
+  
+  // Grid editor row
+  .#{$primary-stylename}-editor-row {
+    @include box-shadow(0px 0px 6px 2px rgba(0,0,0,0.14));
+    position: relative;
+    outline: none;
+    
+    // Ugly fix for correcting editor row position
+    margin-top: -1px;
+    
+    > div {
+      @include box-sizing(border-box);
+      display: inline-block;
+      
+      .v-textfield, .v-datefield, .v-filterselect {
+        background: $grid-background-color;
+        border: none;
+        border-left: $grid-border;
+        border-radius: 0;
+        height: 100%;
+        width: 100%;
+        
+        &:focus, &:active {
+          @include box-shadow(inset 0 0 0 2px $v-focus-color);
+          outline: none;
+        }
+      }
+      
+      &:first-child > * {
+        border-left: none;
+      }
     }
   }
+  
+  // Grid editor row buttons
+  .v-editor-row-save, .v-editor-row-cancel {
+    @include valo-button-static-style;
+    @include valo-button-style($unit-size: $v-unit-size--small, $border-radius: 0);
+    border-right: none;
+    position: static;
+    width: auto !important;
+
+    &:after, &:before {
+      content: none;
+    }
+  }
+  .v-editor-row-save {
+    border-bottom-left-radius: round($v-unit-size * 0.1);
+  }
+  
+   // Scrollbars
+  .#{$primary-stylename}-scroller {
+    @include box-sizing(border-box);
+    outline: none;
+  }  
+  
+  .#{$primary-stylename}-scroller-vertical {
+    border-top: $grid-border;
+    border-bottom: $grid-border;
+  }
+    
+  .#{$primary-stylename}-scroller-horizontal {
+    border-left: $grid-border;
+    border-right: $grid-border;
+  }
+  
+  // Fillers
+  .#{$primary-stylename}-filler-x {
+    @include box-sizing(border-box);
+    @include valo-gradient($v-background-color);
+    border: $grid-border;
+    border-top: none;
+    bottom: 0px;
+    height: $scrollbar-size;
+    left: 0;
+    position: absolute;
+    width: 100%;
+  }
+  
+  .#{$primary-stylename}-filler-y {
+    @include box-sizing(border-box);
+    @include valo-gradient($v-background-color);
+    border: $grid-border;
+    border-left: none;
+    height: $header-height;
+    position: absolute;
+    right: 0;
+    top: 0px;
+    width: $scrollbar-size;
+  }
 }
 
 @mixin valo-grid-header-style {
@@ -141,9 +232,7 @@ $grid-border: valo-border($color: $grid-background-color, $strength: 0.8);
   th {
     font-weight: inherit;
     font-size: $v-table-header-font-size;
-    $vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2);
-    padding: $vertical-padding $v-table-cell-padding-horizontal $vertical-padding - $v-table-border-width;
-    line-height: 1;
+    padding: $grid-cell-padding-vertical $v-table-cell-padding-horizontal $grid-cell-padding-vertical - $v-table-border-width;
   }
 }
 
@@ -156,5 +245,6 @@ $grid-border: valo-border($color: $grid-background-color, $strength: 0.8);
   td {
     font-weight: inherit;
     font-size: $v-table-header-font-size;
+    padding: $grid-cell-padding-vertical $v-table-cell-padding-horizontal $grid-cell-padding-vertical - $v-table-border-width;
   }
-}
\ No newline at end of file
+}