Merge branch 'master' into grid

Change-Id: Ie3d71dde9bd9318c33de15190be8e0de20a2b8e7

5 files changed, 167 insertions, 5 deletions

diff --git a/WebContent/VAADIN/themes/base/base.scss b/WebContent/VAADIN/themes/base/base.scss
index 3570c5efec..6263646ce1 100644
--- a/WebContent/VAADIN/themes/base/base.scss
+++ b/WebContent/VAADIN/themes/base/base.scss
@@ -16,8 +16,10 @@
 @import "inlinedatefield/inlinedatefield.scss";
 @import "dragwrapper/dragwrapper.scss";
 @import "embedded/embedded.scss";
+@import "escalator/escalator.scss";
 @import "fonts/fonts.scss";
 @import "formlayout/formlayout.scss";
+@import "grid/grid.scss";
 @import "gridlayout/gridlayout.scss";
 @import "label/label.scss";
 @import "link/link.scss";
@@ -90,7 +92,9 @@ $line-height: normal;
 	@include base-inline-datefield;
 	@include base-dragwrapper;
 	@include base-embedded;
+	@include base-escalator;
 	@include base-formlayout;
+	@include base-grid;
 	@include base-gridlayout;
 	@include base-label;
 	@include base-link;
diff --git a/WebContent/VAADIN/themes/base/escalator/escalator.scss b/WebContent/VAADIN/themes/base/escalator/escalator.scss
new file mode 100644
index 0000000000..0246224fd3
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/escalator/escalator.scss
@@ -0,0 +1,120 @@
+@mixin base-escalator($primaryStyleName : v-escalator) {
+
+$background-color: white;
+$border-color: #aaa;
+
+.#{$primaryStyleName} {
+	position: relative;
+	background-color: $background-color;
+}
+
+.#{$primaryStyleName}-scroller {
+	position: absolute;
+	overflow: auto;
+	z-index: 20;
+}
+
+.#{$primaryStyleName}-scroller-horizontal {
+	left: 0; /* Left position adjusted to align with frozen columns */
+	right: 0;
+	bottom: 0;
+	overflow-y: hidden;
+	-ms-overflow-y: hidden;
+}
+
+.#{$primaryStyleName}-scroller-vertical {
+	right: 0;
+	top: 0;    /* this will be overridden by code, but it's a good default behavior */
+	bottom: 0; /* this will be overridden by code, but it's a good default behavior */
+	overflow-x: hidden;
+	-ms-overflow-x: hidden;
+}
+
+.#{$primaryStyleName}-tablewrapper {
+	position: absolute;
+	overflow: hidden;
+}
+
+.#{$primaryStyleName}-tablewrapper > table {
+	border-spacing: 0;
+	table-layout: fixed;
+	width: inherit; /* a decent default fallback */
+}
+
+.#{$primaryStyleName}-header,
+.#{$primaryStyleName}-body,
+.#{$primaryStyleName}-footer {
+	position: absolute;
+	left: 0;
+	width: inherit;
+	z-index: 10;
+}
+
+.#{$primaryStyleName}-header { top: 0; }
+.#{$primaryStyleName}-footer { bottom: 0; }
+
+.#{$primaryStyleName}-body {
+	z-index: 0;
+	top: 0;
+	
+	.#{$primaryStyleName}-row {
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+}
+
+.#{$primaryStyleName}-row {
+	display: block;
+	
+	.v-ie8 &, .v-ie9 & {
+		/* 
+		 * Neither IE8 nor IE9 let table rows be longer than tbody, with only 
+		 * "display: block". Moar hax. 
+		 */
+		float: left;
+		clear: left;
+		
+		/* 
+		 * The inline style of margin-top from the <tbody> to offset the 
+		 * header's dimension is, for some strange reason, inherited into each
+		 * contained <tr>. We need to cancel it:
+		 */
+		margin-top: 0;
+	}
+
+	> td, > th {
+		/* IE8 likes the bgcolor here instead of on the row */
+		background-color: $background-color;
+	}
+}
+
+
+.#{$primaryStyleName}-row {
+	width: inherit;
+}
+
+.#{$primaryStyleName}-cell {
+	display: block;
+	float: left;
+	border: 1px solid $border-color;
+	padding: 2px;
+	white-space: nowrap;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	overflow:hidden;
+	
+	/* 
+	 * Because Vaadin changes the font size after the initial render, we
+	 * need to mention the font size here explicitly, otherwise automatic
+	 * row height detection gets broken.
+	 */
+	font-size: $font-size; 
+}
+
+.#{$primaryStyleName}-cell.frozen {
+	position: relative;
+	z-index: 1;
+}
+
+}
diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss
new file mode 100644
index 0000000000..88c7754a10
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -0,0 +1,38 @@
+@mixin base-grid($primaryStyleName : v-grid) {
+	@include base-escalator($primaryStyleName);
+
+	.#{$primaryStyleName} {
+
+		th {
+			position: relative;
+		}
+
+		th.sort-asc:after {
+			content: "\25B2" attr(sort-order);
+			position: absolute;
+			right: 5px;
+		}
+
+		th.sort-desc:after {
+			content: "\25BC" attr(sort-order);
+			position: absolute;
+			right: 5px;
+		}
+
+		.#{$primaryStyleName}-cell-active {
+			border-color: blue;
+		}
+
+		.#{$primaryStyleName}-header-active {
+			background: lightgray;
+		}
+
+		.#{$primaryStyleName}-row-active > td {
+			background: rgb(244,244,244);
+		}
+	}
+
+	.#{$primaryStyleName}-row-selected > td {
+		background: lightblue;
+	}
+}
diff --git a/WebContent/VAADIN/themes/reindeer-tests/styles.css b/WebContent/VAADIN/themes/reindeer-tests/styles.css
index 679de01b9c..9dd88707d1 100644
--- a/WebContent/VAADIN/themes/reindeer-tests/styles.css
+++ b/WebContent/VAADIN/themes/reindeer-tests/styles.css
@@ -32,3 +32,7 @@
 .popup-style .v-datefield-calendarpanel-body {
 	background: yellow;
 }
+
+#escalator .v-escalator-body .v-escalator-cell {
+	height: 50px;
+}
\ No newline at end of file
diff --git a/WebContent/release-notes.html b/WebContent/release-notes.html
index 0ede61d729..3fa008f3f3 100644
--- a/WebContent/release-notes.html
+++ b/WebContent/release-notes.html
@@ -97,11 +97,7 @@
             enhancements. Below is a list of the most notable changes:</p>
 
         <ul>
-            <li>Valo is a brand new built-in theme for Vaadin. It leverages 
-                the Sass CSS preprocessor heavily, 
-                providing a variety of ways to customize the look and feel of your theme. 
-                See <a href="https://vaadin.com/wiki/-/wiki/Main/Valo+theme+-+Getting+started">the Valo theme tutorial</a> or <a href="https://vaadin.com/book/-/page/themes.valo.html">the Valo theme section</a> in Book of Vaadin for information on how to get started.</li>
-            <li>Support for changing theme on the fly</li>
+            <li>Grid</li>
         </ul>
 
         <p>