Grid editor theme redesign (#16593)

Editor theme is now more flexible with regards to CSS. There are now
separate elements for containing the edited cells and the “footer”
which contains an optional message area and the save and cancel buttons.

Change-Id: I9addcb6adca792a9251ffada99fbe9b77502c77a

5 files changed, 215 insertions, 25 deletions

diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss
index ed068a5efc..a79420f7a9 100644
--- a/WebContent/VAADIN/themes/base/grid/grid.scss
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -85,7 +85,8 @@ $v-grid-editor-background-color: $v-grid-row-background-color !default;
 
   // Rows
 
-  .#{$primaryStyleName}-row > td {
+  .#{$primaryStyleName}-row > td,
+  .#{$primaryStyleName}-editor-cells > div {
     border-left: $v-grid-cell-vertical-border;
     border-bottom: $v-grid-cell-horizontal-border;
 
@@ -221,22 +222,35 @@ $v-grid-editor-background-color: $v-grid-row-background-color !default;
   // Editor
 
   .#{$primaryStyleName}-editor {
-    // TODO should be fixed in offset calculations
-    margin-top: -1px;
     position: absolute;
-    overflow-y: visible;
-    background: $v-grid-editor-background-color;
-    @include box-shadow(0 0 10px 1px rgba(0,0,0,.3));
+    z-index: 20;
+    overflow: hidden;
+    left: 0;
+    right: 0;
+    border: $v-grid-border;
+    margin-top: nth($v-grid-border, 1) * -1;
+    @include box-shadow(0 0 9px rgba(0,0,0,.2));
+  }
+
+  .#{$primaryStyleName}-editor-cells {
+    position: relative;
+    white-space: nowrap;
 
     > div {
-      position: absolute;
+      display: inline-block;
       @include box-sizing(border-box);
-      border-left: $v-grid-cell-vertical-border;
+      vertical-align: middle;
+      background: $v-grid-editor-background-color;
 
       &:first-child {
         border-left: none;
       }
 
+      > * {
+        vertical-align: middle;
+        display: inline-block;
+      }
+
       .v-textfield,
       .v-datefield,
       .v-filterselect {
@@ -244,24 +258,60 @@ $v-grid-editor-background-color: $v-grid-row-background-color !default;
         max-width: 100%;
         min-height: 100%;
         max-height: 100%;
-        border: none;
-        border-radius: 0;
       }
 
-      .v-textfield-focus,
-      .v-filterselect-focus input {
-        position: relative;
-        z-index: 1;
+      .v-select,
+      .v-select-select {
+        min-width: 100%;
+        max-width: 100%;
       }
     }
   }
 
-  .#{$primaryStyleName}-editor-save,
-  .#{$primaryStyleName}-editor-cancel {
-    position: absolute;
-    // TODO remove the inline size from the widgets
-    width: auto !important;
-    height: auto !important;
+  .#{$primaryStyleName}-editor-footer {
+    display: table;
+    height: $v-grid-row-height;
+    border-top: $v-grid-cell-horizontal-border;
+    margin-top: nth($v-grid-cell-horizontal-border, 1) * -1;
+    background: $v-grid-row-background-color;
+    padding: 0 5px;
+
+    + .#{$primaryStyleName}-editor-cells > div {
+      border-bottom: none;
+      border-top: $v-grid-cell-horizontal-border;
+    }
+
+    &:first-child {
+      border-top: none;
+      margin-top: 0;
+      border-bottom: $v-grid-cell-horizontal-border;
+      margin-bottom: nth($v-grid-cell-horizontal-border, 1) * -1;
+    }
+  }
+
+  .#{$primaryStyleName}-editor-message,
+  .#{$primaryStyleName}-editor-buttons {
+    display: table-cell;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+
+  .#{$primaryStyleName}-editor-message {
+    width: 100%;
+    position: relative;
+
+    > div {
+      position: absolute;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: $v-grid-row-height;
+      top: 0;
+    }
+  }
+
+  .#{$primaryStyleName}-editor-save {
+    margin-right: 4px;
   }
 
   // Renderers
diff --git a/WebContent/VAADIN/themes/reindeer/grid/grid.scss b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
index 8dacb3ccce..28c5977fda 100644
--- a/WebContent/VAADIN/themes/reindeer/grid/grid.scss
+++ b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
@@ -57,4 +57,35 @@
     background-image: url(img/desc-light.png);
   }
 
+  .#{$primaryStyleName}-editor-footer {
+    background: #dfe1e3;
+  }
+
+  .#{$primaryStyleName}-editor-cells > div {
+    .v-textfield,
+    .v-textfield-focus,
+    .v-datefield,
+    .v-datefield .v-textfield-focus,
+    .v-filterselect,
+    .v-filterselect-input,
+    .v-filterselect-input:focus {
+      border: none;
+      border-radius: 0;
+      background: transparent;
+    }
+
+    .v-filterselect {
+      overflow: hidden;
+    }
+
+    .v-filterselect-input {
+      height: 100%;
+    }
+
+    .v-filterselect-button {
+      // 24px is the height of v-filterselect
+      margin-top: round((24px - $v-grid-row-height) / -2)
+    }
+  }
+
 }
diff --git a/WebContent/VAADIN/themes/runo/grid/grid.scss b/WebContent/VAADIN/themes/runo/grid/grid.scss
index a1081878cc..06a04ec626 100644
--- a/WebContent/VAADIN/themes/runo/grid/grid.scss
+++ b/WebContent/VAADIN/themes/runo/grid/grid.scss
@@ -50,4 +50,8 @@
     background-image: url(img/sort-desc.png);
   }
 
+  .#{$primaryStyleName}-editor-footer {
+    background: #e7e9ea;
+  }
+
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss
index 50c7169225..c481f127a8 100644
--- a/WebContent/VAADIN/themes/valo/components/_grid.scss
+++ b/WebContent/VAADIN/themes/valo/components/_grid.scss
@@ -3,7 +3,7 @@
 $v-grid-row-background-color: valo-table-background-color() !default;
 $v-grid-row-stripe-background-color: scale-color($v-grid-row-background-color, $lightness: if(color-luminance($v-grid-row-background-color) < 10, 4%, -4%)) !default;
 
-$v-grid-border: valo-border($color: $v-grid-row-background-color, $strength: 0.8) !default;
+$v-grid-border: flatten-list(valo-border($color: $v-grid-row-background-color, $strength: 0.8)) !default;
 $v-grid-cell-focused-border: max(2px, first-number($v-border)) solid $v-selection-color !default;
 
 $v-grid-row-height: $v-table-row-height !default;
@@ -14,6 +14,8 @@ $v-grid-header-background-color: $v-background-color !default;
 
 $v-grid-cell-padding-horizontal: $v-table-cell-padding-horizontal !default;
 
+$v-grid-animations-enabled: $v-animations-enabled !default;
+
 
 @import "../../base/grid/grid";
 
@@ -68,10 +70,91 @@ $v-grid-cell-padding-horizontal: $v-table-cell-padding-horizontal !default;
     }
   }
 
+  .#{$primary-stylename}-editor {
+    @include valo-focus-style;
+    border-color: $v-focus-color;
+  }
+
+  .#{$primary-stylename}-editor-footer {
+    font-size: $v-font-size--small;
+    padding: 0 round($v-layout-spacing-horizontal / 2);
+    background: $v-app-background-color;
+    @if $v-grid-animations-enabled {
+      @include animation(valo-grid-editor-footer-animate-in 200ms 120ms backwards);
+    }
+  }
+
+  @if $v-grid-animations-enabled {
+    .#{$primary-stylename}-editor-footer:first-child {
+      @include animation(valo-grid-editor-footer-animate-in-alt 200ms 120ms backwards);
+    }
+  }
+
+  .#{$primary-stylename}-editor-cells {
+    z-index: 1;
+  }
+
+  .#{$primary-stylename}-editor-cells > div {
+    // Vertical centering for widgets
+    &:before {
+      content: "";
+      display: inline-block;
+      height: 100%;
+      vertical-align: middle;
+    }
+
+    .v-textfield,
+    .v-textfield-focus,
+    .v-datefield,
+    .v-datefield .v-textfield-focus,
+    .v-filterselect-input,
+    .v-filterselect-input:focus {
+      border: none;
+      border-radius: 0;
+      background: transparent;
+
+      @if $v-textfield-bevel {
+        @include box-shadow(valo-bevel-and-shadow($bevel: $v-textfield-bevel));
+      } @else {
+        @include box-shadow(none);
+      }
+    }
+
+    .v-textfield-focus,
+    .v-datefield .v-textfield-focus,
+    .v-filterselect-input:focus {
+      position: relative;
+    }
+
+    .v-select {
+      padding-left: round($v-grid-cell-padding-horizontal / 2);
+      padding-right: round($v-grid-cell-padding-horizontal / 2);
+    }
+
+    .v-checkbox {
+      margin: 0 round($v-grid-cell-padding-horizontal / 2);
+
+      label {
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .#{$primary-stylename}-editor-message > div:before {
+    display: inline-block;
+    @include valo-error-indicator-style($is-pseudo-element: true);
+  }
+
   .#{$primary-stylename}-editor-save,
   .#{$primary-stylename}-editor-cancel {
-    @include valo-button-static-style;
-    @include valo-button-style($unit-size: $v-unit-size--small, $font-size: $v-font-size--small);
+    @include valo-link-style;
+    font-weight: $v-font-weight + 100;
+    text-decoration: none;
+    border: none;
+    background: transparent;
+    padding: round($v-layout-spacing-vertical / 2) round($v-layout-spacing-horizontal / 2);
+    margin: 0;
+    outline: none;
   }
 
   // Customize scrollbars
@@ -98,3 +181,19 @@ $v-grid-cell-padding-horizontal: $v-table-cell-padding-horizontal !default;
   }
 
 }
+
+
+@include keyframes(valo-grid-editor-footer-animate-in) {
+  0% {
+    margin-top: -$v-grid-row-height;
+  }
+}
+
+@include keyframes(valo-grid-editor-footer-animate-in-alt) {
+  0% {
+    margin-bottom: -$v-grid-row-height - first-number($v-grid-cell-horizontal-border);
+  }
+  100% {
+    margin-bottom: first-number($v-grid-cell-horizontal-border) * -1;
+  }
+}
diff --git a/WebContent/VAADIN/themes/valo/shared/_global.scss b/WebContent/VAADIN/themes/valo/shared/_global.scss
index 4ce294b06a..b4e8564119 100644
--- a/WebContent/VAADIN/themes/valo/shared/_global.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_global.scss
@@ -394,16 +394,22 @@ $valo-shared-pathPrefix: null;
 /**
  * Error indicator styles. The error indicator is by default a font character which you can style freely.
  *
+ * @param {boolean} $is-pseudo-element (false) - is the selector including this mixin targeting a pseudo element
+ *
  * @requires {mixin} valo-error-indicator-icon-style by default
  */
-@mixin valo-error-indicator-style {
+@mixin valo-error-indicator-style ($is-pseudo-element: false) {
   color: $v-error-indicator-color;
   font-weight: 600;
   width: ceil($v-unit-size/2);
   text-align: center;
 
-  &:before {
+  @if $is-pseudo-element {
     @include valo-error-indicator-icon-style;
+  } @else {
+    &:before {
+      @include valo-error-indicator-icon-style;
+    }
   }
 }