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

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

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)
+    }
+  }
+
 }

WebContent/VAADIN/themes/runo/grid/grid.scss

@@ -50,4 +50,8 @@
     background-image: url(img/sort-desc.png);
   }
 
+  .#{$primaryStyleName}-editor-footer {
+    background: #e7e9ea;
+  }
+
 }

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;
+  }
+}

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;
+    }
   }
 }
 

client/src/com/vaadin/client/widgets/Grid.java

@@ -942,13 +942,6 @@ public class Grid<T> extends ResizeComposite implements
      */
     protected static class Editor<T> {
 
-        private static final double BUTTON_HEIGHT = 25;
-        private static final double BUTTON_WIDTH = 50;
-        private static final double BUTTON_MARGIN = 5;
-        private static final double SAVE_BUTTON_LEFT_MARGIN_PX = 0;
-        private static final double CANCEL_BUTTON_LEFT_MARGIN_PX = SAVE_BUTTON_LEFT_MARGIN_PX
-                + BUTTON_WIDTH + BUTTON_MARGIN;
-
         public static final int KEYCODE_SHOW = KeyCodes.KEY_ENTER;
         public static final int KEYCODE_HIDE = KeyCodes.KEY_ESCAPE;
 
@@ -960,6 +953,16 @@ public class Grid<T> extends ResizeComposite implements
         private EditorHandler<T> handler;
 
         private DivElement editorOverlay = DivElement.as(DOM.createDiv());
+        private DivElement cellWrapper = DivElement.as(DOM.createDiv());
+        private DivElement messageAndButtonsWrapper = DivElement.as(DOM
+                .createDiv());
+
+        private DivElement messageWrapper = DivElement.as(DOM.createDiv());
+        private DivElement buttonsWrapper = DivElement.as(DOM.createDiv());
+
+        // Element which contains the error message for the editor
+        // Should only be added to the DOM when there's a message to show
+        private DivElement message = DivElement.as(DOM.createDiv());
 
         private Map<Column<?, T>, Widget> columnToWidget = new HashMap<Column<?, T>, Widget>();
 
@@ -1055,7 +1058,6 @@ public class Grid<T> extends ResizeComposite implements
         public Editor() {
             saveButton = new Button();
             saveButton.setText(GridConstants.DEFAULT_SAVE_CAPTION);
-            saveButton.setStylePrimaryName("v-nativebutton");
             saveButton.addClickHandler(new ClickHandler() {
                 @Override
                 public void onClick(ClickEvent event) {
@@ -1065,7 +1067,6 @@ public class Grid<T> extends ResizeComposite implements
 
             cancelButton = new Button();
             cancelButton.setText(GridConstants.DEFAULT_CANCEL_CAPTION);
-            cancelButton.setStylePrimaryName("v-nativebutton");
             cancelButton.addClickHandler(new ClickHandler() {
                 @Override
                 public void onClick(ClickEvent event) {
@@ -1274,23 +1275,7 @@ public class Grid<T> extends ResizeComposite implements
          */
         protected void showOverlay(TableRowElement tr) {
 
-            DivElement tableWrapper = DivElement.as(tr.getParentElement()
-                    .getParentElement().getParentElement());
-
-            AbstractRowContainer body = (AbstractRowContainer) grid
-                    .getEscalator().getBody();
-
-            double rowTop = body.getRowTop(tr);
-            int bodyTop = body.getElement().getAbsoluteTop();
-            int wrapperTop = tableWrapper.getAbsoluteTop();
-
-            double width = WidgetUtil
-                    .getRequiredWidthBoundingClientRectDouble(tr);
-            double height = WidgetUtil
-                    .getRequiredHeightBoundingClientRectDouble(tr);
-            double overlayTop = rowTop + bodyTop - wrapperTop;
-            setBounds(editorOverlay, tr.getOffsetLeft(), overlayTop, width,
-                    height);
+            DivElement gridElement = DivElement.as(grid.getElement());
 
             scrollHandler = grid.addScrollHandler(new ScrollHandler() {
                 @Override
@@ -1299,12 +1284,14 @@ public class Grid<T> extends ResizeComposite implements
                 }
             });
 
-            tableWrapper.appendChild(editorOverlay);
+            gridElement.appendChild(editorOverlay);
+            editorOverlay.appendChild(cellWrapper);
+            editorOverlay.appendChild(messageAndButtonsWrapper);
 
             for (int i = 0; i < tr.getCells().getLength(); i++) {
                 Element cell = createCell(tr.getCells().getItem(i));
 
-                editorOverlay.appendChild(cell);
+                cellWrapper.appendChild(cell);
 
                 Column<?, T> column = grid.getColumn(i);
                 if (column.isEditable()) {
@@ -1316,43 +1303,58 @@ public class Grid<T> extends ResizeComposite implements
                 }
             }
 
-            attachWidget(saveButton, editorOverlay);
-            attachWidget(cancelButton, editorOverlay);
+            // Only add these elements once
+            if (!messageAndButtonsWrapper.isOrHasChild(messageWrapper)) {
+                messageAndButtonsWrapper.appendChild(messageWrapper);
+                messageAndButtonsWrapper.appendChild(buttonsWrapper);
+            }
 
-            /*
-             * We can't use BUTTON_HEIGHT here, becuase it's ignored by at least
-             * Chrome and Firefox. So we measure it.
-             */
-            double buttonTop = getButtonTop(tr, saveButton.getOffsetHeight());
-            setBounds(saveButton.getElement(), SAVE_BUTTON_LEFT_MARGIN_PX,
-                    buttonTop, BUTTON_WIDTH, BUTTON_HEIGHT);
-            setBounds(cancelButton.getElement(), CANCEL_BUTTON_LEFT_MARGIN_PX,
-                    buttonTop, BUTTON_WIDTH, BUTTON_HEIGHT);
+            attachWidget(saveButton, buttonsWrapper);
+            attachWidget(cancelButton, buttonsWrapper);
 
             updateHorizontalScrollPosition();
-        }
 
-        private double getButtonTop(TableRowElement tr, int buttonHeight) {
-            boolean buttonsShouldBeRenderedBelow = buttonsShouldBeRenderedBelow(
-                    tr, buttonHeight);
-            final double buttonTop;
-            if (buttonsShouldBeRenderedBelow) {
-                buttonTop = tr.getOffsetHeight() + BUTTON_MARGIN;
+            AbstractRowContainer body = (AbstractRowContainer) grid
+                    .getEscalator().getBody();
+            double rowTop = body.getRowTop(tr);
+
+            int bodyTop = body.getElement().getAbsoluteTop();
+            int gridTop = gridElement.getAbsoluteTop();
+            double overlayTop = rowTop + bodyTop - gridTop;
+
+            if (buttonsShouldBeRenderedBelow(tr)) {
+                // Default case, editor buttons are below the edited row
+                editorOverlay.getStyle().setTop(overlayTop, Unit.PX);
+                editorOverlay.getStyle().clearBottom();
             } else {
-                buttonTop = -(buttonHeight + BUTTON_MARGIN);
+                // Move message and buttons wrapper on top of cell wrapper if
+                // there is not enough space visible space under and fix the
+                // overlay from the bottom
+                editorOverlay.appendChild(cellWrapper);
+                int gridHeight = grid.getElement().getOffsetHeight();
+                editorOverlay.getStyle()
+                        .setBottom(
+                                gridHeight - overlayTop - tr.getOffsetHeight(),
+                                Unit.PX);
+                editorOverlay.getStyle().clearTop();
+            }
+
+            // Do not render over the vertical scrollbar
+            int nativeScrollbarSize = WidgetUtil.getNativeScrollbarSize();
+            if (nativeScrollbarSize > 0) {
+                editorOverlay.getStyle().setRight(nativeScrollbarSize, Unit.PX);
             }
-            return buttonTop;
         }
 
-        private boolean buttonsShouldBeRenderedBelow(TableRowElement tr,
-                int buttonHeight) {
+        private boolean buttonsShouldBeRenderedBelow(TableRowElement tr) {
             TableSectionElement tfoot = grid.escalator.getFooter().getElement();
             double tfootPageTop = WidgetUtil.getBoundingClientRect(tfoot)
                     .getTop();
             double trPageBottom = WidgetUtil.getBoundingClientRect(tr)
                     .getBottom();
-            double bottomOfButtons = trPageBottom + buttonHeight
-                    + BUTTON_MARGIN;
+            int messageAndButtonsHeight = messageAndButtonsWrapper
+                    .getOffsetHeight();
+            double bottomOfButtons = trPageBottom + messageAndButtonsHeight;
             return bottomOfButtons < tfootPageTop;
         }
 
@@ -1366,6 +1368,7 @@ public class Grid<T> extends ResizeComposite implements
             detachWidget(cancelButton);
 
             editorOverlay.removeAllChildren();
+            cellWrapper.removeAllChildren();
             editorOverlay.removeFromParent();
 
             scrollHandler.removeHandler();
@@ -1374,14 +1377,27 @@ public class Grid<T> extends ResizeComposite implements
         protected void setStylePrimaryName(String primaryName) {
             if (styleName != null) {
                 editorOverlay.removeClassName(styleName);
+
+                cellWrapper.removeClassName(styleName + "-cells");
+                messageAndButtonsWrapper.removeClassName(styleName + "-footer");
+
+                messageWrapper.removeClassName(styleName + "-message");
+                buttonsWrapper.removeClassName(styleName + "-buttons");
+
                 saveButton.removeStyleName(styleName + "-save");
                 cancelButton.removeStyleName(styleName + "-cancel");
             }
             styleName = primaryName + "-editor";
-            editorOverlay.addClassName(styleName);
+            editorOverlay.setClassName(styleName);
 
-            saveButton.addStyleName(styleName + "-save");
-            cancelButton.addStyleName(styleName + "-cancel");
+            cellWrapper.setClassName(styleName + "-cells");
+            messageAndButtonsWrapper.setClassName(styleName + "-footer");
+
+            messageWrapper.setClassName(styleName + "-message");
+            buttonsWrapper.setClassName(styleName + "-buttons");
+
+            saveButton.setStyleName(styleName + "-save");
+            cancelButton.setStyleName(styleName + "-cancel");
         }
 
         /**
@@ -1425,13 +1441,7 @@ public class Grid<T> extends ResizeComposite implements
 
         private void updateHorizontalScrollPosition() {
             double scrollLeft = grid.getScrollLeft();
-
-            editorOverlay.getStyle().setLeft(-scrollLeft, Unit.PX);
-
-            double saveLeftPx = scrollLeft + SAVE_BUTTON_LEFT_MARGIN_PX;
-            double cancelLeftPx = scrollLeft + CANCEL_BUTTON_LEFT_MARGIN_PX;
-            saveButton.getElement().getStyle().setLeft(saveLeftPx, Unit.PX);
-            cancelButton.getElement().getStyle().setLeft(cancelLeftPx, Unit.PX);
+            cellWrapper.getStyle().setLeft(-scrollLeft, Unit.PX);
         }
 
         protected void setGridEnabled(boolean enabled) {

uitest/src/com/vaadin/testbench/elements/GridElement.java

@@ -106,8 +106,7 @@ public class GridElement extends AbstractComponentElement {
          * useless.
          */
         public void save() {
-            List<WebElement> buttons = findElements(By.xpath("./button"));
-            buttons.get(0).click();
+            findElement(By.className("v-grid-editor-save")).click();
         }
 
         /**
@@ -117,8 +116,7 @@ public class GridElement extends AbstractComponentElement {
          * useless.
          */
         public void cancel() {
-            List<WebElement> buttons = findElements(By.xpath("./button"));
-            buttons.get(1).click();
+            findElement(By.className("v-grid-editor-cancel")).click();
         }
     }
 

uitest/src/com/vaadin/tests/components/grid/basicfeatures/client/GridEditorClientTest.java

@@ -117,8 +117,9 @@ public class GridEditorClientTest extends GridBasicClientFeaturesTest {
         selectMenuPath("Component", "State", "Selection mode", "multi");
         selectMenuPath(EDIT_ROW_5);
 
-        WebElement editor = getEditor();
-        List<WebElement> selectorDivs = editor.findElements(By
+        WebElement editorCells = findElement(By
+                .className("v-grid-editor-cells"));
+        List<WebElement> selectorDivs = editorCells.findElements(By
                 .cssSelector("div"));
 
         assertTrue("selector column cell should've been empty", selectorDivs