Sorting indicator no longer overlaps the column header in tables. #5066 and #2681

The sorting indicator is now placed in its own div element instead of being added as a background picture for the existing header cell element.

svn changeset:16130/svn branch:6.5

2 files changed, 36 insertions, 18 deletions

diff --git a/WebContent/VAADIN/themes/liferay/styles.css b/WebContent/VAADIN/themes/liferay/styles.css
index a865448ffb..cc53ed5582 100644
--- a/WebContent/VAADIN/themes/liferay/styles.css
+++ b/WebContent/VAADIN/themes/liferay/styles.css
@@ -1,5 +1,5 @@
-.v-theme-version:after {content:"9_9_9_INTERNAL-DEBUG-BUILD";}
-.v-theme-version-9_9_9_INTERNAL-DEBUG-BUILD {display: none;}
+.v-theme-version:after {content:"6_5_0_dev-20101124";}
+.v-theme-version-6_5_0_dev-20101124 {display: none;}
 /* Automatically compiled css file from subdirectories. */
 
 .v-absolutelayout-wrapper {
@@ -1523,22 +1523,32 @@ div.v-progressindicator-indeterminate-disabled {
 	overflow: hidden;
 }
 .v-table-caption-container {
-	float: right;
 	overflow: hidden;
 	white-space: nowrap;
-	padding-right: 6px;
+	margin-left: 6px;
+}
+.v-table-sort-indicator {
+	width: 0px;
+	height: 1.2em;
+	float: right;
 }
-.v-table-header-cell-asc .v-table-caption-container {
+.v-table-header-cell-asc .v-table-sort-indicator,
+.v-table-header-cell-desc .v-table-sort-indicator {
+	width: 16px;
+	height: 1.2em;
+	float: right;
+}		
+.v-table-header-cell-asc .v-table-sort-indicator {
 	background: transparent url(../base/common/img/sprites.png) no-repeat right 6px;
 }
-.v-table-header-cell-desc .v-table-caption-container {
+.v-table-header-cell-desc .v-table-sort-indicator {
 	background: transparent url(../base/common/img/sprites.png) no-repeat right -10px;
 }
-.v-table-header-cell-asc .v-table-caption-container-align-right {
-    background: transparent url(../base/common/img/sprites.png) no-repeat -8px 6px;
+.v-table-caption-container-align-center {
+	text-align: center;
 }
-.v-table-header-cell-desc .v-table-caption-container-align-right {
-    background: transparent url(../base/common/img/sprites.png) no-repeat -8px -10px;
+.v-table-caption-container-align-right {
+	text-align: right;
 }
 .v-table-caption-container .v-icon,
 .v-table-header-drag .v-icon {
@@ -1578,6 +1588,12 @@ div.v-progressindicator-indeterminate-disabled {
 	white-space: nowrap;
 	overflow: hidden;
 }
+.v-table-cell-wrapper-align-center {
+	text-align: center;
+}
+.v-table-cell-wrapper-align-right {
+	text-align: right;
+}
 .v-table-column-selector {
 	float: right;
 	background: transparent url(../base/common/img/sprites.png) no-repeat 4px -37px;
@@ -3081,7 +3097,7 @@ select {
 	color: #336699;
 	font-weight: bold;
 	font-size: 11px;
-	padding-right: 4px;
+	padding-left: 4px;
 	padding-top: 6px;
 }
 
@@ -3094,13 +3110,14 @@ select {
 	margin-top: -2px;
 }
 
-
-.v-table-header-cell-asc .v-table-caption-container {
+.v-table-header-cell-asc .v-table-sort-indicator {
 	background: transparent url(/html/themes/control_panel/images/arrows/05_up.png) no-repeat right 8px;
+	height: 26px;
 }
 
-.v-table-header-cell-desc .v-table-caption-container {
+.v-table-header-cell-desc .v-table-sort-indicator {
 	background: transparent url(/html/themes/control_panel/images/arrows/05_down.png) no-repeat right 10px;
+	height: 26px;
 }
 
 .v-table-resizer {
diff --git a/WebContent/VAADIN/themes/liferay/table/table.css b/WebContent/VAADIN/themes/liferay/table/table.css
index 2e81edfde0..a271275eca 100644
--- a/WebContent/VAADIN/themes/liferay/table/table.css
+++ b/WebContent/VAADIN/themes/liferay/table/table.css
@@ -47,7 +47,7 @@
 	color: #336699;
 	font-weight: bold;
 	font-size: 11px;
-	padding-right: 4px;
+	padding-left: 4px;
 	padding-top: 6px;
 }
 
@@ -60,13 +60,14 @@
 	margin-top: -2px;
 }
 
-
-.v-table-header-cell-asc .v-table-caption-container {
+.v-table-header-cell-asc .v-table-sort-indicator {
 	background: transparent url(/html/themes/control_panel/images/arrows/05_up.png) no-repeat right 8px;
+	height: 26px;
 }
 
-.v-table-header-cell-desc .v-table-caption-container {
+.v-table-header-cell-desc .v-table-sort-indicator {
 	background: transparent url(/html/themes/control_panel/images/arrows/05_down.png) no-repeat right 10px;
+	height: 26px;
 }
 
 .v-table-resizer {