Table column header dnd ghost element location and styles (#12714)

Change-Id: I1c5c0fee61e2a47f0f9c8fdfbbd48f49171135b6

diff --git a/client/src/com/vaadin/client/ui/VScrollTable.java b/client/src/com/vaadin/client/ui/VScrollTable.java
index 318a4a5f8f099ab1e251d52a82ff10ecd9b7ff6b..b5a3086addeb73de300ee8224b6906e643ba9761 100644 (file)
--- a/client/src/com/vaadin/client/ui/VScrollTable.java
+++ b/client/src/com/vaadin/client/ui/VScrollTable.java
@@ -71,7 +71,6 @@ import com.google.gwt.user.client.ui.FlowPanel;
 import com.google.gwt.user.client.ui.HasWidgets;
 import com.google.gwt.user.client.ui.Panel;
 import com.google.gwt.user.client.ui.PopupPanel;
-import com.google.gwt.user.client.ui.RootPanel;
 import com.google.gwt.user.client.ui.UIObject;
 import com.google.gwt.user.client.ui.Widget;
 import com.vaadin.client.ApplicationConnection;
@@ -80,6 +79,7 @@ import com.vaadin.client.ComponentConnector;
 import com.vaadin.client.ConnectorMap;
 import com.vaadin.client.Focusable;
 import com.vaadin.client.MouseEventDetailsBuilder;
+import com.vaadin.client.StyleConstants;
 import com.vaadin.client.TooltipInfo;
 import com.vaadin.client.UIDL;
 import com.vaadin.client.Util;
@@ -2758,13 +2758,27 @@ public class VScrollTable extends FlowPanel implements HasWidgets,
             DOM.setInnerHTML(floatingCopyOfHeaderCell, DOM.getInnerHTML(td));
             floatingCopyOfHeaderCell = DOM
                     .getChild(floatingCopyOfHeaderCell, 2);
-            DOM.setElementProperty(floatingCopyOfHeaderCell, "className",
-                    VScrollTable.this.getStylePrimaryName() + "-header-drag");
+            // #12714 the shown "ghost element" should be inside
+            // v-overlay-container, and it should contain the same styles as the
+            // table to enable theming (except v-table & v-widget).
+            String stylePrimaryName = VScrollTable.this.getStylePrimaryName();
+            StringBuilder sb = new StringBuilder();
+            for (String s : VScrollTable.this.getStyleName().split(" ")) {
+                if (!s.equals(StyleConstants.UI_WIDGET)) {
+                    sb.append(s);
+                    if (s.equals(stylePrimaryName)) {
+                        sb.append("-header-drag ");
+                    } else {
+                        sb.append(" ");
+                    }
+                }
+            }
+            floatingCopyOfHeaderCell.setClassName(sb.toString().trim());
             // otherwise might wrap or be cut if narrow column
             DOM.setStyleAttribute(floatingCopyOfHeaderCell, "width", "auto");
             updateFloatingCopysPosition(DOM.getAbsoluteLeft(td),
                     DOM.getAbsoluteTop(td));
-            DOM.appendChild(RootPanel.get().getElement(),
+            DOM.appendChild(VOverlay.getOverlayContainer(client),
                     floatingCopyOfHeaderCell);
         }
 
@@ -2779,8 +2793,7 @@ public class VScrollTable extends FlowPanel implements HasWidgets,
         }
 
         private void hideFloatingCopy() {
-            DOM.removeChild(RootPanel.get().getElement(),
-                    floatingCopyOfHeaderCell);
+            floatingCopyOfHeaderCell.removeFromParent();
             floatingCopyOfHeaderCell = null;
         }
 
@@ -7069,7 +7082,7 @@ public class VScrollTable extends FlowPanel implements HasWidgets,
 
         private void deEmphasis() {
             UIObject.setStyleName(getElement(),
-                    VScrollTable.this.getStylePrimaryName() + "-drag", false);
+                    getStylePrimaryName() + "-drag", false);
             if (lastEmphasized == null) {
                 return;
             }
@@ -7095,7 +7108,7 @@ public class VScrollTable extends FlowPanel implements HasWidgets,
         private void emphasis(TableDDDetails details) {
             deEmphasis();
             UIObject.setStyleName(getElement(),
-                    VScrollTable.this.getStylePrimaryName() + "-drag", true);
+                    getStylePrimaryName() + "-drag", true);
             // iterate old and new emphasized row
             for (Widget w : scrollBody.renderedRows) {
                 VScrollTableRow row = (VScrollTableRow) w;

diff --git a/uitest/src/com/vaadin/tests/components/table/TableDragColumnFloatingElementStyles.html b/uitest/src/com/vaadin/tests/components/table/TableDragColumnFloatingElementStyles.html
new file mode 100644 (file)
index 0000000..e4bd02d
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/table/TableDragColumnFloatingElementStyles.html
@@ -0,0 +1,136 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head profile="http://selenium-ide.openqa.org/profiles/test-case">
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<link rel="selenium.base" href="http://localhost:8888/" />
+<title>TableDragColumn</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">TableDragColumn</td></tr>
+</thead><tbody>
+<tr>
+       <td>open</td>
+       <td>/run/com.vaadin.tests.components.table.Tables?restartApplication</td>
+       <td></td>
+</tr>
+<!-- Drag and drop column 1 to the left of column 4 -->
+<tr>
+       <td>drag</td>
+       <td>vaadin=runcomvaadintestscomponentstableTables::PID_StestComponent/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[2]</td>
+       <td>51,6</td>
+</tr>
+<tr>
+       <td>assertElementPresent</td>
+       <td>//div[@id='runcomvaadintestscomponentstableTables-1125197179-overlays']/div</td>
+       <td></td>
+</tr>
+<tr>
+       <td>assertCSSClass</td>
+       <td>//div[@id='runcomvaadintestscomponentstableTables-1125197179-overlays']/div</td>
+       <td>v-table-header-drag</td>
+</tr>
+<tr>
+       <td>drop</td>
+       <td>vaadin=runcomvaadintestscomponentstableTables::PID_StestComponent/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[2]/domChild[2]</td>
+       <td>70,10</td>
+</tr>
+<!--Add style name "red-border-1px" to table-->
+<tr>
+       <td>mouseClick</td>
+       <td>vaadin=runcomvaadintestscomponentstableTables::PID_Smenu#item0</td>
+       <td>24,7</td>
+</tr>
+<tr>
+       <td>mouseClick</td>
+       <td>vaadin=runcomvaadintestscomponentstableTables::Root/VOverlay[0]/VMenuBar[0]#item1</td>
+       <td>18,10</td>
+</tr>
+<tr>
+       <td>mouseClick</td>
+       <td>vaadin=runcomvaadintestscomponentstableTables::Root/VOverlay[1]/VMenuBar[0]#item4</td>
+       <td>19,8</td>
+</tr>
+<tr>
+       <td>mouseClick</td>
+       <td>vaadin=runcomvaadintestscomponentstableTables::Root/VOverlay[2]/VMenuBar[0]#item2</td>
+       <td>75,7</td>
+</tr>
+<!-- Drag and drop column 1 to the left of column 4 -->
+<tr>
+       <td>drag</td>
+       <td>vaadin=runcomvaadintestscomponentstableTables::PID_StestComponent/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[2]</td>
+       <td>51,6</td>
+</tr>
+<tr>
+       <td>assertElementPresent</td>
+       <td>//div[@id='runcomvaadintestscomponentstableTables-1125197179-overlays']/div</td>
+       <td></td>
+</tr>
+<tr>
+       <td>assertCSSClass</td>
+       <td>//div[@id='runcomvaadintestscomponentstableTables-1125197179-overlays']/div</td>
+       <td>v-table-header-drag</td>
+</tr>
+<tr>
+       <td>assertCSSClass</td>
+       <td>//div[@id='runcomvaadintestscomponentstableTables-1125197179-overlays']/div</td>
+       <td>border-red-1px</td>
+</tr>
+<tr>
+       <td>drop</td>
+       <td>vaadin=runcomvaadintestscomponentstableTables::PID_StestComponent/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[2]/domChild[2]</td>
+       <td>70,10</td>
+</tr>
+<!--Set as read only thus get v-readonly style-->
+<tr>
+       <td>mouseClick</td>
+       <td>vaadin=runcomvaadintestscomponentstableTables::PID_Smenu#item0</td>
+       <td>32,8</td>
+</tr>
+<tr>
+       <td>mouseClick</td>
+       <td>vaadin=runcomvaadintestscomponentstableTables::Root/VOverlay[0]/VMenuBar[0]#item0</td>
+       <td>18,12</td>
+</tr>
+<tr>
+       <td>mouseClick</td>
+       <td>vaadin=runcomvaadintestscomponentstableTables::Root/VOverlay[1]/VMenuBar[0]#item2</td>
+       <td>42,13</td>
+</tr>
+<!-- Drag and drop column 1 to the left of column 4 -->
+<tr>
+       <td>drag</td>
+       <td>vaadin=runcomvaadintestscomponentstableTables::PID_StestComponent/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[2]</td>
+       <td>51,6</td>
+</tr>
+<tr>
+       <td>assertElementPresent</td>
+       <td>//div[@id='runcomvaadintestscomponentstableTables-1125197179-overlays']/div</td>
+       <td></td>
+</tr>
+<tr>
+       <td>assertCSSClass</td>
+       <td>//div[@id='runcomvaadintestscomponentstableTables-1125197179-overlays']/div</td>
+       <td>v-table-header-drag</td>
+</tr>
+<tr>
+       <td>assertCSSClass</td>
+       <td>//div[@id='runcomvaadintestscomponentstableTables-1125197179-overlays']/div</td>
+       <td>border-red-1px</td>
+</tr>
+<tr>
+       <td>assertCSSClass</td>
+       <td>//div[@id='runcomvaadintestscomponentstableTables-1125197179-overlays']/div</td>
+       <td>v-readonly</td>
+</tr>
+<tr>
+       <td>drop</td>
+       <td>vaadin=runcomvaadintestscomponentstableTables::PID_StestComponent/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[2]/domChild[2]</td>
+       <td>70,10</td>
+</tr>
+</tbody></table>
+</body>
+</html>
\ No newline at end of file