Corrections to table column reordering styles.

Cleaned up table column drag styles for Reindeer (lost of duplication)

svn changeset:21334/svn branch:6.7

6 files changed, 47 insertions, 48 deletions

diff --git a/WebContent/VAADIN/themes/base/table/table.css b/WebContent/VAADIN/themes/base/table/table.css
index a5611e809f..4b3922c554 100644
--- a/WebContent/VAADIN/themes/base/table/table.css
+++ b/WebContent/VAADIN/themes/base/table/table.css
@@ -58,7 +58,7 @@
 	border-top: none;
 	background: #efefef;
 }
-.v-table-footer table{
+.v-table-footer table {
 	border-spacing: 0;
 	border-collapse: collapse;
 	margin: 0;
@@ -69,10 +69,10 @@
 	padding: 0;
 	border-right: 1px solid #aaa;
 }
-.v-table-footer-cell{
+.v-table-footer-cell {
 	cursor: pointer;
 }
-.v-table-footer-container{	
+.v-table-footer-container {	
 	float:right;	
 	padding-right:6px;
 	overflow:hidden;
@@ -187,7 +187,11 @@
 }
 .v-table-focus-slot-left {
 	border-left: 2px solid #999;
-	margin-right: -2px;
+	float: none;
+	margin-bottom: -1.2em;
+	width: auto;
+	background: transparent;
+	border-right: 1px solid #aaa;
 }
 .v-table-focus-slot-right {
 	border-right: 2px solid #999;
diff --git a/WebContent/VAADIN/themes/liferay/table/table.css b/WebContent/VAADIN/themes/liferay/table/table.css
index 020bac882b..81446d4628 100644
--- a/WebContent/VAADIN/themes/liferay/table/table.css
+++ b/WebContent/VAADIN/themes/liferay/table/table.css
@@ -81,6 +81,11 @@
 	background: #999;
 }
 
+.v-table-focus-slot-left {
+	margin-bottom: -26px;
+	background: transparent;
+}
+
 .v-table-column-selector {
 	background: transparent url(columnselect.png);
 	width: 16px;
diff --git a/WebContent/VAADIN/themes/reindeer/common/common.css b/WebContent/VAADIN/themes/reindeer/common/common.css
index 1e540715e1..50dcdd84ab 100644
--- a/WebContent/VAADIN/themes/reindeer/common/common.css
+++ b/WebContent/VAADIN/themes/reindeer/common/common.css
@@ -24,7 +24,8 @@
 .v-contextmenu,
 .v-Notification,
 .v-menubar-submenu,
-.v-drag-element {
+.v-drag-element,
+.v-table-header-drag {
 	font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
 	font-size: 12px;
 	line-height: normal;
diff --git a/WebContent/VAADIN/themes/reindeer/table/table.css b/WebContent/VAADIN/themes/reindeer/table/table.css
index d4e7046d2b..e58ee8eb69 100644
--- a/WebContent/VAADIN/themes/reindeer/table/table.css
+++ b/WebContent/VAADIN/themes/reindeer/table/table.css
@@ -11,7 +11,8 @@
 .v-table-header-wrap,
 .white .v-table-header-wrap,
 .v-table-footer-wrap,
-.white .v-table-footer-wrap {
+.white .v-table-footer-wrap,
+.v-table-header-drag {
 	border-color: #c2c3c4;
 	background: transparent repeat-x;
 	background-image: url(img/header-bg-light.png); /** sprite-ref: verticals; sprite-alignment: repeat */
@@ -27,19 +28,19 @@
 .v-ie6 .v-table,
 .v-ie6 .v-table-header-wrap,
 .v-ie6 .v-table-footer-wrap,
-.v-ie6 .v-table-column-selector{
+.v-ie6 .v-table-column-selector {
 	/* The header will overflow the Table due to a bug in IE6 after changes in #3003. To fix this (#7314) 
 	 * we need to apply position:relative to the wrappers and selector to make them appear on top of the 
-	 * header. We also need to apply it to the table root div to get rid of a really wierd IE6 rendering bug
+	 * header. We also need to apply it to the table root div to get rid of a really weird IE6 rendering bug
 	 * caused by all this relativeness (see attachment in #7314).  
 	 */
-	position:relative;
+	position: relative;
 }
 
 .v-ie6 .v-table.v-disabled,
-.v-ie7 .v-table.v-disabled{
+.v-ie7 .v-table.v-disabled {
 	/* Fixes ie issue #7324 where disabled shim does not cover table body */ 
-	position:relative;
+	position: relative;
 }
 
 .v-table-footer-wrap,
@@ -65,17 +66,20 @@
 	height: 20px;
 }
 
-.v-table-caption-container {
-	heigth: 16px;
+.v-table-caption-container,
+.v-table-header-drag {
+	height: 16px;
 	padding-top: 4px;
 	padding-right: 4px;
 }
-.v-table-caption-container .v-icon {
+.v-table-caption-container .v-icon,
+.v-table-header-drag .v-icon {
 	height: 16px;
 	margin: -4px 3px 0 0;
 	vertical-align: middle;
 }
-.v-ie .v-table-caption-container .v-icon {
+.v-ie .v-table-caption-container .v-icon,
+.v-ie .v-table-header-drag .v-icon {
 	margin-top: -3px;
 }
 .v-table-footer-container {
@@ -157,27 +161,16 @@
 	background-image: url(img/col-sel-light-pressed.png); /** sprite-ref: verticals */
 }
 .v-table-focus-slot-left {
-	border-left-color: #222;
-	margin-left: 0;
+	border-left: 1px solid #222;
+	margin-bottom: -20px;
+	width: auto;
 }
 .v-table-focus-slot-right {
 	border-right-color: #222;
 	margin-right: 0;
 }
 .v-table-header-drag {
-	font-family: arial, helvetica, verdana, sans-serif;
-	background: transparent repeat-x;
-	background-image: url(img/header-bg-light.png); /** sprite-ref: verticals; sprite-alignment: repeat */
-	padding: 4px;
-	text-transform: uppercase;
-	font-size: 10px;
-	font-weight: bold;
-	color: #222;
-	text-shadow: #fff 0 1px 0;
-	line-height: normal;
-}
-.v-table-header-drag * {
-	vertical-align: middle;
+	padding-left: 6px;
 }
 .v-table-header-drag img {
 	height: 16px;
@@ -232,7 +225,8 @@
 
 
 /* Strong style */
-.v-table-strong .v-table-header-wrap {
+.v-table-strong .v-table-header-wrap,
+.v-table-strong .v-table-header-drag {
 	border-color: #2b3033;
 	border-top-color: #2b3033;
 	background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
@@ -257,11 +251,6 @@
 .v-table-strong .v-table-column-selector:active {
 	background-image: url(img/col-sel-pressed.png); /** sprite-ref: verticals */
 }
-.v-table-strong .v-table-header-drag {
-	background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
-	color: #e7e9ea;
-	text-shadow: #000 0 -1px 0;
-}
 .v-table-strong .v-table-focus-slot-left,
 .v-table-strong .v-table-focus-slot-right {
 	border-color: #9ca1a5;
@@ -269,7 +258,8 @@
 
 
 /* Table on black background (normal style) */
-.black .v-table-header-wrap {
+.black .v-table-header-wrap,
+.black .v-table-header-drag {
 	border-color: #252729;
 	background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
 	color: #e7eaee;
@@ -290,11 +280,6 @@
 .black .v-table-column-selector:active {
 	background-image: url(img/col-sel-black-pressed.png); /** sprite-ref: black-verticals */
 }
-.black .v-table-header-drag {
-	background-image: url(img/header-bg-black.png); /** sprite-ref: black-verticals; sprite-alignment: repeat */
-	color: #e7eaee;
-	text-shadow: #000 0 -1px 0;
-}
 .black .v-table-focus-slot-left,
 .black .v-table-focus-slot-right {
 	border-color: #9ca1a5;
@@ -313,16 +298,13 @@
 .black .v-table-row-odd {
 	background: transparent;
 }
-/* Selection background-color combined with default style selector, so we don't have to duplicate the sprite image in the final sprite collection */
+/* Selection background-color combined with the default (white) style selector, so we don't have to duplicate the sprite image in the final sprite collection */
 .black .v-table .v-selected .v-table-cell-content {
 	border-bottom: 1px solid #4d749f;
 }
 
-
 /* Borderless style */
 .v-table-borderless .v-table-header-wrap,
 .v-table-borderless .v-table-body {
 	border: none;
-}
-
-
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/table/table.css b/WebContent/VAADIN/themes/runo/table/table.css
index 2b2bcbce05..8c82a6f3e8 100644
--- a/WebContent/VAADIN/themes/runo/table/table.css
+++ b/WebContent/VAADIN/themes/runo/table/table.css
@@ -116,6 +116,9 @@ tr.v-table-row-odd:hover {
 }
 .v-table-focus-slot-left {
 	border-color: #b6bbbc;
+	margin-bottom: -36px;
+	width: auto;
+	border-right: none;
 }
 .v-table-focus-slot-right {
 	border-color: #b6bbbc;
diff --git a/build/buildhelpers/com/vaadin/buildhelpers/CompileDefaultTheme.java b/build/buildhelpers/com/vaadin/buildhelpers/CompileDefaultTheme.java
index 2c4867e773..15d2acf6e9 100644
--- a/build/buildhelpers/com/vaadin/buildhelpers/CompileDefaultTheme.java
+++ b/build/buildhelpers/com/vaadin/buildhelpers/CompileDefaultTheme.java
@@ -42,11 +42,15 @@ public class CompileDefaultTheme {
                 break;
             }
         }
+        // Compile Reindeer last, since it requires the spriting operation
+        // (makes testing the other themes a bit faster, since you don't need to
+        // wait for the spriting operation to finish before the theme CSS is
+        // compiled)
         combineTheme(new String[] { BASE }, false, ver);
         combineTheme(new String[] { BASE, RUNO }, false, ver);
-        combineTheme(new String[] { BASE, REINDEER }, true, ver);
         combineTheme(new String[] { BASE, LIFERAY }, false, ver);
         combineTheme(new String[] { BASE, CHAMELEON }, false, ver);
+        combineTheme(new String[] { BASE, REINDEER }, true, ver);
     }
 
     /**