From bff2a3f558ea0416ae48b5595b59057a3475d6b6 Mon Sep 17 00:00:00 2001
From: Pekka Hyvönen <pekka@vaadin.com>
Date: Thu, 19 Feb 2015 17:21:22 +0200
Subject: 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
---
 WebContent/VAADIN/themes/base/grid/grid.scss        | 5 ++++-
 WebContent/VAADIN/themes/valo/components/_grid.scss | 9 +++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

(limited to 'WebContent/VAADIN')

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;
       }
diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss
index 4cac9c5e43..0d6d2ff0a6 100644
--- a/WebContent/VAADIN/themes/valo/components/_grid.scss
+++ b/WebContent/VAADIN/themes/valo/components/_grid.scss
@@ -40,6 +40,15 @@ $v-grid-animations-enabled: $v-animations-enabled !default;
     text-shadow: valo-text-shadow($font-color: valo-font-color($v-grid-header-background-color), $background-color: $v-grid-header-background-color);
   }
 
+  .#{$primary-stylename}-header .#{$primary-stylename}-cell.dragged {
+    @include opacity(0.5, false);
+    @include transition (opacity .3s ease-in-out);
+   }
+
+   .#{$primary-stylename}-header .#{$primary-stylename}-cell.dragged-column-header {
+    margin-top: round($v-grid-row-height/-2);
+   }
+
   .#{$primary-stylename}-footer .#{$primary-stylename}-cell {
     @include valo-gradient($v-grid-footer-background-color);
     text-shadow: valo-text-shadow($font-color: valo-font-color($v-grid-footer-background-color), $background-color: $v-grid-footer-background-color);
-- 
cgit v1.2.3