Theming and UX for Grid column reordering. (#16643)

- Show sorting and focus on the dragged header.
- Keep the focused header/cell the same after drag.
- Make the drop marker get the same color as the grid selection.
- Make dragged header and the drag element theme customizable
- Valo related theming: little opacity, proper positioning

Change-Id: Ia1c6f72ef2c7b4333e64ac410e50ef3688461749

4 files changed, 277 insertions, 106 deletions

diff --git a/uitest/src/com/vaadin/tests/components/grid/basicfeatures/GridBasicFeaturesTest.java b/uitest/src/com/vaadin/tests/components/grid/basicfeatures/GridBasicFeaturesTest.java
index 0e339ec0ae..e7fbc14d89 100644
--- a/uitest/src/com/vaadin/tests/components/grid/basicfeatures/GridBasicFeaturesTest.java
+++ b/uitest/src/com/vaadin/tests/components/grid/basicfeatures/GridBasicFeaturesTest.java
@@ -15,6 +15,9 @@
  */
 package com.vaadin.tests.components.grid.basicfeatures;
 
+import static org.junit.Assert.assertEquals;
+import static org.junit.Assert.assertTrue;
+
 import java.util.ArrayList;
 import java.util.List;
 
@@ -132,4 +135,45 @@ public abstract class GridBasicFeaturesTest extends MultiBrowserTest {
         testUrl = testUrl.replace("?&", "?");
         driver.get(testUrl);
     }
+
+    protected void focusCell(int row, int column) {
+        getGridElement().getCell(row, column).click();
+    }
+
+    protected void assertColumnHeaderOrder(int... indices) {
+        List<TestBenchElement> headers = getGridHeaderRowCells();
+        for (int i = 0; i < indices.length; i++) {
+            assertColumnHeader("Column " + indices[i], headers.get(i));
+        }
+    }
+
+    protected void assertColumnHeader(String expectedHeaderCaption,
+            TestBenchElement testBenchElement) {
+        assertEquals(expectedHeaderCaption.toLowerCase(), testBenchElement
+                .getText().toLowerCase());
+    }
+
+    protected WebElement getDefaultColumnHeader(int index) {
+        List<TestBenchElement> headerRowCells = getGridHeaderRowCells();
+        return headerRowCells.get(index);
+    }
+
+    protected void dragDefaultColumnHeader(int draggedColumnHeaderIndex,
+            int onTopOfColumnHeaderIndex, int xOffsetFromColumnTopLeftCorner) {
+        new Actions(getDriver())
+                .clickAndHold(getDefaultColumnHeader(draggedColumnHeaderIndex))
+                .moveToElement(
+                        getDefaultColumnHeader(onTopOfColumnHeaderIndex),
+                        xOffsetFromColumnTopLeftCorner, 0).release().perform();
+    }
+
+    protected void assertColumnIsSorted(int index) {
+        WebElement columnHeader = getDefaultColumnHeader(index);
+        assertTrue(columnHeader.getAttribute("class").contains("sort"));
+    }
+
+    protected void assertFocusedCell(int row, int column) {
+        assertTrue(getGridElement().getCell(row, column).getAttribute("class")
+                .contains("focused"));
+    }
 }
diff --git a/uitest/src/com/vaadin/tests/components/grid/basicfeatures/GridColumnReorderEventTest.java b/uitest/src/com/vaadin/tests/components/grid/basicfeatures/GridColumnReorderEventTest.java
deleted file mode 100644
index eda064284c..0000000000
--- a/uitest/src/com/vaadin/tests/components/grid/basicfeatures/GridColumnReorderEventTest.java
+++ /dev/null
@@ -1,74 +0,0 @@
-/*
- * Copyright 2000-2014 Vaadin Ltd.
- * 
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not
- * use this file except in compliance with the License. You may obtain a copy of
- * the License at
- * 
- * http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations under
- * the License.
- */
-package com.vaadin.tests.components.grid.basicfeatures;
-
-import static org.junit.Assert.assertEquals;
-
-import org.junit.Before;
-import org.junit.Test;
-import org.openqa.selenium.By;
-import org.openqa.selenium.WebElement;
-
-import com.vaadin.testbench.elements.GridElement.GridCellElement;
-import com.vaadin.tests.annotations.TestCategory;
-
-/**
- * 
- * @since
- * @author Vaadin Ltd
- */
-@TestCategory("grid")
-public class GridColumnReorderEventTest extends GridBasicClientFeaturesTest {
-
-    @Before
-    public void before() {
-        openTestURL();
-    }
-
-    @Test
-    public void columnReorderEventTriggered() {
-        final int firstIndex = 3;
-        final int secondIndex = 4;
-        final String firstHeaderText = getGridElement().getHeaderCell(0,
-                firstIndex).getText();
-        final String secondHeaderText = getGridElement().getHeaderCell(0,
-                secondIndex).getText();
-        selectMenuPath("Component", "Internals", "Listeners",
-                "Add ColumnReorder listener");
-        selectMenuPath("Component", "Columns", "Column " + secondIndex,
-                "Move column left");
-        // columns 3 and 4 should have swapped to 4 and 3
-        GridCellElement headerCell = getGridElement().getHeaderCell(0,
-                firstIndex);
-        assertEquals(secondHeaderText, headerCell.getText());
-        headerCell = getGridElement().getHeaderCell(0, secondIndex);
-        assertEquals(firstHeaderText, headerCell.getText());
-
-        // the reorder event should have typed the order to this label
-        WebElement columnReorderElement = findElement(By.id("columnreorder"));
-        int eventIndex = Integer.parseInt(columnReorderElement
-                .getAttribute("columns"));
-        assertEquals(1, eventIndex);
-
-        // trigger another event
-        selectMenuPath("Component", "Columns", "Column " + secondIndex,
-                "Move column left");
-        columnReorderElement = findElement(By.id("columnreorder"));
-        eventIndex = Integer.parseInt(columnReorderElement
-                .getAttribute("columns"));
-        assertEquals(2, eventIndex);
-    }
-}
diff --git a/uitest/src/com/vaadin/tests/components/grid/basicfeatures/GridColumnReorderTest.java b/uitest/src/com/vaadin/tests/components/grid/basicfeatures/GridColumnReorderTest.java
new file mode 100644
index 0000000000..9f43c39b1e
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/grid/basicfeatures/GridColumnReorderTest.java
@@ -0,0 +1,233 @@
+/*
+ * Copyright 2000-2014 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.components.grid.basicfeatures;
+
+import static org.junit.Assert.assertEquals;
+import static org.junit.Assert.assertTrue;
+
+import org.junit.Before;
+import org.junit.Test;
+import org.openqa.selenium.By;
+import org.openqa.selenium.WebElement;
+import org.openqa.selenium.interactions.Actions;
+
+import com.vaadin.testbench.elements.GridElement.GridCellElement;
+import com.vaadin.tests.annotations.TestCategory;
+
+/**
+ * 
+ * @since
+ * @author Vaadin Ltd
+ */
+@TestCategory("grid")
+public class GridColumnReorderTest extends GridBasicClientFeaturesTest {
+
+    @Before
+    public void before() {
+        openTestURL();
+    }
+
+    @Test
+    public void columnReorderEventTriggered() {
+        final int firstIndex = 3;
+        final int secondIndex = 4;
+        final String firstHeaderText = getGridElement().getHeaderCell(0,
+                firstIndex).getText();
+        final String secondHeaderText = getGridElement().getHeaderCell(0,
+                secondIndex).getText();
+        selectMenuPath("Component", "Internals", "Listeners",
+                "Add ColumnReorder listener");
+        selectMenuPath("Component", "Columns", "Column " + secondIndex,
+                "Move column left");
+        // columns 3 and 4 should have swapped to 4 and 3
+        GridCellElement headerCell = getGridElement().getHeaderCell(0,
+                firstIndex);
+        assertEquals(secondHeaderText, headerCell.getText());
+        headerCell = getGridElement().getHeaderCell(0, secondIndex);
+        assertEquals(firstHeaderText, headerCell.getText());
+
+        // the reorder event should have typed the order to this label
+        WebElement columnReorderElement = findElement(By.id("columnreorder"));
+        int eventIndex = Integer.parseInt(columnReorderElement
+                .getAttribute("columns"));
+        assertEquals(1, eventIndex);
+
+        // trigger another event
+        selectMenuPath("Component", "Columns", "Column " + secondIndex,
+                "Move column left");
+        columnReorderElement = findElement(By.id("columnreorder"));
+        eventIndex = Integer.parseInt(columnReorderElement
+                .getAttribute("columns"));
+        assertEquals(2, eventIndex);
+    }
+
+    @Test
+    public void testColumnReorder_onReorder_columnReorderEventTriggered() {
+        final int firstIndex = 3;
+        final int secondIndex = 4;
+        final String firstHeaderText = getGridElement().getHeaderCell(0,
+                firstIndex).getText();
+        final String secondHeaderText = getGridElement().getHeaderCell(0,
+                secondIndex).getText();
+        selectMenuPath("Component", "Internals", "Listeners",
+                "Add ColumnReorder listener");
+        selectMenuPath("Component", "Columns", "Column " + secondIndex,
+                "Move column left");
+        // columns 3 and 4 should have swapped to 4 and 3
+        GridCellElement headerCell = getGridElement().getHeaderCell(0,
+                firstIndex);
+        assertEquals(secondHeaderText, headerCell.getText());
+        headerCell = getGridElement().getHeaderCell(0, secondIndex);
+        assertEquals(firstHeaderText, headerCell.getText());
+
+        // the reorder event should have typed the order to this label
+        WebElement columnReorderElement = findElement(By.id("columnreorder"));
+        int eventIndex = Integer.parseInt(columnReorderElement
+                .getAttribute("columns"));
+        assertEquals(1, eventIndex);
+
+        // trigger another event
+        selectMenuPath("Component", "Columns", "Column " + secondIndex,
+                "Move column left");
+        columnReorderElement = findElement(By.id("columnreorder"));
+        eventIndex = Integer.parseInt(columnReorderElement
+                .getAttribute("columns"));
+        assertEquals(2, eventIndex);
+    }
+
+    @Test
+    public void testColumnReorder_draggingSortedColumn_sortIndicatorShownOnDraggedElement() {
+        // given
+        toggleColumnReorder();
+        toggleSortableColumn(0);
+        sortColumn(0);
+
+        // when
+        startDragButDontDropOnDefaultColumnHeader(0);
+
+        // then
+        WebElement draggedElement = getDraggedHeaderElement();
+        assertTrue(draggedElement.getAttribute("class").contains("sort"));
+    }
+
+    @Test
+    public void testColumnReorder_draggingSortedColumn_sortStays() {
+        // given
+        toggleColumnReorder();
+        toggleSortableColumn(0);
+        sortColumn(0);
+
+        // when
+        dragDefaultColumnHeader(0, 2, 10);
+
+        // then
+        assertColumnIsSorted(1);
+    }
+
+    @Test
+    public void testColumnReorder_draggingFocusedHeader_focusShownOnDraggedElement() {
+        // given
+        toggleColumnReorder();
+        focusDefaultHeader(0);
+
+        // when
+        startDragButDontDropOnDefaultColumnHeader(0);
+
+        // then
+        WebElement draggedElement = getDraggedHeaderElement();
+        assertTrue(draggedElement.getAttribute("class").contains("focused"));
+    }
+
+    @Test
+    public void testColumnReorder_draggingFocusedHeader_focusIsKeptOnHeader() {
+        // given
+        toggleColumnReorder();
+        focusDefaultHeader(0);
+
+        // when
+        dragDefaultColumnHeader(0, 3, 10);
+
+        // then
+        WebElement defaultColumnHeader = getDefaultColumnHeader(2);
+        String attribute = defaultColumnHeader.getAttribute("class");
+        assertTrue(attribute.contains("focused"));
+    }
+
+    @Test
+    public void testColumnReorder_draggingFocusedCellColumn_focusIsKeptOnCell() {
+        // given
+        toggleColumnReorder();
+        focusCell(2, 2);
+
+        // when
+        dragDefaultColumnHeader(2, 0, 10);
+
+        // then
+        assertFocusedCell(2, 0);
+    }
+
+    @Test
+    public void testColumnReorder_dragColumnFromRightToLeftOfFocusedCellColumn_focusIsKept() {
+        // given
+        toggleColumnReorder();
+        focusCell(1, 3);
+
+        // when
+        dragDefaultColumnHeader(4, 1, 10);
+
+        // then
+        assertFocusedCell(1, 4);
+    }
+
+    @Test
+    public void testColumnReorder_dragColumnFromLeftToRightOfFocusedCellColumn_focusIsKept() {
+        // given
+        toggleColumnReorder();
+        focusCell(4, 2);
+
+        // when
+        dragDefaultColumnHeader(0, 4, 10);
+
+        // then
+        assertFocusedCell(4, 1);
+    }
+
+    private void toggleColumnReorder() {
+        selectMenuPath("Component", "State", "Column Reordering");
+    }
+
+    private void toggleSortableColumn(int index) {
+        selectMenuPath("Component", "Columns", "Column " + index, "Sortable");
+    }
+
+    private void startDragButDontDropOnDefaultColumnHeader(int index) {
+        new Actions(getDriver())
+                .clickAndHold(getGridHeaderRowCells().get(index))
+                .moveByOffset(100, 0).perform();
+    }
+
+    private void sortColumn(int index) {
+        getGridHeaderRowCells().get(index).click();
+    }
+
+    private void focusDefaultHeader(int index) {
+        getGridHeaderRowCells().get(index).click();
+    }
+
+    private WebElement getDraggedHeaderElement() {
+        return findElement(By.className("dragged-column-header"));
+    }
+}
diff --git a/uitest/src/com/vaadin/tests/components/grid/basicfeatures/server/GridColumnReorderTest.java b/uitest/src/com/vaadin/tests/components/grid/basicfeatures/server/GridColumnReorderTest.java
index 2f00071351..2cc8610209 100644
--- a/uitest/src/com/vaadin/tests/components/grid/basicfeatures/server/GridColumnReorderTest.java
+++ b/uitest/src/com/vaadin/tests/components/grid/basicfeatures/server/GridColumnReorderTest.java
@@ -15,18 +15,12 @@
  */
 package com.vaadin.tests.components.grid.basicfeatures.server;
 
-import static org.junit.Assert.assertEquals;
 import static org.junit.Assert.assertFalse;
 import static org.junit.Assert.assertTrue;
 
-import java.util.List;
-
 import org.junit.Before;
 import org.junit.Test;
-import org.openqa.selenium.WebElement;
-import org.openqa.selenium.interactions.Actions;
 
-import com.vaadin.testbench.TestBenchElement;
 import com.vaadin.tests.components.grid.basicfeatures.GridBasicFeaturesTest;
 
 /**
@@ -212,30 +206,4 @@ public class GridColumnReorderTest extends GridBasicFeaturesTest {
         assertFalse(logRow.contains("Columns reordered"));
     }
 
-    private void assertColumnHeaderOrder(int... indices) {
-        List<TestBenchElement> headers = getGridHeaderRowCells();
-        for (int i = 0; i < indices.length; i++) {
-            assertColumnHeader("Column " + indices[i], headers.get(i));
-        }
-    }
-
-    private void assertColumnHeader(String expectedHeaderCaption,
-            TestBenchElement testBenchElement) {
-        assertEquals(expectedHeaderCaption.toLowerCase(), testBenchElement
-                .getText().toLowerCase());
-    }
-
-    private WebElement getDefaultColumnHeader(int index) {
-        List<TestBenchElement> headerRowCells = getGridHeaderRowCells();
-        return headerRowCells.get(index);
-    }
-
-    private void dragDefaultColumnHeader(int draggedColumnHeaderIndex,
-            int onTopOfColumnHeaderIndex, int xOffsetFromColumnTopLeftCorner) {
-        new Actions(getDriver())
-                .clickAndHold(getDefaultColumnHeader(draggedColumnHeaderIndex))
-                .moveToElement(
-                        getDefaultColumnHeader(onTopOfColumnHeaderIndex),
-                        xOffsetFromColumnTopLeftCorner, 0).release().perform();
-    }
 }