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

1 files changed, 15 insertions, 26 deletions

diff --git a/WebContent/VAADIN/themes/reindeer/table/table.css b/WebContent/VAADIN/themes/reindeer/table/table.css
index 49ec17b7ab..fa1359912f 100644
--- a/WebContent/VAADIN/themes/reindeer/table/table.css
+++ b/WebContent/VAADIN/themes/reindeer/table/table.css
@@ -68,21 +68,22 @@
 	background: transparent;
 	border-right: 1px solid #c2c3c4;
 }
-.v-table-header-cell-asc .v-table-caption-container {
+
+.v-table-sort-indicator {
+	background: transparent;
+	width: 0px;
+	height: 20px;
+}
+
+.v-table-header-cell-asc .v-table-sort-indicator {
 	background: transparent no-repeat right 7px;
 	background-image: url(img/asc-light.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
+	width: 16px;
 }
-.v-table-header-cell-desc .v-table-caption-container {
+.v-table-header-cell-desc .v-table-sort-indicator {
 	background: transparent no-repeat right 7px;
 	background-image: url(img/desc-light.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
-}
-.v-table-header-cell-asc .v-table-caption-container-align-right {
-    background: transparent no-repeat left 7px;
-    background-image: url(img/asc-light.png); /** sprite-ref: verticals; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-left: 0px; */
-}
-.v-table-header-cell-desc .v-table-caption-container-align-right {
-    background: transparent no-repeat left 7px;
-    background-image: url(img/desc-light.png); /** sprite-ref: verticals; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-left: 0px; */
+	width: 16px;
 }
 .v-table-body,
 .white .v-table-body {
@@ -215,18 +216,12 @@
 .v-table-strong .v-table-resizer {
 	border-right-color: #1c1f21;
 }
-.v-table-strong .v-table-header-cell-asc .v-table-caption-container {
+.v-table-strong .v-table-header-cell-asc .v-table-sort-indicator {
 	background-image: url(img/asc.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 }
-.v-table-strong .v-table-header-cell-desc .v-table-caption-container {
+.v-table-strong .v-table-header-cell-desc .v-table-sort-indicator {
 	background-image: url(img/desc.png); /** sprite-ref: verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 }
-.v-table-strong .v-table-header-cell-asc .v-table-caption-container-align-right {
-    background-image: url(img/asc.png); /** sprite-ref: verticals; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-left: 0px; */
-}
-.v-table-strong .v-table-header-cell-desc .v-table-caption-container-align-right {
-    background-image: url(img/desc.png); /** sprite-ref: verticals; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-left: 0px; */
-}
 .v-table-strong .v-table-column-selector {
 	background-image: url(img/col-sel.png); /** sprite-ref: verticals */
 }
@@ -254,18 +249,12 @@
 .black .v-table-resizer {
 	border-right-color: #252729;
 }
-.black .v-table-header-cell-asc .v-table-caption-container {
+.black .v-table-header-cell-asc .v-table-sort-indicator {
 	background-image: url(img/asc.png); /** sprite-ref: black-verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 }
-.black .v-table-header-cell-desc .v-table-caption-container {
+.black .v-table-header-cell-desc .v-table-sort-indicator {
 	background-image: url(img/desc.png); /** sprite-ref: black-verticals; sprite-alignment: right; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-right: 6px; */
 }
-.black .v-table-header-cell-asc .v-table-caption-container-align-right {
-    background-image: url(img/asc.png); /** sprite-ref: verticals; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-left: 0px; */
-}
-.black .v-table-header-cell-desc .v-table-caption-container-align-right {
-    background-image: url(img/desc.png); /** sprite-ref: verticals; sprite-margin-top: 7px; sprite-margin-bottom: 6px; sprite-margin-left: 0px; */
-}
 .black .v-table-column-selector {
 	background-image: url(img/col-sel-black.png); /** sprite-ref: black-verticals */
 }