Theming and UX for Grid column reordering. (#16643)

- Show sorting and focus on the dragged header.
- Keep the focused header/cell the same after drag.
- Make the drop marker get the same color as the grid selection.
- Make dragged header and the drag element theme customizable
- Valo related theming: little opacity, proper positioning

Change-Id: Ia1c6f72ef2c7b4333e64ac410e50ef3688461749

1 files changed, 4 insertions, 1 deletions

diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss
index d0bae911db..35024e27c0 100644
--- a/WebContent/VAADIN/themes/base/grid/grid.scss
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -14,6 +14,7 @@ $v-grid-row-focused-background-color: null !default;
 $v-grid-header-row-height: null !default;
 $v-grid-header-font-size: $v-font-size !default;
 $v-grid-header-background-color: $v-grid-row-background-color !default;
+$v-grid-header-drag-marked-color: $v-grid-row-selected-background-color !default;
 
 $v-grid-footer-row-height: $v-grid-header-row-height !default;
 $v-grid-footer-font-size: $v-grid-header-font-size !default;
@@ -61,12 +62,14 @@ $v-grid-editor-background-color: $v-grid-row-background-color !default;
 
       > .#{$primaryStyleName}-cell {
         border: $v-grid-border;
+        margin-top: -10px;
         opacity: 0.9;
         filter: alpha(opacity=90); // IE8
+        z-index: 30000;
       }
 
       > .#{$primaryStyleName}-drop-marker {
-        background-color: #197de1;
+        background-color: $v-grid-header-drag-marked-color;
         position: absolute;
         width: 3px;
       }