Merge branch 'grid-7.5'

Change-Id: Ifa976fa4be1258fd35999de17775da70afedb2a8

6 files changed, 242 insertions, 29 deletions

diff --git a/WebContent/VAADIN/themes/base/escalator/escalator.scss b/WebContent/VAADIN/themes/base/escalator/escalator.scss
index 606dc6a7dd..73d45854b9 100644
--- a/WebContent/VAADIN/themes/base/escalator/escalator.scss
+++ b/WebContent/VAADIN/themes/base/escalator/escalator.scss
@@ -133,4 +133,17 @@
     z-index: 1;
   }
 
+  .#{$primaryStyleName}-spacer {
+    position: absolute;
+    display: block;
+
+    background-color: $background-color;
+
+    > td {
+      width: 100%;
+      height: 100%;
+      @include box-sizing(border-box);
+    }
+    
+  }
 }
diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss
index 8a1497dda8..531abb1ff1 100644
--- a/WebContent/VAADIN/themes/base/grid/grid.scss
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -1,4 +1,5 @@
-$v-grid-border: 1px solid #ddd !default;
+$v-grid-border-size: 1px !default;
+$v-grid-border: $v-grid-border-size solid #ddd !default;
 $v-grid-cell-vertical-border: $v-grid-border !default;
 $v-grid-cell-horizontal-border: $v-grid-cell-vertical-border !default;
 $v-grid-cell-focused-border: 1px solid !default;
@@ -14,6 +15,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;
@@ -23,6 +25,12 @@ $v-grid-cell-padding-horizontal: 5px !default;
 
 $v-grid-editor-background-color: $v-grid-row-background-color !default;
 
+$v-grid-details-marker-width: 2px !default;
+$v-grid-details-marker-color: $v-grid-row-selected-background-color !default;
+$v-grid-details-border-top: $v-grid-cell-horizontal-border !default;
+$v-grid-details-border-top-stripe: $v-grid-cell-horizontal-border !default;
+$v-grid-details-border-bottom: 1px solid darken($v-grid-row-stripe-background-color, 10%) !default;
+$v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-color, 10%) !default;
 
 @import "../escalator/escalator";
 
@@ -51,6 +59,103 @@ $v-grid-editor-background-color: $v-grid-row-background-color !default;
   .#{$primaryStyleName}-tablewrapper {
     border: $v-grid-border;
   }
+  
+  // Column drag and drop elements
+
+  .#{$primaryStyleName} .header-drag-table {
+    border-spacing: 0;
+    position: relative;
+    table-layout: fixed;
+    width: inherit; // a decent default fallback
+
+    .#{$primaryStyleName}-header {
+      position: absolute;
+      > .#{$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: $v-grid-header-drag-marked-color;
+        position: absolute;
+        width: 3px;
+      }
+    }
+  }
+
+  // Sidebar
+
+  .#{$primaryStyleName}-sidebar.v-contextmenu {
+    @include box-shadow(none);
+    border-radius: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    background-color: $v-grid-header-background-color;
+    border: $v-grid-header-border;
+    padding: 0;
+    z-index: 5;
+
+    .#{$primaryStyleName}-sidebar-button {
+      background: transparent;
+      border: none;
+      color: inherit;
+      cursor: pointer;
+      outline: none;
+      padding: 0 4px;
+      text-align: right;
+
+      &::-moz-focus-inner {
+        border: 0;
+      }
+
+      &:after {
+        content: "\f0c9";
+        display: block;
+        font-family: FontAwesome, sans-serif;
+        font-size: $v-grid-header-font-size;
+      }
+    }
+
+    &.closed {
+      border-radius: 0;
+    }
+
+    &.opened {
+      .#{$primaryStyleName}-sidebar-button {
+        width: 100%;
+ 
+        &:after {
+          content: "\00d7";
+          font-size: 16px;
+          line-height: 1;
+        }
+      }
+    }
+
+    .v-ie &.opened .#{$primaryStyleName}-sidebar-button {
+      vertical-align: middle;
+    }
+
+    .v-ie8 &.opened .#{$primaryStyleName}-sidebar-button:after {
+      display: inline;
+    }
+
+    .#{$primaryStyleName}-sidebar-content {
+      border-top: $v-grid-border;
+      padding: 4px 0;
+
+      .gwt-MenuBar {
+        .gwt-MenuItem .column-hiding-toggle {
+          text-shadow: none;
+        }
+      }
+    }
+  }
 
   // Common cell styles
 
@@ -331,6 +436,53 @@ $v-grid-editor-background-color: $v-grid-row-background-color !default;
     margin-right: 4px;
   }
 
+  .#{$primaryStyleName}-spacer {
+    left: $v-grid-details-marker-width - $v-grid-border-size;
+  }
+  
+  .#{$primaryStyleName}-spacer > td {
+    display: block;
+    padding: 0;
+
+    background-color: $v-grid-row-background-color;
+    border-top: $v-grid-details-border-top;
+    border-bottom: $v-grid-details-border-bottom;
+  }
+
+  .#{$primaryStyleName}-spacer.stripe > td {
+    background-color: $v-grid-row-stripe-background-color;
+    border-top: $v-grid-details-border-top-stripe;
+    border-bottom: $v-grid-details-border-bottom-stripe;
+  }
+  
+  .#{$primaryStyleName}-spacer-deco-container {
+    border-top: $v-grid-border-size solid transparent; // same size as table wrapper border 
+    position: relative;
+    top: 0; // escalator will override top for scrolling and margin-top for header offset.
+    z-index: 5;
+  }
+
+  .#{$primaryStyleName}-spacer-deco {
+    top: 0; // this will be overridden by code, but it's a good default. 
+    left: 0;
+    width: $v-grid-details-marker-width;
+    background-color: $v-grid-details-marker-color;
+    position: absolute;
+    height: 100%; // this will be overridden by code, but it's a good default.
+    pointer-events: none;
+
+    // IE 8-10 apply "pointer-events" only to SVG elements. 
+    // Using an empty SVG instead of an empty text node makes IE
+    // obey the "pointer-events: none" and forwards click events 
+    // to the underlying element. The data decodes to:
+    // <svg xmlns="http://www.w3.org/2000/svg"></svg>
+    .ie8 &:before,
+    .ie9 &:before,
+    .ie10 &:before {
+      content: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==);
+    }
+  }
+
   // Renderers
 
   .#{$primaryStyleName}-cell > .v-progressbar {
diff --git a/WebContent/VAADIN/themes/reindeer/grid/grid.scss b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
index 28c5977fda..7ae0f402aa 100644
--- a/WebContent/VAADIN/themes/reindeer/grid/grid.scss
+++ b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
@@ -35,6 +35,13 @@
     }
   }
 
+  // Sidebar
+  .#{$primaryStyleName}-sidebar.v-contextmenu {
+    .#{$primaryStyleName}-sidebar-content {
+      background-color: #f8f8f9;
+    }
+  }
+
   // Sort indicators
   .#{$primaryStyleName} th.sort-asc,
   .#{$primaryStyleName} th.sort-desc {
diff --git a/WebContent/VAADIN/themes/runo/grid/grid.scss b/WebContent/VAADIN/themes/runo/grid/grid.scss
index 06a04ec626..71ec6e06e0 100644
--- a/WebContent/VAADIN/themes/runo/grid/grid.scss
+++ b/WebContent/VAADIN/themes/runo/grid/grid.scss
@@ -27,6 +27,25 @@
       border-color: lighten($v-grid-row-selected-background-color, 20%);
     }
   }
+  
+  // Sidebar
+  .#{$primaryStyleName}-sidebar.v-contextmenu {
+    &.opened {
+      .#{$primaryStyleName}-sidebar-button {
+        &:after {
+          font-size: 22px;
+        }
+      }
+    }
+        
+    .#{$primaryStyleName}-sidebar-content {
+      background-color: transparent;
+      
+      .gwt-MenuBar {
+        border: none;
+      }
+    }
+  }
 
   // Sort indicators
   .#{$primaryStyleName} th.sort-asc,
diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss
index 4cac9c5e43..c07d330410 100644
--- a/WebContent/VAADIN/themes/valo/components/_grid.scss
+++ b/WebContent/VAADIN/themes/valo/components/_grid.scss
@@ -3,7 +3,8 @@
 $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: flatten-list(valo-border($color: $v-grid-row-background-color, $strength: 0.8)) !default;
+$v-grid-border-color-source: $v-grid-row-background-color !default;
+$v-grid-border: flatten-list(valo-border($color: $v-grid-border-color-source, $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;
@@ -16,6 +17,12 @@ $v-grid-cell-padding-horizontal: $v-table-cell-padding-horizontal !default;
 
 $v-grid-animations-enabled: $v-animations-enabled !default;
 
+$v-grid-details-marker-width: first-number($v-grid-border) * 2 !default;
+$v-grid-details-marker-color: $v-selection-color !default;
+$v-grid-details-border-top: valo-border($color: $v-grid-border-color-source, $strength: 0.3) !default;
+$v-grid-details-border-top-stripe: valo-border($color: $v-grid-row-stripe-background-color, $strength: 0.3) !default;
+$v-grid-details-border-bottom: $v-grid-cell-horizontal-border !default;
+$v-grid-details-border-bottom-stripe: $v-grid-cell-horizontal-border !default;
 
 @import "../../base/grid/grid";
 
@@ -40,6 +47,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);
@@ -166,6 +182,28 @@ $v-grid-animations-enabled: $v-animations-enabled !default;
     padding: round($v-layout-spacing-vertical / 2) round($v-layout-spacing-horizontal / 2);
     margin: 0;
     outline: none;
+  }  
+
+  .#{$primary-stylename}-spacer {
+    margin-top: first-number($v-grid-border) * -1;
+  }
+
+  // Sidebar
+  .#{$primary-stylename}-sidebar.v-contextmenu {
+    &.opened {
+      .#{$primary-stylename}-sidebar-button:after {
+        font-size: 20px;
+      }
+
+      .#{$primary-stylename}-sidebar-content {
+        margin: 0 0 2px;
+        padding: 4px 4px 2px;
+      }
+    }
+
+    &.closed {
+      @include valo-gradient($v-grid-header-background-color);
+    }
   }
 
   // Customize scrollbars
diff --git a/WebContent/release-notes.html b/WebContent/release-notes.html
index c50bea2e5f..ac8d465cfb 100644
--- a/WebContent/release-notes.html
+++ b/WebContent/release-notes.html
@@ -63,8 +63,10 @@
         <h2 id="overview">Overview of Vaadin @version@ Release</h2>
 
         <p>
-            Vaadin @version@ is a feature release that includes a
-            number of new features and bug fixes, as listed in the <a
+            Vaadin @version@ is a
+<!--            feature release that includes --> 
+            pre-release for evaluating
+            a number of new features and bug fixes, as listed in the <a
                 href="#enhancements">list of enhancements</a> and <a
                 href="#changelog">change log</a> below.
         </p>
@@ -93,34 +95,15 @@
             enhancements. Below is a list of the most notable changes:</p>
 
         <ul>
-            <li>Grid is a new component for showing tabular data. It has been
-                designed from the ground up to eventually replace the Table
-                and TreeTable components.<br />
-                The most notable Grid features in @version-minor@ are:
-                <ul>
-                    <li>Support for multiple rows in the header and footer sections.</li>
-                    <li>Renderer concept for customizing how the data in a given column is represented in the browser.</li>
-                    <li>Support for frozen columns.</li>
-                    <li>Support for inline editing of one row at a time.</li>
-                    <li>Support for components in header and footer cells.</li>
-                    <li>Hardware accelerated, touch optimized scrolling.</li>
-                </ul></li>
-            <li>Declarative layout support for initializing a component hierarchy from an HTML file.</li>
-            <li>Uses GWT 2.7 for improved compilation times when using Super Dev Mode.</li>
-            <li>@Viewport annotation for declaratively defining a mobile viewport definition for a UI.</li>
-            <li>Component captions, TabSheet/Accordion tab captions and Calendar event captions can be configured to be displayed as HTML.</li>
-            <li>Selects use converters when presenting itemids.</li>
-            <li>Improved performance when server response contains no visual changes (e.g. empty polling responses).</li>
-            <li>Development time on-the-fly scss compilation cache may now be preserved when redeploying or restarting the server.</li>
-            <li>Unified JSON library for using the same API in both server-side and client-side code.</li>
-            <li>Range validators and converters for additional numerical types.</li>
-            <li>Support for fine grained add/remove item events in in-memory containers.</li>
+            <li>Column reordering using drag and drop in Grid</li>
+            <li>Column hiding in Grid</li>
+            <li>Row details support in Grid</li>
         </ul>
 
         <p>
-            For enhancements introduced in Vaadin 7.3, see the <a
-                href="http://vaadin.com/download/release/7.3/7.3.0/release-notes.html">Release
-                Notes for Vaadin 7.3.0</a>.
+            For enhancements introduced in Vaadin 7.4, see the <a
+                href="http://vaadin.com/download/release/7.4/7.4.0/release-notes.html">Release
+                Notes for Vaadin 7.4.0</a>.
         </p>
 
         <h3 id="incompatible">Incompatible or Behavior-altering Changes in @version-minor@</h3>
@@ -129,6 +112,7 @@
         </ul>
         <h3 id="knownissues">Known Issues and Limitations</h3>
         <ul>
+            <li>The user interface for hiding and unhiding Grid columns is not yet finalized.</li>
             <li>Drag'n'drop in a Table doesn't work on touch devices running
                 Internet Explorer (Windows Phone, Surface)
                 (<a href="http://dev.vaadin.com/ticket/13737">#13737</a>)