Drop indicators in Valo are now working as in Reindeer theme (#14836)

Change-Id: I12014c4329ca629dbfc9226b3b70538d33442690

3 files changed, 159 insertions, 36 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss
index a70532ccfd..019d8673ce 100644
--- a/WebContent/VAADIN/themes/valo/components/_table.scss
+++ b/WebContent/VAADIN/themes/valo/components/_table.scss
@@ -238,6 +238,7 @@ $v-table-background-color: null !default;
     border-left: $v-table-border-width solid $border-color;
     overflow: hidden;
     height: $v-table-row-height;
+    vertical-align: middle;
 
     &:first-child {
       border-left: none;
@@ -520,46 +521,28 @@ $v-table-background-color: null !default;
     }
   }
 
-  .#{$primary-stylename}-row-drag-middle td:first-child:before {
-    content: "";
-    display: block;
-    position: absolute;
-    z-index: 1;
-    height: $v-table-row-height + $v-table-border-width;
-    left: 0;
-    right: 0;
-    background: $v-focus-color;
-    @include opacity(.2);
+  .#{$primary-stylename}-row-drag-middle .#{$primary-stylename}-cell-content {
+    $bg: mix($v-focus-color, $background-color, 20%);
+    background-color: $bg;
+    color: valo-font-color($bg);
   }
 
-  .#{$primary-stylename}-row-drag-top td:first-child:before,
-  .#{$primary-stylename}-row-drag-bottom td:first-child:after {
-    content: "\2022";
-    display: block;
-    position: absolute;
-    height: 2px;
-    left: 0;
-    right: 0;
-    background: $v-focus-color;
-    font-size: $v-font-size * 2;
-    line-height: 2px;
-    color: $v-focus-color;
-    text-indent: round($v-font-size/-4);
-    text-shadow: 0 0 1px $background-color, 0 0 1px $background-color;
+  .#{$primary-stylename}-row-drag-bottom td.#{$primary-stylename}-cell-content {
+    border-bottom: 2px solid $v-focus-color;
+    height: $v-table-row-height - 2px;
   }
 
-  .#{$primary-stylename}-row-drag-top td:first-child:before {
-    margin-top: -$v-table-border-width;
+  .#{$primary-stylename}-row-drag-bottom .#{$primary-stylename}-cell-wrapper {
+    margin-bottom: -2px;
   }
 
-  .v-ff & .#{$primary-stylename}-row-drag-top td:first-child:before,
-  .v-ff & .#{$primary-stylename}-row-drag-bottom td:first-child:after {
-    line-height: 1px;
+  .#{$primary-stylename}-row-drag-top td.#{$primary-stylename}-cell-content {
+    border-top: 2px solid $v-focus-color;
+    height: $v-table-row-height - 2px + $v-table-border-width;
   }
 
-  .v-ie & .#{$primary-stylename}-row-drag-top td:first-child:before,
-  .v-ie & .#{$primary-stylename}-row-drag-bottom td:first-child:after {
-    line-height: 0;
+  .#{$primary-stylename}-row-drag-top .#{$primary-stylename}-cell-wrapper {
+    margin-top: -1px;
   }
 
 
@@ -700,6 +683,11 @@ $v-table-background-color: null !default;
     border-top: none;
     border-bottom: none;
   }
+
+  .#{$primary-stylename}-row-drag-top .#{$primary-stylename}-cell-content,
+  .#{$primary-stylename}-row-drag-bottom .#{$primary-stylename}-cell-content {
+    height: $v-table-row-height - 1px;
+  }
 }
 
 
@@ -814,10 +802,6 @@ $v-table-background-color: null !default;
     margin-top: round($row-height/-2);
   }
 
-  .#{$primary-stylename}-row-drag-middle td:first-child:before {
-    height: $row-height + $v-table-border-width;
-  }
-
   &.v-treetable {
     .#{$primary-stylename}-cell-wrapper {
       padding-left: 0;
@@ -839,4 +823,9 @@ $v-table-background-color: null !default;
       padding-right: $cell-padding-horizontal;
     }
   }
+
+  .#{$primary-stylename}-row-drag-top .#{$primary-stylename}-cell-content,
+  .#{$primary-stylename}-row-drag-bottom .#{$primary-stylename}-cell-content {
+    height: $row-height - 1px;
+  }
 }
diff --git a/uitest/src/com/vaadin/tests/components/table/TableDropIndicatorValo.java b/uitest/src/com/vaadin/tests/components/table/TableDropIndicatorValo.java
new file mode 100644
index 0000000000..e3848bb152
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/table/TableDropIndicatorValo.java
@@ -0,0 +1,53 @@
+package com.vaadin.tests.components.table;
+
+import com.vaadin.annotations.Theme;
+import com.vaadin.event.dd.DragAndDropEvent;
+import com.vaadin.event.dd.DropHandler;
+import com.vaadin.event.dd.acceptcriteria.AcceptAll;
+import com.vaadin.event.dd.acceptcriteria.AcceptCriterion;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.Table;
+
+@Theme("valo")
+@SuppressWarnings("serial")
+public class TableDropIndicatorValo extends AbstractTestUI {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+
+        Table table = new Table();
+
+        table.addContainerProperty("foo", Integer.class, 0);
+        table.addContainerProperty("bar", Integer.class, 0);
+        // table.addContainerProperty("button", Button.class, null);
+
+        for (int i = 0; i < 40; i++) {
+            // Button b = new Button("testbutton");
+            // b.setHeight("50px");
+            table.addItem(new Object[] { i, i }, i);
+        }
+
+        table.setDragMode(Table.TableDragMode.ROW);
+        table.setSelectable(true);
+
+        table.setDropHandler(new DropHandler() {
+            @Override
+            public void drop(DragAndDropEvent dragAndDropEvent) {
+
+            }
+
+            @Override
+            public AcceptCriterion getAcceptCriterion() {
+                return AcceptAll.get();
+            }
+        });
+
+        addComponent(table);
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "Tests if the drop indicator appears between two rows as it should";
+    }
+}
\ No newline at end of file
diff --git a/uitest/src/com/vaadin/tests/components/table/TableDropIndicatorValoTest.java b/uitest/src/com/vaadin/tests/components/table/TableDropIndicatorValoTest.java
new file mode 100644
index 0000000000..82a66eba07
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/table/TableDropIndicatorValoTest.java
@@ -0,0 +1,81 @@
+/*
+ * 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.table;
+
+import java.util.List;
+
+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.TableElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+/**
+ * Tests that clicking on active fields doesn't change Table selection, nor does
+ * dragging rows.
+ * 
+ * @author Vaadin Ltd
+ */
+
+public class TableDropIndicatorValoTest extends MultiBrowserTest {
+
+    @Override
+    public void setup() throws Exception {
+
+        super.setup();
+        openTestURL();
+    }
+
+    @Test
+    public void indicator() throws Exception {
+
+        dragRowWithoutDropping(1);
+        compareScreen("indicator");
+    }
+
+    private List<WebElement> getCellContents(WebElement row) {
+
+        return row.findElements(By.className("v-table-cell-content"));
+    }
+
+    private List<WebElement> getRows() {
+
+        return getTable().findElement(By.className("v-table-body"))
+                .findElements(By.tagName("tr"));
+    }
+
+    private TableElement getTable() {
+
+        return $(TableElement.class).first();
+    }
+
+    private void dragRowWithoutDropping(int from) {
+
+        List<WebElement> rows = getRows();
+        WebElement row = rows.get(from);
+        List<WebElement> cellContents = getCellContents(row);
+
+        int rowHeight = row.getSize().getHeight();
+        int halfRowHeight = (int) (rowHeight + 0.5) / 2; // rounded off
+        int oneAndAHalfRow = rowHeight + halfRowHeight;
+
+        new Actions(getDriver()).moveToElement(cellContents.get(1))
+                .clickAndHold().moveByOffset(0, oneAndAHalfRow).perform();
+    }
+}
\ No newline at end of file